給網站設計原型是一個全面系統的過程，在此過程中你需要拿出一套線框圖並確保基本的互動功能。單純的線框圖可以是靜態的圖片，甚至可以是手繪的草稿，但是原型大多是動態的，可互動的，至少主要的頁面和功能能基本呈現出來。
不過，設計師通常會選擇使用影象編輯工具來進行原型設計，只不過這樣一來，絕大多數的工具很難實現足夠的互動，這也催生了不少開發商轉向研發基於瀏覽器的原型設計工具。
瀏覽器效能的提升和技術支援的逐步完善，使得基於瀏覽器的原型設計工具不僅具備了可行性，而且確保了可用性。它們更加快速，更加乾淨清爽，在構建新的專案的時候，上手更加簡單。那麼，這一切要如何開始呢？
今天的這篇文章，將會幫你整理一些基於瀏覽器的原型工具的基礎知識，並推薦一系列真正實用、好用的原型設計工具。
瀏覽器內原型設計的基礎知識
可以說網站本身就是在瀏覽器中所執行的數字化互動介面，這也使得許多設計師也傾向於在編寫程式碼之前，使用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 是一個奇怪的谷歌瀏覽器外掛，它可以讓開發者線上儲存和共享原型設計。
結語
和所有的設計工具一樣，想要用好瀏覽器內的原型工具，最好的辦法就是反覆練習。如果你想更快的完成今後的設計專案，使用它們能夠有效的幫你提速。