用一個實戰案例，幫你學會優化頂部導航設計

網站頂部導航欄，通常稱為 header，是用戶進入網站后最先看到的地方，決定著用戶對網頁的第一印象，其重要性不言而喻，頂部導航被廣泛應用在各個領域的網站當中，這類導航可以一目了然的讓用戶迅速尋找到所需要的目標。

本文將以競品分析的方式優化產品頂部結構。

更多導航設計干貨：

一、競品選擇

以下依次為 SMB、北森、Moka、飛書，header 主要展示內容有：品牌 logo、菜單、登錄/注冊、留資入口、聯系方式及其他入口；

主要菜單數量分別為 SMB 為 7 個、北森為 6 個、Moka 為 5 個、飛書為 5 個；

整體都沒超過 7 個，符合 7±2 法則，全部產品以聚合下拉的形式，信息整理更加簡約，用戶能夠能更加直觀清晰的查找自己想要的內容。

注：7±2 法則又稱米勒定律，由美國心理學家 George A. Miller1956 年發布的論文提出，他發現，人類頭腦最好的狀態能記憶含有 7(±2)項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。

二、主要菜單展開形式

1. SMB

菜單進行分類整理，以下拉展開的形式，展開樣式為 2.5D 圖標+標題+說明文案、圖標+名稱以及純文字 3 種形式展示；

優點：

對所有菜單進行分類，既有“保留”也有“舍棄”，分類的形式整體信息層級清晰，清爽簡潔，用戶的注意力可以更好的集中在重要信息上，隱藏的功能也能根據分類隨時隨地呈現出來；

缺點：

同樣的位置展開樣式有 3 種，2.5D 圖標+標題+說明文案、圖標+名稱、純文字 3 種形式；從表現層來看，高度、寬度不夠統一，整體缺少統一性，方案展開后間距較擁擠，與幫助展開間距寬度也不夠統一，整體缺乏完善的規范性。

2. 北森

內容很多，通過信息梳理，將菜單分類整理，展開樣式統一為分類標題+具體標題+說明文案；

優點：

在結構層和框架層進行了清晰的分類，整體信息展示清晰，比較統一，不會額外增加用戶的學習成本；

公司相關的信息統一入口，分類展示公司介紹、動態及招聘信息，清晰簡潔，功能與統一相輔相成；

菜單展開右側展示最新的文章、攻略等文章鏈接、以及下載入口，導航的分類和展示深入洞察了用戶心理及業務需求。

缺點：

在整體寬度適配上較死板，小于 1200 寬度時未做精細的交互適配，完全隱藏了菜單，需要點擊浮窗展開，對小屏用戶不夠友好。

3. Moka

導航在結構層和框架層做了信息梳理，菜單展開整體是按分類展示，標題+具體產品名稱，或標題+具體企業 logo 展示，右側展示鏈接文章，推薦案例等

優點：

產品功能按系統分類，右側展示相關的鏈接，解決方案和客戶案例除了行業分類，在每個行業類別里加入了雇主品牌的露出，巧妙的結合，深入洞察了用戶心理，以品牌做行業背書，更加具有信服力。

缺點：

產品功能展開寬度大于 1200，在小屏幕上會出現展示不全的問題；且所有的展開寬度及高度不夠統一，以及文字大小不統一的情況；

整體寬度也未做精細的適配，小于 1280 寬度時完全截斷的形式對小屏用戶不夠友好。

三、產品現狀

1. header 設計

展示內容有：品牌 logo、主站跳轉入口、菜單、登錄/注冊、留資入口、聯系方式；

主要菜單為 8 個，所有產品以羅列的形式全部展示，整個 header 展示內容較多，導致每個選項間間距過密造成視覺負擔；

“牛客招聘研究院”“用詞容易增加用戶的認知成本，不容易記憶；

“免費試用”進入后為留資頁面，不能馬上試用，文案可能會造成與預期不符。

2. 主要菜單展開形式

菜單未分類整理，所有產品以羅列的形式展示；

信息未根據產品自身實際情況取舍，全部放在導航區增加用戶的使用負擔，注意力會被分散；

“牛客招聘研究院”展開有更多內容，但缺少視覺指引，不易發現，且樣式以普通下拉菜單的樣式，缺少主次

四、改進建議

1. header

在官網設計中，根據 7±2 法則，頂部導航欄在頁面初始狀態下，菜單數量基本都會保持在 5-9 個。

定律本身沒有問題，但要善于與產品本身的特征結合運用，如 7±2 法則運用到產品設計中，就需要與產品的功能特征、交互特征、設計規范結合思考。

如上圖數據展示，大部分人在短時間的信息容量都可以到達 7 條信息，然而從第 5 條信息開始，已經有一小部分人感受到信息負擔，能達到 7 條信息以上的人也是非常少的一部分。

2. 改進建議

從產品為多數人而設計的理念出發，信息過度加載會增加用戶的使用負擔，注意力會被分散，應該結合 7±2 法則的設計特征，web 端頂部欄選項卡數量不超過 7 個，視覺和體驗上才最佳。

并且 7 條以內找某個選項或信息條目會更有效率，過多選項或信息條目可能需要更多的時間去操作；

因此，在設計的時候我們要根據產品自身的實際情況進行取舍，整體菜單數量應控制在 7 個及以內。

3. 方案嘗試

歡迎關注作者微信公眾號：「防脫發藥水」