本文作者依據(jù)工作中實(shí)踐的所思所想，并結(jié)合案例等分享了web導(dǎo)航相關(guān)知識(shí)，供大家一同參考和學(xué)習(xí)。

上次寫(xiě)了一篇概述B端產(chǎn)品經(jīng)理的三項(xiàng)基本功的文章（B端產(chǎn)品經(jīng)理要掌握的硬核基本功）后，很多朋友私信說(shuō)想讓我寫(xiě)寫(xiě)導(dǎo)航，想來(lái)網(wǎng)上跟導(dǎo)航有關(guān)的文章也比較少，這次就聊聊web導(dǎo)航，也讓各位產(chǎn)品經(jīng)理多一個(gè)參考。

我一直都認(rèn)為產(chǎn)品經(jīng)理是一個(gè)非常專(zhuān)業(yè)的職業(yè)，很多事情都有一套方法論，導(dǎo)航設(shè)計(jì)也不例外，本文既然要詳細(xì)聊聊導(dǎo)航，那就得把跟導(dǎo)航有關(guān)的所有事情都聊清楚，各位看官不要急，我們先從信息的最初來(lái)源——元數(shù)據(jù)講起。

一、從信息元數(shù)據(jù)說(shuō)起

元數(shù)據(jù)這個(gè)概念相信所有PM都不陌生，在大家的潛意識(shí)里，好像元數(shù)據(jù)這個(gè)玩意是后端開(kāi)發(fā)才需要了解的。

但是我認(rèn)為，一個(gè)PM應(yīng)該比開(kāi)發(fā)更了解元數(shù)據(jù)，不是了解各個(gè)接口的每行代碼如何寫(xiě)，而是要了解這個(gè)系統(tǒng)有現(xiàn)在有哪些數(shù)據(jù)，是如何組織的，將來(lái)要有哪些數(shù)據(jù)？

元數(shù)據(jù)是信息的信息，可以理解為一塊塊磚，在搭建一個(gè)系統(tǒng)的信息架構(gòu)時(shí)，每一處地方都需要這一塊塊不同的磚來(lái)填充.

元數(shù)據(jù)主要分為三大類(lèi)——固有性元數(shù)據(jù)、管理型元數(shù)據(jù)、描述性元數(shù)據(jù)。

1. 固有性元數(shù)據(jù)是指和信息構(gòu)成有關(guān)的數(shù)據(jù)，比如如一條任務(wù)的ID，一個(gè)視頻文件的大小。
2. 管理性元數(shù)據(jù)是指與信息處理方式有關(guān)的數(shù)據(jù)，比如一條申請(qǐng)的審批狀態(tài)，編輯人賬號(hào)名等。
3. 描述性元數(shù)據(jù)是指對(duì)信息本質(zhì)進(jìn)行描述的數(shù)據(jù)，很多時(shí)候以標(biāo)簽的形式展現(xiàn)，比如你在B站上搜索“騷”，會(huì)出現(xiàn)很多跟“洪世賢”有關(guān)的視頻，說(shuō)明在B站的元數(shù)據(jù)中，“洪世賢”的本質(zhì)是“騷”。

為了讓大家更好的理解三種元數(shù)據(jù)區(qū)別，我舉一個(gè)例子，請(qǐng)看下圖。

上圖是我去年在重慶北站接K總時(shí)用手機(jī)拍的照片，左邊可以很清晰的看出照片的三類(lèi)元數(shù)據(jù)，如果這張照片被上傳到攝影論壇，一個(gè)用戶(hù)要是想找到它，很可能到火車(chē)站標(biāo)簽下尋找，或者直接檢索重慶火車(chē)站，而不是去用ID”6781″去檢索。

這也說(shuō)明了一個(gè)事實(shí)：大家更愿意去使用描述性元數(shù)據(jù)檢索，而不是難以記憶和識(shí)別的固有性元數(shù)據(jù)。

元數(shù)據(jù)是確定信息組織形式最關(guān)鍵的信息，可以把元數(shù)據(jù)看成一個(gè)個(gè)標(biāo)簽，不僅能夠?yàn)楫a(chǎn)品經(jīng)理提供分類(lèi)的依據(jù)，還可以很方便的根據(jù)元數(shù)據(jù)做信息關(guān)聯(lián)。

