編輯導(dǎo)語：說到導(dǎo)航想必大家都不陌生，所有的產(chǎn)品基本都離不開當(dāng)導(dǎo)航，產(chǎn)品人要想辦法優(yōu)化導(dǎo)航，而用戶也要通過導(dǎo)航快速的找到想看的東西。那導(dǎo)航的范疇是什么？其背后的產(chǎn)品邏輯是什么？有哪些常見導(dǎo)航結(jié)構(gòu)？本文作者來為我們解答這些疑問。

導(dǎo)航，一個(gè)所有產(chǎn)品人都司空見慣的名詞，一個(gè)幾乎所有產(chǎn)品都離不開必備結(jié)構(gòu)。包括正在看這篇文章的你和你的產(chǎn)品，還有我，我們都需要一個(gè)更好的導(dǎo)航！

做好一個(gè)導(dǎo)航就等于做好了產(chǎn)品的一半，但是大家真的理解導(dǎo)航嗎？有沒有認(rèn)真的想過導(dǎo)航起作用的原理呢？

這篇文章從導(dǎo)航背后的產(chǎn)品邏輯出發(fā)幫大家重新認(rèn)識(shí)一下導(dǎo)航，通過這篇文章我們可以了解到以下內(nèi)容：

1. 導(dǎo)航的范疇
2. 導(dǎo)航起作用的產(chǎn)品邏輯
3. 常見的導(dǎo)航結(jié)構(gòu)

一、導(dǎo)航的范疇

想做好導(dǎo)航就得先清楚什么是導(dǎo)航，我們先看一下新華詞典對(duì)導(dǎo)航的解釋：引導(dǎo)飛行器或船舶沿一定航線從一點(diǎn)運(yùn)動(dòng)到另一點(diǎn)的方法。

我們提煉一下關(guān)鍵詞：引導(dǎo)，一點(diǎn)運(yùn)動(dòng)到另一點(diǎn)。

也就是說能夠?qū)_(dá)到目標(biāo)點(diǎn)起到引導(dǎo)作用的，能幫助你順利的從一個(gè)點(diǎn)到達(dá)另一個(gè)點(diǎn)的工具就可以稱作為導(dǎo)航。

在我們產(chǎn)品設(shè)計(jì)中也是一樣的道理，導(dǎo)航的目的或者說導(dǎo)航存在的根本意義，就是為了讓用戶在功能千千萬或內(nèi)容萬萬千的網(wǎng)站中迅速找到自己想要的。那么只要是有助于實(shí)現(xiàn)這一目的的設(shè)計(jì)，我們都可以劃分在導(dǎo)航需要考慮的范疇之內(nèi)。

即使你不是導(dǎo)航，但是你會(huì)影響到用戶能否迅速便捷的找到自己想要的，在這一刻你就是導(dǎo)航。

那么從產(chǎn)品設(shè)計(jì)上哪些設(shè)計(jì)會(huì)影響到用戶能否迅速便捷的找到自己想要的呢？

答案是：所有用戶看到的都會(huì)影響。

用戶想要找一個(gè)功能首先要知道這個(gè)功能在哪里，這個(gè)時(shí)候是頁面上文字描述的是不是夠準(zhǔn)確在起作用。假如用戶常用的功能被放在了一個(gè)突出顯示的區(qū)域用戶就會(huì)更容易找到目標(biāo)，這個(gè)時(shí)候是排版布局夠不夠合理在起作用。

知道自己目標(biāo)的位置之后用戶要一層頁面一層頁面的點(diǎn)進(jìn)去直到目標(biāo)位置，這個(gè)時(shí)候是層級(jí)的控制是否合理、信息結(jié)構(gòu)的處理是否輕重分明在起作用。

用戶在使用過程中還會(huì)在不同的目標(biāo)直接來回的切換需要保證切換的順利方便，這個(gè)時(shí)候是路徑是否清晰、交互引導(dǎo)是否友好在起作用。

我們模擬了一遍用戶使用的具體場景之后會(huì)發(fā)現(xiàn)，影響用戶能否迅速便捷的找到自己想要的點(diǎn)其實(shí)遍布了產(chǎn)品的每一個(gè)頁面每一個(gè)角落，所以我總結(jié)了一個(gè)概念的說法：所見皆導(dǎo)航。

按照?qǐng)鼍安煌梢詫?dǎo)航的范疇劃分為以下幾個(gè)方面：

1. 文字表達(dá)
2. 排版布局
3. 信息結(jié)構(gòu)
4. 跳轉(zhuǎn)路徑

最后一句話：導(dǎo)航并非只是看得見摸得著的樹狀的分類，分類只是信息結(jié)構(gòu)的一部分，導(dǎo)航更多的代表的是對(duì)影響瀏覽效率的產(chǎn)品邏輯的處理。

