導航組件可以對系統功能進行組合與拆分，幫助用戶快速認識到系統的整體功能，用戶也可以通過導航來快速找到目標功能，其重要性不言而喻。本文作者對導航組件的構成要素和基本形式，以及如何選擇導航進行了分析，一起來看一下吧。

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

使用頻率最高的B端組件是什么？答案應該也是導航組件。

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

它可以對系統功能進行組合與拆分，幫助用戶快速認識到系統的整體功能，用戶也可以通過導航來快速找到目標功能。可以說導航就是一個系統的靈魂。

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

一、導航的構成元素

導航一般是由：菜單文本、輔助圖標、交互圖標和操作按鈕四個部分組成。如下圖：

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

二、導航的三種基本形式

大家在日常使用B端產品時，肯定看到過各種各樣的導航，總體細分下來，它們可以分為三種類型：頂部導航、側邊欄導航和浮標導航。

1. 頂部導航

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

2. 側邊欄導航

可以和頂部導航搭配使用，作為頂部導航的二級菜單。當然也可以單獨使用。在B端系統中，單獨使用側邊欄導航的例子也很常見。

3. 浮標導航

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

這就是導航的三種基本形式，通過對三種基本形式的調整，可以得到各種各樣的導航。

三、各式各樣的導航

1. 頂部導航

預覽圖：

實際應用效果：

2. 頂部導航帶下拉菜單

預覽圖：

實際應用效果：

3. 側邊欄導航

預覽圖：

實際應用效果：

4. 側邊欄二級導航

預覽圖：

實際應用效果：

5. 側邊欄三級導航

預覽圖：

實際應用效果：

6. 帶收縮功能的側邊欄導航

預覽圖：

實際應用效果：

①折疊前

②折疊后

7. 側邊欄左右結構的導航

預覽圖：

實際應用效果：

8. 側邊欄懸浮結構的導航

預覽圖：

實際應用效果：

9. 頂部導航和側邊導航搭配使用

預覽圖：

實際應用效果：

四、我們如何選擇導航

看過了各種各樣的導航，那我們該如何為自己的項目選擇導航呢？

根據筆者的經驗，在選擇導航方面，有以下7條原則：

1. 系統層級簡單，功能模塊較少時，使用頂部菜單。頂部菜單符合“F”型視覺動線。
2. 當系統層架比較復雜，且功能模塊較多時，使用側邊欄菜單。豎向排列的結構可以收納更多的功能。
3. 使用側邊欄時，如果二級菜單內容較多，為了更好的用戶體驗，可以采用側邊欄左右結構的導航。
4. 使用側邊欄時，為了讓頁面更加簡潔，可以采用側邊欄選項結構或導航收縮功能。
5. 如果系統層架非常復雜，包含功能非常多，可以使用頂級菜單+側邊欄菜單的混合使用方式?？梢允占{更多的功能。
6. 當需要設置一些全局輔助功能時，可以使用浮標導航的方式。
7. 如果是新系統上線，請遵循以上6條原則。如果是老系統的新功能上線，還需要考慮到已有用戶的使用習慣。盡量延續老系統的導航結構。

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

五、小結

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

熟練掌握B端組件，打好扎實的基本功，你的B端之路會走的更加平穩、從容。

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

相關閱讀：

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