更新時間：2025-05-13 03:15:05
開發(fā)經(jīng)驗(yàn)
587大家好，我是Clippp。今天為大家?guī)淼奈恼率?strong style="text-indent: 2em;">「導(dǎo)航」 設(shè)計。如何在頂部導(dǎo)航和側(cè)邊導(dǎo)航之間做出合理的選擇呢？兩種不同的設(shè)計方式能帶來完全差異化的體驗(yàn)效果。
先來了解一下項(xiàng)目的背景。Conduira online是一個線上的教育平臺，為準(zhǔn)備考試的用戶提供有用的工具和資源。這個平臺目前有一個側(cè)邊導(dǎo)航欄，上面有11個選項(xiàng)。
后來由于平臺的變化，將主導(dǎo)航的選項(xiàng)縮減到3個——主頁、實(shí)習(xí)和課程。導(dǎo)航的數(shù)量變少了，團(tuán)隊又迎來了新的問題：是應(yīng)該繼續(xù)保留側(cè)邊導(dǎo)航的設(shè)計樣式還是切換成頂部導(dǎo)航的樣式呢？
為了做出最合理的選擇，我們需要回答三個基本的問題。
主導(dǎo)航中有幾個選項(xiàng)？
在選擇導(dǎo)航時回答這個問題很重要。這里介紹一個有趣的的交互概念叫做視覺固定 (Visual Fixation)：注意力一直保持在同一個地方。
在頂部導(dǎo)航中，一個視覺固定點(diǎn)通常只適合一個選項(xiàng)。然而，側(cè)邊導(dǎo)航上的單一視覺固定點(diǎn)可以同時容納兩個選項(xiàng)。
結(jié)果很明確。與頂部導(dǎo)航相比，用戶在一次視覺觀察中可以在側(cè)邊導(dǎo)航上查看和感知更多菜單選項(xiàng)。當(dāng)然頂部導(dǎo)航也有自己的優(yōu)勢，為每個菜單項(xiàng)賦予各自的權(quán)重，而不是讓它們的重要性被其他選項(xiàng)分散。
對于具有過濾選項(xiàng)或帶有二級菜單的電商網(wǎng)站，視覺固定的概念起到了非常重要的作用。因?yàn)樵谶@些情況下，我們希望用戶能夠在單一的視覺點(diǎn)上盡可能多的選擇。
Tips：這里的選擇僅僅取決于界面上有多少選項(xiàng)。 如果主導(dǎo)航的菜單項(xiàng)不多于5個，只需使用頂部導(dǎo)航，這樣能夠更好地控制用戶在整個平臺上的體驗(yàn)旅程。
主導(dǎo)航與選項(xiàng)優(yōu)先級的關(guān)系？
用戶在瀏覽網(wǎng)頁或App時會有各種各樣的瀏覽順序，其中一種就是“F型模式”。看起來像這樣：
F型布局的特點(diǎn)是將注視力集中在頁面的頂部和左側(cè):
用戶首先以水平移動的方式瀏覽內(nèi)容區(qū)域，這個動線構(gòu)成了F型布局的頂欄；
接下來用戶掃描頁面左側(cè)的垂直線，進(jìn)行第二次水平移動瀏覽。隨著路徑越來越長，閱讀覆蓋的區(qū)域一次比一次短，構(gòu)成了F型布局下面的部分；
最后用戶以垂直移動的方式瀏覽整個頁面的內(nèi)容。
這種模式的含義是同一頁面上的第一行文本比后幾行文本受到更多的關(guān)注；每行文本左邊的幾個字比后面的文字接受度更多。
因此，在頂部導(dǎo)航中最左邊的選項(xiàng)比其他選項(xiàng)具有更多的視覺權(quán)重，因?yàn)樗挥谥饕曈X區(qū)域，優(yōu)先級更高。
側(cè)邊導(dǎo)航采用了垂直移動，這是用戶瀏覽網(wǎng)頁的一個自然方向，但是選項(xiàng)優(yōu)先級的排序是個限制。當(dāng)選項(xiàng)的優(yōu)先級相同時，可以使用側(cè)邊導(dǎo)航， 這樣用戶就可以完整瀏覽列表并確定對他們重要的內(nèi)容。
是否考慮使用二級導(dǎo)航？
如果是的話，可以考慮利用以下兩種設(shè)計樣式：水平導(dǎo)航 ——在頁面頂部設(shè)置一個主導(dǎo)航，在主導(dǎo)航下面設(shè)置二級導(dǎo)航進(jìn)一步來區(qū)分內(nèi)容。
總結(jié)
頂部導(dǎo)航和側(cè)邊導(dǎo)航之間的選擇實(shí)際上取決于以上三個基本的問題。
另外由于現(xiàn)在的設(shè)備有了更大的屏幕尺寸，如今許多設(shè)計趨勢已轉(zhuǎn)向側(cè)邊導(dǎo)航，因?yàn)樗雌饋砀蓛舨?yōu)化了更多的屏幕空間。最后將導(dǎo)航的選擇歸結(jié)為兩點(diǎn)：
主導(dǎo)航包含的選項(xiàng)數(shù)量;
是希望用戶根據(jù)優(yōu)先級瀏覽項(xiàng)目，還是希望用戶可視化地瀏覽并根據(jù)其偏好選擇項(xiàng)目。
我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個項(xiàng)目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！
