產(chǎn)品同學(xué)要做一款新APP，對導(dǎo)航犯了愁。而在兩大設(shè)計規(guī)范中，均為我們指出了如何設(shè)計APP導(dǎo)航，前人的文章中也有不少總結(jié)，在此作一次梳理，供自己內(nèi)化也給各位讀者分享。

精華濃縮版

1. 導(dǎo)航設(shè)計四步走：
2. 明確用戶角色和任務(wù)流程；
3. 搭建清晰合理的信息架構(gòu)；
4. 靈活運(yùn)用導(dǎo)航模式；
5. 利用推薦算法來簡化，關(guān)注拇指操作熱區(qū)來創(chuàng)新。

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

“導(dǎo)航組織了內(nèi)容，因此它能夠讓用戶更輕松的在應(yīng)用中找到所需的信息。為了讓導(dǎo)航更符合應(yīng)用，首先要定義你的用戶，他們使用應(yīng)用的典型路徑，以及你希望他們?nèi)ビ霉δ??！薄狹aterial Design

定義用戶和核心任務(wù)?

在設(shè)計導(dǎo)航之前需要明確用戶是誰以及他們最常用的操作。

以背景中的需求為例：

本次需求已明確用戶是某類商家群體。而這個答案前期可以通過需求挖掘、用戶調(diào)研等方式進(jìn)行實(shí)際分析，常用手段包括用戶畫像、深度訪談、調(diào)查問卷、焦點(diǎn)小組等等，具體操作方式在網(wǎng)上均有專門介紹，在此不做展開。

在獲得了商家的核心痛點(diǎn)和訴求之后，那么這類群體會有哪些操作？經(jīng)過任務(wù)拆解，我們列出了他們的所需的操作清單：

然后整理出他們的主要功能流程：

明確了用戶群體和核心任務(wù)之后，就可以解構(gòu)功能流程，通過信息架構(gòu)來搭建APP的骨骼。

合理的信息架構(gòu)

信息架構(gòu)體現(xiàn)的是APP全部內(nèi)容的組成方式，以合理的歸組分類的方式可以使產(chǎn)品更加易于理解和瀏覽；也能讓功能框架具備良好的擴(kuò)展性。

在初期整理時可能會面對數(shù)十甚至數(shù)百的功能點(diǎn)，那么如何有效組織信息呢？

（1）從用戶認(rèn)知出發(fā)

最經(jīng)典的方式是卡片分類法，讓用戶根據(jù)自己的認(rèn)知來組織功能點(diǎn)。具體操作又分為封閉式分類和開放式分類，前者由產(chǎn)品自身特點(diǎn)設(shè)立部分類別，后者則完全由用戶自行分類。以此得到用戶版的信息架構(gòu)，然后通過多個用戶版的信息架構(gòu)來合并同類項(xiàng)，獲取符合用戶認(rèn)知的功能結(jié)構(gòu)。

（2）劃分優(yōu)先級

明確哪些是最重要、次要及不重要的。一般可以從這三個緯度來評估：需求強(qiáng)弱、使用頻率、任務(wù)數(shù)量，輔助以決策工具，獲取最優(yōu)解。當(dāng)功能多的時候會取舍兩難，但如果每個功能都很重要，反而說明了每個都不重要，對用戶而言也很容易失去焦點(diǎn)。

（3）把握任務(wù)的場景類型

不同的任務(wù)場景對應(yīng)著不同組織方式，一般情況下可以分為瀏覽型和任務(wù)型。瀏覽型場景，那產(chǎn)品便可能需要展示更多的事物對象，讓用戶能夠快速獲得清晰的認(rèn)知，例如資訊類APP將很多新聞類別平鋪展開；而任務(wù)型場景，那就要突出關(guān)鍵的流程結(jié)點(diǎn)，讓用戶能夠順利完成想要做的事情，例如電商類APP的購物車和訂單機(jī)制。

最后，我們可能會梳理出這三種情況的信息架構(gòu)，然后根據(jù)導(dǎo)航模式開始界面設(shè)計。

