設(shè)計師進階筆記！APP導航的設(shè)計套路

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

一、導航設(shè)計四步走

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

二、導航的設(shè)計原則

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

1. 定義用戶和核心任務

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

以背景中的需求為例：

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

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

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

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

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

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

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

從用戶認知出發(fā)

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

劃分優(yōu)先級

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

把握任務的場景類型

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

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

三、常見導航模式

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

1. 平面導航（通常用為主導航）

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

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

特點：

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

2. 分層導航

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

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

特點：

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

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

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

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

3. 抽屜導航

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

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

特點：

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

注意點：

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

4. 內(nèi)容驅(qū)動的導航

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

5. 其他導航

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

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

1. 算法讓導航變得更輕量了

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

試想一下，當淘寶、京東 APP 不具備智能匹配時，除了運用搜索外，那要找到一件心儀的上衣該多么費勁：

首頁 → 類別 → 服裝 → T恤 → T恤風格篩選 → 瀏覽商品列表

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

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

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

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

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

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

精致的滑動交互

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

Ada

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

ofo & 蘋果地圖

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

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

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

圖片素材作者：Ketan Rajput

「導航設(shè)計指南」

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

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

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

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