2020-9-10 資深UI設計者
先來了解一下項目的背景。Conduira online是一個線上的教育平臺，為準備考試的用戶提供有用的工具和資源。這個平臺目前有一個側邊導航欄，上面有11個選項。后來由于平臺的變化，將主導航的選項縮減到3個——主頁、實習和課程。
導航的數量變少了，團隊又迎來了新的問題：是應該繼續保留側邊導航的設計樣式還是切換成頂部導航的樣式呢？
為了做出最合理的選擇，我們需要回答三個基本的問題。
在選擇導航時回答這個問題很重要。這里介紹一個有趣的的交互概念叫做視覺固定（Visual Fixation）：注意力一直保持在同一個地方。
在頂部導航中，一個視覺固定點通常只適合一個選項。然而，側邊導航上的單一視覺固定點可以同時容納兩個選項。
結果很明確。與頂部導航相比，用戶在一次視覺觀察中可以在側邊導航上查看和感知更多菜單選項。當然頂部導航也有自己的優勢，為每個菜單項賦予各自的權重，而不是讓它們的重要性被其他選項分散。
對于具有過濾選項或帶有二級菜單的電商網站，視覺固定的概念起到了非常重要的作用。因為在這些情況下，我們希望用戶能夠在單一的視覺點上盡可能多的選擇。
Tips：這里的選擇僅僅取決于界面上有多少選項。如果主導航的菜單項不多于5個，只需使用頂部導航，這樣能夠更好地控制用戶在整個平臺上的體驗旅程。
用戶在瀏覽網頁或App時會有各種各樣的瀏覽順序，其中一種就是「F型模式」。
看起來像這樣：
F型布局的特點是將注視力集中在頁面的頂部和左側:
這種模式的含義是同一頁面上的第一行文本比后幾行文本受到更多的關注；每行文本左邊的幾個字比后面的文字接受度更多。
因此，在頂部導航中最左邊的選項比其他選項具有更多的視覺權重，因為它位于主要視覺區域，優先級更高。
側邊導航采用了垂直移動，這是用戶瀏覽網頁的一個自然方向，但是選項優先級的排序是個限制。當選項的優先級相同時，可以使用側邊導航，這樣用戶就可以完整瀏覽列表并確定對他們重要的內容。
如果是的話，可以考慮利用以下兩種設計樣式：
水平導航——在頁面頂部設置一個主導航，在主導航下面設置二級導航進一步來區分內容。
側邊欄——在頂部設置一個主導航，然后在側邊設置一個側邊欄菜單來處理其他內容。
頂部導航和側邊導航之間的選擇實際上取決于以上三個基本的問題。
另外由于現在的設備有了更大的屏幕尺寸，如今許多設計趨勢已轉向側邊導航，因為它看起來更干凈并優化了更多的屏幕空間。
最后將導航的選擇歸結為兩點：
文章來源：優設 作者：Clip設計夾
藍藍設計( m.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務