了解你的元數(shù)據(jù)，是設(shè)計(jì)導(dǎo)航的前提。

二、用戶(hù)是怎樣尋找信息的

導(dǎo)航的目的是幫助用戶(hù)查找信息，那么你有沒(méi)有想過(guò)一個(gè)問(wèn)題——用戶(hù)究竟是怎么查找信息的呢？

一般來(lái)說(shuō)，用戶(hù)查找信息有以下四個(gè)場(chǎng)景。

場(chǎng)景一：用戶(hù)知道想要什么，且知道如何找

對(duì)于C端產(chǎn)品來(lái)說(shuō)，由于同類(lèi)產(chǎn)品對(duì)市場(chǎng)的教育，讓用戶(hù)接觸到你的產(chǎn)品時(shí)就知道如何操作，但是對(duì)于B端產(chǎn)品，基本不會(huì)出現(xiàn)一上手就會(huì)用的情況。

對(duì)于該場(chǎng)景下的用戶(hù)，其實(shí)他們已經(jīng)可以很熟練的使用系統(tǒng)了，此時(shí)在首頁(yè)提供一個(gè)高頻頁(yè)面入口或者一個(gè)搜索更能讓這類(lèi)用戶(hù)心花怒放。

場(chǎng)景二：用戶(hù)知道想要什么，但不知道如何找

這種場(chǎng)景經(jīng)常會(huì)出現(xiàn)，比如用戶(hù)想看知道自己的消費(fèi)記錄，但是不太確定是在哪個(gè)頁(yè)面找。

再舉一個(gè)更直觀的例子，你想要買(mǎi)一個(gè)能頂餓又美味的零食，你該如何鍵入關(guān)鍵詞，或者你該在哪個(gè)頁(yè)面找到它。

這類(lèi)情況就需要通過(guò)優(yōu)化信息元數(shù)據(jù)，增加更多的描述性元數(shù)據(jù)來(lái)解決，淘寶的很多面包商品都有頂餓的標(biāo)簽，直接搜索“頂餓美味”就可以搜出來(lái)。

當(dāng)然，同時(shí)也要注重導(dǎo)航架構(gòu)的優(yōu)化，如果你的很大一部分用戶(hù)都在搜“頂餓美味”，你是否考慮將頂餓美味做為食品下的一個(gè)子類(lèi)目呢？

場(chǎng)景三：用戶(hù)不知道自己想要什么

這種場(chǎng)景在B端很少出現(xiàn)，畢竟使用B端產(chǎn)品的人都是有著明確目的的。但是在C端卻經(jīng)常出現(xiàn)，比如很多人在逛淘寶的時(shí)候可能僅僅是無(wú)聊，而不是因?yàn)樽约合胭I(mǎi)東西。

為了應(yīng)對(duì)這類(lèi)用戶(hù)，就需要搬出C端大殺器——關(guān)聯(lián)導(dǎo)航，就是說(shuō)在瀏覽某一頁(yè)面時(shí)，會(huì)給你推薦相關(guān)的商品或者算法算出你可能會(huì)感興趣的商品，有時(shí)候也叫關(guān)聯(lián)推薦。

關(guān)聯(lián)導(dǎo)航可以使用描述性元數(shù)據(jù)實(shí)現(xiàn)，將有相同標(biāo)簽的商品在商品詳情頁(yè)做推薦展示。

場(chǎng)景四：再次搜索

再次搜索是指用戶(hù)可能想返回去找到他們過(guò)去發(fā)現(xiàn)的某些東西，這個(gè)其實(shí)很好解決，無(wú)非就是一個(gè)瀏覽記錄和合理的結(jié)構(gòu)導(dǎo)航設(shè)置罷了，這個(gè)很多產(chǎn)品都實(shí)現(xiàn)了，有一套比較成熟的解決方案。

