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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、用戶是怎樣尋找信息的

導(dǎo)航的目的是幫助用戶查找信息，那么你有沒有想過一個問題——用戶究竟是怎么查找信息的呢？

一般來說，用戶查找信息有以下四個場景。

場景一：用戶知道想要什么，且知道如何找

對于C端產(chǎn)品來說，由于同類產(chǎn)品對市場的教育，讓用戶接觸到你的產(chǎn)品時就知道如何操作，但是對于B端產(chǎn)品，基本不會出現(xiàn)一上手就會用的情況。

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

場景二：用戶知道想要什么，但不知道如何找

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

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

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

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

場景三：用戶不知道自己想要什么

這種場景在B端很少出現(xiàn)，畢竟使用B端產(chǎn)品的人都是有著明確目的的。但是在C端卻經(jīng)常出現(xiàn)，比如很多人在逛淘寶的時候可能僅僅是無聊，而不是因為自己想買東西。

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

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

場景四：再次搜索

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

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

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

好了，講了這么多，終于說到導(dǎo)航了，導(dǎo)航分為三類——結(jié)構(gòu)性導(dǎo)航、關(guān)聯(lián)導(dǎo)航、可用性導(dǎo)航。下圖可以很直觀的看出三類導(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)頁主體的信息架構(gòu)，告訴用戶這個網(wǎng)站有什么，結(jié)構(gòu)性導(dǎo)航是一個網(wǎng)站最重要的導(dǎo)航。

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

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

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

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

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

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

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

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

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

3. 用性導(dǎo)航

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

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

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

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

1. 一定要明確希望用戶做什么

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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