導(dǎo)航組件可以對系統(tǒng)功能進(jìn)行組合與拆分，幫助用戶快速認(rèn)識到系統(tǒng)的整體功能，用戶也可以通過導(dǎo)航來快速找到目標(biāo)功能，其重要性不言而喻。本文作者對導(dǎo)航組件的構(gòu)成要素和基本形式，以及如何選擇導(dǎo)航進(jìn)行了分析，一起來看一下吧。

最“大”的B端組件是什么？那肯定就是導(dǎo)航組件了。

使用頻率最高的B端組件是什么？答案應(yīng)該也是導(dǎo)航組件。

大，指的是視覺上的大，視覺上足夠大，影響范圍就足夠廣，影響范圍廣，而且使用頻率又是最高，那么我們就可以看出導(dǎo)航的重要性。

它可以對系統(tǒng)功能進(jìn)行組合與拆分，幫助用戶快速認(rèn)識到系統(tǒng)的整體功能，用戶也可以通過導(dǎo)航來快速找到目標(biāo)功能。可以說導(dǎo)航就是一個(gè)系統(tǒng)的靈魂。

這么重要的組件，我們有必要全面地了解一下。

一、導(dǎo)航的構(gòu)成元素

導(dǎo)航一般是由：菜單文本、輔助圖標(biāo)、交互圖標(biāo)和操作按鈕四個(gè)部分組成。如下圖：

• 菜單文本：用來說明此菜單鏈接的目標(biāo)功能。用戶通過菜單文本來了解系統(tǒng)功能。
• 輔助圖標(biāo)：用來輔助說明菜單文本，使用圖形化的方式表達(dá)菜單信息，一定程度上可以提升用戶體驗(yàn)和信息獲取效率。
• 交互圖標(biāo)：一般是一個(gè)小箭頭形式，用來響應(yīng)用戶的點(diǎn)擊操作，當(dāng)菜單層級超過2級時(shí)使用。
• 操作按鈕：對導(dǎo)航進(jìn)行一些操作，比如折疊、展開、關(guān)閉等。

二、導(dǎo)航的三種基本形式

大家在日常使用B端產(chǎn)品時(shí)，肯定看到過各種各樣的導(dǎo)航，總體細(xì)分下來，它們可以分為三種類型：頂部導(dǎo)航、側(cè)邊欄導(dǎo)航和浮標(biāo)導(dǎo)航。

1. 頂部導(dǎo)航

固定在頁面頂部，作為系統(tǒng)的一級菜單。一些信息展示類網(wǎng)站大多采用這種形式，比如常見的公司官網(wǎng)。

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

可以和頂部導(dǎo)航搭配使用，作為頂部導(dǎo)航的二級菜單。當(dāng)然也可以單獨(dú)使用。在B端系統(tǒng)中，單獨(dú)使用側(cè)邊欄導(dǎo)航的例子也很常見。

3. 浮標(biāo)導(dǎo)航

常用在頁面的右下角，作為一些輔助功能的展示。最常見的就是“返回頂部”的操作。

這就是導(dǎo)航的三種基本形式，通過對三種基本形式的調(diào)整，可以得到各種各樣的導(dǎo)航。

三、各式各樣的導(dǎo)航

1. 頂部導(dǎo)航

預(yù)覽圖：

實(shí)際應(yīng)用效果：

2. 頂部導(dǎo)航帶下拉菜單

預(yù)覽圖：

實(shí)際應(yīng)用效果：

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

預(yù)覽圖：

實(shí)際應(yīng)用效果：

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

預(yù)覽圖：

實(shí)際應(yīng)用效果：

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

預(yù)覽圖：

實(shí)際應(yīng)用效果：

6. 帶收縮功能的側(cè)邊欄導(dǎo)航

預(yù)覽圖：

實(shí)際應(yīng)用效果：

①折疊前

②折疊后

7. 側(cè)邊欄左右結(jié)構(gòu)的導(dǎo)航

預(yù)覽圖：

實(shí)際應(yīng)用效果：

8. 側(cè)邊欄懸浮結(jié)構(gòu)的導(dǎo)航

預(yù)覽圖：

實(shí)際應(yīng)用效果：

9. 頂部導(dǎo)航和側(cè)邊導(dǎo)航搭配使用

預(yù)覽圖：

實(shí)際應(yīng)用效果：

四、我們?nèi)绾芜x擇導(dǎo)航

看過了各種各樣的導(dǎo)航，那我們該如何為自己的項(xiàng)目選擇導(dǎo)航呢？

根據(jù)筆者的經(jīng)驗(yàn)，在選擇導(dǎo)航方面，有以下7條原則：

1. 系統(tǒng)層級簡單，功能模塊較少時(shí)，使用頂部菜單。頂部菜單符合“F”型視覺動(dòng)線。
2. 當(dāng)系統(tǒng)層架比較復(fù)雜，且功能模塊較多時(shí)，使用側(cè)邊欄菜單。豎向排列的結(jié)構(gòu)可以收納更多的功能。
3. 使用側(cè)邊欄時(shí)，如果二級菜單內(nèi)容較多，為了更好的用戶體驗(yàn)，可以采用側(cè)邊欄左右結(jié)構(gòu)的導(dǎo)航。
4. 使用側(cè)邊欄時(shí)，為了讓頁面更加簡潔，可以采用側(cè)邊欄選項(xiàng)結(jié)構(gòu)或?qū)Ш绞湛s功能。
5. 如果系統(tǒng)層架非常復(fù)雜，包含功能非常多，可以使用頂級菜單+側(cè)邊欄菜單的混合使用方式?？梢允占{更多的功能。
6. 當(dāng)需要設(shè)置一些全局輔助功能時(shí)，可以使用浮標(biāo)導(dǎo)航的方式。
7. 如果是新系統(tǒng)上線，請遵循以上6條原則。如果是老系統(tǒng)的新功能上線，還需要考慮到已有用戶的使用習(xí)慣。盡量延續(xù)老系統(tǒng)的導(dǎo)航結(jié)構(gòu)。

帶著這七條原則，再回頭看看那各種各樣的導(dǎo)航，有沒有一種盡在掌握的感覺？

五、小結(jié)

古語云：“擇其重者而先為之”。先把重要的事情做好，再開始后面的工作。一個(gè)適合的導(dǎo)航，是產(chǎn)品成功的開始。

熟練掌握B端組件，打好扎實(shí)的基本功，你的B端之路會(huì)走的更加平穩(wěn)、從容。

這是《好玩的B端組件》的第二篇文章，希望對你有用。

相關(guān)閱讀：

好玩的B端組件 丨 上傳組件