常見導(dǎo)航模式

iOS設(shè)計指南已為我們指出了3種經(jīng)典導(dǎo)航模式：分層導(dǎo)航、平面導(dǎo)航、內(nèi)容驅(qū)動導(dǎo)航，當(dāng)然還有安卓倡導(dǎo)的抽屜導(dǎo)航。而市面上大多數(shù)APP的導(dǎo)航也是基于這幾類進(jìn)行演變或組合。

平面導(dǎo)航（通常用為主導(dǎo)航）

最常見便屬于標(biāo)簽式導(dǎo)航。標(biāo)簽既可位于屏幕上方，也可位于下方，為了方便用戶手指操作，一般都放在底部。

適用場景：多個頂級模塊相互獨(dú)立，存在模塊間頻繁切換的情況

特點(diǎn)：

1. 可見性好，功能更容易被用戶發(fā)現(xiàn)；
2. 操作性好，底部區(qū)域手指操作方便；
3. 符合大多數(shù)的用戶習(xí)慣。

分層導(dǎo)航

典型代表便是iOS的設(shè)置，本質(zhì)是展現(xiàn)功能架構(gòu)的父子級，每個頁面都有一個子級，直到抵達(dá)終點(diǎn)。要去往另一個終點(diǎn)，則須重新回到父級，然后從頭開始選擇另一個子級。

適用場景：任務(wù)數(shù)量較多，相互獨(dú)立，任務(wù)之間不需要頻繁切換。

特點(diǎn)：

1. 結(jié)構(gòu)清晰，邏輯性強(qiáng)；
2. 易于理解，能夠幫助用戶快速定位到目標(biāo)；

注意點(diǎn)：當(dāng)內(nèi)容多或分布不合理會導(dǎo)致用戶查找困難；不適合頻繁切換任務(wù)的場景。

在這基礎(chǔ)上，由信息的布局方式差異衍生出了宮格導(dǎo)航、展覽館式導(dǎo)航、跳板式導(dǎo)航等，前人已總結(jié)了諸多樣式，在此不再贅述。

目前，本類型導(dǎo)航更多是作為二級導(dǎo)航來應(yīng)用，而若要作為一級導(dǎo)航來用，則需要

滿足層級淺且內(nèi)容平級的條件，常見于單一任務(wù)型工具APP，例如iOS天氣、美圖秀秀。

抽屜導(dǎo)航

此類導(dǎo)航不在iOS設(shè)計規(guī)范之內(nèi)，但在安卓系統(tǒng)的倡導(dǎo)下流行過一段時間。抽屜導(dǎo)航的核心思想是隱藏，收起非核心的操作與功能，讓用戶能夠更聚焦核心任務(wù)。

適用場景：核心功能數(shù)量少頻次很高；輔助功能數(shù)量多頻次低；

特點(diǎn)：

1. 節(jié)省頁面空間，聚焦核心內(nèi)容；
2. 擴(kuò)展性好，可容納很多功能；
3. 良好的適應(yīng)性能，能夠同時應(yīng)用于PC和移動Web。

注意點(diǎn)：

1. 被收起功能曝光率低，當(dāng)核心功能多于3個的時候請用其他導(dǎo)航模式；
2. 收起內(nèi)的通知紅點(diǎn)容易重合；
3. 頂部位置點(diǎn)擊距離長；
4. 手勢操作容易與頁面滑動操作重合，需要特別處理。

內(nèi)容驅(qū)動的導(dǎo)航

這類導(dǎo)航多見于游戲娛樂型產(chǎn)品，例如最近火熱的《第五人格》所運(yùn)用的導(dǎo)航形式。這類導(dǎo)航具備豐富的多樣性，在此不做過多展開，如有興趣可自行搜索了解。

其他導(dǎo)航

