給網(wǎng)站設(shè)計原型是一個全面系統(tǒng)的過程，在此過程中你需要拿出一套線框圖并確保基本的交互功能。單純的線框圖可以是靜態(tài)的圖片，甚至可以是手繪的草稿，但是原型大多是動態(tài)的，可交互的，至少主要的頁面和功能能基本呈現(xiàn)出來。

不過，設(shè)計師通常會選擇使用圖像編輯工具來進行原型設(shè)計，只不過這樣一來，絕大多數(shù)的工具很難實現(xiàn)足夠的交互，這也催生了不少開發(fā)商轉(zhuǎn)向研發(fā)基于瀏覽器的原型設(shè)計工具。

瀏覽器性能的提升和技術(shù)支持的逐步完善，使得基于瀏覽器的原型設(shè)計工具不僅具備了可行性，而且確保了可用性。它們更加快速，更加干凈清爽，在構(gòu)建新的項目的時候，上手更加簡單。那么，這一切要如何開始呢？

今天的這篇文章，將會幫你整理一些基于瀏覽器的原型工具的基礎(chǔ)知識，并推薦一系列真正實用、好用的原型設(shè)計工具。

瀏覽器內(nèi)原型設(shè)計的基礎(chǔ)知識

可以說網(wǎng)站本身就是在瀏覽器中所運行的數(shù)字化交互界面，這也使得許多設(shè)計師也傾向于在編寫代碼之前，使用PS之類的圖像編輯類工具先對界面進行設(shè)計。

換句話來說，在瀏覽器中設(shè)計網(wǎng)站的原型，反而是更加符合邏輯的思路，無論是測量和規(guī)劃詳細布局，還是設(shè)計交互和動效，都更加“原生”。

不過總的來說，對于全新的設(shè)計項目而言，并不存在一個統(tǒng)一的最佳原型設(shè)計方案。盡管許多設(shè)計師仍然傾向于使用PS來開局，但是使用瀏覽器中的原型設(shè)計工具來制作原型，依然有著不可忽略的優(yōu)勢：

·更便于測試和修改的柵格系統(tǒng)
·斷點的增刪更加隨意
·諸如下拉菜單這樣的動態(tài)效果可以實時測試
·你可以基于一個小型代碼庫著手，隨后再逐步增加

Photoshop 目前還不支持制作動態(tài)可交互的視覺稿與原型的。那么當(dāng)你在設(shè)計原型的時候，需要為特定的斷點和交互而制作單獨的圖層或者文檔。

在瀏覽器之下所設(shè)計出來的原型和最終的界面更為接近，呈現(xiàn)出來的信息也更為進準(zhǔn)。相比之下，視覺稿更加扁平，也更加靜態(tài)。當(dāng)然，Photoshop 之下呈現(xiàn)出來的視覺稿同樣是重要的素材與參考，但是最終還是要提交出可交互的布局設(shè)計。所以說，瀏覽器內(nèi)的原型設(shè)計工具更加省事高效。

你可以直接跳過最初繪制草稿的階段，直接在瀏覽器中借助工具制作出可交互的網(wǎng)頁原型，將你構(gòu)思中的最終的主要功能都加入進去。這些設(shè)計工具本身都很不錯，不過你一定要搞清楚這些工具在整個流程中所處的環(huán)節(jié)。

你可以在設(shè)計原型過程中使用簡單的HTML/CSS代碼，開源代碼庫或者瀏覽器插件，但是最終的目的是一致的：打造一個基本的、可交互、接近網(wǎng)站最終形態(tài)（而非細節(jié)）的UI界面。

原型設(shè)計流程

想要完善一個構(gòu)思，在稿紙上繪制草圖總是最佳的方式。同樣的，這樣的草圖同樣可以在繪圖程序中完成，只是在紙面上完成會更加直接而隨性而已。

對于最初粗糙的設(shè)計，你可以通過快速的迭代加入新的想法，逐步完善。你甚至可以在稿紙上畫上表格，在其中對不同的控件和元素的屬性進行描述，比如寬度、高度、色彩等不同的屬性。

當(dāng)草圖看起來已經(jīng)過得去的時候，就可以進入瀏覽器，打開原型工具，開始設(shè)計了。這個時候，你首先要做的是設(shè)計一個不帶復(fù)雜色彩的灰階布局。有許多不同的工具可以幫你搞定這個問題，比如 Placehold.it 這樣的工具就可以幫你快速生成不同尺寸不同灰度的圖片。

使用一個純粹的灰度布局能夠讓你更加專注于柵格、排版和留白，以及大塊的控件諸如輪播圖、導(dǎo)航和菜單等。這一階段的設(shè)計應(yīng)當(dāng)專注于排版布局，而排除視覺和美學(xué)對于整體的影響。

