hello各位在B端奮斗的小伙伴們，你是否會(huì)時(shí)常因?yàn)槊鎸?duì)導(dǎo)航多種多樣的形式從而面對(duì)需求時(shí)無(wú)從下手，你又是否因?yàn)殡m然見過了很多的案例仍然不得導(dǎo)航設(shè)計(jì)的要領(lǐng)和精髓，沒關(guān)系，今天我們就一起來解決這個(gè)在B端設(shè)計(jì)中困擾我們多時(shí)的難題，從交互的角度結(jié)合案例對(duì)導(dǎo)航進(jìn)行一個(gè)立體的剖析

如果你準(zhǔn)備好了那么就請(qǐng)系上安全帶現(xiàn)在就發(fā)車

要探討一個(gè)概念那么首先需要知道的是其精準(zhǔn)的定義，才能展開研究，而所謂的導(dǎo)航（Navigation）的精準(zhǔn)定義可以闡述為：是一種對(duì)信息的分類，幫助用戶找到想要的信息、完成預(yù)期的任務(wù)

如果你覺得這個(gè)定義很抽象，那么不妨從這個(gè)角度去理解，如果說任何界面上的功能都能夠找到在我們物理世界的隱喻的話，那么導(dǎo)航映射的就是我們物理世界中的路牌、導(dǎo)覽、線路示意圖等，因?yàn)榱⒆阌谄涔δ芏?，?dǎo)航的作用用一種大白話的說法就是：告訴用戶你從哪里來，你在哪里，你可以去哪里

由此我們對(duì)導(dǎo)航有了一個(gè)較為準(zhǔn)確的把控，那么請(qǐng)?jiān)谧母魑豢焖倩卮鹞乙粋€(gè)問題，你能夠告訴我以上6個(gè)內(nèi)容那些不是導(dǎo)航嗎？

3

2

1

OK公布答案，如果你的答案是2和6那么恭喜你，你對(duì)導(dǎo)航的理解是較為優(yōu)秀的，2和6的名稱大家想必也不陌生那就是：菜單，但是不夸張的說日常的工作中仍舊有不小數(shù)目的一波同學(xué)搞不清楚這二者的區(qū)別，那么如何對(duì)二者進(jìn)行一個(gè)有效的區(qū)分呢

同樣是從定義來入手，參照前面我們給導(dǎo)航進(jìn)行的定義方式，菜單就是：是一種對(duì)動(dòng)作的分類和集合，

幫助用戶快速達(dá)到某個(gè)功能,也就是說當(dāng)你對(duì)菜單的某一個(gè)欄目進(jìn)行點(diǎn)擊時(shí)會(huì)立馬生成一個(gè)具體的動(dòng)作，而導(dǎo)航則是對(duì)信息的分類與合集

那么明白了這點(diǎn)我們就可以對(duì)導(dǎo)航進(jìn)行分類了，提到導(dǎo)航的分類大家一定會(huì)脫口而出一堆詞匯如：頂部導(dǎo)航、底部導(dǎo)航、左側(cè)導(dǎo)航、舵式導(dǎo)航、標(biāo)簽導(dǎo)航、菜單導(dǎo)航……沒錯(cuò)這的確是一種分類，但他只是導(dǎo)航在外觀這個(gè)維度的分類，并不是我們今天從交互、結(jié)構(gòu)層去討論的重點(diǎn)

而立足于結(jié)構(gòu)來對(duì)導(dǎo)航進(jìn)行分類又將是如何呢？較為科學(xué)的來說是以下幾類：

全局導(dǎo)航

局部導(dǎo)航

輔助導(dǎo)航

內(nèi)嵌導(dǎo)航

友好導(dǎo)航

遠(yuǎn)程導(dǎo)航

下面我們來對(duì)這6類導(dǎo)航進(jìn)行一步一步的具體分析

1.1 全局導(dǎo)航

所謂全局導(dǎo)航是指他可以覆蓋整個(gè)產(chǎn)品的通路，往往表現(xiàn)為產(chǎn)品的一級(jí)分類（而且大部分情況都是一級(jí)分類），他不一定包含全局信息，但是一定可以讓用戶可以去到其目標(biāo)的關(guān)鍵節(jié)點(diǎn)

1.2 局部導(dǎo)航

所謂局部導(dǎo)航是指在同一個(gè)框架中，可以到這個(gè)節(jié)點(diǎn)上的上下級(jí)通路，他一定存在于嚴(yán)格的父子級(jí)關(guān)系中

