手機屏幕尺寸越做越大,作為互聯(lián)網(wǎng)的深度用戶,我相信你已經(jīng)深刻體會到側(cè)抽屜導(dǎo)航在移動(和桌面)端是如何降低用戶體驗的。先不談它較低的可發(fā)現(xiàn)性和使用效率,拿出你的手機試著只用一手去按屏幕左上角。
欣慰的是,越來越多的應(yīng)用和網(wǎng)站正在嘗試用更有效的方法解決這個問題。這里我整理出了市面上能見到的所有方法進(jìn)行比較。有趣的是,Youtube 作為側(cè)抽屜的開山鼻祖,它也不用了。
一、選項卡
如果應(yīng)用的選項不是很多(一般不超過5個),而且使用頻次較高用戶需要經(jīng)常來回切換,選項卡導(dǎo)航是個不錯的解決方案:
這樣做似乎非常行之有效,但是,需要在設(shè)計考慮一些事情:
例如:淘票票 和 開眼
二、“更多”項
當(dāng)主要部分超過5個時,一個切實可行的解決方案是顯示四至五個優(yōu)先級最高的選項,將其它的歸位一類叫做更多項:
這個方案的設(shè)計原則和選項卡基本一致,更多項的子類可以在導(dǎo)航頁面的下拉菜單中顯示:
你可以說這種方案的使用效率比抽屜導(dǎo)航強不到哪去,對大多數(shù)用戶而言,只要可見項優(yōu)先級足夠高,有四至五個可見的高頻功能會極大的降低學(xué)習(xí)成本,改善用戶體驗。
例如:Facebook
動態(tài)消息、好友請求、通知和搜索總是可見,剩下的所有功能是可以在“更多”菜單里
三、折疊菜單
在網(wǎng)頁設(shè)計中,情況稍顯復(fù)雜,采用標(biāo)簽+更多的導(dǎo)航設(shè)計,能夠自適應(yīng)屏幕寬度,顯示盡可能多的選項,其它的歸到更多項:
這意味著更多項中包含的子相會隨著屏幕寬度的減小而變多,沒有足夠的空間項目就會折疊起來。尤其當(dāng)寬度處于中間時,這個解決方案的靈活性提供了一個更好的用戶體驗。
例如:BBC
四、滾動導(dǎo)航
如果導(dǎo)航項的數(shù)量較大,而且優(yōu)先級幾乎沒什么區(qū)別,采用“更多”項將會是一個糟糕的妥協(xié),另一個方案是滾動視圖中列出的所有項目:
這種方案的缺點是用戶只能看到可見范圍內(nèi)的幾個選項,其余的選項用戶不可預(yù)知。盡管如此,當(dāng)用戶探索購物或新聞類選項時,這依然是可接受的解決方案。
作為視覺設(shè)計,需要確保提供足夠的視覺線索,表明在水平滾動后有更多的元素,弱化邊緣元素就是個不錯的辦法。
例如:C Channel
榮獲 2016年度 Material Design 設(shè)計獎(創(chuàng)意導(dǎo)航組)
五、下拉菜單
當(dāng)其他部分的可見性和可訪問性并不重要時,一個少見但有趣的方案是使用下拉菜單:
下拉菜單有一個雙重角色:首先,它作為一個頁面標(biāo)題,雖然選項隱藏其下,向下箭頭表明有可能迅速切換到相似的部分。其二,除了切換同級選項,切換到下級項目也是能被用戶接受的。
例如:多鄰國
通過下拉菜單快速切換練習(xí)語言
六、抽屜導(dǎo)航不一定很糟
對于大多數(shù)用戶來說,下拉菜單的交互方式并不常見。令人意外的是,抽屜導(dǎo)航可能是一個不錯的選擇。它的主要缺點是較低的可發(fā)現(xiàn)性,當(dāng)設(shè)計二級導(dǎo)航選項是,這種模式可能是一個適當(dāng)?shù)慕鉀Q方案。
例如:Uber(優(yōu)步) & Red Dot(紅點)
屏幕上的一切都是為了請求一輛車,諸如歷史、設(shè)置這類的二級選項不應(yīng)該比從一個漢堡包菜單更突出
結(jié)論
沒有萬能的導(dǎo)航欄設(shè)計,它取決于產(chǎn)品定位、用戶需求以及內(nèi)容信息。適用于其它應(yīng)用的導(dǎo)航可能不會為你工作,反之亦然。每一個優(yōu)秀的導(dǎo)航設(shè)計,是對優(yōu)先級、信息架構(gòu)、邏輯結(jié)構(gòu)和用戶需求的高度把控