雷鋒網(wǎng)按：本文作者Link（公號：aboutlink）。

在物理空間中，人們可以在某種程度上依靠天生的方向感給自己定位，但是這些幫助我們在真實(shí)世界中找到方向的大腦機(jī)制，在信息空間中卻根本起不到作用。因此在產(chǎn)品設(shè)計(jì)過程中導(dǎo)航設(shè)計(jì)是非常重要的。

產(chǎn)品的導(dǎo)航設(shè)計(jì)又被稱為框架設(shè)計(jì)，設(shè)計(jì)的是以什么樣的具體形式將分類好的內(nèi)容展現(xiàn)給用戶。好的導(dǎo)航設(shè)計(jì)能組織好用戶最常用的行為，同時(shí)讓這些界面元素被用戶用最容易的方式獲取和使用。那么好的導(dǎo)航設(shè)計(jì)要滿足哪些要求呢？

首先必須給用戶一種在應(yīng)用內(nèi)不同頁面跳轉(zhuǎn)的方法。由于我們不可能把每個頁面都一股腦地拋在用戶眼前，所以導(dǎo)航設(shè)計(jì)必須能自然而然地促進(jìn)或引導(dǎo)用戶的跳轉(zhuǎn)行為。

其次導(dǎo)航設(shè)計(jì)必須能清晰的向用戶傳達(dá)出跳轉(zhuǎn)入口和所包含的內(nèi)容之間的關(guān)系。僅僅提供一個跳轉(zhuǎn)入口的列表是不夠的。入口按鈕之間相互之間有什么關(guān)系？是否有功能的側(cè)重點(diǎn)？它們之間的相關(guān)差異在哪？這些傳達(dá)出來的信息對于用戶理解一個產(chǎn)品，更快上手使用一個產(chǎn)品是非常必要的。

最后導(dǎo)航設(shè)計(jì)必須能結(jié)構(gòu)化地傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁面之間的關(guān)系，簡單來說也就是幫助用戶去理解哪個跳轉(zhuǎn)入口可以最好地支持他們的任務(wù)或他們想要達(dá)到的目標(biāo)。

在了解完導(dǎo)航設(shè)計(jì)的作用和基本要求之后，我們來看看目前市面上有哪些比較流行的導(dǎo)航設(shè)計(jì)，他們之間又有哪些優(yōu)缺點(diǎn)，適用于哪種類型的產(chǎn)品。以下內(nèi)容結(jié)合了網(wǎng)易產(chǎn)品經(jīng)理課程王明鏡老師的內(nèi)容和我自身的一些經(jīng)驗(yàn)總結(jié)。

一、Tab式導(dǎo)航

Tab式導(dǎo)航是目前移動端市場上最被廣泛使用的導(dǎo)航設(shè)計(jì)，諸如微信、大眾點(diǎn)評、攜程等APP使用的都是Tab式導(dǎo)航。

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

1、主要功能突出，不需要用戶尋找，易于被發(fā)現(xiàn)使用。

2、可以輕松在各個主要入口頻繁跳轉(zhuǎn)使用，減少用戶的點(diǎn)擊次數(shù)。用戶也不容易迷失不知所措，即使在很深的流程環(huán)節(jié)中也能快速跳轉(zhuǎn)返回首頁。

缺點(diǎn)

1、產(chǎn)品的核心功能過多時(shí)，如果都放在tab導(dǎo)航上會顯得框架過于笨重，一般4-5個為宜，過多的話明顯不利于用戶的切換，也將降低界面體驗(yàn)友好度。

2、沉浸式的體驗(yàn)不足，底部露出了與當(dāng)前頁面無關(guān)的跳轉(zhuǎn)入口，容易誘發(fā)打斷用戶的當(dāng)前使用行為。只不過目前很多內(nèi)容體驗(yàn)型或電商消費(fèi)型應(yīng)用往往會在用戶下拉瀏覽時(shí)自動隱藏底部導(dǎo)航，以此解決沉浸式體驗(yàn)不足的缺點(diǎn)。

二、抽屜式導(dǎo)航

抽屜式導(dǎo)航是指菜單藏在當(dāng)前頁面后，點(diǎn)擊入口后就像抽屜一樣拉出菜單。2011年剛出現(xiàn)的時(shí)候曾非常的風(fēng)靡，F(xiàn)acebook就采用過該種導(dǎo)航。但現(xiàn)在采用的頻率較低，仍在使用的應(yīng)用如QQ、滴滴出行、郵箱大師。抽屜式導(dǎo)航比較適合核心功能突出且較為單一的產(chǎn)品。

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

