編輯導(dǎo)讀：導(dǎo)航的作用是幫助用戶(hù)找到想要的信息或者完成期望的行為或任務(wù)，是產(chǎn)品的基礎(chǔ)功能之一。本文將從產(chǎn)品設(shè)計(jì)的角度，從導(dǎo)航定義、設(shè)計(jì)原則、導(dǎo)航分類(lèi)幾個(gè)部分展開(kāi)分析，希望對(duì)你有幫助。

01??導(dǎo)航定義

導(dǎo)航設(shè)計(jì)的主要目的是幫助用戶(hù)尋找想要的信息或者完成期望的行為或任務(wù)。導(dǎo)航設(shè)計(jì)與產(chǎn)品定位和業(yè)務(wù)目標(biāo)息息相關(guān)，通過(guò)一定的導(dǎo)航設(shè)計(jì)引導(dǎo)用戶(hù)到相應(yīng)界面，促成行為轉(zhuǎn)化。作為設(shè)計(jì)師需要在這個(gè)過(guò)程幫助用戶(hù)清晰的了解產(chǎn)品的使用方式，以用戶(hù)可獲知和理解的方式通過(guò)導(dǎo)航使用產(chǎn)品。

02?導(dǎo)航設(shè)計(jì)原則

在導(dǎo)航設(shè)計(jì)時(shí)，應(yīng)該提供清楚的“道路標(biāo)識(shí)”，避免用戶(hù)在頁(yè)面中迷路，可以通過(guò)一致性的導(dǎo)航樣式和行為交互減少用戶(hù)的認(rèn)知負(fù)擔(dān)，降低學(xué)習(xí)成本。同時(shí)，也應(yīng)該保持導(dǎo)航使用的高效與簡(jiǎn)潔的平衡，兼顧產(chǎn)品的可用性和用戶(hù)體驗(yàn)。

導(dǎo)航設(shè)計(jì)原則：

03??導(dǎo)航分類(lèi)方式

目前市面上移動(dòng)界面設(shè)計(jì)的導(dǎo)航方式主要有三種：全局導(dǎo)航、瞬時(shí)導(dǎo)航、混合導(dǎo)航。

• 全局導(dǎo)航：一般是底部標(biāo)簽、宮格式這類(lèi)的全局設(shè)計(jì)，用戶(hù)可直接看到某個(gè)入口并操作
• 瞬時(shí)導(dǎo)航：導(dǎo)航菜單一般是被藏起來(lái)，通過(guò)某個(gè)入口點(diǎn)出
• 混合導(dǎo)航：是一種較為靈活的導(dǎo)航設(shè)計(jì)，例如舵式導(dǎo)航。

其中具體的導(dǎo)航樣式如下：

• 全局導(dǎo)航：底部標(biāo)簽欄、宮格式/跳板式導(dǎo)航、列表導(dǎo)航、頂部標(biāo)簽欄
• 瞬時(shí)導(dǎo)航：抽屜式或側(cè)邊式導(dǎo)航、下拉菜單導(dǎo)航
• 混合導(dǎo)航：輪播導(dǎo)航、舵式導(dǎo)航、卡片導(dǎo)航

1. 全局導(dǎo)航

1）底部標(biāo)簽欄

底部標(biāo)簽欄是常見(jiàn)的導(dǎo)航方式，也是全局導(dǎo)航中常用的形式，一般是3-5個(gè)tab放置于底部標(biāo)簽欄。

優(yōu)點(diǎn)：

• 底部標(biāo)簽是大部分產(chǎn)品主導(dǎo)航的設(shè)計(jì)形式，常置于底部，符合用戶(hù)的使用習(xí)慣。幾個(gè)標(biāo)簽代表了幾個(gè)一級(jí)內(nèi)容的入口，通過(guò)點(diǎn)擊進(jìn)行切換和進(jìn)入，快速方便。
• 符合是iOS原生設(shè)計(jì)準(zhǔn)則，開(kāi)發(fā)簡(jiǎn)單。

缺點(diǎn)：

一般來(lái)說(shuō)，底部tab的數(shù)量不多于5個(gè)，過(guò)多的tab會(huì)影響產(chǎn)品信息架構(gòu)的廣度，為用戶(hù)帶來(lái)認(rèn)知負(fù)擔(dān)，但是有限數(shù)量的tab也將影響信息架構(gòu)的深度，導(dǎo)致部分功能和操作層級(jí)較深。

