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