編者按：雖然蘋果官方的人機(jī)交互指南非常詳盡，但是很多信息都分散在設(shè)計(jì)規(guī)范的不同地方，設(shè)計(jì)師 Frank Rausch 結(jié)合 WWDC 的演講和相關(guān)規(guī)范進(jìn)行了詳盡的整理，僅此一篇幫你梳理清楚 iOS 的全部導(dǎo)航模式，以下為正文：

Frank Rausch 所創(chuàng)建的這個(gè)頁面包含了目前 iOS 平臺(tái)上主要的導(dǎo)航模式。比如Drill Down、模態(tài)、金字塔、分步導(dǎo)航等常見的模式，你可以將這些內(nèi)容視作為 Apple 人機(jī)交互指南（HIG）的第三方梳理版和福利，其中內(nèi)容由專精且非常關(guān)注 UI 的設(shè)計(jì)師所撰寫。

1、導(dǎo)航結(jié)構(gòu)

典型的 iOS APP 具有固定的結(jié)構(gòu)，通常是有著多個(gè)層級(jí)結(jié)構(gòu)的樹型結(jié)構(gòu)。采用固定的結(jié)構(gòu)，讓導(dǎo)航具備可預(yù)測(cè)性。結(jié)構(gòu)化的導(dǎo)航模式，讓用戶知道他們是從哪里來的，他們?cè)趯哟谓Y(jié)構(gòu)中所處的位置，以及如何透過導(dǎo)航去往想去的地方，這種可靠性讓用戶充滿信心。

1.1、Drill Down（向下鉆?。?/h4>

Drill Down 這種導(dǎo)航采用的是分級(jí)列表的形式，遍歷整個(gè)信息樹，逐層逐屏地呈現(xiàn)內(nèi)容。

使用水平移動(dòng)的動(dòng)畫過渡效果來呈現(xiàn)結(jié)構(gòu)，用戶可以向右瀏覽更深層的結(jié)構(gòu)，向左返回上一級(jí)內(nèi)容。

Drill Down 是無狀態(tài)呈現(xiàn)的，用戶始終可以遍歷整個(gè)樹狀表單，并且不會(huì)涉及到保存與否的問題，也不會(huì)被相關(guān)彈出框打斷。

導(dǎo)航欄會(huì)顯示當(dāng)前界面的標(biāo)題。

列表行上會(huì)使用 > 符號(hào)來標(biāo)識(shí)可以深入到下一層的層級(jí)結(jié)構(gòu)。

使用 < 符號(hào)來標(biāo)識(shí)返回到父級(jí)列表的路徑，如果空間允許，它應(yīng)該標(biāo)識(shí)有父級(jí)表單的標(biāo)題，而不是通用的「返回」。

從屏幕左邊緣向右滑動(dòng)，和「返回」按鈕效果相同。

對(duì)于涉及從右向左滑動(dòng)的內(nèi)容，Drill Down 的控件和內(nèi)容布局會(huì)鏡像處理，以匹配閱讀的方向。

可以動(dòng)態(tài)構(gòu)建樹形結(jié)構(gòu)，方便用戶來進(jìn)行過濾和篩選數(shù)據(jù)內(nèi)容。比如在音樂播放器當(dāng)中，用戶可以基于不同的類型（藝術(shù)家、專輯、流派）使用 Drill Down 式的導(dǎo)航，來篩選音樂和專輯內(nèi)容。

Drill Down 是 macOS 中「訪達(dá)」中的多欄列表式導(dǎo)航（Miller Columns）在移動(dòng)端界面上的變體。

1.2、Flat（扁平導(dǎo)航）

扁平導(dǎo)航模式下，直接在根級(jí)別上，劃分出了層次結(jié)構(gòu)，然后將分類以選項(xiàng)卡的形式，放在底欄和側(cè)邊欄上。

選項(xiàng)卡的具體劃分，通常會(huì)圍繞主要的功能來進(jìn)行區(qū)分，它的設(shè)計(jì)會(huì)塑造用戶期望，產(chǎn)品設(shè)計(jì)也會(huì)圍繞此來構(gòu)建心智模型。

選項(xiàng)卡欄中始終會(huì)有一個(gè)選項(xiàng)卡處于被選中的狀態(tài)。

當(dāng)前被選中的選項(xiàng)卡不應(yīng)該被編程修改、或者因?yàn)辄c(diǎn)擊其他的按鈕而發(fā)生改變。

標(biāo)簽欄應(yīng)該始終在界面上可見，除非它被特定的模態(tài)窗口（比如彈出框）所覆蓋（具體見下文）。

選項(xiàng)卡可用作過濾器，或者同一大型內(nèi)容合集的不同入口（比如音樂庫、視頻庫）。

每個(gè)標(biāo)簽欄下的內(nèi)容和狀態(tài)都在當(dāng)前標(biāo)簽內(nèi)所管理。

標(biāo)簽欄應(yīng)該以可預(yù)測(cè)的方式存在和運(yùn)行，它們不應(yīng)該有觸發(fā)式的變化，超出用戶預(yù)期。

