我們最近在設(shè)計(jì) OS 底層組件的時(shí)候，經(jīng)常會(huì)遇到很多底層控件規(guī)范的討論。今天就這篇文章詳細(xì)分析，包括控件定義、命名、使用等等規(guī)范，打磨好基礎(chǔ)控件的設(shè)計(jì)細(xì)節(jié)。

當(dāng)我們?cè)O(shè)計(jì)師在設(shè)計(jì)界面時(shí)，經(jīng)常會(huì)面臨一些困難的決策。有非常多的設(shè)計(jì)手法可以向用戶表達(dá)同一個(gè)意思。有時(shí)候，設(shè)計(jì)師發(fā)現(xiàn)想要確定哪個(gè)元素最適合完成設(shè)計(jì)目標(biāo)，是一件很讓人糾結(jié)的事情。

例如，在一個(gè)給定的場景中，信息如何呈現(xiàn)是最好的？是應(yīng)該打開一個(gè)全新的界面，一個(gè)浮層還是彈窗？

如果設(shè)計(jì)師使用浮層，又將面臨一個(gè)新問題——選擇哪種關(guān)閉方式，是關(guān)閉按鈕還是滑動(dòng)關(guān)閉?

在這篇文章中，我嘗試找到這些問題的答案，并明確一些模式標(biāo)準(zhǔn)。

一、先把定義搞清楚

我們先從這些界面控件的定義開始，需要注意的是，界面設(shè)計(jì)中的術(shù)語很復(fù)雜，也不總是標(biāo)準(zhǔn)化的。

（彩云注：在這篇文章里，我會(huì)把控件的英文名也寫上，用于對(duì)應(yīng)，在開發(fā) OS 底層命名以及組件庫統(tǒng)一上會(huì)很有幫助。另外，也把相應(yīng)的規(guī)范官網(wǎng)地址貼在了控件后面，細(xì)心研讀，相信會(huì)有不少收獲）

1. 對(duì)話框

Dialog (alert, action sheet, popup)

根據(jù)不同的操作系統(tǒng)，這個(gè)元素會(huì)有不同的名稱。在 iOS 系統(tǒng)中，彈窗（alert）被用關(guān)鍵信息提醒，警告。浮層（Action sheets）是當(dāng)你提供 2 個(gè)或多個(gè)選擇時(shí)會(huì)用到的控件。

在 AndROId 中，針對(duì)所有的情況簡單統(tǒng)稱為對(duì)話框（dialog）。除此之外，你也還能看到各種各樣自定義的對(duì)話框。

一些在 iOS 和 Android 應(yīng)用中對(duì)話框的例子

對(duì)話框會(huì)以模態(tài)的形式出現(xiàn)在頁面的最上層。它可以包含重要提醒或請(qǐng)求用戶確認(rèn)之類的特定操作。這些元素通常被稱之為彈層（popups）。彈出窗口的概念最早起源于網(wǎng)頁端，現(xiàn)在已經(jīng)演變出了各種變體形式。

2. 浮層

Sheet (bottom sheet)

這個(gè)元素在不同的系統(tǒng)中有不同的名字：底部浮層（Android）或浮層（iOS）。但在這里，我們可以簡單的統(tǒng)稱為浮層。

浮層在移動(dòng)端通常會(huì)固定在屏幕底部，然后向上延展，用于顯示其他詳細(xì)信息或操作。

在 iOS and Android 應(yīng)用中的例子

3. Snackbar and Toast

SnackBar 是 Android Support Library 22.2.1 里面新增提供的一個(gè)控件,我們可以簡單的把它理解成一個(gè)加強(qiáng)版的 Toast，或者是一個(gè)輕量級(jí)的 Dialog。

它們都是一種輕量的彈窗形式，里面包含了簡短的文本提示。這些信息會(huì)短暫顯示，然后自動(dòng)消失。