二、導(dǎo)航背后的產(chǎn)品邏輯

剛才說完了導(dǎo)航的范疇，相信通過對(duì)上述內(nèi)容的閱讀大家對(duì)導(dǎo)航背后的邏輯也應(yīng)該有了一些理解。

所有設(shè)計(jì)都是產(chǎn)品的一部分，最終目的都是為讓用戶使用產(chǎn)品的體驗(yàn)更好，導(dǎo)航在這方面起到的作用是舉足輕重的。

大家經(jīng)常會(huì)遇到一些諸如把導(dǎo)航做成懸浮的、減少一下導(dǎo)航的層級(jí)之類的產(chǎn)品優(yōu)化，可能今天改改這個(gè)點(diǎn)明天改改那個(gè)點(diǎn)，看似每天都在優(yōu)化產(chǎn)品倒不如說是隨著不停暴露出來的問題在手忙腳亂的補(bǔ)漏洞。

原因是這些優(yōu)化都很零散，沒有人思考過他們背后的邏輯是什么、處在什么樣的一個(gè)大場景里，是不成體系的，沒有體系也就沒有方向，每天都是遇到問題處理問題而不能提前預(yù)知并且掌握在自己的產(chǎn)品規(guī)劃之內(nèi)。

我們可以一起思考一下當(dāng)用戶打開一個(gè)網(wǎng)站時(shí)最初心理活動(dòng)是什么？

導(dǎo)航，用通俗一點(diǎn)的話來說就是幫助用戶找東西。就像逛商場，分為兩種人：有目標(biāo)和無目標(biāo)，為了更好的說明導(dǎo)航的作用我們這篇文章只說有目標(biāo)的情況。

清楚的知道自己要買什么但是這個(gè)人不一定知道怎么找，所以又分為這三種情況：

1. 知道怎么找
2. 不知道怎么找
3. 中途折回尋找

然后我們分別思考下這三種場景下用戶的心理活動(dòng)：

1. 知道怎么找

我很清楚商場的商品分類、每個(gè)分類的位置，我要找一條最近的路徑直接走過去。

這個(gè)心理活動(dòng)表現(xiàn)在產(chǎn)品使用上就是這樣的：我用過這個(gè)產(chǎn)品，知道怎么用，我也知道我的目標(biāo)位置（要操作的功能或要閱讀的文章等），我知道要先去哪個(gè)頁面再點(diǎn)哪個(gè)button，我希望快速的到達(dá)我的目標(biāo)位置。

于是我們就知道了針對(duì)于這種情況該怎么有效的優(yōu)化導(dǎo)航：

1）優(yōu)化產(chǎn)品的信息結(jié)構(gòu)避免層級(jí)過深；

2）調(diào)整頁面布局提高常用功能的曝光度。

2. 不知道怎么找

我第一次來商場，并不知道商場里的各種商品是分類擺放的，甚至不確定我要買的東西屬于哪一類。我需要先搞清楚這個(gè)商場里的東西都是怎么放的，要找的東西在哪，還要看下地標(biāo)找到過去的路。

這個(gè)心理活動(dòng)表現(xiàn)在產(chǎn)品使用上就是這樣的：我對(duì)這個(gè)產(chǎn)品很陌生、我得先看下這個(gè)產(chǎn)品都能干嘛、我要找的功能有可能在哪一個(gè)模塊或者頁面、我怎么操作才能找到這個(gè)功能。

于是我們就知道了針對(duì)于這種情況有效的優(yōu)化方式是：

1）頁面標(biāo)簽明確與用戶心理預(yù)期一致，我認(rèn)為一把木質(zhì)梳子屬于日常用品類你就不要給它打上木質(zhì)家具的標(biāo)簽；

2）清晰展示產(chǎn)品的框架結(jié)構(gòu)，讓用戶對(duì)產(chǎn)品的功能范圍一目了然；

3）適當(dāng)?shù)氖褂媒换バЧ麃硪龑?dǎo)用戶快速的學(xué)會(huì)使用產(chǎn)品，比如在搜索框旁邊顯示一個(gè)放大鏡的圖標(biāo)，多數(shù)人一看就明白這里可以搜索。

遵守易懂大于易到達(dá)的原則，用戶對(duì)于一個(gè)陌生的產(chǎn)品首先要先能看懂第一步從哪里開始、怎么開始，再便捷的操作路徑也需要用戶先知道才會(huì)去操作。

3. 中途折回尋找

我現(xiàn)在剛剛吃完了美食，突然想到要買幾件衣服，我得看下去服裝區(qū)的路在哪。

我記得是在二樓，我先看下我現(xiàn)在在幾樓就可以了。但是不巧這個(gè)商場設(shè)計(jì)的太差了根本沒有標(biāo)注清楚現(xiàn)在的樓層，但是我記得剛進(jìn)來的時(shí)候是怎么到那里的，我可以先回到大門口再過去。