臭名昭著的漢堡菜單，是標(biāo)簽欄的「邪惡兄弟」，當(dāng)所有的菜單都被藏在小圖標(biāo)之后，內(nèi)容的可發(fā)現(xiàn)性會(huì)受到影響。2015 年前后，漢堡菜單一度在 iOS 上流行過幾年，最后研究表明標(biāo)簽欄更容易被發(fā)現(xiàn)和使用之后，多數(shù)應(yīng)用放棄了使用漢堡菜單。

1.3、Pyramid（金字塔結(jié)構(gòu)）

金字塔模式下，用戶可以在同一層級(jí)下，使用使用導(dǎo)航快速切換瀏覽同一層級(jí)的兄弟頁面/內(nèi)容，而無需返回父級(jí)界面。

水平滑動(dòng)手勢(shì)是在多媒體類 APP 當(dāng)中最常使用的內(nèi)容瀏覽和切換模式，不過也有 APP 當(dāng)中會(huì)使用 v 型的上下翻頁按鈕來瀏覽內(nèi)容，上下翻頁切換是左右滑動(dòng)的變體。

在 iOS 的照片 APP 當(dāng)中，點(diǎn)擊一張照片就會(huì)全屏打開，這個(gè)時(shí)候左右滑動(dòng)就能翻閱近鄰的其他照片。

還可以使用小型的集合式頁面控件，可以通過類似的方式來瀏覽兄弟項(xiàng)目，同時(shí)還能借助小點(diǎn)來了解進(jìn)度和數(shù)量。

1.4、Hub-and-Spoke（中心輻射式）

中心輻射式的導(dǎo)航適合于涉及大量不相關(guān)類目的應(yīng)用，這種情況下，子界面之間的切換都需要先回到位于中心的主界面。

iOS 主屏就是典型的中心輻射式的導(dǎo)航，所有已經(jīng)安裝的 APP 均勻分布在界面上，主界面是在不同 APP 之間切換的樞紐。

屏幕底部常駐的條形主界面指示器，則是一個(gè)非常易懂的「快速逃生出口」，上滑可以快速回到主界面。

值得注意的是，這種交互模式相對(duì)較少在 APP 當(dāng)中使用，只有極少數(shù)超大型、系統(tǒng)級(jí)的應(yīng)用會(huì)用到類似這樣的設(shè)計(jì)。普通的 APP 很少會(huì)用到這種系統(tǒng)級(jí)的交互模式。

2、層疊導(dǎo)航

和平鋪于界面之上的UI控件不同，我們所說的層疊式的導(dǎo)航元素可能出現(xiàn)在任何一種情況下，在不同的環(huán)境和界面中，也就是我們常說的模態(tài)和非模態(tài)。彈出框就是一種典型的模態(tài)，需要用戶點(diǎn)擊操作之后，它才會(huì)消失，當(dāng)它存在的時(shí)候，底部的界面是無法操作的。無需交互的通知型彈窗則是非模態(tài)，它不會(huì)影響底部的界面。

2.1、高阻力模態(tài)

高阻力型的模態(tài)疊加層在B端和表單類的界面中很常見，比如工作表單中會(huì)有多個(gè)警告型彈出框，用戶需要逐個(gè)閱讀，做出選擇，點(diǎn)擊決定并關(guān)閉之后，才能和位于底部的界面進(jìn)行交互。

高阻力模態(tài)通常需要用戶做出決定才能關(guān)閉，比如保存文檔，確認(rèn)或者取消。

模態(tài)通常專注于凸顯特定的、獨(dú)立的任務(wù)，比如撰寫電子郵件或者添加日歷事件等。

涉及多個(gè)操作的狀態(tài)表和警報(bào)提醒，是典型的高阻力模態(tài)。

2.2、低阻力模態(tài)

和高阻力模態(tài)不同的地方在于，低阻力模態(tài)的彈出框通常只會(huì)遮擋住 APP 界面的部分，而用戶也不必做出非此即彼的選擇。

這類模態(tài) UI 元素很容易被忽略，因?yàn)橥ǔＫ鼈儾粫?huì)徹底阻擋用戶進(jìn)行多數(shù)操作，點(diǎn)擊關(guān)閉按鈕，或者上下滑動(dòng)頁面，甚至有的直接點(diǎn)擊空白的地方或或者彈出框的 x 按鈕直接關(guān)閉，不費(fèi)吹灰之力就能關(guān)閉這類模態(tài)窗口。

僅有一個(gè) OK 或者「確定」按鈕的模態(tài)窗口是很容易關(guān)閉。但是低阻力并不代表無阻力，盡可能避免使用這類模態(tài)窗口，因?yàn)樗鼈儠?huì)打斷用戶流程，通常可以用非模態(tài)的通知代替即可。

2.3、無阻力模態(tài)

非模態(tài)窗口界面，只會(huì)覆蓋一部分界面，幾乎不會(huì)阻擋界面操作，甚至?xí)孕邢Щ螂[藏，因?yàn)樗鼈儙缀醪粫?huì)影響到用戶交互，所以它們幾乎是無阻力的。

