線框圖是網站設計流程中(zhōng)很重要的一(yī)環。它有點像網站或者應用項目的藍(lán)圖，能幫助你早點發現什麽有用什麽沒用，還能讓你不受設計的幹擾來設置内容和焦點。

做得好的話(huà)，線框圖可以明确你的想法。但如果沒有正确完成，也可能導緻項目脫軌。基于此，下(xià)面給大(dà)家介紹1種方式來提高你的線框圖技巧，以及如何使用一(yī)些好用的線框圖工(gōng)具。

1. 從草圖開(kāi)始

從你最喜歡的設計工(gōng)具開(kāi)始聽(tīng)起來是個不錯的主意，但用紙(zhǐ)和筆畫出線框圖草圖其實能獲得更好的效果。這個過程不會花太長時間，但能幫助你更好地了解整體(tǐ)規劃。

2. 跳過顔色

線框圖的目的，是展示内容、頁面和視圖元素，以及描述應用的功能。添加任何設計元素，比如顔色，都會偏離(lí)最初的目标。顔色的問題可以留到視覺稿階段，線框圖無需考慮這些。

3. 保持簡單

不要把線框圖複雜(zá)化。簡單的線框圖會讓你關注大(dà)局，避免分(fēn)心。線框圖應該清晰地描述應用的可用性和功能性。在這個階段你不需要深入了解那些細枝末節或者設計的最終效果。

4. 使用更好的樣本數據

如果選擇不當，樣本數據可能會毀掉線框圖。當然你并不需要花費(fèi)太多時間在線框圖中(zhōng)填充數據，但至少要保證使用的樣本數據是相關的。

5. 必要的時候添加注釋

線框圖作爲藍(lán)圖，是設計和開(kāi)發打造應用或者網站的指南(nán)。如果你希望線框圖更容易被理解，可以在必要的和适當的地方添加注釋。

6. 使用網格系統和布局框

制作線框圖的一(yī)個有趣的技巧，是使用網格系統和布局框，能夠簡單快速地歸類并布置不同的組件。

7. 打造可重複使用的樣式與符号

大(dà)多數可用于制作線框圖的軟件都有創建并重複使用樣式與符号的功能。這不僅能加快制作流程，還能保證線框圖的一(yī)緻性。

8. 使用正确的工(gōng)具

很多軟件都适合制作線框圖，有的則是專門用于線框圖的。下(xià)面給大(dà)家介紹幾個比較常見的工(gōng)具：

·Sketch 是最好用的工(gōng)具之一(yī)。與其它解決方案比如InVision一(yī)起，Sketch能爲設計人員(yuán)提供他們完成工(gōng)作所需的工(gōng)具。

.Affinity Designer 是一(yī)個輕量級的矢量設計工(gōng)具，完全滿足制作線框圖所需的一(yī)切。

·Pencil Project  是一(yī)款免費(fèi)的開(kāi)源工(gōng)具，爲Android、iOS、Dojo等内置了形狀和模闆等。也可以應用與線框圖網站和桌面應用。

9. 了解線框圖類型

如果你不熟悉“保真度”這個詞，它指的是細節的水平。在線框圖中(zhōng)，你可以選擇低保真度和高保真度，這兩種都是必須的，其各自的功能和目的有所區别。

低保真線框圖是基礎。它沒有任何多餘的東西，可以快速制作。其主要目的是讓你開(kāi)始工(gōng)作。高保真線框圖可提供更多細節，當然并不會像視覺稿那樣詳細。線框圖一(yī)般是灰度或者單色的，是一(yī)個比較接近實際設計的展示。

10. 快速獲得反饋

線框圖的一(yī)大(dà)優點是制作周期短。這樣就能在設計流程中(zhōng)盡早地與團隊分(fēn)享，盡快獲得反饋。