線框圖是網站設計流程中很重要(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)反饋。