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

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

1. 什麽是線框圖？

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

2. 為什麽要做線框圖？

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

3. 如何制作線框圖？

簡單的線框圖一般只需要用線條、方框、文本、及按鈕等基本的組件構成就可以了。因此，關於如何制作線框圖，如何挑選線框圖制作工具的問題，基於上述特點，我們可以使用Mockplus，Balsamiq等線框圖工具。

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

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

1. 什麽是原型圖？

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

2. 為什麽要做原型圖？

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

3. 如何制作原型圖？

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

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

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

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

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

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