導(dǎo)語：我們?cè)诔匈徫飼r(shí)，基本是依靠超市的導(dǎo)航系統(tǒng)（導(dǎo)示/包裝/產(chǎn)品特點(diǎn)）以及我們掃描商品的能力來找我們想要的東西。然而網(wǎng)絡(luò)上找東西和真實(shí)世界的不同之處是我們感覺不到物理方位和大小，只能通過一個(gè)個(gè)鏈接觸達(dá)。為了讓用戶“不迷路” ，清晰、一致的導(dǎo)航設(shè)計(jì)尤為重要。下面本文作者結(jié)合實(shí)際工作經(jīng)驗(yàn)來談?wù)凚端導(dǎo)航設(shè)計(jì)。

一、導(dǎo)航作用

中后臺(tái)產(chǎn)品設(shè)計(jì)中導(dǎo)航設(shè)計(jì)尤為重要，基本上是以導(dǎo)航架構(gòu)為基礎(chǔ)，布局內(nèi)容信息。

導(dǎo)航的主要作用為：

1. 確定用戶的位置：B端產(chǎn)品由于業(yè)務(wù)的復(fù)雜性和角色的多樣性，頁面層級(jí)結(jié)構(gòu)較多。清晰的導(dǎo)航設(shè)計(jì)會(huì)告訴用戶“自己在哪里” ，避免用戶迷路；
2. 告訴用戶如何使用網(wǎng)站：晰一致的導(dǎo)航能夠幫助用戶規(guī)劃行程，就像一封詳盡的說明書，起到指示說明作用，能明確地提示用戶從哪里開始，能進(jìn)行哪些操作；
3. 告訴用戶這里有什么：B端產(chǎn)品中，系統(tǒng)架構(gòu)通常通過導(dǎo)航結(jié)構(gòu)劃分，通過層次分級(jí)，導(dǎo)航文案引導(dǎo)可以快速呈現(xiàn)網(wǎng)站層級(jí)和內(nèi)容。

二、幾種常見的導(dǎo)航形態(tài)

“導(dǎo)航”往往承載平臺(tái)的主要欄目，根據(jù)位置劃分為頂部導(dǎo)航、側(cè)邊導(dǎo)航和混合導(dǎo)航。

• 頂部導(dǎo)航：自上而下的頂部布局結(jié)構(gòu)符合用戶的瀏覽習(xí)慣，其排版穩(wěn)定，不受顯示器的影響，在網(wǎng)頁設(shè)計(jì)中較受歡迎。不足之處是橫向布局的拓展性較弱，能夠放置的條目也是有限的。
• 側(cè)邊導(dǎo)航：側(cè)邊導(dǎo)航因其可拓展的布局結(jié)構(gòu)在后臺(tái)類產(chǎn)品中比較受歡迎，它雖占據(jù)頁面主視覺區(qū)，但豎向的布局能夠展示更多條目，當(dāng)每個(gè)分類模塊的數(shù)量較多（條目信息一般遵循5±2原則）可通過收起折疊信息。
• 混合導(dǎo)航：B端系統(tǒng)設(shè)計(jì)中，往往根據(jù)不同任務(wù)功能，選用合適的導(dǎo)航布局。混合導(dǎo)航有極強(qiáng)的包容性，可以承載更多復(fù)雜的邏輯關(guān)系，更受系統(tǒng)設(shè)計(jì)者喜愛。如 teambition中，選用上下混合導(dǎo)航，頂部導(dǎo)航包括站點(diǎn)ID、搜索、實(shí)用工具等全局功能。把與用戶常用的功能如任務(wù)/消息/日期/設(shè)置放在頂部導(dǎo)航中，方便查閱和管理。側(cè)邊導(dǎo)航根據(jù)我的項(xiàng)目和任務(wù)權(quán)重分組展示。

三、確定導(dǎo)航菜單的深度和廣度

