大家好烛亦，我是Clippp。今天為大家?guī)?lái)的文章是「導(dǎo)航」設(shè)計(jì)懂拾。如何在頂部導(dǎo)航和側(cè)邊導(dǎo)航間做出合理的選擇煤禽？?jī)煞N不同的設(shè)計(jì)方式能帶來(lái)完全差異化的體驗(yàn)效果。
先來(lái)了解一下項(xiàng)目的背景委粉。Conduira online是一個(gè)線上的教育平臺(tái)呜师，為準(zhǔn)備考試的用戶提供有用的工具和資源娶桦。這個(gè)平臺(tái)目前有一個(gè)側(cè)邊導(dǎo)航欄贾节，上面有11個(gè)選項(xiàng)。
后來(lái)由于平臺(tái)的變化衷畦，將主導(dǎo)航的選項(xiàng)縮減到3個(gè)——主頁(yè)栗涂、實(shí)習(xí)和課程。
導(dǎo)航的數(shù)量變少了祈争，團(tuán)隊(duì)又迎來(lái)了新的問(wèn)題：是應(yīng)該繼續(xù)保留側(cè)邊導(dǎo)航的設(shè)計(jì)樣式還是切換成頂部導(dǎo)航的樣式呢斤程？
為了做出最合理的選擇，我們需要回答三個(gè)基本的問(wèn)題。?
一忿墅、主導(dǎo)航中有幾個(gè)選項(xiàng)扁藕？
在選擇導(dǎo)航時(shí)回答這個(gè)問(wèn)題很重要。這里介紹一個(gè)有趣的的交互概念叫做視覺(jué)固定(Visual Fixation)：注意力一直保持在同一個(gè)地方疚脐。
在頂部導(dǎo)航中亿柑，一個(gè)視覺(jué)固定點(diǎn)通常只適合一個(gè)選項(xiàng)。然而棍弄，側(cè)邊導(dǎo)航上的單一視覺(jué)固定點(diǎn)可以同時(shí)容納兩個(gè)選項(xiàng)望薄。
結(jié)果很明確。與頂部導(dǎo)航相比呼畸，用戶在一次視覺(jué)觀察中可以在側(cè)邊導(dǎo)航上查看和感知更多菜單選項(xiàng)痕支。當(dāng)然頂部導(dǎo)航也有自己的優(yōu)勢(shì)，為每個(gè)菜單項(xiàng)賦予各自的權(quán)重蛮原，而不是讓它們的重要性被其他選項(xiàng)分散卧须。
對(duì)于具有過(guò)濾選項(xiàng)或帶有二級(jí)菜單的電商網(wǎng)站，視覺(jué)固定的概念起到了非常重要的作用瞬痘。因?yàn)樵谶@些情況下故慈，我們希望用戶能夠在單一的視覺(jué)點(diǎn)上盡可能多的選擇。
Tips：這里的選擇僅僅取決于界面上有多少選項(xiàng)框全。如果主導(dǎo)航的菜單項(xiàng)不多于5個(gè)察绷，只需使用頂部導(dǎo)航，這樣能夠更好地控制用戶在整個(gè)平臺(tái)上的體驗(yàn)旅程津辩。
二拆撼、主導(dǎo)航與選項(xiàng)優(yōu)先級(jí)的關(guān)系？
用戶在瀏覽網(wǎng)頁(yè)或App時(shí)會(huì)有各種各樣的瀏覽順序喘沿，其中一種就是“F型模式”闸度。
看起來(lái)像這樣：
F型布局的特點(diǎn)是將注視力集中在頁(yè)面的頂部和左側(cè):
用戶首先以水平移動(dòng)的方式瀏覽內(nèi)容區(qū)域，這個(gè)動(dòng)線構(gòu)成了F型布局的頂欄蚜印；
接下來(lái)用戶掃描頁(yè)面左側(cè)的垂直線莺禁，進(jìn)行第二次水平移動(dòng)瀏覽。隨著路徑越來(lái)越長(zhǎng)窄赋，閱讀覆蓋的區(qū)域一次比一次短哟冬，構(gòu)成了F型布局下面的部分；
最后用戶以垂直移動(dòng)的方式瀏覽整個(gè)頁(yè)面的內(nèi)容忆绰。
這種模式的含義是同一頁(yè)面上的第一行文本比后幾行文本受到更多的關(guān)注浩峡；每行文本左邊的幾個(gè)字比后面的文字接受度更多。
因此错敢，在頂部導(dǎo)航中最左邊的選項(xiàng)比其他選項(xiàng)具有更多的視覺(jué)權(quán)重翰灾，因?yàn)樗挥谥饕曈X(jué)區(qū)域，優(yōu)先級(jí)更高。
側(cè)邊導(dǎo)航采用了垂直移動(dòng)纸淮，這是用戶瀏覽網(wǎng)頁(yè)的一個(gè)自然方向平斩，但是選項(xiàng)優(yōu)先級(jí)的排序是個(gè)限制。當(dāng)選項(xiàng)的優(yōu)先級(jí)相同時(shí)咽块，可以使用側(cè)邊導(dǎo)航双戳，這樣用戶就可以完整瀏覽列表并確定對(duì)他們重要的內(nèi)容。
三糜芳、是否考慮使用二級(jí)導(dǎo)航飒货？
如果是的話，可以考慮利用以下兩種設(shè)計(jì)樣式：
水平導(dǎo)航——在頁(yè)面頂部設(shè)置一個(gè)主導(dǎo)航峭竣，在主導(dǎo)航下面設(shè)置二級(jí)導(dǎo)航進(jìn)一步來(lái)區(qū)分內(nèi)容塘辅。
側(cè)邊欄——在頂部設(shè)置一個(gè)主導(dǎo)航，然后在側(cè)邊設(shè)置一個(gè)側(cè)邊欄菜單來(lái)處理其他內(nèi)容皆撩。
總結(jié)
頂部導(dǎo)航和側(cè)邊導(dǎo)航之間的選擇實(shí)際上取決于以上三個(gè)基本的問(wèn)題扣墩。
另外由于現(xiàn)在的設(shè)備有了更大的屏幕尺寸，如今許多設(shè)計(jì)趨勢(shì)已轉(zhuǎn)向側(cè)邊導(dǎo)航扛吞，因?yàn)樗雌饋?lái)更干凈并優(yōu)化了更多的屏幕空間呻惕。
最后將導(dǎo)航的選擇歸結(jié)為兩點(diǎn)：
1.主導(dǎo)航包含的選項(xiàng)數(shù)量;
2.是希望用戶根據(jù)優(yōu)先級(jí)瀏覽項(xiàng)目，還是希望用戶可視化地瀏覽并根據(jù)其偏好選擇項(xiàng)目滥比。
精彩推薦：
2、案例分析：柵格系統(tǒng)的布局設(shè)計(jì)