1.3 輔助導(dǎo)航

所謂輔助導(dǎo)航就是提供用戶在全局/局部導(dǎo)航不可達(dá)到相關(guān)內(nèi)容的快捷途徑（這個(gè)快捷途徑在本產(chǎn)品內(nèi)）

1.4 內(nèi)嵌導(dǎo)航

所謂內(nèi)嵌導(dǎo)航也叫上下文導(dǎo)航，是指嵌入頁(yè)面自身內(nèi)容的導(dǎo)航，通常同在上下文超鏈接、引導(dǎo)搜索等

1.5 友好導(dǎo)航

所謂友好導(dǎo)航是指它可以為用戶提供一個(gè)便利的前進(jìn)途徑，在需要的時(shí)候能夠找到入口信息，通常在不需要的時(shí)候成隱藏狀態(tài)

1.6 遠(yuǎn)程導(dǎo)航

所謂遠(yuǎn)程導(dǎo)航是指不包含在產(chǎn)品結(jié)構(gòu)中，以獨(dú)立的方式存在產(chǎn)品內(nèi)，通常表現(xiàn)為網(wǎng)站地圖、索引表（地址選擇、品牌選擇）等

1.7 導(dǎo)航的常用UI表現(xiàn)形式

在從結(jié)構(gòu)的層面了解了導(dǎo)航的基本類型之后,順便給大家提一提導(dǎo)航的外觀，這里并不展開說，大家需要知道的是導(dǎo)航的外觀使用遵循的是“同構(gòu)異型”的準(zhǔn)則，什么意思呢？同樣的結(jié)構(gòu)（比如同一組數(shù)據(jù)集：商品、商品名稱、商品價(jià)格）可以嵌套進(jìn)入不同的外觀如：卡片式、列表、詳情……這個(gè)視具體的業(yè)務(wù)情況、使用場(chǎng)景而定

常用的導(dǎo)航外觀基本分為以上七種外觀即：菜單欄、樹狀表、頂欄、選項(xiàng)卡、面包屑、文字鏈接、步驟

知道了導(dǎo)航的結(jié)構(gòu)分類和使用場(chǎng)景，那么不妨來給大家一些關(guān)于導(dǎo)航本身的小貼士作為原則參考解決大家在實(shí)戰(zhàn)中的一些問題

2.1 導(dǎo)航盡量扁平、保持穩(wěn)定就算要多一次點(diǎn)擊

對(duì)于B端產(chǎn)品來說穩(wěn)定相當(dāng)重要！因?yàn)锽端產(chǎn)品對(duì)于用戶來說使用和學(xué)習(xí)成本、門檻較大，如果你很頻繁地對(duì)其路徑進(jìn)行修改調(diào)整，用戶就會(huì)因?yàn)楫a(chǎn)品不符合操作的習(xí)慣、心智模型對(duì)產(chǎn)品很容易滋生負(fù)面情緒，對(duì)于產(chǎn)品本身來說這樣的傷害是需要盡量避免的

2.2 最好便于拓展

還是從穩(wěn)定的方面來說，我們需要保證的是導(dǎo)航的變化不會(huì)因?yàn)楫a(chǎn)品的變化而發(fā)生很大的變化，舉個(gè)很簡(jiǎn)單的例子就是當(dāng)我們的產(chǎn)品的功能增多時(shí)，尤其是二級(jí)導(dǎo)航的項(xiàng)目增多，導(dǎo)致原來如果是橫向布局的導(dǎo)航不得不改成縱向布局的導(dǎo)航，這就所謂的因?yàn)楫a(chǎn)品的變化發(fā)生很大的變化，所以在選擇導(dǎo)航布局的時(shí)候就需要打下一個(gè)很好的基礎(chǔ)便于日后的拓展

2.3 清晰可見，操作易懂

這是站在一個(gè)外觀和交互共同的層面去看，導(dǎo)航的大小一定要足夠，而且其位置一定要是用戶認(rèn)為足夠清晰的，確保在視覺反饋的的層面對(duì)于用戶來說是友好的，其次就是所有的可交互區(qū)域需要有積極的響應(yīng)，與內(nèi)容區(qū)要有對(duì)比，可以將其稱為界面的熱情度，這也是一個(gè)優(yōu)秀界面的自我修養(yǎng)

