2023-12-8 周周
我們最近在設(shè)計 OS 底層組件的時候，經(jīng)常會遇到很多底層控件規(guī)范的討論。今天就這篇文章詳細(xì)分析，包括控件定義、命名、使用等等規(guī)范，打磨好基礎(chǔ)控件的設(shè)計細(xì)節(jié)。
當(dāng)我們設(shè)計師在設(shè)計界面時，經(jīng)常會面臨一些困難的決策。有非常多的設(shè)計手法可以向用戶表達同一個意思。有時候，設(shè)計師發(fā)現(xiàn)想要確定哪個元素最適合完成設(shè)計目標(biāo)，是一件很讓人糾結(jié)的事情。
例如，在一個給定的場景中，信息如何呈現(xiàn)是最好的？是應(yīng)該打開一個全新的界面，一個浮層還是彈窗？
如果設(shè)計師使用浮層，又將面臨一個新問題——選擇哪種關(guān)閉方式，是關(guān)閉按鈕還是滑動關(guān)閉?
在這篇文章中，我嘗試找到這些問題的答案，并明確一些模式標(biāo)準(zhǔn)。
我們先從這些界面控件的定義開始，需要注意的是，界面設(shè)計中的術(shù)語很復(fù)雜，也不總是標(biāo)準(zhǔn)化的。
（彩云注：在這篇文章里，我會把控件的英文名也寫上，用于對應(yīng)，在開發(fā) OS 底層命名以及組件庫統(tǒng)一上會很有幫助。另外，也把相應(yīng)的規(guī)范官網(wǎng)地址貼在了控件后面，細(xì)心研讀，相信會有不少收獲）
1. 對話框
Dialog (alert, action sheet, popup)
根據(jù)不同的操作系統(tǒng)，這個元素會有不同的名稱。在 iOS 系統(tǒng)中，彈窗（alert）被用關(guān)鍵信息提醒，警告。浮層（Action sheets）是當(dāng)你提供 2 個或多個選擇時會用到的控件。
在 Android 中，針對所有的情況簡單統(tǒng)稱為對話框（dialog）。除此之外，你也還能看到各種各樣自定義的對話框。
一些在 iOS 和 Android 應(yīng)用中對話框的例子
對話框會以模態(tài)的形式出現(xiàn)在頁面的最上層。它可以包含重要提醒或請求用戶確認(rèn)之類的特定操作。這些元素通常被稱之為彈層（popups）。彈出窗口的概念最早起源于網(wǎng)頁端，現(xiàn)在已經(jīng)演變出了各種變體形式。
2. 浮層
Sheet (bottom sheet)
這個元素在不同的系統(tǒng)中有不同的名字：底部浮層（Android）或浮層（iOS）。但在這里，我們可以簡單的統(tǒng)稱為浮層。
浮層在移動端通常會固定在屏幕底部，然后向上延展，用于顯示其他詳細(xì)信息或操作。
在 iOS and Android 應(yīng)用中的例子
3. Snackbar and Toast
SnackBar 是 Android Support Library 22.2.1 里面新增提供的一個控件,我們可以簡單的把它理解成一個加強版的 Toast，或者是一個輕量級的 Dialog。
它們都是一種輕量的彈窗形式，里面包含了簡短的文本提示。這些信息會短暫顯示，然后自動消失。
根據(jù) Material Design Guidelines，建議 toasts 出現(xiàn)在頂部，而 snackbar 出現(xiàn)在屏幕的底部。不過在實際設(shè)計中，也不總是遵循這一點，后面會進一步研究。
snackbar 在 iOS 和 Android 應(yīng)用中的例子
現(xiàn)在我們已經(jīng)明確了它們的定義，接下來我們再來詳細(xì)拆解它們的細(xì)節(jié)設(shè)計。
1. Sheet (bottom sheet)
讓我們從最有趣的部分開始，sheet 在 2 個平臺 iOS / Android 都應(yīng)用的非常廣泛，可以承載非常多的內(nèi)容。
對于一個 sheet 到底要如何正確設(shè)計，沒有通用的模式。
sheet 可以是：
2. 非全屏模態(tài) sheet
此類型用于顯示少量信息，例如顯示額外的詳細(xì)信息或提供額外的操作。
nonfullscreen modal sheet 例子
一般來說，通過點覆蓋區(qū)域（變暗區(qū)域）或向下滑動來關(guān)閉它，sheet 整體不支持向上滑動。
然而，也有例外。例如，在 Instagram 中，我們觀察到一個特別的評論區(qū)頁面，頁面中的內(nèi)容可以滾動，但如果你向上拉頁面，它會擴展到占據(jù)整個屏幕。
Nonfullscreen modal sheet (Instagram)
3. 全屏浮層 （Fullscreen sheet）
當(dāng)有大量信息要顯示時，會用這類浮層形式，它會利用整個屏幕高度。
fullscreen sheet 的例子
關(guān)閉這樣的浮層也可以通過向下滑動來完成，但這種機制可能并不總是對用戶友好。我們稍后再談這個問題。
4. 非模態(tài)浮層（Nonmodal sheet）
當(dāng)需要直接影響父屏幕中的當(dāng)前任務(wù)時，非模態(tài)浮層用于復(fù)雜的界面。例如，在 Notes 中，用于編輯注釋，而在 Google Maps 中，它確保地圖和對象細(xì)節(jié)保持對應(yīng)。
nonmodal sheets 的例子
有時，浮層的非模態(tài)模式可以是比較有趣的形式。例如在博客中，它的功能就像是一個迷你播放器，當(dāng)點擊它時，它會展開成一個完整的播放器。
nonmodal sheets 例子
5. 滑動, X, or “關(guān)閉” 按鈕
細(xì)心的讀者可能會注意到我們的例子中的一些差異：有些頁面有一個“X”，有些頁面有一個滑動圖標(biāo)（可以在屏幕上滑動、拖動等操作），有些頁面有一個“關(guān)閉”按鈕，有時你甚至?xí)l(fā)現(xiàn)這些元素同時存在。
這么復(fù)雜的原因是，截至 2023 年，仍然沒有明確的統(tǒng)一標(biāo)準(zhǔn)。蘋果 Human Interface 可能建議都用上，而谷歌的 Material Design 則建議不使用任何控件。
Human Design Guideline 和 Material Design Guideline 示例
在大多數(shù)應(yīng)用中，會有各種各樣的設(shè)計形式，有時即使是在同一個應(yīng)用中，規(guī)則都沒有很統(tǒng)一。
Swiper, X, or “Close” 按鈕在不同的應(yīng)用中
最近，一個新的設(shè)計形式出現(xiàn)了—方向滑動。這個控件的設(shè)計是為了回應(yīng)用戶的反饋，因為他們不總是能知道這個浮層可以上滑操作。
你在各種官方設(shè)計指南中可能都找不到這個細(xì)節(jié)描述，但它已經(jīng)贏得了很多設(shè)計師的心。
例如，whatsAPP 更新了撥號界面，增加了這樣一個帶方向的滑動器，以明確它可以展開。
Nonmodal sheet with an arrow swiper (Whatsapp)
對于我們研究下來的策略，我們可以建立下面的規(guī)則：
“X” 通常用在全屏浮層。在這樣的頁面上向下滑動也可以，但操作可能會很有挑戰(zhàn)性或不那么明顯。
一般滑動層用于非全屏浮層，只顯示滑動圖標(biāo)。當(dāng)這個控件出現(xiàn)的時候，屏幕的暗色區(qū)域充當(dāng)用戶的“關(guān)閉”按鈕。
方向性滑動同樣用于非全屏浮層，只是能擴展。它讓用戶能清楚的看到，浮層是可以被展開的。
建議在不同功能的情況下同時使用多個元素組合。例如，滑動控制浮層的大小，而用“X”負(fù)責(zé)控制浮層的關(guān)閉。
什么時候需要一個浮層？
當(dāng)你需要幫助用戶完成一個清晰、具體的任務(wù)，或者在不丟失之前的上下文的情況下獲得背景信息時，浮層是合適的。
浮層中的操作應(yīng)該簡單明了。值得注意的是，在一些應(yīng)用中，浮層會用到復(fù)雜場景中，但這很少會有好的效果。
為了理解對話框的本質(zhì)，我們來類比一下真實的對話。對話框就像是兩個人之間的對話，在用戶界面中，對話框是系統(tǒng)和用戶之間的“對話”。
當(dāng)對話框出現(xiàn)時，它會打斷所有程序內(nèi)的功能，并保持在屏幕上，直到其他必要的操作完成。然而，在許多應(yīng)用中，這個元素經(jīng)常被用來展示促銷信息。
這個做法起源于網(wǎng)頁設(shè)計，在那個場景下經(jīng)常使用彈出窗口。
例如，在雅虎金融應(yīng)用中，使用對話框來代替歡迎信息。雖然這種選擇，對應(yīng)用來說似乎也合理，但用別的形式可能對用戶來說會更友好一些。在 Instagram 中，能看到一個經(jīng)典意義上的對話框，很符合這個控件的使用標(biāo)準(zhǔn)。
dialog 示例
1. 建議
如果用戶不操作，就沒法在場景中進行進一步操作了，那么就使用對話框。
在 Material Design 和 Human Design 中，需要強調(diào)的是這個組件只用于高度重要的信息，因為它會是模態(tài)的，會阻塞頁面上的內(nèi)容。
建議在以下場景中使用 dialog
不建議使用對話框來顯示參考信息。人們不喜歡因為彈窗而打斷他們的行動，這種彈窗只起到提供信息的作用，不需要立即采取任何行動。
老實說，對我們來說想要準(zhǔn)備抓住 snackbar 和 toast 的區(qū)別有點難。他們在視覺上非常相似，在一些系統(tǒng)中，這些術(shù)語甚至容易被混淆。
例如，在 Adobe Spectrum的規(guī)范中，這兩個控件被合并為 Toast 的概念。
Toast 是一個 Android UI 組件，從 API 1.0 開始就出現(xiàn)了。它主要用于提示性消息。與 Snackbar 不同，它是不靈活的，不能定制，只能設(shè)置顯示時長。Toast 不能通過用戶操作取消(你不能滑動來關(guān)閉它)，它將在指定的顯示時間后自行消失。
例如：你收到一封新郵件
Snackbar 是在 Material 的組件庫中，從 API 23 后才有的。它比 toast 出來的晚很多，但用途更廣。用戶可以和 snackbar 交互，例如，他們可以滑動或點擊按鈕（操作）跳轉(zhuǎn)到另一個界面。
例如：你收到一封新郵件—>查看
Material Design 規(guī)范建議把 snackbar 和 toast 都放在屏幕底部，盡管這不總是最好的選擇。在我看來，要確定該元素的理想位置，必須考慮具體場景和內(nèi)容。
例如：在 PayPal 中，Snackbar 出現(xiàn)在沒有關(guān)鍵信息的頂部區(qū)域。在 Instagram 應(yīng)用中，snackbar 出現(xiàn)在照片上，因為此時用戶的注意力都在那。在 Google Fit 應(yīng)用中，關(guān)于更新的通知最適合顯示在屏幕底部。
（細(xì)節(jié)！顯示位置需要重點考慮，很容易被忽略）
snackbar 的一些例子
什么時候選擇 toast 或者 snackbar?
Toast 和 snackbar 對于需要不干擾場景流程的情況下，立即向用戶提供反饋（例如，點擊按鈕），以及行動結(jié)果不需要額外解釋的情況，都是非常好的選擇。
建議在哪些情況時使用它：
在我自己的應(yīng)用設(shè)計中，我更喜歡用 snackbar，因為它更靈活。它可以像 toast 一樣，出現(xiàn)在屏幕中的任何部分。此外，它們還可以包含額外的信息和操作，如倒計時計時器或取消按鈕。
當(dāng)我們設(shè)計手機應(yīng)用時，對設(shè)計師來說，研究規(guī)范并結(jié)合現(xiàn)有模式是至關(guān)重要的。這是做出優(yōu)秀設(shè)計的必經(jīng)之路。
趨勢和解決方案在不斷發(fā)展，并不總是反映在基本準(zhǔn)則中。我們設(shè)計師可以追求更好的解決方案，不要局限自己的思維。
文章來源：優(yōu)設(shè)網(wǎng) 作者：彩云Sky
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(m.miumiuwan.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、用戶體驗公司、軟件界面設(shè)計公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。
藍(lán)藍(lán)設(shè)計的小編 http://m.miumiuwan.com