1、給內(nèi)容頁足夠的空間，讓用戶專注在當(dāng)前的頁面或需求目標(biāo)，提高頁面沉浸式的體驗(yàn)。

2、拓展性較好，側(cè)邊欄可以提供更多的功能入口的展示空間。

缺點(diǎn)

1、用戶的學(xué)習(xí)成本較高，剛?cè)胧质褂脮r(shí)很難發(fā)現(xiàn)抽屜式的導(dǎo)航。

2、其他主要功能的入口因此被隱藏起來了不夠突出，難以被用戶察覺。

3、主要入口的切換需要二次點(diǎn)擊，第一次先點(diǎn)擊出抽屜式導(dǎo)航，然后再找到想要的功能，用戶的點(diǎn)擊較多且路徑較深。

三、跳板式導(dǎo)航

跳板式導(dǎo)航有被稱作九宮格式導(dǎo)航，將各個入口都平鋪展示在頁面上，該種導(dǎo)航適合功能較多且功能之間較為獨(dú)立的產(chǎn)品。目前純粹的跳板式導(dǎo)航其實(shí)較少，大多與Tab式導(dǎo)航復(fù)合使用。常見的應(yīng)用比如美圖秀秀、典典養(yǎng)車、支付寶等。

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

1、可以清晰展現(xiàn)各個入口。

2、可以一次性展現(xiàn)更多的入口。

例如對于支付寶這種功能較多且繁雜的應(yīng)用，采用跳板式導(dǎo)航可以讓用戶第一時(shí)間快速發(fā)現(xiàn)找到手機(jī)充值、轉(zhuǎn)賬、生活繳費(fèi)等常用功能，而不用多次點(diǎn)擊跳轉(zhuǎn)。

缺點(diǎn)

1、重點(diǎn)功能不夠突出。

2、各個入口之間的跳轉(zhuǎn)不夠靈活。如果某個功能的層級路徑較深時(shí)，用戶不能快速跳轉(zhuǎn)到自己忽然想要完成的任務(wù)頁面。

四、列表式導(dǎo)航

列表式導(dǎo)航將入口或內(nèi)容按照列表的樣式依次展現(xiàn)在頁面之上，列表式導(dǎo)航比較適合內(nèi)容型產(chǎn)品作為主導(dǎo)航或者一般性產(chǎn)品作為輔助導(dǎo)航。比如網(wǎng)易新聞某類標(biāo)簽下的內(nèi)容頁，簡書的消息頁面，iOS的設(shè)置頁面。

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

1、內(nèi)容的層次較為清晰。

2、一次性可加載展現(xiàn)的內(nèi)容條數(shù)較多。

缺點(diǎn)

1、內(nèi)容過多時(shí)，無法突出重點(diǎn)。因此目前很多內(nèi)容型產(chǎn)品如“豌豆莢一覽”會在重點(diǎn)或熱門內(nèi)容上加上一個小火焰的紅色標(biāo)記來突出。

2、靈活性不高。

五、總結(jié)

現(xiàn)在移動產(chǎn)品的導(dǎo)航設(shè)計(jì)不僅局限于以上4種，還有點(diǎn)聚式導(dǎo)航、標(biāo)簽式導(dǎo)航等等就不再逐個分析了，優(yōu)缺點(diǎn)基本與上面的分析相似。在一個移動產(chǎn)品的設(shè)計(jì)過程中，我們往往會選擇一個導(dǎo)航作為主體框架，其他導(dǎo)航作為輔助設(shè)計(jì)。如果一開始覺得經(jīng)驗(yàn)不足而拿捏不準(zhǔn)的話，Tab式導(dǎo)航是風(fēng)險(xiǎn)度最低，學(xué)習(xí)成本最低，最容易被大眾所接受的導(dǎo)航設(shè)計(jì)。

一個好的移動產(chǎn)品導(dǎo)航最重要的檢驗(yàn)標(biāo)準(zhǔn)為：是否能清晰的告訴用戶“他們在哪里”以及“他們能去哪里”。選擇什么導(dǎo)航作為主體框架切記不能盲目跟風(fēng)選擇，要根據(jù)自身產(chǎn)品的類型是什么以及功能之間的關(guān)系結(jié)構(gòu)是怎樣等條件來做決定。

本文經(jīng)人人都是產(chǎn)品經(jīng)理授權(quán)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。