本文主要是對(duì)iOS和Android兩個(gè)設(shè)計(jì)規(guī)范中關(guān)于如何設(shè)計(jì)導(dǎo)航的介紹，enjoy~

前面幾周，我們依次介紹了iOS和Android設(shè)計(jì)規(guī)范中，關(guān)于導(dǎo)航控件的內(nèi)容，各控件對(duì)比見(jiàn)下面的表格：

掌握了這些導(dǎo)航控件，今天跟大家說(shuō)一下兩個(gè)設(shè)計(jì)規(guī)范中關(guān)于如何設(shè)計(jì)導(dǎo)航的介紹。

Material Design Guideline

導(dǎo)航把內(nèi)容組織起來(lái)，因此用戶可以在你的應(yīng)用里更方便地找到需要的內(nèi)容。導(dǎo)航的設(shè)計(jì)，可以包含經(jīng)常訪問(wèn)的頁(yè)面，設(shè)置選項(xiàng)，或者你希望用戶進(jìn)行的操作內(nèi)容。

如何選擇最適合你的應(yīng)用的導(dǎo)航類(lèi)型呢？你需要首先確定你的應(yīng)用的用戶是誰(shuí)，他們使用你的應(yīng)用的典型路徑，以及你希望他們進(jìn)行的操作是什么。

例如，如果你在設(shè)計(jì)一個(gè)飯店應(yīng)用，那么應(yīng)用的用戶可能需要的操作有：進(jìn)行預(yù)訂、在網(wǎng)上po菜單（中國(guó)人更可能是po菜的照片啊，喲喂）、或者寫(xiě)評(píng)價(jià)。通過(guò)確定大多數(shù)用戶的目標(biāo)是什么，你可以更好地設(shè)計(jì)你的導(dǎo)航結(jié)構(gòu)，以滿足他們最優(yōu)先的需要。

下面詳細(xì)介紹如何確定一個(gè)應(yīng)用的導(dǎo)航結(jié)構(gòu)。

制作任務(wù)清單

找出你的應(yīng)用的用戶是誰(shuí)，以及他們的角色是什么，例如消費(fèi)者？飯店老板？或者記者。找出那些他們都想執(zhí)行的、最普遍的任務(wù)。

找出你的關(guān)鍵用戶，以及他們可能會(huì)進(jìn)行的操作。

確定優(yōu)先級(jí)

給用戶的任務(wù)分出優(yōu)先級(jí)：高、中、低。在UI界面中，給那些用戶經(jīng)常使用或者優(yōu)先級(jí)高的功能以更突出的設(shè)計(jì)。

根據(jù)用戶需求的改變，隨時(shí)調(diào)整優(yōu)先級(jí)排序。

當(dāng)為一個(gè)飯店應(yīng)用設(shè)計(jì)導(dǎo)航時(shí)，最高優(yōu)先級(jí)的任務(wù)包含：查看飯店的信息或者找到新的飯店

分組和排序

找出用戶在你的應(yīng)用中操作的所有流程路徑，并通過(guò)研究這些路徑確定你的導(dǎo)航設(shè)計(jì)：

– 將用戶常用的功能放在導(dǎo)航的顯著位置；

– 將相關(guān)聯(lián)的任務(wù)分成一組，并通過(guò)這些分組來(lái)確定導(dǎo)航的結(jié)構(gòu)。

不論用戶是希望找到一個(gè)新的飯店，或者是查看他們收藏的飯店，這兩個(gè)操作都指向查看飯店信息這個(gè)操作。因此，我們需要在用戶搜索或者查看收藏的流程里，讓用戶可以容易地查看飯店信息。

拆解

將復(fù)雜、大型、或者模糊的用戶任務(wù)分解成更小的用戶任務(wù)。這些更小的用戶任務(wù)可以是更常用的、更易懂的、或者更好的滿足用戶目標(biāo)的。

比如，將搜索這個(gè)大任務(wù)，分解成“通過(guò)名稱(chēng)”、“通過(guò)地點(diǎn)”、或者“通過(guò)受歡迎程度”這三個(gè)更小的操作，可以揭示出作為導(dǎo)航的一部分，頁(yè)面里需要添加這三個(gè)操作。

大任務(wù)“找到一個(gè)飯店”實(shí)際上會(huì)包含許多更小的任務(wù)，比如：瀏覽附近的飯店、通過(guò)名稱(chēng)搜索、通過(guò)受歡迎程度搜索。這些更小的任務(wù)對(duì)于用戶搜索來(lái)說(shuō)，會(huì)更簡(jiǎn)單。因此它們應(yīng)該被加入到你的導(dǎo)航設(shè)計(jì)里。

