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