B端導(dǎo)航設(shè)計(jì)時(shí)，面對(duì)復(fù)雜多樣的任務(wù)，當(dāng)遇到導(dǎo)航的廣度過多（平級(jí)功能太多）或?qū)蛹?jí)過深時(shí)怎么辦？

• 導(dǎo)航菜單廣度：導(dǎo)航菜單每一層級(jí)包含的菜單數(shù)目為廣度，數(shù)目越多，廣度越大；
• 導(dǎo)航菜單深度：導(dǎo)航菜單層級(jí)的數(shù)目為深度，層級(jí)越多，深度越大。

1. 廣度

這里用到了《簡(jiǎn)約至上：交互式設(shè)計(jì)四策略》- 合理刪除、分層組織、適時(shí)隱藏和巧妙轉(zhuǎn)移 的四種方法。

1）“刪除”

• 刪功能：平庸的產(chǎn)品設(shè)計(jì)往往堆砌更多功能而忽視用戶主要目標(biāo)。當(dāng)發(fā)現(xiàn)功能與用戶目標(biāo)相背時(shí)，可以主動(dòng)和產(chǎn)品溝通，刪除冗余功能，尋求滿足用戶目標(biāo)的精簡(jiǎn)方案。
• 簡(jiǎn)化樣式：刪除多余的文字，精簡(jiǎn)按鈕樣式，去掉分散注意力的元素減少用戶認(rèn)知負(fù)擔(dān)。

2）“分組”

在視覺層面，信息分層是確保頁面清晰的常用策略。這種策略同樣適用于功能層面，如下圖，阿里云產(chǎn)品導(dǎo)航設(shè)計(jì)中，把不同的產(chǎn)品根據(jù)服務(wù)內(nèi)容分組，方便查閱和檢索。

3）“隱藏”

阿里云和騰訊云的服務(wù)眾多，涉及幾百個(gè)產(chǎn)品。這時(shí)隱藏是一種很好的方式，當(dāng)用戶鼠標(biāo)懸停時(shí)會(huì)拓展出臨時(shí)模態(tài)選項(xiàng)區(qū)域，可以充分利用屏幕空間。

如下圖：

4）“轉(zhuǎn)移”

當(dāng)一個(gè)功能既不能刪除、分組、也不能隱藏，就可以用轉(zhuǎn)移的方法。包括：設(shè)備轉(zhuǎn)移、軟件轉(zhuǎn)移、向用戶轉(zhuǎn)移。

• 設(shè)備轉(zhuǎn)移：因屏幕大小影響一些產(chǎn)品的高級(jí)功能在手機(jī)端往往進(jìn)行簡(jiǎn)化隱藏，高級(jí)的功能只在電腦端呈現(xiàn)；
• 軟件之間轉(zhuǎn)移：tableau數(shù)據(jù)分析軟件把數(shù)據(jù)準(zhǔn)備階段的功能進(jìn)行簡(jiǎn)化，抽離出制作數(shù)據(jù)清洗的軟件—Tableau Prep，既滿足了用戶數(shù)據(jù)準(zhǔn)備階段的需求，用戶又可單獨(dú)購買產(chǎn)品的服務(wù)，提高公司收益；
• 向用戶轉(zhuǎn)移：這里的向用戶轉(zhuǎn)移可以理解為“用戶自定義”，產(chǎn)品提供的功能眾多，但常用的功能往往就幾個(gè)，如下圖，騰訊云產(chǎn)品列表提供自定義常用軟件快捷入口功能，體驗(yàn)感更佳。

2. 深度

1）根據(jù)用戶角色需求和使用場(chǎng)景梳理產(chǎn)品架構(gòu)

當(dāng)發(fā)現(xiàn)功能層級(jí)過深時(shí)，可以根據(jù)用戶角色和使用場(chǎng)景給功能分組，如：哪些功能需求是相互關(guān)聯(lián)在一起的，（創(chuàng)建會(huì)議邀請(qǐng)時(shí)，需要看到與會(huì)人的日歷是否有排期）這里就需要考慮用同一個(gè)頁面視圖來集成所有功能。