Material Design的等級體系與iOS里的分層導(dǎo)航相似，然而值得一提的是鏈接設(shè)定。通過鏈接可以讓導(dǎo)航系統(tǒng)中不相鄰的兩個功能快速切換，讓用戶能夠通過滑動操作遍歷所有選項(xiàng)卡片。這類應(yīng)用在網(wǎng)易云音樂（安卓端）有很好的體現(xiàn)。

導(dǎo)航的現(xiàn)在&未來

算法讓導(dǎo)航變得更輕量了

推薦算法將我們潛在的檢索對象直接呈現(xiàn)在眼前，大幅減少了按部就班的訪問路徑。

試想一下，當(dāng)淘寶、京東APP不具備智能匹配時，除了運(yùn)用搜索外，那要找到一件心儀的上衣該多么費(fèi)勁：

首頁 → 類別 → 服裝 → T恤 → T恤風(fēng)格篩選 → 瀏覽商品列表

相似的也有大眾點(diǎn)評/美團(tuán)，當(dāng)你坐進(jìn)一家餐館時，首頁自動為你彈出當(dāng)前餐館的傳送門，讓你能夠直接抵達(dá)餐館詳情頁，避免了檢索的麻煩。這類傳送門通常也只是一部分界面模塊，不會影響到整體導(dǎo)航結(jié)構(gòu)，然而僅僅是這樣的技術(shù)能力，就能讓復(fù)雜的檢索流程變得簡單甚至消失。

語音交互也是另類導(dǎo)航的體現(xiàn)。通過語音識別，讓機(jī)器自動識別出人所要尋找的內(nèi)容，例如呼喚Siri打開某個塵封已久的APP，遠(yuǎn)比自己在手機(jī)中查找要來得高效，特別是在手機(jī)裝了很多APP的情況下。隨著對話式界面的興起和語音技術(shù)的發(fā)展，如果能將這類形式運(yùn)用的APP的導(dǎo)航設(shè)計中，那一定會革新現(xiàn)有的APP體驗(yàn)。

大屏幕的交互設(shè)計

手機(jī)屏幕總是越變越大，全面屏在18年也開始逐漸普及。然而用戶的手機(jī)操作方式和習(xí)慣依然沒有太大改變，單手和雙手操作的比例依然各占一半。如何在大尺寸屏幕中設(shè)計出更好的交互，也是設(shè)計師需要認(rèn)真對待的問題。

（1）關(guān)注底部操作區(qū)

底部導(dǎo)航在這方面就有很好的延續(xù)性，既能提供舒適的操作空間，也可保證標(biāo)簽的點(diǎn)擊性。在此之外，市面上也有不少產(chǎn)品將抽屜導(dǎo)航轉(zhuǎn)移到下部區(qū)域，讓用戶手指能夠更輕易訪問。

（2）精致的滑動交互

去年iPhone X帶來的交互形式讓人耳目一新，而新版AppStore和早前的蘋果地圖（iOS10更新版）也體現(xiàn)了這種精致的滑動交互。在國內(nèi)APP中，夸克瀏覽器也有類似優(yōu)秀的設(shè)計，讓網(wǎng)址輸入變得輕松而簡單。

（3）Ada

一款健康助理應(yīng)用，通過對話的形式設(shè)計任務(wù)流程，并將導(dǎo)航區(qū)域轉(zhuǎn)移至屏幕底部，讓用戶能夠單手完成所有操作。

（4）ofo&蘋果地圖

小黃車APP的核心功能集中在下部區(qū)域，通過滑動方式也能完成頁面的喚起和關(guān)閉。

蘋果地圖也在整體交互上進(jìn)行了徹底的重構(gòu)。核心操作區(qū)最大限度的控制在（手指舒適區(qū)之間），通過滑動操作來控制不同頁面的層級轉(zhuǎn)換，讓用戶只用一只手就可以輕松完成目的地的選擇與導(dǎo)航。

小結(jié)

重復(fù)一遍上面的話嗎？不存在的。

作者：蔡陽明，交互設(shè)計師，交互一年級，懂點(diǎn)地質(zhì)，玩點(diǎn)攝影

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計中心（微信公眾號@58UXD），作者@蔡陽明

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