這些非模態(tài)控件有時(shí)候是相應(yīng)外部觸發(fā)而出現(xiàn)的狀態(tài)指示或者信息提示，比如系統(tǒng)通知。

如果它們會(huì)自動(dòng)小時(shí)，那么應(yīng)該提供一目了然的信息，盡量規(guī)避干擾。

而臨時(shí)出現(xiàn)的非模態(tài) UI 控件中，是有可能存在可執(zhí)行的交互的，比如用戶可以在消息提示消失前點(diǎn)擊通知，或者在點(diǎn)擊音量物理按鈕呼出界面中音量控件時(shí)，可以上下滑動(dòng)快速調(diào)整音量。

如果一個(gè)非模態(tài)的UI控件，不會(huì)影響 APP 的使用且不會(huì)自動(dòng)出現(xiàn)或消失，在90 年代，UI 設(shè)計(jì)師會(huì)稱之為「palette」。

3、嵌入式導(dǎo)航

嵌入式導(dǎo)航需要非常小心地設(shè)計(jì)，以貼合嚴(yán)格的 iOS 界面結(jié)構(gòu)和空間模型，最好將這些 UI 控件直接嵌入到一個(gè)獨(dú)立的控件或者視圖當(dāng)中，可以使用 APP 結(jié)構(gòu)中明確定義過的位置，也可以是一個(gè)模態(tài)控件。

3.1、狀態(tài)變化

同一個(gè)界面視圖可以有多種不同的狀態(tài)，比如加載過程中界面顯示的是加載控件，加載完成之后顯示的是具體內(nèi)容，層級(jí)結(jié)構(gòu)上兩者是完全一樣的。

確保狀態(tài)的變化既不是分層，也不是模態(tài)。

其實(shí)表單編輯前后的狀態(tài)改變，瀏覽器界面內(nèi)頁面的加載和跳轉(zhuǎn)，圖片的縮放，都算是狀態(tài)變化。

同一屏幕上，相同數(shù)據(jù)的不同視圖呈現(xiàn)，也是一種狀態(tài)改變，雖然屏幕顯示內(nèi)容出現(xiàn)了改變，但是層級(jí)結(jié)構(gòu)是不變的。

3.2、分步導(dǎo)航

分步式導(dǎo)航以線性流程連接一系列屏幕界面，比如新用戶引導(dǎo)，導(dǎo)覽視圖，設(shè)置流程等。而在線上購物進(jìn)行支付的時(shí)候，也涉及到這樣的分步導(dǎo)航操作。

在步驟序列當(dāng)中，前后來回切換移動(dòng)，并不會(huì)更改整體的層次結(jié)構(gòu)，這一點(diǎn)和之前的 Drill Down 的導(dǎo)航模式是有區(qū)別的。

當(dāng)分步導(dǎo)航用于演示的模態(tài)疊加界面中時(shí)，需要強(qiáng)調(diào)其中的「后退」按鈕和 Drill Down 導(dǎo)航中「后退」按鈕的差異。

分步導(dǎo)航過程到終點(diǎn)結(jié)束時(shí)，點(diǎn)擊關(guān)閉按鈕或者完成按鈕以關(guān)閉，以模態(tài)形式呈現(xiàn)時(shí)也是如此。

根據(jù)不同的選項(xiàng)和狀況，分布導(dǎo)航的數(shù)量、步驟、路徑均可以不同。

循序漸進(jìn)的過程可能會(huì)讓人感到乏味，如果你希望用戶頻繁地執(zhí)行分布導(dǎo)航操作，請(qǐng)慎重考慮如何呈現(xiàn)，建議將這些組合步驟放置到單個(gè)視圖或者控件中呈現(xiàn)，保持上下文狀態(tài)，避免反復(fù)切換。

3.3、內(nèi)容驅(qū)動(dòng)

內(nèi)容驅(qū)動(dòng)式導(dǎo)航（非線性導(dǎo)航、體驗(yàn)驅(qū)動(dòng)型導(dǎo)航）指的是使用超鏈接和按鈕將用戶傳送到其他頁面或者視圖的導(dǎo)航模式。這種導(dǎo)航模式運(yùn)用的是類似網(wǎng)頁的導(dǎo)航模式。

避免在 iOS 的 APP 內(nèi)使用這種導(dǎo)航模式，但是使用超鏈接文本、沉浸式游戲或者類似非線性內(nèi)容的 APP 除外。

如果你必須在 APP 中顯示超鏈接文本，那么請(qǐng)考慮內(nèi)嵌瀏覽器控件，使用 < > 進(jìn)行導(dǎo)航，包含瀏覽器組件的獨(dú)立控件，比起 APP 內(nèi)層次結(jié)構(gòu)的變化更容易讓用戶理解。

你還可以使用鏈接在不同的 APP 之間跳轉(zhuǎn)。

參考來源：

1、Apple WWDC 2022 video: Explore navigation design for iOS.
2、Tidwell, Jenifer (2020). Designing Interfaces (Third edition). O'Reilly.
3、Apple Human Interface Guidelines / Navigation (Archive.org, 2022-01-19)

作者：陳子木