只要抓住了以上這四類(lèi)場(chǎng)景，在設(shè)置導(dǎo)航時(shí)，充分考慮用戶(hù)在每個(gè)頁(yè)面會(huì)遇到哪些問(wèn)題，針對(duì)問(wèn)題修改導(dǎo)航的邏輯與布局，導(dǎo)航設(shè)計(jì)其實(shí)是一件很簡(jiǎn)單的事情。

三、結(jié)構(gòu)導(dǎo)航、關(guān)聯(lián)導(dǎo)航與可用性導(dǎo)航

好了，講了這么多，終于說(shuō)到導(dǎo)航了，導(dǎo)航分為三類(lèi)——結(jié)構(gòu)性導(dǎo)航、關(guān)聯(lián)導(dǎo)航、可用性導(dǎo)航。下圖可以很直觀的看出三類(lèi)導(dǎo)航的區(qū)別。

1. 結(jié)構(gòu)性導(dǎo)航

結(jié)構(gòu)性導(dǎo)航表示了網(wǎng)站的層次結(jié)構(gòu)，有全局導(dǎo)航和局部導(dǎo)航兩種，一般展示網(wǎng)頁(yè)主體的信息架構(gòu)，告訴用戶(hù)這個(gè)網(wǎng)站有什么，結(jié)構(gòu)性導(dǎo)航是一個(gè)網(wǎng)站最重要的導(dǎo)航。

全局導(dǎo)航往往都是一級(jí)導(dǎo)航，在大多數(shù)頁(yè)面都會(huì)出現(xiàn)，方便用戶(hù)跳轉(zhuǎn)以及隨時(shí)查看這個(gè)網(wǎng)站有哪些內(nèi)容。

局部導(dǎo)航和全局導(dǎo)航是有層級(jí)關(guān)系的，局部導(dǎo)航幫助用戶(hù)瀏覽到更加特定的頁(yè)面，有的產(chǎn)品也會(huì)把全部的下級(jí)導(dǎo)航都放在全局導(dǎo)航上，鼠標(biāo)畫(huà)上去時(shí)有個(gè)下拉的hover效果，這個(gè)要看具體的業(yè)務(wù)情況。

值得一提的是，全局導(dǎo)航也不是所有頁(yè)面都需要的，比如京東的支付頁(yè)面，在這個(gè)頁(yè)面，產(chǎn)品經(jīng)理只希望用戶(hù)趕快完成支付行為，而不受其他頁(yè)面干擾，所以在這一頁(yè)不應(yīng)該出現(xiàn)全局導(dǎo)航，在這里不支持用戶(hù)跳轉(zhuǎn)到別的地方。

2. 關(guān)聯(lián)導(dǎo)航

關(guān)聯(lián)導(dǎo)航是一種跨越信息架構(gòu)的層次，快速跳轉(zhuǎn)到相關(guān)頁(yè)面的一種導(dǎo)航形式，在B端產(chǎn)品中不多見(jiàn)，但是在C端產(chǎn)品中極其常見(jiàn)，比如在B站上面看漫威蜘蛛俠的視頻，旁邊就有相關(guān)視頻的推薦。

關(guān)聯(lián)導(dǎo)航有兩個(gè)作用：

一是給用戶(hù)提供下一步的內(nèi)容，當(dāng)用戶(hù)看完這個(gè)視頻后，很可能點(diǎn)擊下一個(gè)視頻，這樣就很有可能把一個(gè)5分鐘的訪問(wèn)行為擴(kuò)大到15分鐘，甚至一個(gè)小時(shí)；

另一個(gè)作用是給自己的產(chǎn)品提供了一層“安全網(wǎng)”，如果用戶(hù)對(duì)正在觀看的視頻不感興趣，你覺(jué)得他會(huì)重新回到主頁(yè)再輸入其他關(guān)鍵詞還是會(huì)直接離開(kāi)呢？不要挑戰(zhàn)用戶(hù)的耐性，再給他推薦幾個(gè)，留住他的心。

關(guān)聯(lián)導(dǎo)航的實(shí)現(xiàn)可以通過(guò)增加描述性元數(shù)據(jù)來(lái)實(shí)現(xiàn)，對(duì)于很多相關(guān)的標(biāo)簽，可以建立受控詞匯表來(lái)進(jìn)行關(guān)聯(lián)。

