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

做得(dé / de / děi)好的話，線框圖可(kě)以明确你(nǐ)的想法。但如(rú)果沒有正确完成，也可(kě)能(néng)導緻項目脫軌。基于(yú)此，下(xià)面給大家(jiā)介紹1種方式來提高你(nǐ)的線框圖技巧，以及如(rú)何使用(yòng)一些好用(yòng)的線框圖工具。

1. 從草圖開始

從你(nǐ)最喜歡的設計工具開始聽起來是個不錯的主意，但用(yòng)紙和筆畫出線框圖草圖其(qí)實能(néng)獲得(dé / de / děi)更好的效果。這個過(guò)程不會(huì)花太長時間，但能(néng)幫助你(nǐ)更好地了解整體規劃。

2. 跳過(guò)顔色

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

3. 保持簡單

不要(yào / yāo)把線框圖複雜化。簡單的線框圖會(huì)讓你(nǐ)關注大局，避免分心。線框圖應該清晰地描述應用(yòng)的可(kě)用(yòng)性和功能(néng)性。在這個階段你(nǐ)不需要(yào / yāo)深入了解那(nà)些細枝末節或者設計的最終效果。

4. 使用(yòng)更好的樣本數據

如(rú)果選擇不當，樣本數據可(kě)能(néng)會(huì)毀掉線框圖。當然你(nǐ)并不需要(yào / yāo)花費太多時間在線框圖中填充數據，但至少要(yào / yāo)保證使用(yòng)的樣本數據是相關的。

5. 必要(yào / yāo)的時候添加注釋

線框圖作爲藍圖，是設計和開發(fā／fà)打造應用(yòng)或者網站的指南。如(rú)果你(nǐ)希望線框圖更容易被理解，可(kě)以在必要(yào / yāo)的和适當的地方添加注釋。

6. 使用(yòng)網格系統和布局框

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

7. 打造可(kě)重複使用(yòng)的樣式與符号

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

8. 使用(yòng)正确的工具

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

·Sketch 是最好用(yòng)的工具之一。與其(qí)它解決方案比如(rú)InVision一起，Sketch能(néng)爲設計人員提供他們完成工作所(suǒ)需的工具。

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

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

9. 了解線框圖類型

如(rú)果你(nǐ)不熟悉“保真度”這個詞，它指的是細節的水平。在線框圖中，你(nǐ)可(kě)以選擇低保真度和高保真度，這兩種都是必須的，其(qí)各自(zì)的功能(néng)和目的有所(suǒ)區别。

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

10. 快速獲得(dé / de / děi)反饋

線框圖的一大優點是制作周期短。這樣就(jiù)能(néng)在設計流程中盡早地與團隊分享，盡快獲得(dé / de / děi)反饋。