接下來你應(yīng)該消除所有潛在的缺陷、瀏覽器Bug和響應(yīng)斷點，讓頁面能夠在所有瀏覽器中正常的運行。

搞定這些問題之后，你便可以在其中填充圖片、視頻和文本內(nèi)容等等，加入樣式和風(fēng)格，這個時候你再也不用擔(dān)心整體布局了。專注大區(qū)塊和重要元素這才是使用瀏覽器內(nèi)原型工具的最佳策略。

當(dāng)你的整個布局在瀏覽器中已經(jīng)處于崩壞的狀況，它是否有色彩和內(nèi)容都已經(jīng)不重要了。但是如果僅僅只有布局而不包含具體內(nèi)容的話，修整起來就方便多了。

一旦你的原型設(shè)計搞定了，再填充內(nèi)容就方便多了。

在這個原型設(shè)計階段，需要考慮的東西也不少。雖然不同的項目需求不同，但是有一些基本的問題幾乎所有的項目都需要考慮的：

·這個布局是否能夠兼容所有的主流瀏覽器？
·元素之間的間隙和留白是否足夠？
·所有的動態(tài)元素是否都能夠正常運行？
·是否設(shè)定好了所有必要的響應(yīng)斷點？

基于瀏覽器的原型設(shè)計工具

既然都說到這里，一個不需要編寫任何代碼的瀏覽器內(nèi)原型設(shè)計工具才是我們真正要的。當(dāng)然，如果你精通HTML/CSS/JS代碼那又是另外一回事，jQuery 甚至擁有一大堆庫可以幫你省去許多麻煩。

所以我們今天探討的是便捷、高適用性的瀏覽器內(nèi)的原型設(shè)計工具，下面推薦的幾款都是免費而易于上手的。

Chrome Workspaces

這個內(nèi)置于谷歌瀏覽器的開發(fā)工具名為Workspaces，它本身就存在于你的本地目錄中，可以直接為瀏覽器調(diào)用。 如果你做了一個簡單的HTML/CSS 原型，并且在瀏覽器中打開了，那么你可以在 Chrome Workspaces 編輯和修改它們。目前絕大多數(shù)的開發(fā)人員都在使用它。

Bootstrap

每個前端都應(yīng)當(dāng)熟悉Bootstrap 的庫，其中預(yù)制的CSS類和各種元素相當(dāng)?shù)耐陚洌阋詽M足你的想象。

各種按鈕、布局、標(biāo)簽、下拉菜單、以及各類常見的網(wǎng)站組件與功能。你完全沒有必要自己從頭開始寫某個組件，因為Bootstrap 幾乎全覆蓋了。

Bootstrap 唯一的不足，大概是使用它的人太多了，許多樣式和控件你可能經(jīng)常會見到。當(dāng)然，你如果愿意自定義樣式的話，那么一定可以讓它更加強大。

Foundation

另外一個非常流行的選擇是來自ZURB的Foundation。相比于 Bootstrap，F(xiàn)oundation 更加清爽簡單，原因也很簡單，它沒有太多的默認(rèn)樣式。

Foundation 的定制性也更強，用戶可以輕松地將自己的樣式覆蓋到默認(rèn)的控件和元素上。許多項目使用Bootstrap的時候通常只會用到默認(rèn)的樣式，而在使用Foundation的時候，設(shè)計師更多傾向于增加自己的樣式。

Pure CSS

另外一個值得推薦的純 CSS/JS 框架 應(yīng)該是 Pure CSS。它和 前面的 Foundation 與 Bootstrap 一樣是免費開源的，它配備了柵格，排版布局，按鈕以及其他的動態(tài)控件。

Pure CSS 在功能性和美觀上做到了很好的統(tǒng)一，它的簡單與靈活使得它可以應(yīng)用到不同的原型設(shè)計，而它高度凝聚的庫則提供了完備的功能。

Handcraft

Handcraft 是一個奇怪的谷歌瀏覽器插件，它可以讓開發(fā)者在線存儲和共享原型設(shè)計。

結(jié)語

和所有的設(shè)計工具一樣，想要用好瀏覽器內(nèi)的原型工具，最好的辦法就是反復(fù)練習(xí)。如果你想更快的完成今后的設(shè)計項目，使用它們能夠有效的幫你提速。

【技多不壓身的設(shè)計師才有高薪資！】

1. 平面設(shè)計：《超贊！設(shè)計師完全自學(xué)指南》
2. 交互設(shè)計：《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》
3. UI設(shè)計：《超實用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學(xué)起來！為設(shè)計師量身打造的DPI指南》
8. 交互設(shè)計自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計篇》

原文地址：designmodo
原文作者：Jake Rocheleau
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com