根據(jù) Material Design Guidelines，建議 toasts 出現(xiàn)在頂部，而 snackbar 出現(xiàn)在屏幕的底部。不過在實(shí)際設(shè)計(jì)中，也不總是遵循這一點(diǎn)，后面會(huì)進(jìn)一步研究。

snackbar 在 iOS 和 Android 應(yīng)用中的例子

二、深入細(xì)節(jié)

現(xiàn)在我們已經(jīng)明確了它們的定義，接下來我們?cè)賮碓敿?xì)拆解它們的細(xì)節(jié)設(shè)計(jì)。

1. Sheet (bottom sheet)

讓我們從最有趣的部分開始，sheet 在 2 個(gè)平臺(tái) iOS / Android 都應(yīng)用的非常廣泛，可以承載非常多的內(nèi)容。

對(duì)于一個(gè) sheet 到底要如何正確設(shè)計(jì)，沒有通用的模式。

sheet 可以是：

1. 模態(tài)或是非模態(tài)
2. 它可以占據(jù)整個(gè)屏幕或屏幕的一部分
3. 它可以是有固定或是動(dòng)態(tài)高度

2. 非全屏模態(tài) sheet

此類型用于顯示少量信息，例如顯示額外的詳細(xì)信息或提供額外的操作。

nonfullscreen modal sheet 例子

一般來說，通過點(diǎn)覆蓋區(qū)域（變暗區(qū)域）或向下滑動(dòng)來關(guān)閉它，sheet 整體不支持向上滑動(dòng)。

然而，也有例外。例如，在 Instagram 中，我們觀察到一個(gè)特別的評(píng)論區(qū)頁面，頁面中的內(nèi)容可以滾動(dòng)，但如果你向上拉頁面，它會(huì)擴(kuò)展到占據(jù)整個(gè)屏幕。

Nonfullscreen modal sheet (Instagram)

3. 全屏浮層 （Fullscreen sheet）

當(dāng)有大量信息要顯示時(shí)，會(huì)用這類浮層形式，它會(huì)利用整個(gè)屏幕高度。

fullscreen sheet 的例子

關(guān)閉這樣的浮層也可以通過向下滑動(dòng)來完成，但這種機(jī)制可能并不總是對(duì)用戶友好。我們稍后再談這個(gè)問題。

4. 非模態(tài)浮層（Nonmodal sheet）

當(dāng)需要直接影響父屏幕中的當(dāng)前任務(wù)時(shí)，非模態(tài)浮層用于復(fù)雜的界面。例如，在 Notes 中，用于編輯注釋，而在 Google Maps 中，它確保地圖和對(duì)象細(xì)節(jié)保持對(duì)應(yīng)。

nonmodal sheets 的例子

有時(shí)，浮層的非模態(tài)模式可以是比較有趣的形式。例如在博客中，它的功能就像是一個(gè)迷你播放器，當(dāng)點(diǎn)擊它時(shí)，它會(huì)展開成一個(gè)完整的播放器。

nonmodal sheets 例子

5. 滑動(dòng), X, or "關(guān)閉" 按鈕

細(xì)心的讀者可能會(huì)注意到我們的例子中的一些差異：有些頁面有一個(gè)"X"，有些頁面有一個(gè)滑動(dòng)圖標(biāo)（可以在屏幕上滑動(dòng)、拖動(dòng)等操作），有些頁面有一個(gè)"關(guān)閉"按鈕，有時(shí)你甚至?xí)l(fā)現(xiàn)這些元素同時(shí)存在。

這么復(fù)雜的原因是，截至 2023 年，仍然沒有明確的統(tǒng)一標(biāo)準(zhǔn)。蘋果 Human Interface 可能建議都用上，而谷歌的 Material Design 則建議不使用任何控件。

Human Design Guideline 和 Material Design Guideline 示例

在大多數(shù)應(yīng)用中，會(huì)有各種各樣的設(shè)計(jì)形式，有時(shí)即使是在同一個(gè)應(yīng)用中，規(guī)則都沒有很統(tǒng)一。