2.4 導(dǎo)航項(xiàng)可以重復(fù)

一個(gè)頁(yè)面中允許出現(xiàn)兩個(gè)主導(dǎo)航，同一個(gè)界面中允許出現(xiàn)兩個(gè)同樣的導(dǎo)航項(xiàng)，并不是說一個(gè)項(xiàng)在導(dǎo)航中只能夠出現(xiàn)一次，并沒有那么死板

2.5 不要讓用戶有驚喜

這對(duì)于To B 的設(shè)計(jì)來說十分重要，不同于To C的產(chǎn)品，B端產(chǎn)品的一個(gè)重點(diǎn)就是要符合用戶的預(yù)期，所以我們一定要避免“因?yàn)橛腥に赃@設(shè)計(jì)”這個(gè)思路

2.6 導(dǎo)航的反饋需要保持一致

界面上面所有的界面編排，所有的組件，所有的控件，所有的模式都是可以找到隱喻的，比如文字鏈和帶“跳轉(zhuǎn)”的文字鏈，它代表的隱喻是不一樣的，所以我們就需要賦予其不同的外觀和交互響應(yīng)對(duì)應(yīng)戶進(jìn)行反饋

2.7 導(dǎo)航不一定是有層級(jí)關(guān)系的

回到最初導(dǎo)航的定義，它的本質(zhì)是對(duì)信息進(jìn)行分類，讓用戶快速完成任務(wù)，這也是導(dǎo)航的本職工作，很多時(shí)候不一定要拘泥于這個(gè)項(xiàng)目它應(yīng)該嚴(yán)格存在于哪個(gè)層級(jí)之中這樣的思路進(jìn)行設(shè)計(jì)，而是根據(jù)用戶的需求，如何將這個(gè)項(xiàng)目合理的分類于最適合的集合之中

2.8 按權(quán)重布局的三種導(dǎo)航樣式

這是一個(gè)立足于外觀的點(diǎn)，根據(jù)大量的案例分析和眼動(dòng)測(cè)試，目前市面上最為常見的按照信息權(quán)重布局的導(dǎo)航可分為：橫向式、縱向式、縱橫式，由于這部分我們不展開說，所以直接在上圖整理了每種布局的特征、優(yōu)劣勢(shì)和應(yīng)用場(chǎng)景

知道了上面的分類和注意事項(xiàng)之后，下面我們用一個(gè)具體案例來對(duì)導(dǎo)航的交互層面設(shè)計(jì)進(jìn)行一個(gè)深度體驗(yàn)（因?yàn)榇藘?nèi)容十分精彩也涉及到機(jī)密，所以不在這里做具體展示，以示意的方式來敘述），總共分為六步，看看這是否也是你工作場(chǎng)景中比較頭疼的呢

3.1 搞清楚每一個(gè)導(dǎo)航項(xiàng)的定義

需要搞清楚導(dǎo)航項(xiàng)的定義是因?yàn)閷?dǎo)航項(xiàng)的定義決定了你的目標(biāo)界面是什么，所謂的目標(biāo)界面就是導(dǎo)航所引導(dǎo)你到的哪一個(gè)分類的信息處

所以我們首先先來整理一下導(dǎo)航中每個(gè)導(dǎo)航項(xiàng)的界面定義，這也是我們?nèi)粘９ぷ髦袑?duì)導(dǎo)航梳理十分重要的一步

當(dāng)問題被羅列出來之后我們就會(huì)自然而然的產(chǎn)生各種各樣的疑問，比如導(dǎo)航分類之間存在有的存在流程上的關(guān)系，但是有的分類卻并不屬于流程，這是為什么呢？再比如有的導(dǎo)航分類和導(dǎo)航項(xiàng)之間名字一樣但內(nèi)容卻不一樣這又是為什么呢……（想一想這是不是我們工作中也經(jīng)常遇到的疑問呢）這都是后面我們需要去優(yōu)化的地方

3.2.搞明白用戶的使用路徑

保留住上面的問題，我們來做第二步，這一步我們需要搞明白用戶的使用路徑，因?yàn)檫@樣我們可以很好的給任務(wù)類產(chǎn)品做一級(jí)分類

通過基于不同角色的用戶體驗(yàn)地圖我們可以得出不同的用戶操作路徑，于是便可以很順暢的得出這一套操作流程的大框架

基于業(yè)務(wù)中的任務(wù)鏈路推導(dǎo)出每一步的操作路徑，于是我們就可以將用戶的操作路徑就可以提煉為一級(jí)導(dǎo)航

