很多產(chǎn)品經(jīng)理或者交互設(shè)計師在進行線框原型繪制的時候往往會把大部分注意力放在原型本身所傳達出來的功能和布局上，這樣做非常正確，但是如果從視覺層面，特別是從UI設(shè)計師的角度來考慮，產(chǎn)品經(jīng)理或者交互設(shè)計師要給一份完美的原型圖給UI，以下事項是需要注意的。

1.導航菜單的樣式

一般最常見的導航菜單的樣式有兩種——經(jīng)典的底部標簽菜單以及側(cè)滑菜單。如下圖所示。我建議從一開始便確定好采用哪種菜單，這對后續(xù)頁面的設(shè)計會有很大的影響，一般來說，決定使用何種菜單會從幾個方面綜合考慮。

1、操作系統(tǒng)習慣。iOS系統(tǒng)下導航菜單一般使用底部標簽菜單。而安卓系統(tǒng)特別采用Material?Design的采用側(cè)滑菜單樣式較多。

2、導航菜單的數(shù)量。底部標簽菜單最多不應超過5個標簽，也就是說數(shù)量在5個及以下菜單的可以采用底部標簽菜單，菜單數(shù)量在5個以上的建議采用側(cè)滑菜單。

3、用戶使用頻次。如果頁面之間用戶需要頻繁切換且功能權(quán)重差不多的情況下建議使用底部標簽菜單，如果該應用某一頁面的功能占據(jù)才應用大部分功能，且用戶菜單之間切換不頻繁的話，建議使用側(cè)滑菜單。

其他的考慮還有核心用戶的年齡層，操作習慣，以及設(shè)備硬件相關(guān)的比如屏幕尺寸等，但是這些很難準確把握。

2.線框原型中的層次

很多人繪制線框原型的時候，往往只是把線框內(nèi)容往上面一堆，這樣雖然表達出了該頁面的內(nèi)容以及布局，但是無法看出層次。設(shè)計人員在拿到?jīng)]有層次的線框圖后進行設(shè)計會有可能走偏，無法達到最好的用戶體驗。

雖然現(xiàn)在是扁平化設(shè)計趨勢，但是扁平化設(shè)計也是有層次的，特別是采用Material

Design設(shè)計——所有的元素都是有1dp厚度的。如果沒有層次體現(xiàn)，設(shè)計人員便可能無法分清前后關(guān)系。如下圖所示，這是Material Design的封面圖，這樣能很清楚的表達出層次的關(guān)系。

層次不經(jīng)包括板塊之間的關(guān)系，在同一板塊之間也會有層次關(guān)系，如下圖所示，在列表的第一行能很清楚看到按鈕、姓名、時間之間的層次關(guān)系。

但是需要注意的是，線框原型應盡量避免用顏色去表現(xiàn)層次，這樣會對設(shè)計人員產(chǎn)生干擾，如下圖所示，對比上圖，若把按鈕用顏色來體現(xiàn)層次，設(shè)計人員會有可能認為該按鈕只能使用此顏色，或改顏色為產(chǎn)品希望設(shè)置的主題色。

線框圖應該是無色的，或者是同一顏色的。層次的體現(xiàn)應該通過同一顏色的alpha值的不同來進行標示，字體之間可通過粗細和大小來體現(xiàn)。

另外還需要注意的是，灰度的不同有時候不一定代表重要程度的不同，而只是元素之間的順序不同，頂部標題欄和列表底色的不同，標示標題欄在列表上方，向上滑動的時候標題欄會遮住列表。

3.線框原型風格對設(shè)計的影響

雖然線框原型重點是解釋上一節(jié)中所說的五個問題，但除非是在紙上或白板上手繪線框原型，否則線框原型圖在一定程度上還是會對設(shè)計有一些影響的。繪制線框原型的人也應該持續(xù)關(guān)注設(shè)計趨勢，避免出現(xiàn)風格過分落后的情況出現(xiàn)。最典型的是很多線框原型的繪制者是產(chǎn)品經(jīng)理，基本上使用組件模板進行快速原型制作，但是可能軟件中內(nèi)置iOS7以前的系統(tǒng)組件，這就導致繪制出來的原型圖還具備一定的寫實風格。如下圖所示，按鈕上面的漸變，很難相信這是一款“現(xiàn)代”設(shè)計風格的應用程序。

以上是對線框原型的一些簡單介紹，希望大家有了一些大致的感覺。但是需要注意的是，我們畢竟是設(shè)計師，我們使用原型的目的是為了更好的設(shè)計，我們參與原型的繪制也是可以幫助我們更快的理清系統(tǒng)邏輯實現(xiàn)設(shè)計。在進行原型繪制的時候，也需要注意平衡好實用性和設(shè)計感之間的關(guān)系，線框原型是功能遠大于視覺的工具，我們使用Sketch進行線框原型的繪制，可以繪制出更加專業(yè)美觀的線框原型，但是也不必花太多時間在細節(jié)上。在原型這里我們應跳出來，從全局宏觀方面把握軟件整體，等需求和原型確定了再從細節(jié)處思考，設(shè)計力求完美的UI界面。

以上內(nèi)容載自《動靜之美——Sketch移動UI與交互動效設(shè)計詳解》一書。