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

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

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

瀏覽器原型的基本知識

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

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

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

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

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



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

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

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

成型過程

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

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

成型過程

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

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

Placehold

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

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

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

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

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

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

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

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

你應該自由地使用任何你覺得舒服的資源。但是，如果您正在尋找新的工具，我將強烈推薦以下選項。它們都是完全免費的，而且非常容易添加到原型階段。
  本文來源：杰云網(wǎng)絡，轉(zhuǎn)載請注明出處！如果需要 營銷型網(wǎng)站建設、 微商城、 小程序商城、 多端小程序 請聯(lián)系我們！