從這篇開始，我們就要對(duì) B 端一些常見的復(fù)雜組件進(jìn)行解析了。首先要說的是導(dǎo)航欄，雖然前面控件設(shè)計(jì)部分講了一些，但顯然它包含的細(xì)節(jié)遠(yuǎn)不止那么一點(diǎn)。

B端導(dǎo)航欄的認(rèn)識(shí)

B 端導(dǎo)航欄，是 B 端項(xiàng)目最重要的模塊（沒有之一）。一個(gè)優(yōu)秀的 B 端導(dǎo)航欄，可以清晰地連接項(xiàng)目的所有功能、模塊，讓訪問者高效的在模塊間穿梭。

通常，在進(jìn)行具體頁面設(shè)計(jì)的時(shí)候，我們第一個(gè)設(shè)計(jì)的模塊也是導(dǎo)航。在主流的頁面框架中，導(dǎo)航分為兩種，頂部導(dǎo)航和側(cè)邊導(dǎo)航。

有很多 B 端產(chǎn)品官網(wǎng)使用的頂部導(dǎo)航，并不能作為管理系統(tǒng)導(dǎo)航，僅僅是一般網(wǎng)站導(dǎo)航。比如阿里云或騰訊云官網(wǎng)上方的導(dǎo)航。

這類導(dǎo)航主要應(yīng)用在企業(yè)官網(wǎng)中，通過比較密集的信息密度，將提供的產(chǎn)品或服務(wù)全部羅列出來。

而側(cè)邊欄雖然可以做不少花哨的樣式，但信息密度顯然無法和頂部導(dǎo)航欄相提并論。

頂部導(dǎo)航的特征需要鼠標(biāo)懸浮展開分類面板，通過收納大量下級(jí)菜單，來提升用戶的 “檢索” 效率。而用戶在這些菜單間跳轉(zhuǎn)切換的頻率不會(huì)太高。

側(cè)邊欄導(dǎo)航的特征則是更直接，包含的菜單數(shù)量不會(huì)太多，用來提升用戶的 “跳轉(zhuǎn)” 效率。滿足用戶高頻的模塊跳轉(zhuǎn)切換需求。

側(cè)邊欄的設(shè)計(jì)也包含兩種形式，細(xì)欄和寬欄。

細(xì)欄主要突出圖標(biāo)，應(yīng)用在模塊數(shù)量不多的情況，也為內(nèi)容區(qū)域騰更多控件出來。比如 Teambition、百度云等產(chǎn)品。

寬欄則是比較安全的設(shè)計(jì)形式，兼容性較好，不管是模塊數(shù)量多還少都能用。但相應(yīng)的，它會(huì)一定程度上占用控件減少內(nèi)容區(qū)域面積。

在一般項(xiàng)目中，只要用好側(cè)邊欄的設(shè)計(jì)即可。頂部導(dǎo)航在管理界面中的應(yīng)用多為混合場(chǎng)景，用來切換比側(cè)邊欄更高級(jí)的分類頁面。比如騰訊云內(nèi)部頁面中，切換業(yè)務(wù)模塊使用頂部導(dǎo)航的展開面板，業(yè)務(wù)下級(jí)模塊則在側(cè)邊欄。

B端導(dǎo)航的規(guī)劃

導(dǎo)航欄設(shè)計(jì)，必然要滿足 “導(dǎo)航” 這個(gè)核心目標(biāo)。組件的樣式、交互必須為功能服務(wù)，但很多新手只考慮樣式。

通常情況下，導(dǎo)航是反映項(xiàng)目功能模塊的入口，產(chǎn)品中包含多少模塊、子模塊，就會(huì)有序的布置到導(dǎo)航里面。那么問題來了，項(xiàng)目到底包含了多少模塊和子模塊？哪些是要放進(jìn)導(dǎo)航里的？

在之前思維導(dǎo)圖應(yīng)用的分享中，有一個(gè)非常重要的產(chǎn)品輸出類型，叫 —— 功能結(jié)構(gòu)地圖。解釋了不同功能層級(jí)的結(jié)構(gòu)和從屬關(guān)系，以及項(xiàng)目中總共包含了哪些頁面。

它是制定導(dǎo)航內(nèi)容的主要依據(jù)，但并不代表里面出現(xiàn)的每一個(gè)節(jié)點(diǎn)頁面都要放進(jìn)導(dǎo)航中。

設(shè)計(jì)師展開導(dǎo)航設(shè)計(jì)前，也需要使用思維導(dǎo)圖工具，再把需要展示出來的內(nèi)容和結(jié)構(gòu)梳理一遍。否則，面對(duì)模塊數(shù)量較多，層級(jí)超過兩級(jí)的導(dǎo)航就必然手忙腳亂。

比如騰訊云直播和短書的側(cè)邊欄層級(jí)結(jié)構(gòu)：

這么看起來很清晰對(duì)吧？但留給設(shè)計(jì)的坑是，并不是每個(gè)層級(jí)，它們都可以點(diǎn)擊，都具備跳轉(zhuǎn)功能。我們來看看實(shí)際的實(shí)現(xiàn)的效果。

