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

一、導(dǎo)航設(shè)計(jì)四步走

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

二、導(dǎo)航的設(shè)計(jì)原則

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

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

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

以背景中的需求為例：

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

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

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

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

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

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

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

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

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

劃分優(yōu)先級(jí)

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

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

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

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

三、常見導(dǎo)航模式

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

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

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

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

特點(diǎn)：

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

2. 分層導(dǎo)航

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

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

特點(diǎn)：

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

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

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

目前，本類型導(dǎo)航更多是作為二級(jí)導(dǎo)航來應(yīng)用，而若要作為一級(jí)導(dǎo)航來用，則需要滿足層級(jí)淺且內(nèi)容平級(jí)的條件，常見于單一任務(wù)型工具 APP，例如 iOS 天氣、美圖秀秀。

3. 抽屜導(dǎo)航

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

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

特點(diǎn)：

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

注意點(diǎn)：

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

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

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

5. 其他導(dǎo)航

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

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

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

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

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

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

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

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

2. 大屏幕的交互設(shè)計(jì)

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

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

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

精致的滑動(dòng)交互

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

Ada

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

ofo & 蘋果地圖

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

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

歡迎關(guān)注「58UXD」的微信公眾號(hào)：

圖片素材作者：Ketan Rajput

「導(dǎo)航設(shè)計(jì)指南」

• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之導(dǎo)航類》
• 《超詳細(xì)解讀：UI導(dǎo)航設(shè)計(jì)不僅僅指的是導(dǎo)航欄》
• 《讓APP中內(nèi)容呈現(xiàn)更友好易用的5種常見導(dǎo)航設(shè)計(jì)模式》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com