側(cè)抽屜遭嫌棄，如何設(shè)計(jì)優(yōu)秀的導(dǎo)航欄？

手機(jī)屏幕尺寸越做越大，作為互聯(lián)網(wǎng)的深度用戶，我相信你已經(jīng)深刻體會(huì)到側(cè)抽屜導(dǎo)航在移動(dòng)（和桌面）端是如何降低用戶體驗(yàn)的。先不談它較低的可發(fā)現(xiàn)性和使用效率，拿出你的手機(jī)試著只用一手去按屏幕左上角。

欣慰的是，越來(lái)越多的應(yīng)用和網(wǎng)站正在嘗試用更有效的方法解決這個(gè)問(wèn)題。這里我整理出了市面上能見到的所有方法進(jìn)行比較。有趣的是，Youtube 作為側(cè)抽屜的開山鼻祖，它也不用了。

一、選項(xiàng)卡

如果應(yīng)用的選項(xiàng)不是很多（一般不超過(guò)5個(gè)），而且使用頻次較高用戶需要經(jīng)常來(lái)回切換,選項(xiàng)卡導(dǎo)航是個(gè)不錯(cuò)的解決方案：

這樣做似乎非常行之有效，但是，需要在設(shè)計(jì)考慮一些事情：

選項(xiàng)不建議超過(guò)5個(gè)

選項(xiàng)在視覺(jué)觀感上應(yīng)得到強(qiáng)化

選項(xiàng)優(yōu)先級(jí)隨順序逐級(jí)降低，符合用戶心理預(yù)期

除了被用戶所熟知的圖標(biāo)（如主頁(yè)、圖片、個(gè)人中心等）其它圖標(biāo)建議標(biāo)簽文字說(shuō)明

例如：淘票票 和 開眼

二、“更多”項(xiàng)

當(dāng)主要部分超過(guò)5個(gè)時(shí)，一個(gè)切實(shí)可行的解決方案是顯示四至五個(gè)優(yōu)先級(jí)高的選項(xiàng)，將其它的歸位一類叫做更多項(xiàng)：

這個(gè)方案的設(shè)計(jì)原則和選項(xiàng)卡基本一致，更多項(xiàng)的子類可以在導(dǎo)航頁(yè)面的下拉菜單中顯示：

你可以說(shuō)這種方案的使用效率比抽屜導(dǎo)航強(qiáng)不到哪去，對(duì)大多數(shù)用戶而言，只要可見項(xiàng)優(yōu)先級(jí)足夠高，有四至五個(gè)可見的高頻功能會(huì)極大的降低學(xué)習(xí)成本，改善用戶體驗(yàn)。

例如：Facebook

動(dòng)態(tài)消息、好友請(qǐng)求、通知和搜索總是可見，剩下的所有功能是可以在“更多”菜單里

三、折疊菜單

在網(wǎng)頁(yè)設(shè)計(jì)中，情況稍顯復(fù)雜，采用標(biāo)簽+更多的導(dǎo)航設(shè)計(jì)，能夠自適應(yīng)屏幕寬度，顯示盡可能多的選項(xiàng)，其它的歸到更多項(xiàng)：

這意味著更多項(xiàng)中包含的子相會(huì)隨著屏幕寬度的減小而變多，沒(méi)有足夠的空間項(xiàng)目就會(huì)折疊起來(lái)。尤其當(dāng)寬度處于中間時(shí)，這個(gè)解決方案的靈活性提供了一個(gè)更好的用戶體驗(yàn)。

例如:BBC

四、滾動(dòng)導(dǎo)航

如果導(dǎo)航項(xiàng)的數(shù)量較大，而且優(yōu)先級(jí)幾乎沒(méi)什么區(qū)別，采用“更多”項(xiàng)將會(huì)是一個(gè)糟糕的妥協(xié)，另一個(gè)方案是滾動(dòng)視圖中列出的所有項(xiàng)目：

這種方案的缺點(diǎn)是用戶只能看到可見范圍內(nèi)的幾個(gè)選項(xiàng)，其余的選項(xiàng)用戶不可預(yù)知。盡管如此，當(dāng)用戶探索購(gòu)物或新聞?lì)愡x項(xiàng)時(shí)，這依然是可接受的解決方案。

作為視覺(jué)設(shè)計(jì)，需要確保提供足夠的視覺(jué)線索，表明在水平滾動(dòng)后有更多的元素，弱化邊緣元素就是個(gè)不錯(cuò)的辦法。

例如：C Channel

榮獲 2016年度 Material Design 設(shè)計(jì)獎(jiǎng)（創(chuàng)意導(dǎo)航組）

五、下拉菜單

當(dāng)其他部分的可見性和可訪問(wèn)性并不重要時(shí)，一個(gè)少見但有趣的方案是使用下拉菜單：

下拉菜單有一個(gè)雙重角色：首先，它作為一個(gè)頁(yè)面標(biāo)題，雖然選項(xiàng)隱藏其下，向下箭頭表明有可能迅速切換到相似的部分。其二，除了切換同級(jí)選項(xiàng)，切換到下級(jí)項(xiàng)目也是能被用戶接受的。

例如：多鄰國(guó)

通過(guò)下拉菜單快速切換練習(xí)語(yǔ)言

六、抽屜導(dǎo)航不一定很糟

對(duì)于大多數(shù)用戶來(lái)說(shuō)，下拉菜單的交互方式并不常見。令人意外的是，抽屜導(dǎo)航可能是一個(gè)不錯(cuò)的選擇。它的主要缺點(diǎn)是較低的可發(fā)現(xiàn)性，當(dāng)設(shè)計(jì)二級(jí)導(dǎo)航選項(xiàng)是，這種模式可能是一個(gè)適當(dāng)?shù)?a >解決方案。

例如：Uber（優(yōu)步） &  Red Dot（紅點(diǎn)）

屏幕上的一切都是為了請(qǐng)求一輛車，諸如歷史、設(shè)置這類的二級(jí)選項(xiàng)不應(yīng)該比從一個(gè)漢堡包菜單更突出

結(jié)論

沒(méi)有萬(wàn)能的導(dǎo)航欄設(shè)計(jì)，它取決于產(chǎn)品定位、用戶需求以及內(nèi)容信息。適用于其它應(yīng)用的導(dǎo)航可能不會(huì)為你工作，反之亦然。每一個(gè)優(yōu)秀的導(dǎo)航設(shè)計(jì)，是對(duì)優(yōu)先級(jí)、信息架構(gòu)、邏輯結(jié)構(gòu)和用戶需求的高度把控

分享文章：側(cè)抽屜遭嫌棄，如何設(shè)計(jì)優(yōu)秀的導(dǎo)航欄？
網(wǎng)址分享：http://www.bm7419.com/news15/183065.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、微信小程序、品牌網(wǎng)站設(shè)計(jì)、ChatGPT、網(wǎng)站策劃、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)