一個性能超好的網(wǎng)站bai導(dǎo)航是讓一個網(wǎng)站從庸俗走向不凡的必du經(jīng)之路，在今天的社會中，千變?nèi)f化的網(wǎng)絡(luò)系統(tǒng)中，許多網(wǎng)頁已經(jīng)把網(wǎng)頁導(dǎo)航設(shè)計的也來也形式化，規(guī)則化，然而網(wǎng)頁導(dǎo)航的能力也并不是傳說或者虛擬，此刻就來分析一下這個道理。

1.導(dǎo)航的定義

導(dǎo)航設(shè)計的定義是：元素的組合，允許用戶在信息架構(gòu)中穿行。

簡單點理解就是：我們從用戶的心智模型出發(fā)，結(jié)合業(yè)務(wù)目標，對信息架構(gòu)的一個梳理，來幫助用戶完成目標。

2.導(dǎo)航的作用

導(dǎo)航設(shè)計更大的作用就是：告訴用戶當(dāng)前在哪里，從哪里來，能到哪里去。

當(dāng)然我們還需要為用戶跳轉(zhuǎn)提供方法，并且能明確讓用戶感受到導(dǎo)航欄元素與頁面的關(guān)系，更后是表達出內(nèi)容與用戶瀏覽界面的關(guān)系。

3.導(dǎo)航的種類&樣式

a.底部導(dǎo)航欄設(shè)計

底部導(dǎo)航欄設(shè)計是我們更常見的導(dǎo)航模式之一，位于頁面底部，用于一級頁面當(dāng)中負責(zé)各主業(yè)務(wù)模塊的切換，一般會保持3～ 5 個標簽，適用于頻繁切換業(yè)務(wù)模塊的產(chǎn)品。例如優(yōu)酷、豆瓣、淘寶、網(wǎng)易云音樂：

優(yōu)點：切換快速方便，用戶不會輕易迷失；iOS 原生系統(tǒng)，開發(fā)成本低；屬于拇指熱區(qū)范圍內(nèi)，操作方便，用戶體驗好。

缺點：導(dǎo)航數(shù)量有限，更多3～ 5 個，可擴展性不高；占用一定的空間，沉浸式體驗不足，且在小機型上極其容易影響顯示區(qū)域的視覺大小。

b.頂部導(dǎo)航

頂部導(dǎo)航欄位于頁面頂部，一般位于導(dǎo)航欄或者狀態(tài)欄下方，用作于二級導(dǎo)航，基本都以純文字的形式出現(xiàn)（避免干擾用戶瀏覽頁面核心內(nèi)容），常見的頂部導(dǎo)航欄有：固定頂部標簽導(dǎo)航&可滑動標簽導(dǎo)航。例如UC頭條、LOFTER、網(wǎng)易有錢、京東金融：

優(yōu)點：滑動式頂部標簽可無限添加標簽，可擴展性強；技術(shù)上，適配簡單，減少開發(fā)成本；占據(jù)空間比底部導(dǎo)航欄小，節(jié)省空間；劃屏切換，簡單便捷。

缺點：標簽數(shù)量多，容易導(dǎo)致產(chǎn)品頁面過多，用戶需要耗費大量精力不斷滑動；越是后面的標簽容易被遺忘，導(dǎo)致流量遺失。

c.舵式導(dǎo)航

舵式導(dǎo)航一般位于底部標簽欄中間，以“+”號 的形式出現(xiàn)，是產(chǎn)品中需要重點突出的功能，一般用于UGC內(nèi)容生產(chǎn)發(fā)布。例如閑魚、微博、LOFTER、轉(zhuǎn)轉(zhuǎn)：

優(yōu)點：以顏色或大小的區(qū)別來展示核心，視覺沖擊力強，讓人更加有有點擊的欲望；展示效果上靈活多變，增添了交互趣味。

缺點：層級較深，需要用戶二次點擊才能到達目標，增加了用戶的交互路徑，不適合頻繁切換；其次隱藏的功能不能太多，如果過多會給用戶造成選擇壓力，引起用戶的反感情緒。

d.側(cè)邊欄導(dǎo)航

側(cè)邊欄導(dǎo)航是除了核心功能意外的主要功能全部隱藏在側(cè)邊欄里，一般通過點擊左上角的 icon 彈出，左側(cè)區(qū)域現(xiàn)實導(dǎo)航中的內(nèi)容。例如小紅書、優(yōu)酷、滴墨書摘、滴滴：

優(yōu)點：隱藏次要功能，聚焦核心內(nèi)容；隱藏減少非核心功能，沉浸式體驗優(yōu)秀；節(jié)省頁面空間；標齊選項可擴展性強。

缺點：其他功能使用率低；切換功能操作麻煩，交互路勁長。