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

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

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

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

1.1、Drill Down（向下鉆取）

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

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

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

導航欄會顯示當前界面的標題。

列表行上會使用 > 符號來標識可以深入到下一層的層級結(jié)構(gòu)。

使用 < 符號來標識返回到父級列表的路徑，如果空間允許，它應該標識有父級表單的標題，而不是通用的「返回」。

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

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

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

Drill Down 是 macOS 中「訪達」中的多欄列表式導航（Miller Columns）在移動端界面上的變體。

1.2、Flat（扁平導航）

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

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

選項卡欄中始終會有一個選項卡處于被選中的狀態(tài)。

當前被選中的選項卡不應該被編程修改、或者因為點擊其他的按鈕而發(fā)生改變。

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

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

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

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

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

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

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

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

在 iOS 的照片 APP 當中，點擊一張照片就會全屏打開，這個時候左右滑動就能翻閱近鄰的其他照片。

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

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

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

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

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

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

2、層疊導航

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

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

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

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

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

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

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

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

這類模態(tài) UI 元素很容易被忽略，因為通常它們不會徹底阻擋用戶進行多數(shù)操作，點擊關(guān)閉按鈕，或者上下滑動頁面，甚至有的直接點擊空白的地方或或者彈出框的 x 按鈕直接關(guān)閉，不費吹灰之力就能關(guān)閉這類模態(tài)窗口。

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

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

非模態(tài)窗口界面，只會覆蓋一部分界面，幾乎不會阻擋界面操作，甚至會自行消失或隱藏，因為它們幾乎不會影響到用戶交互，所以它們幾乎是無阻力的。

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

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

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

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

3、嵌入式導航

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

3.1、狀態(tài)變化

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

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

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

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

3.2、分步導航

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

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

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

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

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

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

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

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

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

如果你必須在 APP 中顯示超鏈接文本，那么請考慮內(nèi)嵌瀏覽器控件，使用 < > 進行導航，包含瀏覽器組件的獨立控件，比起 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)

作者：陳子木