Swiper, X, or "Close" 按鈕在不同的應(yīng)用中

最近，一個(gè)新的設(shè)計(jì)形式出現(xiàn)了—方向滑動(dòng)。這個(gè)控件的設(shè)計(jì)是為了回應(yīng)用戶的反饋，因?yàn)樗麄儾豢偸悄苤肋@個(gè)浮層可以上滑操作。

你在各種官方設(shè)計(jì)指南中可能都找不到這個(gè)細(xì)節(jié)描述，但它已經(jīng)贏得了很多設(shè)計(jì)師的心。

例如，whatsAPP 更新了撥號(hào)界面，增加了這樣一個(gè)帶方向的滑動(dòng)器，以明確它可以展開。

Nonmodal sheet with an arrow swiper (Whatsapp)

對(duì)于我們研究下來的策略，我們可以建立下面的規(guī)則：

"X" 通常用在全屏浮層。在這樣的頁面上向下滑動(dòng)也可以，但操作可能會(huì)很有挑戰(zhàn)性或不那么明顯。

一般滑動(dòng)層用于非全屏浮層，只顯示滑動(dòng)圖標(biāo)。當(dāng)這個(gè)控件出現(xiàn)的時(shí)候，屏幕的暗色區(qū)域充當(dāng)用戶的"關(guān)閉"按鈕。

方向性滑動(dòng)同樣用于非全屏浮層，只是能擴(kuò)展。它讓用戶能清楚的看到，浮層是可以被展開的。

建議在不同功能的情況下同時(shí)使用多個(gè)元素組合。例如，滑動(dòng)控制浮層的大小，而用"X"負(fù)責(zé)控制浮層的關(guān)閉。

什么時(shí)候需要一個(gè)浮層？

當(dāng)你需要幫助用戶完成一個(gè)清晰、具體的任務(wù)，或者在不丟失之前的上下文的情況下獲得背景信息時(shí)，浮層是合適的。

浮層中的操作應(yīng)該簡單明了。值得注意的是，在一些應(yīng)用中，浮層會(huì)用到復(fù)雜場景中，但這很少會(huì)有好的效果。

三、對(duì)話框

為了理解對(duì)話框的本質(zhì)，我們來類比一下真實(shí)的對(duì)話。對(duì)話框就像是兩個(gè)人之間的對(duì)話，在用戶界面中，對(duì)話框是系統(tǒng)和用戶之間的"對(duì)話"。

當(dāng)對(duì)話框出現(xiàn)時(shí)，它會(huì)打斷所有程序內(nèi)的功能，并保持在屏幕上，直到其他必要的操作完成。然而，在許多應(yīng)用中，這個(gè)元素經(jīng)常被用來展示促銷信息。

這個(gè)做法起源于網(wǎng)頁設(shè)計(jì)，在那個(gè)場景下經(jīng)常使用彈出窗口。

例如，在雅虎金融應(yīng)用中，使用對(duì)話框來代替歡迎信息。雖然這種選擇，對(duì)應(yīng)用來說似乎也合理，但用別的形式可能對(duì)用戶來說會(huì)更友好一些。在 Instagram 中，能看到一個(gè)經(jīng)典意義上的對(duì)話框，很符合這個(gè)控件的使用標(biāo)準(zhǔn)。

dialog 示例

1. 建議

如果用戶不操作，就沒法在場景中進(jìn)行進(jìn)一步操作了，那么就使用對(duì)話框。

在 Material Design 和 Human Design 中，需要強(qiáng)調(diào)的是這個(gè)組件只用于高度重要的信息，因?yàn)樗鼤?huì)是模態(tài)的，會(huì)阻塞頁面上的內(nèi)容。

建議在以下場景中使用 dialog

