大家好啃奴，我是Clippp贵试。今天為大家?guī)淼氖?b>「導(dǎo)航」設(shè)計(jì)盛撑。頂部導(dǎo)航與側(cè)邊導(dǎo)航分別具有哪些特點(diǎn)猾昆、又適合在什么樣的設(shè)計(jì)中使用呢卿嘲？一起來看看兩者的差異～
一魂贬、側(cè)邊導(dǎo)航更易于瀏覽
研究表明用戶瀏覽網(wǎng)頁時(shí)通常使用“F型模式”初狰，頂部和側(cè)邊導(dǎo)航似乎都滿足這樣的定位要求榔至。
然而，頂部導(dǎo)航中一個(gè)視覺固定點(diǎn)通常只適合一個(gè)選項(xiàng)闹瞧，側(cè)邊導(dǎo)航上的單一視覺固定點(diǎn)可以同時(shí)容納兩個(gè)選項(xiàng)绑雄。
因此我們能同時(shí)看到多個(gè)導(dǎo)航鏈接，有效提高瀏覽速度奥邮。
二万牺、頂部導(dǎo)航節(jié)省空間
看一下導(dǎo)航組件在電腦屏幕占用的空間，會(huì)發(fā)現(xiàn)側(cè)邊導(dǎo)航比頂部導(dǎo)航多占用3倍屏幕空間漠烧。
壓縮側(cè)邊導(dǎo)航雖然可以節(jié)省空間但有時(shí)候并不有效杏愤。當(dāng)導(dǎo)航標(biāo)簽壓縮到只剩圖標(biāo)時(shí)，容易導(dǎo)致用戶遺忘圖標(biāo)代表的含義已脓。
三珊楼、側(cè)邊導(dǎo)航更容易擴(kuò)展
導(dǎo)航可能會(huì)根據(jù)設(shè)備和字體的大小而改變，但通常情況下側(cè)邊導(dǎo)航能容納更多的折疊選項(xiàng)度液。
當(dāng)產(chǎn)品的信息架構(gòu)中包含多個(gè)二級導(dǎo)航時(shí)厕宗，可以考慮使用側(cè)邊導(dǎo)航。隨著產(chǎn)品的增長堕担，添加更多的項(xiàng)目也變得更容易已慢。
四、側(cè)邊導(dǎo)航支持自定義導(dǎo)航結(jié)構(gòu)
很多產(chǎn)品的側(cè)邊導(dǎo)航具有可擴(kuò)展性霹购，支持用戶自定義編輯佑惠。比如印象筆記的側(cè)邊導(dǎo)航，我們就可以創(chuàng)建多個(gè)一級和二級導(dǎo)航齐疙。
五膜楷、與桌面端保持一致
如果設(shè)計(jì)桌面端產(chǎn)品，就要考慮產(chǎn)品與桌面系統(tǒng)的一致性贞奋。
側(cè)邊欄在macOS和Windows中都被廣泛用作主要的導(dǎo)航方式赌厅，因?yàn)轫敳繀^(qū)域通常被用來顯示命令、屬性或狀態(tài)轿塔。
六特愿、頂部導(dǎo)航更適合懸停激活子菜單
我們很少見到鼠標(biāo)懸停在側(cè)邊導(dǎo)航上出現(xiàn)子菜單的設(shè)計(jì)。
首先這樣設(shè)計(jì)不方便操作勾缭，另外這樣側(cè)邊導(dǎo)航需要再彈出一個(gè)垂直窗口揍障，會(huì)占用很大的屏幕空間。
七俩由、頂部導(dǎo)航和大容量選項(xiàng)
對于需要容納大量選項(xiàng)或?qū)Ш綄蛹壣俚木W(wǎng)站毒嫡，頂部導(dǎo)航是很好的設(shè)計(jì)選擇，例如在各類電商網(wǎng)站中采驻。
這樣的布局也為產(chǎn)品展示和廣告留出了更多的空間审胚。
八、謹(jǐn)慎考慮導(dǎo)航重設(shè)計(jì)
重新設(shè)計(jì)導(dǎo)航始終是一個(gè)挑戰(zhàn)礼旅，尤其當(dāng)用戶每天使用產(chǎn)品膳叨，已經(jīng)習(xí)慣了導(dǎo)航的使用。
這個(gè)時(shí)候即使對導(dǎo)航進(jìn)行微小的改動(dòng)也會(huì)讓用戶感到困惑痘系。
例如Jira Cloud從頂部導(dǎo)航過渡到側(cè)邊導(dǎo)航時(shí)菲嘴，根據(jù)數(shù)據(jù)反饋有超過95%的早期用戶更喜歡以前的導(dǎo)航形式。
九汰翠、頂部和側(cè)邊導(dǎo)航在響應(yīng)式設(shè)計(jì)方面都面臨挑戰(zhàn)
對于沒有太多選項(xiàng)的頂部導(dǎo)航龄坪，界面縮小到平板中也能保持所有選項(xiàng)可見。
在平板上側(cè)邊導(dǎo)航很可能會(huì)隱藏在漢堡菜單中复唤，這樣既能保持導(dǎo)航視圖的一致性健田，也節(jié)省一定的空間。
總結(jié)：最佳導(dǎo)航取決于產(chǎn)品情況
頂部導(dǎo)航：
使用很少的空間并在頁面上占據(jù)重要位置佛纫；
導(dǎo)航選項(xiàng)太多時(shí)效果受影響妓局；
層次結(jié)構(gòu)少的網(wǎng)站考慮使用頂部導(dǎo)航。
側(cè)邊導(dǎo)航：
支持具有大量導(dǎo)航鏈接的產(chǎn)品呈宇，易于擴(kuò)展和編輯好爬。
對復(fù)雜且需要自定義導(dǎo)航選項(xiàng)的網(wǎng)站考慮使用側(cè)邊導(dǎo)航。
精彩推薦：
2存炮、案例分析：柵格系統(tǒng)的布局設(shè)計(jì)
