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

本文將以競品分析的方式優(yōu)化產(chǎn)品頂部結(jié)構(gòu)。

一、競品選擇

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

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

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

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

二、主要菜單展開形式

1. SMB

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

2. 北森

內(nèi)容很多，通過信息梳理，將菜單分類整理，展開樣式統(tǒng)一為分類標(biāo)題+具體標(biāo)題+說明文案；

優(yōu)點(diǎn)：

在結(jié)構(gòu)層和框架層進(jìn)行了清晰的分類，整體信息展示清晰，比較統(tǒng)一，不會額外增加用戶的學(xué)習(xí)成本；

公司相關(guān)的信息統(tǒng)一入口，分類展示公司介紹、動態(tài)及招聘信息，清晰簡潔，功能與統(tǒng)一相輔相成；

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

缺點(diǎn)：

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

3. Moka

導(dǎo)航在結(jié)構(gòu)層和框架層做了信息梳理，菜單展開整體是按分類展示，標(biāo)題+具體產(chǎn)品名稱，或標(biāo)題+具體企業(yè) logo 展示，右側(cè)展示鏈接文章，推薦案例等

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

三、產(chǎn)品現(xiàn)狀

1. header 設(shè)計

展示內(nèi)容有：品牌 logo、主站跳轉(zhuǎn)入口、菜單、登錄/注冊、留資入口、聯(lián)系方式；

主要菜單為 8 個，所有產(chǎn)品以羅列的形式全部展示，整個 header 展示內(nèi)容較多，導(dǎo)致每個選項(xiàng)間間距過密造成視覺負(fù)擔(dān)；

"牛客招聘研究院""用詞容易增加用戶的認(rèn)知成本，不容易記憶；

"免費(fèi)試用"進(jìn)入后為留資頁面，不能馬上試用，文案可能會造成與預(yù)期不符。

2. 主要菜單展開形式

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

信息未根據(jù)產(chǎn)品自身實(shí)際情況取舍，全部放在導(dǎo)航區(qū)增加用戶的使用負(fù)擔(dān)，注意力會被分散；

"?？驼衅秆芯吭?quot;展開有更多內(nèi)容，但缺少視覺指引，不易發(fā)現(xiàn)，且樣式以普通下拉菜單的樣式，缺少主次

四、改進(jìn)建議

1. header

在官網(wǎng)設(shè)計中，根據(jù) 7±2 法則，頂部導(dǎo)航欄在頁面初始狀態(tài)下，菜單數(shù)量基本都會保持在 5-9 個。

定律本身沒有問題，但要善于與產(chǎn)品本身的特征結(jié)合運(yùn)用，如 7±2 法則運(yùn)用到產(chǎn)品設(shè)計中，就需要與產(chǎn)品的功能特征、交互特征、設(shè)計規(guī)范結(jié)合思考。

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

2. 改進(jìn)建議

從產(chǎn)品為多數(shù)人而設(shè)計的理念出發(fā)，信息過度加載會增加用戶的使用負(fù)擔(dān)，注意力會被分散，應(yīng)該結(jié)合 7±2 法則的設(shè)計特征，web 端頂部欄選項(xiàng)卡數(shù)量不超過 7 個，視覺和體驗(yàn)上才最佳。

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

因此，在設(shè)計的時候我們要根據(jù)產(chǎn)品自身的實(shí)際情況進(jìn)行取舍，整體菜單數(shù)量應(yīng)控制在 7 個及以內(nèi)。

3. 方案嘗試

作者：愛吃貓的魚___