你真的搞懂什麼是線框圖，什麼是原型圖了嗎？

設計師朋友們都知道，在網站開發或者手機應用開發的前期階段，須要建立線框圖和原型圖給客戶展現。但有時候客戶會提出略過線框圖和原型圖設計的階段，直接過渡到網站的界面設計甚至是開發階段。這種想法，每每是源於客戶不明白什麼是線框圖，什麼是原型圖，以及兩者在整個項目階段中的重要性。 

首先闡明一個誤區，線框圖不等於原型圖。明確了這個概念以後，咱們再來區分兩者。

1. 什麼是線框圖？

線框圖是一個網站圖形化的骨架，引導一個頁面的內容及概念，可以幫助設計師和客戶討論具體的網站層次和導向。一個簡單的線框圖只須要使用線條、方框和灰階色彩填充，黑白色的佈局總體呈現爲低保真設計圖，主要呈現主體信息羣，勾勒結構和佈局，表達用戶交互界面的主視覺和描述。

2. 爲何要作線框圖？

線框圖對於產品的做用就如同建築藍圖，在項目的初始階段規定好產品各方面的細節，做爲總體項目說明。也由於繪製起來簡單、快速，它也常常用於非正式場合，好比團隊內部交流。但並不能做爲用戶測試的材料。

3. 如何製做線框圖？

簡單的線框圖通常只須要用線條、方框、文本、及按鈕等基本的組件構成就能夠了。所以，關於如何製做線框圖，如何挑選線框圖製做工具的問題，基於上述特色，咱們可使用Mockplus，Balsamiq等線框圖工具。

Balsamiq是一款靜態線框圖繪製工具，手繪風和現成的控件在線框圖繪製方面發揮了極大的優點，它產出的線框圖比較適於給懂設計和開發的人員看。由於他們知道，線框圖和最終的成品是有區別的，也明白兩者之間的運做方式和內在聯繫。

相對於Balsamiq， Mockplus在動態交互方面則更勝一籌。一樣是簡單快速的線框圖工具，Mockplus產出的交互式線框圖能夠更直觀生動的向開發團隊和毫無設計和開發基礎的客戶演示項目，而不須要冗長的說明。

1. 什麼是原型圖？

原型圖是接近於中高保真的設計稿，和線框圖不一樣，原型圖是動態可交互的，一些高保真的原型設計甚至和最終的產品看起來相差無幾，由於它們不只擁有細緻到位的視覺設計，同時儘量的模擬真實的產品界面和功能上的交互，提供完整的產品體驗。

2. 爲何要作原型圖？

原型圖除了做爲項目演示的功能以外，可交互式原型經常也用於產品正式開發前的用戶測試。早期的原型測試能夠節省巨大的時間和開發成本。一個可批註，可團隊協做的原型圖更加有利於設計師和開發人員之間的溝通，省去了來回修改和大量發送圖片和PDF文檔這個繁瑣的步驟。對開發人員來講，他們能夠在通過反覆測試的原型圖基礎上拿出更加完善的代碼實現方案，而不至於浪費開發成本和精力。

3. 如何製做原型圖？

基於原型圖中高保真，且必須可交互的特色，原型圖的製做最好是選擇專業的原型設計工具，但究竟如何選擇原型工具，也須要根據不一樣的標準作判斷。

從保真度來講，Justinmind擅長於精細製做的高保真原型圖，但要掌握好它的交互設置，觸發條件，條件判斷和變量等一系列複雜的操做，仍是頗費功夫。

從製做效率來講，Mockplus更符合簡單、快速的中高保真原型圖設計。高度封裝的交互組件，簡單的拖拽交互，實用的團隊協做和在線審閱，更知足設計師和開發人員節省時間和開發成本的需求。

線框圖和原型圖有什麼區別？

線框圖能夠說是原型圖的一種，原型能夠在線框圖的基礎上進行設細化和設計。從演示效果來講，線框圖是靜態展現，而原型圖是動態的可交互式展現。從功能上來講，原型表明了最終產品，經常使用於潛在用戶測試；線框圖經常使用於項目初期，展現佈局和功能，用於討論和反饋。