1. 確認(rèn)與用戶的財(cái)務(wù)或個(gè)人信息相關(guān)的操作
2. 刪除一些重要信息，尤其是不可逆的情況下
3. 退出場景不會(huì)自動(dòng)保存，導(dǎo)致進(jìn)度丟失

不建議使用對(duì)話框來顯示參考信息。人們不喜歡因?yàn)閺棿岸驍嗨麄兊男袆?dòng)，這種彈窗只起到提供信息的作用，不需要立即采取任何行動(dòng)。

四、Snackbar and toast

老實(shí)說，對(duì)我們來說想要準(zhǔn)備抓住 snackbar 和 toast 的區(qū)別有點(diǎn)難。他們?cè)谝曈X上非常相似，在一些系統(tǒng)中，這些術(shù)語甚至容易被混淆。

例如，在 Adobe Spectrum的規(guī)范中，這兩個(gè)控件被合并為 Toast 的概念。

Toast 是一個(gè) Android UI 組件，從 API 1.0 開始就出現(xiàn)了。它主要用于提示性消息。與 Snackbar 不同，它是不靈活的，不能定制，只能設(shè)置顯示時(shí)長。Toast 不能通過用戶操作取消(你不能滑動(dòng)來關(guān)閉它)，它將在指定的顯示時(shí)間后自行消失。

例如：你收到一封新郵件

Snackbar 是在 Material 的組件庫中，從 API 23 后才有的。它比 toast 出來的晚很多，但用途更廣。用戶可以和 snackbar 交互，例如，他們可以滑動(dòng)或點(diǎn)擊按鈕（操作）跳轉(zhuǎn)到另一個(gè)界面。

例如：你收到一封新郵件—>查看

Material Design 規(guī)范建議把 snackbar 和 toast 都放在屏幕底部，盡管這不總是最好的選擇。在我看來，要確定該元素的理想位置，必須考慮具體場景和內(nèi)容。

例如：在 PayPal 中，Snackbar 出現(xiàn)在沒有關(guān)鍵信息的頂部區(qū)域。在 Instagram 應(yīng)用中，snackbar 出現(xiàn)在照片上，因?yàn)榇藭r(shí)用戶的注意力都在那。在 Google Fit 應(yīng)用中，關(guān)于更新的通知最適合顯示在屏幕底部。

（細(xì)節(jié)！顯示位置需要重點(diǎn)考慮，很容易被忽略）

snackbar 的一些例子

什么時(shí)候選擇 toast 或者 snackbar?

Toast 和 snackbar 對(duì)于需要不干擾場景流程的情況下，立即向用戶提供反饋（例如，點(diǎn)擊按鈕），以及行動(dòng)結(jié)果不需要額外解釋的情況，都是非常好的選擇。

建議在哪些情況時(shí)使用它：

1. 當(dāng)用戶完成了一個(gè)操作，例如發(fā)送了一個(gè)消息，你需要給他一個(gè)反饋。
2. 當(dāng)你需要在不將用戶從當(dāng)前上下文中打斷的情況下吸引用戶的注意力時(shí)也推薦用。

在我自己的應(yīng)用設(shè)計(jì)中，我更喜歡用 snackbar，因?yàn)樗`活。它可以像 toast 一樣，出現(xiàn)在屏幕中的任何部分。此外，它們還可以包含額外的信息和操作，如倒計(jì)時(shí)計(jì)時(shí)器或取消按鈕。

總結(jié)

當(dāng)我們?cè)O(shè)計(jì)手機(jī)應(yīng)用時(shí)，對(duì)設(shè)計(jì)師來說，研究規(guī)范并結(jié)合現(xiàn)有模式是至關(guān)重要的。這是做出優(yōu)秀設(shè)計(jì)的必經(jīng)之路。

趨勢和解決方案在不斷發(fā)展，并不總是反映在基本準(zhǔn)則中。我們?cè)O(shè)計(jì)師可以追求更好的解決方案，不要局限自己的思維。

作者：彩云譯設(shè)計(jì)