開發(fā)過網(wǎng)站的人都知道，畫線框圖是網(wǎng)站建設(shè)流程中非常重要的一個(gè)環(huán)節(jié)。它有點(diǎn)像網(wǎng)站建設(shè)的藍(lán)圖，能幫助你早點(diǎn)發(fā)現(xiàn)什么有用什么沒用，讓你不受設(shè)計(jì)的干擾來設(shè)置內(nèi)容和焦點(diǎn)。

做得好的話，線框圖可以明確你的想法。但如果沒有正確完成，也可能導(dǎo)致項(xiàng)目脫軌?；诖耍旅娼o大家介紹一些方法來提高你的線框圖技巧，以及如何使用一些好用的線框圖工具。

1、 從草圖開始

用設(shè)計(jì)工具來制作線框圖看起來是個(gè)不錯(cuò)的主意，但用紙和筆畫出線框圖草圖其實(shí)能獲得更好的效果。這個(gè)過程不會花太長時(shí)間，但能幫助你更好地了解整體規(guī)劃。

2、保持簡單

不要把線框圖復(fù)雜化。簡單的線框圖會讓你關(guān)注大局，避免分心。線框圖應(yīng)該清晰地描述網(wǎng)站的可用性和功能性。在這個(gè)階段你不需要深入了解那些細(xì)枝末節(jié)或者網(wǎng)站設(shè)計(jì)的最終效果。

3、跳過顏色

線框圖的目的，是展示內(nèi)容、頁面和視圖元素，以及描述應(yīng)用的功能。添加任何設(shè)計(jì)元素，比如顏色，都會偏離最初的目標(biāo)。顏色的問題可以留到視覺稿階段，線框圖無需考慮這些。

4、 使用更好的樣本數(shù)據(jù)

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

5、必要的時(shí)候添加注釋

線框圖作為藍(lán)圖，是設(shè)計(jì)和開發(fā)打造應(yīng)用或者網(wǎng)站的指南。如果你希望線框圖更容易被理解，可以在必要的和適當(dāng)?shù)牡胤教砑幼⑨尅?br />
6、使用網(wǎng)格系統(tǒng)和布局框

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

7、打造可重復(fù)使用的樣式與符號

大多數(shù)可用于制作線框圖的軟件都有創(chuàng)建并重復(fù)使用樣式與符號的功能。這不僅能加快制作流程，還能保證線框圖的一致性。

8、使用正確的工具

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

·Sketch 是最好用的工具之一。與其它解決方案比如InVision一起，Sketch能為設(shè)計(jì)人員提供他們完成工作所需的工具。

·Affinity Designer 是一個(gè)輕量級的矢量設(shè)計(jì)工具，完全滿足制作線框圖所需的一切。

·Pencil Project 是一款免費(fèi)的開源工具，為Android、iOS、Dojo等內(nèi)置了形狀和模板等。也可以應(yīng)用與線框圖網(wǎng)站和桌面應(yīng)用。

9、了解線框圖類型

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

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

網(wǎng)站建設(shè)時(shí)做線框圖的好處

線框圖的一大優(yōu)點(diǎn)是制作周期短。這樣就能在設(shè)計(jì)流程中盡早地與團(tuán)隊(duì)分享，盡快獲得反饋。