編輯導(dǎo)語：在日常生活中，我們常常會(huì)使用到一些軟件，你有沒有觀察過這些軟件的特征？作者以不同的產(chǎn)品為例，分析其所對(duì)應(yīng)的導(dǎo)航模式，希望在導(dǎo)航設(shè)計(jì)中對(duì)你有所幫助。

你有沒有考慮過這樣一個(gè)問題？一般導(dǎo)航欄為什么要放在底部，為什么不放在左邊或者右邊？

那我們今天一起來揭開它的神秘面紗。

首先想了解它，就必須知道它設(shè)計(jì)的原理：拇指區(qū)域。

這里的拇指區(qū)域以熱圖的形式來展示。它可以顯示出大拇指操作手機(jī)屏幕區(qū)域的難易程度。借以Hoober的研究結(jié)果，畫出最常見的使用情境的拇指熱圖：

綠色表示拇指正常點(diǎn)擊區(qū)域，黃色需要使用吃奶力氣才能點(diǎn)擊的區(qū)域，紅色表示難以點(diǎn)擊到的區(qū)域。我們?cè)O(shè)計(jì)導(dǎo)航系統(tǒng)的時(shí)候，也會(huì)遵循拇指熱區(qū)的原則，把主要功能放在綠色區(qū)域，輔助功能放在黃色或者紅色區(qū)域。

那么我們一款產(chǎn)品擁有巨量的標(biāo)簽，誰應(yīng)該放在最容易點(diǎn)擊的區(qū)域呢？顯然是最常用的功能，常用功能通常不只有一個(gè)，就誕生了更加便捷的導(dǎo)航欄。

那么？都有哪些標(biāo)簽導(dǎo)航呢？我們一起看看吧。

一、底部標(biāo)簽式導(dǎo)航

底部標(biāo)簽導(dǎo)航是目前最常見的導(dǎo)航形式。底部導(dǎo)航一般采用3-4個(gè)標(biāo)簽，最多不會(huì)超過5個(gè)。

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

• 入口直接清晰，操作路徑短，便于在不同功能模塊進(jìn)行跳轉(zhuǎn)；
• 直接展示入口內(nèi)容，內(nèi)容曝光度高。

2. 缺點(diǎn)

• 功能之間無主次；
• 擴(kuò)展性差，不利于后期的功能擴(kuò)展。

二、舵式導(dǎo)航

舵式導(dǎo)航是 底部導(dǎo)航的一種擴(kuò)展形式，像輪船上用來指揮的船舵，兩側(cè)是其他操作按鈕。

普通標(biāo)簽導(dǎo)航難以滿足導(dǎo)航的需求，就需要一些擴(kuò)展形式，和標(biāo)簽導(dǎo)航相比，舵式導(dǎo)航把核心功能放在中間，標(biāo)簽更加突出醒目，同時(shí)對(duì)主功能標(biāo)簽做了擴(kuò)展功能。

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

• 在默認(rèn)加載的頁面之外，又能夠突出強(qiáng)調(diào)中間的入口；
• 入口直接清晰，操作路徑短，便于不同功能模塊進(jìn)行跳轉(zhuǎn)；
• 直接展示入口內(nèi)容，內(nèi)容曝光率高。

2. 缺點(diǎn)

與標(biāo)簽導(dǎo)航存在同樣的弊端。

• 功能之間無主次；
• 擴(kuò)展性差，不利于后期的功能擴(kuò)展。

三、Tab標(biāo)簽式導(dǎo)航

一般 用于二級(jí)導(dǎo)航，當(dāng)內(nèi)容分類較多的時(shí)，一般采用頂部標(biāo)簽導(dǎo)航設(shè)計(jì)模式。

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

標(biāo)簽數(shù)量可以隨意根據(jù)需求變化，可以左右滑動(dòng)，衍生更多標(biāo)簽。

2. 缺點(diǎn)

操作熱區(qū)較小，有APP設(shè)計(jì)的交互前與后的樣式差異不大，容易造成誤操作的困惑。

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

抽屜式導(dǎo)航的核心思路是“隱藏”。隱藏非核心的操作與功能，讓用戶更專注于核心的功能操作上去， 一般用于二級(jí)菜單。

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

• 節(jié)省頁面展示空間；
• 注意力聚焦在當(dāng)前頁面。

2. 缺點(diǎn)

• 左上角的按鈕存在于單手操作熱區(qū)難以觸達(dá)；
• 降低了用戶對(duì)產(chǎn)品部分功能的參與度。

五、宮格式導(dǎo)航

主要將入口全部集中在主頁面中，入口相互獨(dú)立，沒有太多的交集，無法跳轉(zhuǎn)互通。

采用這種導(dǎo)航的應(yīng)用已經(jīng)越來越少，往往用在二級(jí)頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。

六、輪播式導(dǎo)航

采用Banner輪播導(dǎo)航，當(dāng)應(yīng)用信息足夠扁平，內(nèi)容比較單薄時(shí)使用。特別是在產(chǎn)品初期，缺乏用戶和內(nèi)容，這種導(dǎo)航目前已經(jīng)很少用。

該方式就可以凸顯產(chǎn)品核心功能給予用戶使用（如：應(yīng)用市場(chǎng)）。

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

現(xiàn)有APP中一種主要的信息承載模式，列表導(dǎo)航和宮格導(dǎo)航類似，屬于二級(jí)導(dǎo)航。

列表式導(dǎo)航分為3類：標(biāo)題式列表、內(nèi)容式列表、嵌入式列表。

• 標(biāo)題式列表：一般只顯示一行文字，有的顯示一行文字加一張圖片等等。
• 內(nèi)容式列表：主要以內(nèi)容為主，所以在列表中就會(huì)體現(xiàn)出部分內(nèi)容信息，點(diǎn)擊進(jìn)去就是詳情。
• 嵌入式列表：嵌入式其實(shí)就是由多個(gè)列表層級(jí)組合而成的導(dǎo)航。