2）宮格式 / 跳板式導(dǎo)航

宮格式導(dǎo)航也被稱(chēng)為跳板式導(dǎo)航，其直觀的表現(xiàn)方式就是把各個(gè)入口的圖標(biāo)放在界面上。這類(lèi)導(dǎo)航方式一般是作為二級(jí)頁(yè)面或二級(jí)導(dǎo)航來(lái)使用，「圖標(biāo)+文字」的展示形式較為常見(jiàn)。

優(yōu)點(diǎn)：

• 有比較好的擴(kuò)展性，隨著產(chǎn)品的功能或業(yè)務(wù)的增加，可以在宮格導(dǎo)航中進(jìn)行放置。
• 通過(guò)「圖標(biāo)+文字」的展示形式能夠幫助用戶(hù)進(jìn)行尋找，用戶(hù)對(duì)圖像的記憶更加深刻。
• 組合方式也較為多樣，可以結(jié)合不同的信息類(lèi)型，如運(yùn)營(yíng)位、廣告位、內(nèi)容塊，同時(shí)通過(guò)合理的靜態(tài)或者動(dòng)態(tài)的圖標(biāo)設(shè)計(jì)，也將為產(chǎn)品提高辨識(shí)度。

缺點(diǎn):

• 各個(gè)宮格是獨(dú)立的內(nèi)容，無(wú)法進(jìn)行跳轉(zhuǎn)，用戶(hù)需要回到宮格導(dǎo)航主頁(yè)面進(jìn)行選擇，這增加了一定的行為路徑。
• 不合理的設(shè)計(jì)將帶來(lái)一定的選擇負(fù)擔(dān)。缺少辨識(shí)度的圖標(biāo)、不一致的圖標(biāo)設(shè)計(jì)、過(guò)于密集雜亂的排布，都會(huì)影響用戶(hù)的選擇。當(dāng)用戶(hù)面臨的選擇越多時(shí)，壓力則越大，用戶(hù)體驗(yàn)必然會(huì)受到影響。

3）列表導(dǎo)航

列表導(dǎo)航常用于二級(jí)導(dǎo)航，能夠比較清晰的展示信息和功能入口，常見(jiàn)的表現(xiàn)形式也是「圖標(biāo)+文字」。

優(yōu)點(diǎn)：

• 符合用戶(hù)的查看信息的視覺(jué)線路，從上而下，用戶(hù)能夠比較快速找到信息。
• 相比于宮格導(dǎo)航中,列表導(dǎo)航中每個(gè)列表信息條可承載較多的內(nèi)容，例如文字字符可以更多，還可以放置運(yùn)營(yíng)活動(dòng)的信息，有比較好的擴(kuò)展性。
• 通過(guò)分割線等方式能夠比較好的進(jìn)行信息分組，便于用戶(hù)選擇。
• ios和android 都有相應(yīng)的列表組件和模板，易于開(kāi)發(fā)。

缺點(diǎn)：

• 與宮格導(dǎo)航類(lèi)似，選擇過(guò)多，用戶(hù)壓力就大，過(guò)多過(guò)復(fù)雜的列表會(huì)影響用戶(hù)選擇，帶來(lái)負(fù)擔(dān)
• 對(duì)于部分需要較高頻的切換任務(wù)的操作，列表導(dǎo)航在使用上并不方便。

4）頂部標(biāo)簽導(dǎo)航

頂部標(biāo)簽導(dǎo)航通過(guò)對(duì)頁(yè)面內(nèi)容進(jìn)行分類(lèi)，將分類(lèi)標(biāo)簽放置于頂部。谷歌最開(kāi)始提出頂部tab標(biāo)簽，提出了像固定選項(xiàng)卡、滾動(dòng)選項(xiàng)卡這類(lèi)的標(biāo)簽導(dǎo)航，iOS也提出了分段選項(xiàng)卡的頂部導(dǎo)航。頂部標(biāo)簽導(dǎo)航常作為二級(jí)導(dǎo)航。

優(yōu)點(diǎn)：