iOS Human Interface Design Guideline

人們不會(huì)注意到導(dǎo)航的設(shè)計(jì)，直到導(dǎo)航?jīng)]有滿足人們的期望（而讓人們受挫）。設(shè)計(jì)師的任務(wù)，就是設(shè)計(jì)一個(gè)支持應(yīng)用的架構(gòu)和目的的導(dǎo)航，而讓用戶不會(huì)注意到它。導(dǎo)航的設(shè)計(jì)，應(yīng)該讓人感到自然和熟悉，而不應(yīng)該主導(dǎo)了一個(gè)界面或者把用戶的注意力從內(nèi)容引開(kāi)了。在iOS系統(tǒng)里，有三種主要的導(dǎo)航形式：

層級(jí)導(dǎo)航

在每一級(jí)頁(yè)面只選一個(gè)入口，直到用戶到達(dá)他們的目標(biāo)頁(yè)面。如果要去往另一個(gè)目標(biāo)頁(yè)面，用戶必須一步步返回或者從頭開(kāi)始重新選擇。系統(tǒng)里的設(shè)置和郵件使用了這種導(dǎo)航形式。

層級(jí)導(dǎo)航示意

扁平導(dǎo)航

扁平導(dǎo)航允許用戶在多個(gè)內(nèi)容分類(lèi)之間切換。系統(tǒng)的音樂(lè)和App Store使用了這種導(dǎo)航形式。

扁平導(dǎo)航示意

內(nèi)容驅(qū)動(dòng)或體驗(yàn)驅(qū)動(dòng)導(dǎo)航

該種導(dǎo)航允許用戶在內(nèi)容間自由地切換，或者內(nèi)容本身就定義了導(dǎo)航。游戲類(lèi)、書(shū)籍類(lèi)、以及其它沉浸式應(yīng)用一般采用該種導(dǎo)航形式。

內(nèi)容驅(qū)動(dòng)或體驗(yàn)驅(qū)動(dòng)導(dǎo)航示意

有些應(yīng)用綜合了多種導(dǎo)航形式。例如，應(yīng)用的大框架采用扁平導(dǎo)航，而每個(gè)分類(lèi)里采用層級(jí)導(dǎo)航。

關(guān)于導(dǎo)航，蘋(píng)果設(shè)計(jì)規(guī)范給出了以下建議：

• 總是提供清晰的路徑。用戶應(yīng)該總是能夠知曉他們現(xiàn)在在哪兒以及如何去到他們的目標(biāo)頁(yè)面。無(wú)論采用何種導(dǎo)航形式，到達(dá)內(nèi)容的路徑是邏輯清晰、可預(yù)測(cè)、容易掌握的，這一點(diǎn)至關(guān)重要。一般來(lái)說(shuō)，給每個(gè)頁(yè)面分配唯一的路徑。如果你需要讓用戶在不同的情況下都看到同一個(gè)頁(yè)面，那么請(qǐng)考慮使用上拉菜單、警告框、彈出框、或者模態(tài)視圖。
• 設(shè)計(jì)一個(gè)能讓用戶快速、容易地到達(dá)內(nèi)容的信息結(jié)構(gòu)。認(rèn)真組織應(yīng)用的信息結(jié)構(gòu)，以便使用最少的交互操作和頁(yè)面（就能承載下所有的信息）。
• 使用手勢(shì)來(lái)創(chuàng)造流暢的體驗(yàn)。讓用戶在操作時(shí)遇到最少的阻力。例如，設(shè)計(jì)師可以讓用戶從屏幕邊緣劃動(dòng)以回到之前的頁(yè)面。
• 使用標(biāo)準(zhǔn)的導(dǎo)航控件。用戶對(duì)于導(dǎo)航控件已經(jīng)比較熟悉，這可以讓他們迅速的了解如何使用你的應(yīng)用。

以上介紹了蘋(píng)果和谷歌設(shè)計(jì)規(guī)范中關(guān)于導(dǎo)航設(shè)計(jì)的部分。討論讓人認(rèn)識(shí)更深刻，歡迎留言討論。

#專(zhuān)欄作家#

沐風(fēng)，微信公眾號(hào)：“沐風(fēng)與體驗(yàn)設(shè)計(jì)”。人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家，2017年度作家評(píng)選最佳人氣獎(jiǎng)。愛(ài)奇藝Phone和PC端交互團(tuán)隊(duì)負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計(jì)經(jīng)驗(yàn)，專(zhuān)注設(shè)計(jì)領(lǐng)域，歡迎關(guān)注。

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

題圖來(lái)自 Unsplash，基于CC0協(xié)議。