3.3.區(qū)分一下權(quán)限

得出了一級(jí)導(dǎo)航，下面我需要角色的權(quán)限進(jìn)行一下區(qū)分，這也是B端產(chǎn)品的必備屬性

于是我們?yōu)槊恳粋€(gè)導(dǎo)航項(xiàng)進(jìn)行了角色權(quán)限的梳理對(duì)應(yīng)，那么一級(jí)導(dǎo)航中每個(gè)導(dǎo)航分類所對(duì)應(yīng)的角色也瞬間一目了然，這里面多說一句，當(dāng)用戶用不同權(quán)限的賬號(hào)登錄產(chǎn)品時(shí)，能看到不同的內(nèi)容這才是一個(gè)優(yōu)秀的擁有權(quán)限設(shè)計(jì)的導(dǎo)航

3.4.區(qū)分一下界面數(shù)據(jù)性質(zhì)

到了這一部分對(duì)于一些完全沒有接觸過數(shù)據(jù)的同學(xué)來說理解起來可能會(huì)一些難度，我們首先需要知道的是：“相同的數(shù)據(jù)來源，可以幫我們區(qū)分界面性質(zhì)，而且相同的數(shù)據(jù)來源，往往會(huì)有一組相同的界面來圍繞”

在此需要記住三個(gè)概念：

1.元數(shù)據(jù)：數(shù)據(jù)屬性的信息，用來支持如指示存儲(chǔ)位置、歷史數(shù)據(jù)、資源查找、文件記錄等功能，例如一件商品、一個(gè)客戶

2.記錄集：指定數(shù)據(jù)庫(kù)中檢索到的數(shù)據(jù)集合，例如訂單列表、發(fā)貨列表

3.關(guān)系列表：對(duì)來描述對(duì)象和對(duì)象的關(guān)系，比如你和我是好友，你和我在同一個(gè)企業(yè)微信群

于是我們?yōu)閷?dǎo)航項(xiàng)進(jìn)行數(shù)據(jù)性質(zhì)的區(qū)分歸類，也就是說相同數(shù)據(jù)類型的實(shí)體往往圍繞著某個(gè)元數(shù)據(jù)并且包含系列的界面，當(dāng)我們這里整理完后發(fā)現(xiàn)，相同數(shù)據(jù)性質(zhì)的實(shí)體（這里可以理解為導(dǎo)航項(xiàng)）貌似可以歸類在一起，這是我們作為分類的一個(gè)依據(jù)

根據(jù)相同的數(shù)據(jù)性質(zhì)將導(dǎo)航項(xiàng)歸入應(yīng)該歸入的二級(jí)導(dǎo)航中，此時(shí)不妨和最初的版本進(jìn)行對(duì)比，我們的一級(jí)二級(jí)導(dǎo)航相對(duì)而言已經(jīng)通過改版清晰了很多

3.5.搞明白用戶的使用頻次

這一步其實(shí)是比較好理解的，很簡(jiǎn)單的法則：“高頻次高優(yōu)展示，低頻次降低權(quán)重甚至隱藏”這是針對(duì)于二級(jí)導(dǎo)航中每個(gè)導(dǎo)航項(xiàng)的排布進(jìn)行的設(shè)計(jì)。這里不妨把頻次由高到低量化成為：實(shí)時(shí)關(guān)注、每天關(guān)注、每月關(guān)注、很少使用、極少使用這個(gè)幾個(gè)概念，分別用五角星、三角形、矩形、圓形、菱形進(jìn)行代表

而關(guān)于使用頻次的高低甄別一般我們可以通過用戶調(diào)研和數(shù)據(jù)埋點(diǎn)的兩種常用方式來進(jìn)行，這里并不展開講

于是我們可以將使用頻次作為一列新的參考放入導(dǎo)航項(xiàng)的表格中，瞬間清晰明了

根據(jù)使用頻次調(diào)整每個(gè)導(dǎo)航項(xiàng)的順序

3.6.設(shè)計(jì)合適的導(dǎo)航布局

這一步涉及的就是外觀了，不妨回顧一下2.8中對(duì)于導(dǎo)航的三種常見布局，根據(jù)產(chǎn)品的操作復(fù)雜程度等綜合需求，我們選擇了第二種形式成為最終形式

文章來源：站酷  作者：核糖bro

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)