桌面和大屏幕上導(dǎo)航欄要怎么設(shè)計(jì)其實(shí)是一個(gè)經(jīng)常被拿來探討的問題，如今這也是 B 端設(shè)計(jì)中繞不開的一個(gè)設(shè)計(jì)問題。Jennifer Rose Kingsburg 曾經(jīng)有針對(duì)網(wǎng)頁(yè)的三級(jí)菜單導(dǎo)航進(jìn)行過一份研究，結(jié)論是在左側(cè)設(shè)置導(dǎo)航好處多多。此外還有很多類似的研究，你可以在這里看到很多相關(guān)研究的摘要。值得注意的是，這些研究大都是 2017年之前的研究成果，而如今很多設(shè)計(jì)范式發(fā)生了變化。

1、左側(cè)導(dǎo)航更容易瀏覽

Eyetrac?荷蘭國(guó)際集團(tuán)的研究表明，用戶習(xí)慣于使用 F 式的瀏覽路徑，這使得左側(cè)導(dǎo)航在一般情況下有著相對(duì)更強(qiáng)的可用性，它不需要用戶視線上的查找，因?yàn)橛脩魰?huì)下意識(shí)注意到它們的存在。

2、頂部導(dǎo)航更加節(jié)省空間

如果我們經(jīng)常使用筆記本電腦來瀏覽頁(yè)面，會(huì)很容易注意到不同的導(dǎo)航模塊對(duì)于頁(yè)面空間的占用比例，左側(cè)導(dǎo)航所占用的頁(yè)面控件通常是同樣內(nèi)容量的頂部導(dǎo)航的占用空間的3倍，因?yàn)榭v向的側(cè)邊欄導(dǎo)航需要考慮到橫向的標(biāo)題占用空間，再加上搜索等功能模塊的加入，這種空間占用就成了不可避免的結(jié)果。即使左側(cè)的菜單欄可以折疊，這種處理方法也不總是有效的，因?yàn)檫@可能會(huì)隱藏相關(guān)條目的標(biāo)簽信息，降低了導(dǎo)航的可用性。

3、側(cè)邊導(dǎo)航更容易縮放和收納

也正是左側(cè)導(dǎo)航本身的排版邏輯，它通?？梢燥@示比頂部導(dǎo)航多一倍的條目?jī)?nèi)容，如果你的信息架構(gòu)本身涉及到的一級(jí)菜單條目較多的時(shí)候，采用左側(cè)邊欄導(dǎo)航是明顯更合理的選擇，而且這種導(dǎo)航非常適合隨著時(shí)間推移逐漸增加條目的需求。

4、側(cè)邊導(dǎo)航支持定制化導(dǎo)航結(jié)構(gòu)

側(cè)邊導(dǎo)航本身雖然占用的空間更大，但是它也有著更多的空間根據(jù)需求來定制各種不同的需求，相比于頂部導(dǎo)航，側(cè)邊導(dǎo)航甚至可以直接將分層的二級(jí)菜單直接展現(xiàn)出來，就像 Outlook 的側(cè)邊欄和 Slack 的側(cè)邊欄導(dǎo)航。

5、側(cè)邊欄更和桌面端系統(tǒng)更一致

你會(huì)注意到 macOS 和 Windows 操作系統(tǒng)當(dāng)中，系統(tǒng)默認(rèn)的用戶界面大都采用了靈活的側(cè)邊欄導(dǎo)航設(shè)計(jì)，很多 web 應(yīng)用也是如此，它們會(huì)將頂部空間留給系統(tǒng)默認(rèn)的菜單模塊。采用側(cè)邊欄導(dǎo)航的 UI 界面可以和操作系統(tǒng)的邏輯保持一致。

6、懸停激活下級(jí)菜單在頂部導(dǎo)航中更好用

懸停激活抽屜式下拉菜單的設(shè)計(jì)在頂部導(dǎo)航當(dāng)中是非常自然的，但是在側(cè)邊欄導(dǎo)航當(dāng)中，這種設(shè)計(jì)可能會(huì)在一定程度上遮擋住下級(jí)菜單，如果使用在旁邊展開的方式，可能會(huì)占用大量的空間，總而言之，它更貼合頂部導(dǎo)航的交互模式。

7、頂部導(dǎo)航欄適合做超級(jí)菜單

頂部導(dǎo)航正是因?yàn)楹蛻彝３霭l(fā)下級(jí)菜單的功能很搭，所以很多電商和大型網(wǎng)站上會(huì)使用它來呈現(xiàn)條目眾多的超級(jí)菜單。它是用來一次容納超多條目的下級(jí)菜單的有效方式，這種布局也為產(chǎn)品展示和廣告留出了足夠多的空間。

8、盡量避免重設(shè)計(jì)時(shí)改變導(dǎo)航模式

如果一種導(dǎo)航模式看起來不夠好用，那么是否要借助重設(shè)計(jì)的機(jī)會(huì)，切換到另外一種模式呢？根據(jù) Jira 的用戶測(cè)試，95% 的早期用戶對(duì)于這種情況會(huì)感到非常迷惑，即使是再小的導(dǎo)航功能修改都可能直接影響到大量用戶的日常使用，因此不管哪種導(dǎo)航模式，一旦選定，盡量不要改變。

9、不論哪種導(dǎo)航欄都面臨響應(yīng)式設(shè)計(jì)的挑戰(zhàn)

對(duì)于沒有太多條目的頂部導(dǎo)航，在移動(dòng)端上依然可以直接在頂部呈現(xiàn)，不過如果太多了就需要使用漢堡菜單來承載，或者切換為垂直的側(cè)邊欄導(dǎo)航。而側(cè)邊欄導(dǎo)航在移動(dòng)端上相對(duì)好一點(diǎn)，因?yàn)閷?dǎo)航模式本身是一致的，但是有限的空間內(nèi)如何呈現(xiàn)大量的導(dǎo)航條目同樣存在挑戰(zhàn)。

結(jié)論：用哪種導(dǎo)航欄取決于需求

頂部導(dǎo)航：占用空間小，在頁(yè)面的位置最為顯著，涉及條目不多的時(shí)候效果非常好。對(duì)于層次結(jié)構(gòu)簡(jiǎn)單的中小型網(wǎng)站，頂部導(dǎo)航還是很好用的，對(duì)于層級(jí)較少但是二級(jí)條目特別多的超級(jí)導(dǎo)航，頂部導(dǎo)航也是不二選擇。

側(cè)邊導(dǎo)航：側(cè)邊導(dǎo)航支持一級(jí)條目較多且層級(jí)較多的導(dǎo)航需求，擴(kuò)展性良好，對(duì)于復(fù)雜的產(chǎn)品和自定義需求較多的產(chǎn)品、涉及到管理功能、 桌面級(jí)產(chǎn)品、 都適合使用側(cè)邊導(dǎo)航。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)