八、組合式導(dǎo)航

多用于產(chǎn)品本身 功能較為復(fù)雜，既需要用戶能 聚焦于內(nèi)容，又需要給出用戶不同頁面之間的入口，以便用戶進(jìn)行直接跳轉(zhuǎn)，那就采用組合式導(dǎo)航，利用不同導(dǎo)航的特性來滿足產(chǎn)品需求。

組合式導(dǎo)航目前最常見的導(dǎo)航方式。

如：標(biāo)簽式導(dǎo)航+列表式 ;標(biāo)簽式+宮格式 ; 舵式+列表式+標(biāo)簽式等等。

每個(gè)產(chǎn)品迭代發(fā)展和變化，也會(huì)導(dǎo)致產(chǎn)品導(dǎo)航在過程中不停的產(chǎn)生變化，就必須依據(jù)用戶屬性和使用場(chǎng)景進(jìn)行調(diào)整。不拘泥任何模式，解決問題才是根本。

那我們?cè)撊绾无k呢？以下總結(jié)了幾點(diǎn)建議：

1. 整理導(dǎo)航結(jié)構(gòu)內(nèi)容

APP常包括的內(nèi)容是：標(biāo)志、導(dǎo)航、搜索框、語言、登陸注冊(cè)、口號(hào)等等這些內(nèi)容。

這么多內(nèi)容不可能全部放置在界面當(dāng)中，所以設(shè)計(jì)的過程中，一定要提煉出自己核心的內(nèi)容：用戶一進(jìn)來看到什么，會(huì)做什么操作，找到他們最常用的功能，他們最核心最重要的功能。

例如：抖音就是拍攝，支付寶就是支付，微信就是社交，小紅書就是內(nèi)容，根據(jù)最核心的內(nèi)容，再去篩選層次更低的。

例如：抖音除了拍攝，還有瀏覽內(nèi)容，抖音貼近社交就要突出這樣的元素，那么消息和朋友都是很重要的內(nèi)容。

2. 分析APP風(fēng)格，確定導(dǎo)航的具體風(fēng)格

在確定網(wǎng)站導(dǎo)航的構(gòu)成內(nèi)容之后，我們可以將這些信息列出，分析APP的整體風(fēng)格和最佳的用戶體驗(yàn)，確定好導(dǎo)航的表現(xiàn)形式。

3. 設(shè)計(jì)方案

在確定好導(dǎo)航的表現(xiàn)形式是做頂部固定導(dǎo)航還是底部固定導(dǎo)航之后，我們需要將確認(rèn)好的導(dǎo)航內(nèi)容進(jìn)行組合排列設(shè)計(jì)。選出最優(yōu)的一款設(shè)計(jì)方案。

在設(shè)計(jì)的過程中，我們需要遵從用戶體驗(yàn)為上的設(shè)計(jì)原則，在保證內(nèi)容可讀的情況下，再去保證界面設(shè)計(jì)的最優(yōu)。

舉個(gè)例子：QQ音樂。

左圖的QQ音樂原圖主要是突出了播放內(nèi)容，但跟右圖相比，界面簡(jiǎn)單明了，也突出播放的重點(diǎn)，但是不符合現(xiàn)在的定位，現(xiàn)在的QQ音樂以內(nèi)容作為核心需求，給用戶提供更多的內(nèi)容服務(wù)。

產(chǎn)生的影響：產(chǎn)品的需求在變化的同時(shí)，我們所使用的界面以及導(dǎo)航欄的選擇也有所不同。

這個(gè)是最久之前的QQ音樂界面，這時(shí)候核心需求是播放工具，歌曲都是下載下來保存在手機(jī)中。

過渡到現(xiàn)在的版本，界面導(dǎo)航欄發(fā)生了變化，使用了多種導(dǎo)航欄的使用模式，同時(shí)此時(shí)在線聽歌已經(jīng)是常態(tài)，所以此時(shí)核心需求是提供歌曲內(nèi)容，更多的展示內(nèi)容是音樂，而不是最初的用戶界面。

因此，導(dǎo)航也會(huì)跟著去變化。是一個(gè)由少到多的過程，需求在變多，提供的服務(wù)也在變多，導(dǎo)航欄的選擇也在變化，去適應(yīng)更多的需求變化。

那么我們一起看看咱們的國民軟件-支付寶都用了哪些導(dǎo)航設(shè)計(jì)。

這是支付寶的首頁，很容易我們就看到了他的「tab式導(dǎo)航」。

在「tab式導(dǎo)航」中，都是我們常用的功能，頁面轉(zhuǎn)換最多的頁面。

接下來還有「宮格式導(dǎo)航」集合了日常所需的部門工具，屬于工具類合集。

當(dāng)然不止于此啦，在「我的」界面里依然有許多功能入口，采用了「列表式導(dǎo)航」。

觀察市面上同類別的產(chǎn)品也是一樣，不單只會(huì)適應(yīng)一種導(dǎo)航欄模式，各類的導(dǎo)航欄都是能夠去加以運(yùn)用的。

縱觀各類的APP也是一樣，導(dǎo)航欄也是一直在變化的，但是核心點(diǎn)一直沒有發(fā)生變化，那就是：給用戶提供便利和美觀。

九、總結(jié)

很多導(dǎo)航與導(dǎo)航之間可以相互搭配使用，沒有最完美的導(dǎo)航，而設(shè)計(jì)導(dǎo)航的首要因素是要理解需求，從需求出發(fā)，以及配合相應(yīng)的場(chǎng)景使用，做出最合適的設(shè)計(jì)模式。

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

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