導(dǎo)航設(shè)計(jì)：9個(gè)要點(diǎn)教你設(shè)計(jì)更好的導(dǎo)航欄

時(shí)間：2023-09-30 19:00:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-30 19:00:01 來源：網(wǎng)站運(yùn)營

導(dǎo)航設(shè)計(jì)：9個(gè)要點(diǎn)教你設(shè)計(jì)更好的導(dǎo)航欄：原文鏈接

一、側(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è)二級(jí)導(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è)一級(jí)和二級(jí)導(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)

對(duì)于需要容納大量選項(xiàng)或?qū)Ш綄蛹?jí)少的網(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í)候即使對(duì)導(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)

對(duì)于沒有太多選項(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ò)展和編輯。
• 對(duì)復(fù)雜且需要自定義導(dǎo)航選項(xiàng)的網(wǎng)站考慮使用側(cè)邊導(dǎo)航。

— The End —

原文：http://uxdesign.cc/top-navigation-vs-side-navigation-wich-one-is-better-24aa5d835643