也就是說，在導(dǎo)航欄的導(dǎo)航選項(xiàng)中，并不是所有的選項(xiàng)都是用來跳轉(zhuǎn)的，它們是用來輔助區(qū)分內(nèi)容和用來展開的。

所以，我們要在思維導(dǎo)圖階段，根據(jù)實(shí)際場(chǎng)景的需要，對(duì)每一個(gè)導(dǎo)航信息點(diǎn)進(jìn)行標(biāo)注，明確它們?cè)诤罄m(xù)設(shè)計(jì)中包含的作用。

同時(shí)，還有一個(gè)需要注意的事情，就是是否為導(dǎo)航欄增加響應(yīng)式適配。即窄屏的情況下，通常是將導(dǎo)航欄縮短，只保留圖標(biāo)的方案。

把這些內(nèi)容定好，就可以進(jìn)入我們具體的設(shè)計(jì)環(huán)節(jié)了。

導(dǎo)航欄的設(shè)計(jì)落地

整理好上方的內(nèi)容層級(jí)，到具體設(shè)計(jì)步驟里，首先要做的，就是制定出一個(gè)能滿足層級(jí)顯示和操作的交互結(jié)構(gòu)出來。

再整理一遍，側(cè)邊欄的內(nèi)容包含：

• 不可點(diǎn)擊的分類標(biāo)題
• 可以展開的一級(jí)分類
• 可以實(shí)現(xiàn)跳轉(zhuǎn)的一級(jí)分類
• 可以點(diǎn)擊的二級(jí)分類

而可交互的元素，顯然是有對(duì)應(yīng)交互狀態(tài)的，那么對(duì)應(yīng)的交互狀態(tài)就包括：

• 鼠標(biāo)懸浮一級(jí)菜單樣式
• 鼠標(biāo)懸浮二級(jí)菜單樣式
• 選中一級(jí)分類，一級(jí)分類高亮
• 展開一級(jí)并選中二級(jí)分類，二級(jí)分類高亮

那么，先用原型做個(gè)示意，它的狀態(tài)包含了默認(rèn)、選中一級(jí)、選中二級(jí)三種情況：

在實(shí)際設(shè)計(jì)環(huán)節(jié)里，最難受的事情就是一級(jí)菜單有的用來展開，有的可以選中，怎么區(qū)分？而一二級(jí)菜單懸浮、選中是否要統(tǒng)一樣式？怎么保證一致性？

如果要統(tǒng)一一二級(jí)菜單的選中樣式，那么設(shè)計(jì)過程中，就要保證一二級(jí)菜單實(shí)際占用空間區(qū)域是一致的，間距也進(jìn)行統(tǒng)一，才能合理添加懸浮和選中效果。

如果不對(duì)一二級(jí)菜單統(tǒng)一懸浮和顯示樣式，區(qū)分展示，可以不統(tǒng)一菜單的實(shí)際區(qū)域和高度。但是，這樣的導(dǎo)航要設(shè)計(jì)好更困難一點(diǎn)。如果不統(tǒng)一交互效果，那么就盡量保證其中一級(jí)懸浮和選中采取背景填充，另一級(jí)僅僅是文字樣式變更。

把要使用哪種方案確定下來，然后再去優(yōu)化細(xì)節(jié)，添加對(duì)應(yīng)的圖標(biāo)內(nèi)容和優(yōu)化字體、分割線等等。

我們?cè)谏厦嬗玫陌咐壿媽蛹?jí)是 3 級(jí)，但是有的項(xiàng)目中，包含的可能有 4 級(jí)、5 級(jí)，那么必然會(huì)呈現(xiàn)出更復(fù)雜的交互體系。

常見的做法，就是將側(cè)邊欄做成兩列，一列是頂級(jí)菜單，一列是其它次級(jí)菜單，類似有贊的這種做法。層級(jí)越多帶來的挑戰(zhàn)也就越大。

導(dǎo)航的設(shè)計(jì)，對(duì)細(xì)節(jié)調(diào)節(jié)并不僅僅是為了好看，而是提供更直觀的交互和一致性。僅僅完成樣式依舊是不夠的，具體使用上還可能會(huì)碰到什么問題我們要盡可能多進(jìn)行思考。

比如：

• 原設(shè)計(jì)中展開 1 級(jí)分類只能展開一個(gè)，開啟第二個(gè)就會(huì)關(guān)閉第一個(gè)，如果我們改成展開不關(guān)閉會(huì)又什么區(qū)別呢？
• 點(diǎn)擊頁面跳轉(zhuǎn)以后，除了選中的二級(jí)菜單前面展開的還展開嗎？
• 高度超出一屏高以后怎么顯示，如果滾動(dòng)的話跳轉(zhuǎn)后顯示在哪里？

這樣的問題，就留給大家自己思考了。

結(jié)尾

導(dǎo)航的設(shè)計(jì)細(xì)節(jié)是很次要的因素（雖然對(duì)整體樣式很重要），重點(diǎn)是給出合理的信息展示和交互方法。如果導(dǎo)航不能幫助用戶快速、簡(jiǎn)潔的進(jìn)行頁面的選擇和跳轉(zhuǎn)，即使做的再好看也是一個(gè)失敗的導(dǎo)航。

本次分享到這里結(jié)束，我們下篇再賤～

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」