2021-4-16 資深UI設計者
做中后臺產品的設計，基本都逃不開導航布局這個大框架。
基于用戶的 Z 字形掃描行為，重要的導航應當選擇左側導航或頂部導航。
可是橫著豎著有那么大差別嗎？被人問道為什么這么選擇，該如何回答？
今天給大家些靈感，從以下四個角度分析一下：
JR Kingsburg 曾經做過一次實驗（A comparison of three-level menu navigation structures for web design），研究 3 層導航中，哪種組合使用效率更高。
這三層中，每一層都有橫向和縱向兩種可能性，所以實驗總共有 2×2×2=8 種對照組：
他為這 8 種導航布局做了不同電商原型，讓用戶來買東西，并記錄各種數據，結果發現了很多有意思的數據：
綜合這些數據，看起來整體表現較好都是「左上上」、「左左上」、「左左左」。
科學雖然很嚴謹，卻缺乏靈活度，例如本次試驗的場景單一（電商購物），而且用來測試的界面未免也太簡陋了吧！
所以我們再從其他角度思考看看。
從占據面積的角度來看，橫向導航比縱向導航省地方，因為只要細細一條就好了。
然而，選項數量不多時橫向是可以；選項多起來，橫向導航就很擁擠了。
畢竟縱向導航方便滾動，橫向導航很少有用戶會嘗試滾動查看的，「…」也不是什么方便的操作。
所以，如果確定選項少可以選橫向，不確定或者數量多建議保險起見選縱向。
任何導航，都要占據屏幕不少空間，這對尺寸適配都是一件麻煩事。哪怕產品并不需要為移動端做響應式布局，只要是網頁端，就得考慮窗口尺寸的變化問題。因為設計師的 Mac 和大量用戶的 PC 甚至平板電腦之間，展示上的差異真的不小。
橫向導航占據空間最小，同時也是最難做尺寸適配的。尤其是如果上面除了導航之外，還放有各種 logo、頭像、圖標、搜索…各種東西時。橫向導航一般都有三種狀態：展開、折疊和收起。但是縱向導航就簡單了，只需要兩個狀態：展開和收起。頂多再讓展開狀態的寬度能夠自適應變化或手動拉伸就差不多了。
這么看來，如果產品需要考慮很多不同尺寸適配的問題，縱向導航是最簡單的選擇，除非橫向導航的內容不多維護起來不麻煩。
我之前為了研究確定按鈕放在左邊還是放在右邊好，做了一系列實驗分析，結果得出超出我預期的結論…放哪都沒多大問題，統一就好。于是，我想這個問題也可以類比一下。
大部分網站都是橫向導航，所以說如果產品是以網頁版為主，且用戶會經常穿插跳轉使用其它網頁，那么也使用橫向導航比較符合習慣。
而無論 PC 還是 Mac，系統頁面的導航在左側的情況比較多，所以說如果產品是系統軟件的話，縱向導航比較符合習慣。
然而，更更更更更重要的是，千萬不要同一個產品不同端或不同子系統的導航不一樣！用戶很可能一會兒用這個，一會兒用那個，結果操作習慣換來換去，人都弄暈啦！還有，就是改版換導航肯定要讓老用戶不滿，好不容易養成習慣改起來容易嗎？所以說，決定導航布局時還是要謹慎才好哦。
文章來源：優設 作者：體驗進階
藍藍設計( m.paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務