知道這10點，你纔是真正會畫線框圖

在讓UI設計師產出高保真設計稿之前，產品經理需要繪製線框圖，來向UI設計師傳遞網站佈局結構、產品內容、信息化層次、界面功能、用戶行爲等信息。線框圖沒有嚴格的規定或秩序要遵守，但一定要清晰具體地描述佈局細節，爲設計師提供項目的概述。

那麼究竟什麼是線框圖？爲什麼要畫線框圖呢？

首先我們需要搞清楚，線框圖並不能算是真正意義上的原型。許多設計師和產品經理都非常容易將線框圖理解爲原型圖。我們一起來看看線框圖和原型圖的區別。

線框圖：線框圖是一種低保真且靜態的呈現方式，只需要明確呈現內容大綱，信息結構，佈局，用戶界面的視覺以及交互行爲描述即可。

原型圖：原型圖是程序開發過程中的重要步驟，通常是以中高保真的形式呈現，更接近最終產品的形態，並且允許我們進行一些初步的測試，用以考量產品的可用性。它能夠實現和驗證產品的設計理念。

在產品設計階段的初期，我們會先畫出產品的線框圖，來明確表達自己的設計想法。這是因爲線框圖無需過多的視覺效果，能夠幫助我們快速確定頁面的主要層級劃分和功能。同時，線框圖沒有過多的視覺元素，當我們發現問題時，可以更加方便地進行更改，節省修改時間。因此，在正式繪製原型設計稿之前，畫線框圖時很有必要的。

在畫線框圖時，我們一定要注意以下10點

1.畫線框圖之前，先研究產品需求

在畫線框圖之前，我們必須先知道產品的作用是什麼。在這一階段我們需要考慮兩個重點目標：商業目標和用戶目標。圍繞這兩個目標的研究，可以幫助我們更好地理清產品需求，也可以讓我們瞭解，如何通過線框圖實現我們的目標。

2. 儘可能多地展示各種想法

當我們產生了很多個想法時，一定要第一時間把腦海中的想法畫出來。因爲想法在腦海中呈現具有一定的難度，而線框圖則可以更加直觀地進行表達。當我們將盡可能多的想法展示出來，就可以對比發現每個想法的優缺點，也就更有機會找到最佳的解決方式，這也是線框圖的價值所在。

3.保持簡單，保證效率

前面我們提到，畫線框圖可以幫助我們在產品設計階段初期節省大量時間，因爲線框圖具有創建速度快和結構簡單的優點，可以讓我們擁有更多時間去探索各種佈局，將重心放在傳達想法上，而不是展示設計藝術和技巧。因此在畫線框圖時，不需要過多地關注細節，而是要保持簡單，儘可能快地完成工作。

4. 確保線框圖易於理解

線框圖作爲交流的工具，是爲了幫助其他人瞭解我們的想法。我們在畫線框圖的時候，一定要理清視覺層次，確保任何人都可以輕鬆地看懂。

5.儘量使用佔位符，而不是真實的UI元素

在產品設計的早期階段，可能無法使用真實數據，因此我們可以在線框圖中使用佔位符，來呈現頁面佈局。如圖像可以用“X”來表示，文字可以用平行的線條來表示，視頻可以用矩形和黑色實心三角來表示。

6.使用顏色突出顯示特定元素

線框圖的顏色需要保持最低限度，如黑色、灰色等中性顏色，這樣可以讓設計師更加直觀地瞭解整體流程結構，而不被強烈地色彩吸引。但如果需要展示某些部分的含義，可以使用顏色突出顯示特定的元素，讓查看線框圖的成員將注意力集中在這些元素上面。

7.註釋線框圖

由於線框圖是靜態的，當界面較爲複雜時，可能會存在想法難以傳達的情況。因此在畫線框圖時，還需要提供對應的批註或註釋。幫助設計師清楚明瞭地梳理產品邏輯，以及理解用戶與產品之間是如何進行互動的。

8.利用線框圖進行團隊協作

產品設計並不是一個人的工作，最好的設計決策來自於團隊協作。因此，我們將想法通過線框圖呈現出來後，一定要和團隊成員分享，團隊成員給出的意見，不僅可以幫助我們判斷想法是否具有價值，還可以幫助我們完善和優化線框圖，快速進行下一個設計決策。

9.做好歷史版本管理

將畫好的線框圖分享給團隊成員評審後，我們需要收集反饋並對線框圖進行修改迭代。在修改之前，我們要注意做好歷史版本管理，便於對比不同版本之間的區別，來做出更好的選擇。

10. 選擇好的工具

繪製線框圖的工具會直接影響我們的工作效率和結果。傳統的紙筆雖然可以幫助我們快速表達想法，但不利於修改和迭代。因此，我們需要一款強大好用的線框圖工具，來幫助我們提升工作效率。比如摹客原型這樣的在線原型設計工具，不僅可以利用封裝的元素，快速繪製線框圖，還可以將其轉換爲高保真原型，進行用戶測試或交付開發。

常用的線框圖工具

1.Axure

Axure是一款老牌原型設計工具，我們可以直接使用Axure豐富的組件來創建APP或網站的線框圖。作爲專業的原型設計工具，它也支持將靜態的線框圖轉換爲可交互的原型。同時支持多人協作和版本管理。