• 占據(jù)的空間比較小，不同于底部的tab，頂部tab一般是文段字符或者圖標(biāo)。
• 交互方式簡(jiǎn)單清晰，滑動(dòng)標(biāo)簽即可選擇。
• 有較好的擴(kuò)展性，標(biāo)簽的個(gè)數(shù)容量比較大，同時(shí)部分產(chǎn)品也支持用戶(hù)自定義頂部標(biāo)簽數(shù)量和標(biāo)簽順序。

缺點(diǎn)：

頂部標(biāo)簽數(shù)量過(guò)多，會(huì)影響處于后面的標(biāo)簽頁(yè)面的跳轉(zhuǎn)率。

2. 瞬時(shí)導(dǎo)航

1）抽屜式或側(cè)邊式導(dǎo)航

抽屜式導(dǎo)航一般用于放置用戶(hù)使用頻率較低或非核心的相關(guān)功能，這些功能的使用一般不需要太過(guò)頻繁的切換或者跳轉(zhuǎn)。安卓較早提出這一導(dǎo)航方式，現(xiàn)在越來(lái)越多產(chǎn)品融入了抽屜導(dǎo)航。抽屜式導(dǎo)航的叫法也比較多樣，比如側(cè)邊導(dǎo)航、擴(kuò)展導(dǎo)航或漢堡菜單等。

優(yōu)點(diǎn)：

• 通過(guò)將較為次要的功能入口放置抽屜導(dǎo)航，突出產(chǎn)品核心功能，避免影響用戶(hù)主要任務(wù)的操作與任務(wù)流程。
• 有較好的擴(kuò)展性，抽屜導(dǎo)航中的數(shù)量條目能夠進(jìn)行一定的擴(kuò)展。
• 具有一定的設(shè)計(jì)空間，抽屜導(dǎo)航可以結(jié)合品牌特點(diǎn)、運(yùn)營(yíng)活動(dòng)做個(gè)性化的設(shè)計(jì)。

缺點(diǎn)：

• 由于“藏”抽屜里，部分功能的易見(jiàn)性不是很高，會(huì)影響用戶(hù)選擇和搜索功能。
• 在使用抽屜導(dǎo)航各個(gè)功能中，往往需要二次點(diǎn)擊，例如點(diǎn)擊抽屜菜單中的設(shè)置，退出時(shí)則是返回首頁(yè)，抽屜菜單是關(guān)閉狀態(tài)，若用戶(hù)要再使用抽屜中的功能，需要重新開(kāi)啟，功能的切換并不方便。

2）下拉菜單式

下拉菜單導(dǎo)航也是常有的瞬時(shí)導(dǎo)航形式之一，與抽屜菜單類(lèi)似，能夠把部分功能和入口整合起來(lái)，一般位于界面的頂部，如界面左右上角。下拉菜單導(dǎo)航的使用能夠保持主界面的簡(jiǎn)潔，其出現(xiàn)的面積較小。大部分下拉導(dǎo)航為一級(jí)菜單，部分產(chǎn)品會(huì)出現(xiàn)二級(jí)或多次菜單。

優(yōu)點(diǎn)：

• 能夠比較好的裝下部分操作，而這些操作也往往是和當(dāng)前頁(yè)面有較大聯(lián)系的，也不影響用戶(hù)尋找這些信息。
• 下拉菜單往往與當(dāng)前頁(yè)面的內(nèi)容有比較好的連續(xù)性，與用戶(hù)目標(biāo)行為操作是一致的或相關(guān)的。

缺點(diǎn)：

下拉菜單本身是較輕量級(jí)的導(dǎo)航，設(shè)計(jì)時(shí)需要注意信息的承載量，過(guò)多的選擇或操作會(huì)增加用戶(hù)的負(fù)擔(dān)，也會(huì)帶來(lái)操作上的不便。

3. 混合導(dǎo)航

1）輪播導(dǎo)航

輪播導(dǎo)航頁(yè)面中的信息一般較為扁平，通過(guò)單個(gè)頁(yè)面或者卡片，就能夠展示大部分信息。輪播導(dǎo)航往往需要搭配頁(yè)面指示器告知用戶(hù)如何操作。

優(yōu)點(diǎn)：

有一定的擴(kuò)展性，能夠橫向進(jìn)行增加。運(yùn)用同樣的展示方式來(lái)放置各運(yùn)營(yíng)活動(dòng)或業(yè)務(wù)內(nèi)容信息。