2）運(yùn)用面包屑導(dǎo)航

多級(jí)導(dǎo)航運(yùn)用“面包屑”： 一般頁面層級(jí)多于2層，可嘗試用面包屑導(dǎo)航，它的優(yōu)勢(shì)是可以看到當(dāng)前頁面的位置軌跡，且可返回到任意想要返回的位置。

通過加背景顏色和文字粗細(xì)等視覺表現(xiàn)手法突出當(dāng)前所在頁面

3）減少頁面跳轉(zhuǎn)

當(dāng)頁面功能存在關(guān)聯(lián)性時(shí)候，可以用覆蓋層彈窗來減少跳轉(zhuǎn)。如下圖，用戶查看模型訓(xùn)練任務(wù)列表詳情展示采用覆層彈窗，減少頁面層級(jí)的跳轉(zhuǎn)。

四、導(dǎo)航顏色注意事項(xiàng)

我們先記住一個(gè)重要的原則：讓導(dǎo)航在每一頁上以一致的外觀出現(xiàn)在相同的位置，會(huì)讓用戶立即確認(rèn)自己仍然待在這個(gè)網(wǎng)站上。

1. 導(dǎo)航用色與品牌匹配

選取品牌色是產(chǎn)品UI設(shè)計(jì)的重要步驟，品牌色的選用要符合產(chǎn)品定位和使用人群的特點(diǎn)。我們需要了解各種顏色的情感屬性，然后根據(jù)產(chǎn)品使用人群的特點(diǎn)選中適合的色相，在色相基礎(chǔ)上調(diào)整亮度和飽和度。

注意：

• 這里要考慮色盲和色弱用戶視覺體驗(yàn)，可以用色彩工具查看選取的色彩是否對(duì)色彩障礙用戶同樣友好。
• 盡量讓產(chǎn)品在不佳的環(huán)境中視覺感受良好，有些色彩往往在Mac下展示很漂亮，在其他低分辨率的設(shè)備下容易偏色。設(shè)計(jì)師需要考慮不同設(shè)備下產(chǎn)品顏色的展示效果，做綜合挑選和評(píng)估。

推薦色彩對(duì)比工具：

• https://color.adobe.com
• WebAIM’s Color Contrast Checker

2. 避免用高飽和度和亮度的顏色

B端產(chǎn)品設(shè)計(jì)中，用戶往往需要長(zhǎng)時(shí)間專注工作內(nèi)容，而明亮的導(dǎo)航顏色會(huì)使人感到視覺疲勞，不利于導(dǎo)航層級(jí)和內(nèi)容更好地展示，因此應(yīng)避免使用高亮度和飽和度的顏色。這里舉個(gè)反例：釘釘6.0版本架構(gòu)布局做了調(diào)整，雖有可取之處， 但導(dǎo)航顏色飽和度與之前相比變高了，看起來很搶眼。

3. 可嘗試用帶有色相的深灰色

企業(yè)類平臺(tái)產(chǎn)品，往往以pc端用戶居多。從屏幕分辨率角度考慮，導(dǎo)航的顏色盡量選用深色，這樣在不同終端實(shí)際展現(xiàn)效果的包容性比較強(qiáng)。也有利于系統(tǒng)層級(jí)的展示，從而更好地突出內(nèi)容。

導(dǎo)航如高速路上的指示標(biāo)，指引用戶方向并承載產(chǎn)品內(nèi)容。產(chǎn)品擁有清晰、一致的導(dǎo)航，防止用戶迷路，是良好產(chǎn)品體驗(yàn)的基礎(chǔ)，需要每位產(chǎn)品設(shè)計(jì)師精心打磨。

本文由@小設(shè)計(jì)? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自pexels，基于CC0協(xié)議