這種情況表現(xiàn)在產(chǎn)品使用上就是這樣的：我剛看完了一篇科技類的文章，現(xiàn)在想去看一看教育類的文章，我得看下我現(xiàn)在在哪個(gè)分類，怎么過去教育分類。

如果知道返回的路徑的話我能不能直接一步就跳轉(zhuǎn)過去，如果不巧產(chǎn)品的信息結(jié)構(gòu)設(shè)計(jì)的很亂，用戶隨便跳幾個(gè)頁面就迷路了，用戶很可能會(huì)希望先重新返回首頁再找教育分類。

于是我們就知道了針對(duì)這種情況有效的優(yōu)化方式是：

1. 采用懸浮導(dǎo)航：不管用戶在頁面的哪個(gè)位置都能快速的通過導(dǎo)航切換到目標(biāo)位置；
2. 提供相關(guān)推薦：預(yù)測用戶在瀏覽當(dāng)前內(nèi)容或者使用當(dāng)前功能時(shí)下一步有可能會(huì)采取的動(dòng)作，并把他放在某個(gè)易見的區(qū)域；
3. 明確用戶的當(dāng)前位置和返回的路徑；
4. 提供最近瀏覽是一個(gè)很好的選擇；
5. 明確首頁位置，并盡可能的在每個(gè)頁面都提供直達(dá)首頁的入口。

清楚了用戶使用產(chǎn)品時(shí)的不同情境、在不同情境下的不同需求，才能采取針對(duì)性的產(chǎn)品優(yōu)化措施。

我們把所有對(duì)導(dǎo)航的需求場景總結(jié)為三類，從用戶的心理活動(dòng)出發(fā)搞清楚每一類場景背后的需求邏輯。我們會(huì)發(fā)現(xiàn)所有需要做的優(yōu)化都有了方向，這樣我們就能把工作做在前邊，提前對(duì)產(chǎn)品做好規(guī)劃，效果顯著而且事半功倍。

三、常見的導(dǎo)航結(jié)構(gòu)

這個(gè)就是大家普遍認(rèn)為的導(dǎo)航了，有抽屜式、下拉式、列表式，也有頂部布局、左側(cè)布局、底部布局等等表現(xiàn)形式。

其實(shí)導(dǎo)航的結(jié)構(gòu)只是導(dǎo)航的外在表現(xiàn)形式，只有先理解了導(dǎo)航背后的產(chǎn)品邏輯才能看懂不同的結(jié)構(gòu)各自的區(qū)別在哪里，從而能根據(jù)自己的產(chǎn)品的實(shí)際情況選擇最合適的導(dǎo)航結(jié)構(gòu)。

這部分內(nèi)容工具性就比較強(qiáng)了，沒有多少好理解的，根據(jù)需要選擇合適的拿來用就可以了。

這里只列舉一些常見的導(dǎo)航結(jié)構(gòu)供大家參考：標(biāo)簽導(dǎo)航、舵式導(dǎo)航、抽屜導(dǎo)航、Tab導(dǎo)航、宮格導(dǎo)航、點(diǎn)聚導(dǎo)航、組合導(dǎo)航、列表導(dǎo)航、輪播導(dǎo)航、瀑布導(dǎo)航。

每種導(dǎo)航各有優(yōu)缺，需要大家根據(jù)需要自行判斷或者組合使用，可以從以下幾個(gè)方面進(jìn)行考慮：

1. 我們的主入口有幾個(gè)？
2. 我們是否有特別要突出的入口？
3. 界面中的次級(jí)元素入口多與少？
4. 界面是否要展示次級(jí)界面的部分元素信息？

……

四、結(jié)語

這篇文章是我這些年做產(chǎn)品以來對(duì)導(dǎo)航的一些個(gè)人思考，在寫這篇文章之前也特意瀏覽過互聯(lián)網(wǎng)三巨頭體系下的一些官方主頁，其中也不乏一些需要優(yōu)化的點(diǎn)。

由此讓我感覺到很多人對(duì)導(dǎo)航的理解可能并不是特別的深入，所以特意寫了這篇文章希望能拋磚引玉，對(duì)產(chǎn)品路上的小伙伴們有所幫助。

大家有任何不同的看法歡迎在評(píng)論區(qū)一起留言討論，謝謝大家閱讀這篇文章！

進(jìn)階提問：

• 一篇寫VR教育的文章是該歸為科技類文章還是教育類文章呢？
• 一瓶桃子罐頭應(yīng)該把他放在休閑零食區(qū)？飲料區(qū)？還是水果區(qū)呢？

有興趣的同學(xué)可以在評(píng)論區(qū)討論。

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

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