用一篇文章,完整梳理總結(jié)所有 iOS 導(dǎo)航模式
編者按:雖然蘋果官方的人機(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)橥ǔK鼈儾粫?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)
作者:陳子木
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)