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

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

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

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

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

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

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

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

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

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

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

1. 全局導(dǎo)航

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

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

優(yōu)點：

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

缺點：

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

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

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

優(yōu)點：

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

缺點:

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

3）列表導(dǎo)航

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

優(yōu)點：

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

缺點：

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

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

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

優(yōu)點：

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

缺點：

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

2. 瞬時導(dǎo)航

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

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

優(yōu)點：

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

缺點：

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

2）下拉菜單式

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

優(yōu)點：

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

缺點：

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

3. 混合導(dǎo)航

1）輪播導(dǎo)航

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

優(yōu)點：

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

缺點：

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

2）卡片導(dǎo)航

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

優(yōu)點：

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

缺點：

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

3）舵式導(dǎo)航

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

優(yōu)點：

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

缺點：

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

04?最后

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

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

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

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