3. 用性導(dǎo)航

可用性導(dǎo)航是指一些幫助提升網(wǎng)站可用性的功能，不是主要功能，但是一個(gè)也不能少，比如賬戶(hù)信息、網(wǎng)站幫助、操作手冊(cè)等。

這些信息有個(gè)通用的慣例，都是放在網(wǎng)站的右上角，各位產(chǎn)品經(jīng)理在設(shè)計(jì)網(wǎng)站的時(shí)候，要注意跟隨慣例，不要讓用戶(hù)摸不著頭腦。

四、一些導(dǎo)航設(shè)計(jì)小技巧

最后給各位聊聊一些導(dǎo)航設(shè)計(jì)的小技巧，都是我在產(chǎn)品設(shè)計(jì)中積累的經(jīng)驗(yàn)，相信能夠讓你在導(dǎo)航設(shè)計(jì)中少踩坑。

1. 一定要明確希望用戶(hù)做什么

在設(shè)計(jì)導(dǎo)航前，產(chǎn)品經(jīng)理應(yīng)當(dāng)好好考慮一下，自己究竟希望用戶(hù)在網(wǎng)站上做什么，希望用戶(hù)四處瀏覽，還是緊盯著手上的任務(wù)，不需要其他的干擾。

比如上文說(shuō)到的B站關(guān)聯(lián)導(dǎo)航和京東的支付頁(yè)面，產(chǎn)品經(jīng)理對(duì)用戶(hù)有著不同的行為期望，所以設(shè)計(jì)出了不同的導(dǎo)航。

2. 不要忽視分頁(yè)導(dǎo)航

分頁(yè)導(dǎo)航主要是針對(duì)表單和過(guò)程設(shè)計(jì)的，在表單或者過(guò)程步驟過(guò)多的時(shí)候需要采用此類(lèi)導(dǎo)航，這時(shí)每頁(yè)內(nèi)容展示量以及是否支持跨頁(yè)跳轉(zhuǎn)是考量的關(guān)鍵。

3. B端隱藏導(dǎo)航最好不要超過(guò)兩級(jí)

隨著各種產(chǎn)品的體驗(yàn)越來(lái)越好，現(xiàn)在的用戶(hù)也變得挑剔，無(wú)法忍受體驗(yàn)不好的產(chǎn)品。

如果你細(xì)心觀察，你會(huì)發(fā)現(xiàn)一般的B端產(chǎn)品的隱藏導(dǎo)航一般不超過(guò)兩級(jí)，加上展示出來(lái)的全局導(dǎo)航，一共不超過(guò)三級(jí)。

層級(jí)越多，用戶(hù)體驗(yàn)越差，如果迫不得已，可以采用一些手段來(lái)優(yōu)化用戶(hù)體驗(yàn)，例如有贊微商城的導(dǎo)航很復(fù)雜，就采用把一二級(jí)導(dǎo)航直接展示出來(lái)的方式來(lái)提升用戶(hù)體驗(yàn)。

4. 水平導(dǎo)航巧用“more”

web端導(dǎo)航有兩種常見(jiàn)的布局形式——水平導(dǎo)航和側(cè)邊導(dǎo)航。

水平導(dǎo)航更方便使用且不會(huì)縮短頁(yè)面寬度，是很多產(chǎn)品都喜歡采用的形式，但是由于屏幕的寬度有限，水平導(dǎo)航無(wú)法展示太多內(nèi)容，這個(gè)時(shí)候就可以使用一個(gè)“more”來(lái)增強(qiáng)水平導(dǎo)航的信息量。

以上是我對(duì)導(dǎo)航設(shè)計(jì)做的一個(gè)整體梳理，篇幅有限，細(xì)節(jié)難免有疏漏，如有問(wèn)題可在評(píng)論區(qū)留言，或者關(guān)注我的公眾號(hào)——pmhenry。

希望每一個(gè)產(chǎn)品經(jīng)理都能設(shè)計(jì)出屬于自己的錦繡藍(lán)圖。

本文由 @王撼宇 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議。