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

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

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

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

瀏覽器內原型設計的基礎知識

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

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

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

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

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

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

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

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

原型設計流程

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

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

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

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

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

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

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

一旦你的原型設計搞定了，再填充內容就方便多了。

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

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

基于瀏覽器的原型設計工具

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

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

Chrome Workspaces

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

Bootstrap

每個前端都應當熟悉Bootstrap 的庫，其中預制的CSS類和各種元素相當的完備，足以滿足你的想象。

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

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

Foundation

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

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

Pure CSS

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

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

Handcraft

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

結語

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

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

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

原文地址：designmodo
原文作者：Jake Rocheleau
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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