建立一個網站的任務是建立一個具有交互功能的基本線框的廣泛過程。雖然線框可能是靜態圖像或草圖，但原型通常是與所有主要頁面的功能交互的。

圖形編輯程序一直是更受歡迎的原型設計。但近年來，越來越多的開發人員轉而使用瀏覽器原型。當構建一個全新的項目時，它會更快、更干凈、更簡單。但是如何開始呢?

在本文中，我將介紹在瀏覽器中構建原型的基本知識，并為您提供一些工具來幫助您。

瀏覽器原型的基本知識

可以將網站描述為在web瀏覽器中運行的數字接口。許多設計師喜歡在開始編碼之前在圖形編輯器中創建這些接口。

但是，在瀏覽器中建立網站原型來了解每個特性的工作原理，并對初始概念(如布局結構和頁面動畫)進行評估更有意義。

雖然大多數設計師都有自己的程序來開始一個新項目，但是沒有一個更佳的原型。許多設計師仍然喜歡從Photoshop開始，但是從瀏覽器開始有很多好處。

更容易測試和更改網格系統。
可以隨意添加斷點。
像下拉菜單這樣的動態效果可以被測試。
你從一個小的代碼庫開始，慢慢地添加更多。
Photoshop不允許你動態地與模型交互。對于響應性斷點，您需要為斷點創建單獨的文檔或層組。

*終，瀏覽器原型更準確地表示了*終界面。模型和草圖是平的和靜態的。這些仍然是有價值的資產，但*終你需要一個交互式的布局。這就是為什么瀏覽器原型可以節省很多時間。



您可以直接從*初的草圖到瀏覽器，以創建交互式web原型，并在*終版本中提供您需要的所有主要功能。

用于實現原型的工具將會有很大的不同。但是不要把這些工具錯當成過程。

您可以在瀏覽器中使用原始HTML/CSS、開源庫或其他工具(如瀏覽器插件)進行原型。無論你使用的是什么目標，都是一樣的:創建一個簡單的交互式UI，來模擬*終網站的行為。

成型過程

我認為更好從紙草圖開始，以呈現想法。這些草圖可以在一個圖形程序中完成，但是當你在紙上工作時，你通常會有更多的自由。

快速迭代新想法，對設計有一個粗略的感覺。您可以指示列、gutters，并編寫注釋來描述容器屬性(寬度、填充等)。

成型過程

一旦草圖看起來不錯，你就可以進入瀏覽器。首先設計一個基本的灰度布局。這可以用許多不同的資源，比如Placehold來完成。它可以生成任何大小的原始灰色圖像。

使用簡單的灰色布局，您可以更關注網格、排版、空白和動態元素，比如幻燈片或下拉菜單。這個階段的目的是設計布局應該如何不被美學干擾。

Placehold

您想要消除所有潛在的與瀏覽器錯誤和響應斷點相關的問題。讓整個布局在所有瀏覽器中工作和運行。

從那里你可以快速添加內容，圖像和其他相關的風格，而不用擔心更大的圖片。這*是瀏覽器原型設計的更佳策略，因為您首先關注的是大元素。

如果Firefox的布局中斷，不管你是否有顏色，它看起來都是一樣的。但是當您只關心布局時，解決布局問題就容易得多了。

一旦你有了一個全功能的原型，你就會有一個更簡單的時間編碼輔助功能，比如背景圖案、瓷磚、圖標和其他類似的功能。

在這個原型階段有很多東西需要考慮。每個項目都有自己的目標，但是這里列出了在原型開發過程中要考慮的目標。

布局在所有主流瀏覽器中都有效嗎?
元素之間是否有足夠的空白?
所有的動態頁面元素都能正常工作嗎?
是否設置了所有必要的響應性斷點?
瀏覽器原型工具

需要注意的是，您確實不需要任何特殊的工具或庫來構建瀏覽器原型。您可以編寫通用的HTML/CSS/JS代碼，并快速地準備一個工作原型。

但是有那么多的庫可以節省你很多時間。jQuery是一個很好的例子，它可以幫助編寫JavaScript。

你應該自由地使用任何你覺得舒服的資源。但是，如果您正在尋找新的工具，我將強烈推薦以下選項。它們都是完全免費的，而且非常容易添加到原型階段。
  本文來源：智通澤軟件，轉載請注明出處！如果需要泊頭網站建設 泊頭小程序開發 泊頭微信開發 泊頭APP開發請聯系封經理，我們將提供上門服務！
聯系方式：手機：13393374114  座機：0317-8280288 QQ：958361464  或掃一掃下面二維碼加我微信：