缺點(diǎn)：

• 與頂部tab標(biāo)簽類(lèi)似，后幾頁(yè)的輪播頁(yè)面的點(diǎn)擊率可能會(huì)與第一頁(yè)面有一定的差距。
• 當(dāng)輪播頁(yè)面過(guò)多時(shí)候會(huì)影響使用效率，因此在輪播頁(yè)面的數(shù)量上存在一定的范圍。

2）卡片導(dǎo)航

卡片式導(dǎo)航能夠較大程度的突出信息內(nèi)容，一般作為信息流呈現(xiàn)內(nèi)容。

優(yōu)點(diǎn)：

• 交互方式簡(jiǎn)單，用戶(hù)通過(guò)滑動(dòng)可進(jìn)行查看和選擇。
• 卡片設(shè)計(jì)有較好的整體性，將相關(guān)信息進(jìn)行整合，幫助用戶(hù)進(jìn)行識(shí)別。
• 好的卡片導(dǎo)航設(shè)計(jì)有更好的沉浸感。

缺點(diǎn)：

• 卡片設(shè)計(jì)的界面占位符相對(duì)較大，單個(gè)頁(yè)面內(nèi)呈現(xiàn)的卡片數(shù)量較為有限，因此呈現(xiàn)的信息也是有限的。
• 瀏覽查看卡片的效率較低，用戶(hù)只能逐一點(diǎn)擊查看，無(wú)法全局瀏覽。

3）舵式導(dǎo)航

舵式導(dǎo)航一般作為全局導(dǎo)航存在，常放置于底部tab中。舵式導(dǎo)航也結(jié)合了瞬時(shí)導(dǎo)航和點(diǎn)聚式設(shè)計(jì)的一些特點(diǎn)，它將多個(gè)產(chǎn)品核心功能進(jìn)行整合，點(diǎn)擊相應(yīng)圖標(biāo)喚出相應(yīng)功能

優(yōu)點(diǎn)：

• 舵式導(dǎo)航常常是底部的五個(gè)標(biāo)簽，中間的標(biāo)簽更有辨識(shí)度，從而吸引用戶(hù)進(jìn)行點(diǎn)擊操作，更加突出和明顯，從而引導(dǎo)用戶(hù)進(jìn)行產(chǎn)品核心功能的操作。
• 有較好的擴(kuò)展性，隨著產(chǎn)品核心功能的相應(yīng)增加，可通過(guò)舵式導(dǎo)航進(jìn)行入口的放置。
• 有較好的可設(shè)計(jì)的空間，通過(guò)有趣的動(dòng)效或視覺(jué)設(shè)計(jì)能夠讓用戶(hù)加深品牌印象。

缺點(diǎn)：

部分核心功能是被一起放進(jìn)舵式導(dǎo)航中的，所以在用戶(hù)初期使用產(chǎn)品時(shí)或產(chǎn)品進(jìn)行相應(yīng)的更新后，需要給與用戶(hù)清晰的操作指示，避免用戶(hù)找不到核心功能入口。

04?最后

一個(gè)產(chǎn)品中往往存在多種導(dǎo)航方式的組合，如京東首頁(yè)中，存在底部tab導(dǎo)航、頂部tab導(dǎo)航、輪播導(dǎo)航、宮格式導(dǎo)航，其中底部tab導(dǎo)航作為全局導(dǎo)航存在，其他導(dǎo)航則是二級(jí)導(dǎo)航形式。

因此在導(dǎo)航設(shè)計(jì)時(shí)，首先應(yīng)明確合適于產(chǎn)品的全局導(dǎo)航樣式，在此基礎(chǔ)上基于各個(gè)頁(yè)面和模塊的主要內(nèi)容進(jìn)行二級(jí)導(dǎo)航的設(shè)計(jì)。在導(dǎo)航設(shè)計(jì)時(shí)，也應(yīng)該思考用戶(hù)將如何使用產(chǎn)品，可通過(guò)前期卡片分類(lèi)等方法讓目標(biāo)用戶(hù)參與進(jìn)來(lái)，了解用戶(hù)心理模型。同時(shí)通過(guò)更可視化的設(shè)計(jì)方式，告知用戶(hù)導(dǎo)航的使用路徑和方法。

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

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