起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識好玩的B端組件丨導航
導航組件可以對系統功能進行組合與拆分，幫助用戶快速認識到系統的整體功能，用戶也可以通過導航來快速找到目標功能，其重要性不言而喻。本文作者對導航組件的構成要素和基本形式，以及如何選擇導航進行了分析，一起來看一下吧。
最“大”的B端組件是什么？那肯定就是導航組件了。
使用頻率最高的B端組件是什么？答案應該也是導航組件。
大，指的是視覺上的大，視覺上足夠大，影響范圍就足夠廣，影響范圍廣，而且使用頻率又是最高，那么我們就可以看出導航的重要性。
它可以對系統功能進行組合與拆分，幫助用戶快速認識到系統的整體功能，用戶也可以通過導航來快速找到目標功能。可以說導航就是一個系統的靈魂。
這么重要的組件，我們有必要全面地了解一下。
一、導航的構成元素
導航一般是由：菜單文本、輔助圖標、交互圖標和操作按鈕四個部分組成。如下圖：
- 菜單文本：用來說明此菜單鏈接的目標功能。用戶通過菜單文本來了解系統功能。
- 輔助圖標：用來輔助說明菜單文本，使用圖形化的方式表達菜單信息，一定程度上可以提升用戶體驗和信息獲取效率。
- 交互圖標：一般是一個小箭頭形式，用來響應用戶的點擊操作，當菜單層級超過2級時使用。
- 操作按鈕：對導航進行一些操作，比如折疊、展開、關閉等。
二、導航的三種基本形式
大家在日常使用B端產品時，肯定看到過各種各樣的導航，總體細分下來，它們可以分為三種類型：頂部導航、側邊欄導航和浮標導航。
1. 頂部導航
固定在頁面頂部，作為系統的一級菜單。一些信息展示類網站大多采用這種形式，比如常見的公司官網。
2. 側邊欄導航
可以和頂部導航搭配使用，作為頂部導航的二級菜單。當然也可以單獨使用。在B端系統中，單獨使用側邊欄導航的例子也很常見。
3. 浮標導航
常用在頁面的右下角，作為一些輔助功能的展示。最常見的就是“返回頂部”的操作。
這就是導航的三種基本形式，通過對三種基本形式的調整，可以得到各種各樣的導航。
三、各式各樣的導航
1. 頂部導航
預覽圖：
實際應用效果：
2. 頂部導航帶下拉菜單
預覽圖：
實際應用效果：
3. 側邊欄導航
預覽圖：
實際應用效果：
4. 側邊欄二級導航
預覽圖：
實際應用效果：
5. 側邊欄三級導航
預覽圖：
實際應用效果：
6. 帶收縮功能的側邊欄導航
預覽圖：
實際應用效果：
①折疊前
②折疊后
7. 側邊欄左右結構的導航
預覽圖：
實際應用效果：
8. 側邊欄懸浮結構的導航
預覽圖：
實際應用效果：
9. 頂部導航和側邊導航搭配使用
預覽圖：
實際應用效果：
四、我們如何選擇導航
看過了各種各樣的導航，那我們該如何為自己的項目選擇導航呢？
根據筆者的經驗，在選擇導航方面，有以下7條原則：
- 系統層級簡單，功能模塊較少時，使用頂部菜單。頂部菜單符合“F”型視覺動線。
- 當系統層架比較復雜，且功能模塊較多時，使用側邊欄菜單。豎向排列的結構可以收納更多的功能。
- 使用側邊欄時，如果二級菜單內容較多，為了更好的用戶體驗，可以采用側邊欄左右結構的導航。
- 使用側邊欄時，為了讓頁面更加簡潔，可以采用側邊欄選項結構或導航收縮功能。
- 如果系統層架非常復雜，包含功能非常多，可以使用頂級菜單+側邊欄菜單的混合使用方式?？梢允占{更多的功能。
- 當需要設置一些全局輔助功能時，可以使用浮標導航的方式。
- 如果是新系統上線，請遵循以上6條原則。如果是老系統的新功能上線，還需要考慮到已有用戶的使用習慣。盡量延續老系統的導航結構。
帶著這七條原則，再回頭看看那各種各樣的導航，有沒有一種盡在掌握的感覺？
五、小結
古語云：“擇其重者而先為之”。先把重要的事情做好，再開始后面的工作。一個適合的導航，是產品成功的開始。
熟練掌握B端組件，打好扎實的基本功，你的B端之路會走的更加平穩、從容。
這是《好玩的B端組件》的第二篇文章，希望對你有用。
相關閱讀：
專欄作家
原木森林，人人都是產品經理專欄作家。專注于用戶增長相關的邏輯、方法和案例分享。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
感謝分享，很實用