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

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

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

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

1. 導航的范疇
2. 導航起作用的產(chǎn)品邏輯
3. 常見的導航結構

一、導航的范疇

想做好導航就得先清楚什么是導航，我們先看一下新華詞典對導航的解釋：引導飛行器或船舶沿一定航線從一點運動到另一點的方法。

我們提煉一下關鍵詞：引導，一點運動到另一點。

也就是說能夠?qū)_到目標點起到引導作用的，能幫助你順利的從一個點到達另一個點的工具就可以稱作為導航。

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

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

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

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

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

知道自己目標的位置之后用戶要一層頁面一層頁面的點進去直到目標位置，這個時候是層級的控制是否合理、信息結構的處理是否輕重分明在起作用。

用戶在使用過程中還會在不同的目標直接來回的切換需要保證切換的順利方便，這個時候是路徑是否清晰、交互引導是否友好在起作用。

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

按照場景不同可以將導航的范疇劃分為以下幾個方面：

1. 文字表達
2. 排版布局
3. 信息結構
4. 跳轉(zhuǎn)路徑

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

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

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

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

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

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

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

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

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

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

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

1. 知道怎么找

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

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

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

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

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

2. 不知道怎么找

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

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

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

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

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

3）適當?shù)氖褂媒换バЧ麃硪龑в脩艨焖俚膶W會使用產(chǎn)品，比如在搜索框旁邊顯示一個放大鏡的圖標，多數(shù)人一看就明白這里可以搜索。

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

3. 中途折回尋找

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

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

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

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

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

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

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

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

三、常見的導航結構

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

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

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

這里只列舉一些常見的導航結構供大家參考：標簽導航、舵式導航、抽屜導航、Tab導航、宮格導航、點聚導航、組合導航、列表導航、輪播導航、瀑布導航。

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

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

……

四、結語

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

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

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

進階提問：

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

有興趣的同學可以在評論區(qū)討論。

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

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