2021-10-9 資深UI設計者
桌面和大屏幕上導航欄要怎么設計其實是一個經常被拿來探討的問題，如今這也是 B 端設計中繞不開的一個設計問題。Jennifer Rose Kingsburg 曾經有針對網頁的三級菜單導航進行過一份研究，結論是在左側設置導航好處多多。此外還有很多類似的研究，你可以在這里看到很多相關研究的摘要。值得注意的是，這些研究大都是 2017年之前的研究成果，而如今很多設計范式發生了變化。
Eyetrac?荷蘭國際集團的研究表明，用戶習慣于使用 F 式的瀏覽路徑，這使得左側導航在一般情況下有著相對更強的可用性，它不需要用戶視線上的查找，因為用戶會下意識注意到它們的存在。
如果我們經常使用筆記本電腦來瀏覽頁面，會很容易注意到不同的導航模塊對于頁面空間的占用比例，左側導航所占用的頁面控件通常是同樣內容量的頂部導航的占用空間的3倍，因為縱向的側邊欄導航需要考慮到橫向的標題占用空間，再加上搜索等功能模塊的加入，這種空間占用就成了不可避免的結果。即使左側的菜單欄可以折疊，這種處理方法也不總是有效的，因為這可能會隱藏相關條目的標簽信息，降低了導航的可用性。
也正是左側導航本身的排版邏輯，它通常可以顯示比頂部導航多一倍的條目內容，如果你的信息架構本身涉及到的一級菜單條目較多的時候，采用左側邊欄導航是明顯更合理的選擇，而且這種導航非常適合隨著時間推移逐漸增加條目的需求。
側邊導航本身雖然占用的空間更大，但是它也有著更多的空間根據需求來定制各種不同的需求，相比于頂部導航，側邊導航甚至可以直接將分層的二級菜單直接展現出來，就像 Outlook 的側邊欄和 Slack 的側邊欄導航。
你會注意到 macOS 和 Windows 操作系統當中，系統默認的用戶界面大都采用了靈活的側邊欄導航設計，很多 web 應用也是如此，它們會將頂部空間留給系統默認的菜單模塊。采用側邊欄導航的 UI 界面可以和操作系統的邏輯保持一致。
懸停激活抽屜式下拉菜單的設計在頂部導航當中是非常自然的，但是在側邊欄導航當中，這種設計可能會在一定程度上遮擋住下級菜單，如果使用在旁邊展開的方式，可能會占用大量的空間，總而言之，它更貼合頂部導航的交互模式。
頂部導航正是因為和懸停出發下級菜單的功能很搭，所以很多電商和大型網站上會使用它來呈現條目眾多的超級菜單。它是用來一次容納超多條目的下級菜單的有效方式，這種布局也為產品展示和廣告留出了足夠多的空間。
如果一種導航模式看起來不夠好用，那么是否要借助重設計的機會，切換到另外一種模式呢？根據 Jira 的用戶測試，95% 的早期用戶對于這種情況會感到非常迷惑，即使是再小的導航功能修改都可能直接影響到大量用戶的日常使用，因此不管哪種導航模式，一旦選定，盡量不要改變。
對于沒有太多條目的頂部導航，在移動端上依然可以直接在頂部呈現，不過如果太多了就需要使用漢堡菜單來承載，或者切換為垂直的側邊欄導航。而側邊欄導航在移動端上相對好一點，因為導航模式本身是一致的，但是有限的空間內如何呈現大量的導航條目同樣存在挑戰。
頂部導航：占用空間小，在頁面的位置最為顯著，涉及條目不多的時候效果非常好。對于層次結構簡單的中小型網站，頂部導航還是很好用的，對于層級較少但是二級條目特別多的超級導航，頂部導航也是不二選擇。
側邊導航：側邊導航支持一級條目較多且層級較多的導航需求，擴展性良好，對于復雜的產品和自定義需求較多的產品、涉及到管理功能、 桌面級產品、 都適合使用側邊導航。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務