線框圖是(shì)網站設計流程中很重要(yào / yāo)的(de)一(yī / yì ／yí)環。它有點像網站或者應用項目的(de)藍圖，能幫助你早點發現什麽有用什麽沒用，還能讓你不(bù)受設計的(de)幹擾來(lái)設置内容和(hé / huò)焦點。

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

1. 從草圖開始

從你最喜歡的(de)設計工具開始聽起來(lái)是(shì)個(gè)不(bù)錯的(de)主意，但用紙和(hé / huò)筆畫出(chū)線框圖草圖其實能獲得更好的(de)效果。這(zhè)個(gè)過程不(bù)會花太長時(shí)間，但能幫助你更好地(dì / de)了(le／liǎo)解整體規劃。

2. 跳過顔色

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

3. 保持簡單

不(bù)要(yào / yāo)把線框圖複雜化。簡單的(de)線框圖會讓你關注大(dà)局，避免分心。線框圖應該清晰地(dì / de)描述應用的(de)可用性和(hé / huò)功能性。在(zài)這(zhè)個(gè)階段你不(bù)需要(yào / yāo)深入了(le／liǎo)解那些細枝末節或者設計的(de)最終效果。

4. 使用更好的(de)樣本數據

如果選擇不(bù)當，樣本數據可能會毀掉線框圖。當然你并不(bù)需要(yào / yāo)花費太多時(shí)間在(zài)線框圖中填充數據，但至少要(yào / yāo)保證使用的(de)樣本數據是(shì)相關的(de)。

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

線框圖作爲(wéi / wèi)藍圖，是(shì)設計和(hé / huò)開發打造應用或者網站的(de)指南。如果你希望線框圖更容易被理解，可以(yǐ)在(zài)必要(yào / yāo)的(de)和(hé / huò)适當的(de)地(dì / de)方添加注釋。

6. 使用網格系統和(hé / huò)布局框

制作線框圖的(de)一(yī / yì ／yí)個(gè)有趣的(de)技巧，是(shì)使用網格系統和(hé / huò)布局框，能夠簡單快速地(dì / de)歸類并布置不(bù)同的(de)組件。

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

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

8. 使用正确的(de)工具

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

·Sketch 是(shì)最好用的(de)工具之(zhī)一(yī / yì ／yí)。與其它解決方案比如InVision一(yī / yì ／yí)起，Sketch能爲(wéi / wèi)設計人(rén)員提供他(tā)們完成工作所需的(de)工具。

.Affinity Designer 是(shì)一(yī / yì ／yí)個(gè)輕量級的(de)矢量設計工具，完全滿足制作線框圖所需的(de)一(yī / yì ／yí)切。

·Pencil Project  是(shì)一(yī / yì ／yí)款免費的(de)開源工具，爲(wéi / wèi)Android、iOS、Dojo等内置了(le／liǎo)形狀和(hé / huò)模闆等。也(yě)可以(yǐ)應用與線框圖網站和(hé / huò)桌面應用。

9. 了(le／liǎo)解線框圖類型

如果你不(bù)熟悉“保真度”這(zhè)個(gè)詞，它指的(de)是(shì)細節的(de)水平。在(zài)線框圖中，你可以(yǐ)選擇低保真度和(hé / huò)高保真度，這(zhè)兩種都是(shì)必須的(de)，其各自的(de)功能和(hé / huò)目的(de)有所區别。

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

10. 快速獲得反饋

線框圖的(de)一(yī / yì ／yí)大(dà)優點是(shì)制作周期短。這(zhè)樣就(jiù)能在(zài)設計流程中盡早地(dì / de)與團隊分享，盡快獲得反饋。