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

1.導(dǎo)航菜單的樣式

一般最常見(jiàn)的導(dǎo)航菜單的樣式有兩種——經(jīng)典的底部標(biāo)簽菜單以及側(cè)滑菜單。如下圖所示蛹稍。我建議從一開(kāi)始便確定好采用哪種菜單吧黄，這對(duì)后續(xù)頁(yè)面的設(shè)計(jì)會(huì)有很大的影響，一般來(lái)說(shuō)唆姐，決定使用何種菜單會(huì)從幾個(gè)方面綜合考慮拗慨。

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

2声功、導(dǎo)航菜單的數(shù)量昌讲。底部標(biāo)簽菜單最多不應(yīng)超過(guò)5個(gè)標(biāo)簽，也就是說(shuō)數(shù)量在5個(gè)及以下菜單的可以采用底部標(biāo)簽菜單减噪，菜單數(shù)量在5個(gè)以上的建議采用側(cè)滑菜單短绸。

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

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

2.線框原型中的層次

很多人繪制線框原型的時(shí)候瑞眼，往往只是把線框內(nèi)容往上面一堆龙宏，這樣雖然表達(dá)出了該頁(yè)面的內(nèi)容以及布局，但是無(wú)法看出層次伤疙。設(shè)計(jì)人員在拿到?jīng)]有層次的線框圖后進(jìn)行設(shè)計(jì)會(huì)有可能走偏银酗，無(wú)法達(dá)到最好的用戶(hù)體驗(yàn)辆影。

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

Design設(shè)計(jì)——所有的元素都是有1dp厚度的蛙讥。如果沒(méi)有層次體現(xiàn)，設(shè)計(jì)人員便可能無(wú)法分清前后關(guān)系灭衷。如下圖所示次慢，這是Material Design的封面圖，這樣能很清楚的表達(dá)出層次的關(guān)系翔曲。

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

但是需要注意的是纷闺，線框原型應(yīng)盡量避免用顏色去表現(xiàn)層次，這樣會(huì)對(duì)設(shè)計(jì)人員產(chǎn)生干擾份蝴，如下圖所示犁功，對(duì)比上圖，若把按鈕用顏色來(lái)體現(xiàn)層次婚夫，設(shè)計(jì)人員會(huì)有可能認(rèn)為該按鈕只能使用此顏色浸卦，或改顏色為產(chǎn)品希望設(shè)置的主題色。

線框圖應(yīng)該是無(wú)色的案糙，或者是同一顏色的限嫌。層次的體現(xiàn)應(yīng)該通過(guò)同一顏色的alpha值的不同來(lái)進(jìn)行標(biāo)示，字體之間可通過(guò)粗細(xì)和大小來(lái)體現(xiàn)时捌。

另外還需要注意的是怒医，灰度的不同有時(shí)候不一定代表重要程度的不同，而只是元素之間的順序不同奢讨，頂部標(biāo)題欄和列表底色的不同稚叹，標(biāo)示標(biāo)題欄在列表上方，向上滑動(dòng)的時(shí)候標(biāo)題欄會(huì)遮住列表拿诸。

3.線框原型風(fēng)格對(duì)設(shè)計(jì)的影響

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

以上是對(duì)線框原型的一些簡(jiǎn)單介紹刹孔，希望大家有了一些大致的感覺(jué)。但是需要注意的是娜睛，我們畢竟是設(shè)計(jì)師髓霞，我們使用原型的目的是為了更好的設(shè)計(jì)，我們參與原型的繪制也是可以幫助我們更快的理清系統(tǒng)邏輯實(shí)現(xiàn)設(shè)計(jì)畦戒。在進(jìn)行原型繪制的時(shí)候方库，也需要注意平衡好實(shí)用性和設(shè)計(jì)感之間的關(guān)系，線框原型是功能遠(yuǎn)大于視覺(jué)的工具障斋，我們使用Sketch進(jìn)行線框原型的繪制纵潦，可以繪制出更加專(zhuān)業(yè)美觀的線框原型，但是也不必花太多時(shí)間在細(xì)節(jié)上垃环。在原型這里我們應(yīng)跳出來(lái)邀层，從全局宏觀方面把握軟件整體，等需求和原型確定了再?gòu)募?xì)節(jié)處思考遂庄，設(shè)計(jì)力求完美的UI界面寥院。

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