起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識提示控件中的雙刃劍：霸氣外露的Dialogs家族
在前兩篇文章中為大家介紹過了Snackbars和Banners兩位輕量級提示控件的用法，今天就讓我們來繼續詳解一下BOSS級的提示控件Dialogs家族吧～
一、什么是Dialog
Dialog正是我們熟稱的“彈窗”，該控件屬于提示控件中的一種，通常用于強干擾的信息提示，該提示會打斷用戶的當前操作，用戶必須執行對應操作后才可以對其進行取消。
Dialogs因為屬于強干擾，所以在提示時的霸氣程度會遠遠大于Banner和Snackbar，讓我們來看看它的霸氣到底體現在哪里：
視覺層：
- Dialog顯示時會用深色遮擋背景，并居中顯示在頁面中央，使用戶不得不將注意力全部集中于Dialog之上；
- Banner顯示時僅占據頁面頂部，形成局部的視覺干擾；
- Snackbar顯示時展示在頁面底部，幾秒之后就會自己悄悄溜走。
操作層：
- Dialog持續期間會禁止用戶進行其它頁面操作；
- Banner會長時間持續，則不會影響用戶進行其它操作；
- Snackbar僅會持續幾秒，用戶進行其它操作時它會立即識趣的走開。
綜上所述，三個提示控件的干擾度從強到弱排序可以視為：Dialog > Banner > Snackbar。Dialog雖然霸氣非凡，但對用戶過份霸氣終究不是一件好事，畢竟強制中斷用戶行為會引起使用者強烈的反感。
因此我們不得不建議產品經理和設計師們，盡量謹慎使用Dialog控件，采用相對柔和的一些控件來承載提示和操作，譬如Menus、Bottom sheet、Action sheet或者Activity view。當然大家不必著急，這些控件稍后我也會進行一一解析。本篇文章的篇幅還是留給Dialogs家族的成員們吧～
Alert dialogs 警告對話框
在Google Material Design和iOS Human Interface Guidelines中都對其有規范定義，屬于兩端皆可使用的原生控件。
1. 使用場景
Alert dialog通常用于緊急不可逆情況的提示，需要用戶確認該信息。
2. 注意事項
- 不要在標題中使用“抱歉打擾”、“危險！”、“你確定？”此類道歉、警告或含糊不清的標題；
- 不要打亂按鈕順序，肯定性按鈕在右，否定性按鈕在左；
- 建議使用三種按鈕文案，確定文案(如刪除/導出）、駁回文案（如取消）和確認文案（如我知道了/好的）；
- 不要濫用，無預期的頻繁打斷用戶會引發反感；
- 絕對不能被其他元素遮擋，需一直保持焦點直到被關閉或某個動作已被執行。
3. 樣式類型
左側豎排為Android樣式，右側豎排為iOS樣式。
僅在高風險情況下使用帶標題欄的Alert。
4. 顯示與消失
（1）顯示
Alert顯示時背景顯示深色遮罩，并會立即中斷用戶正在進行的操作。
（2）消失
Alert僅支持2種關閉方式：
- 點擊確定按鈕后立即執行并關閉；
- 點擊取消按鈕后取消操作并關閉。
5. 范例
有道云筆記在刪除文檔時，使用Alert以警告用戶刪除的內容將無法恢復。
Simple dialogs 簡易對話框
特屬于Google Material Design中定義的原生Dialog控件。
1. 使用場景
Simple dialog通常用于提供列表項的詳細信息或操作。
2. 注意事項
- 不要使用明確的按鈕進行確認或取消操作；
- 在能夠使用Menus、Bottom sheets、Action sheet（iOS）或Activity view（iOS )的情況下不要使用Simple dialogs；
- 絕對不能被其他元素遮擋，需一直保持焦點直到被關閉或某個動作已被執行。
樣式類型：
3. 顯示與消失
顯示：Simple dialog顯示時背景顯示深色遮罩，并會立即中斷用戶正在進行的操作。
消失：
Simple dialog支持3種關閉方式：
- 點擊一個選項后立即執行并關閉；
- 點擊dialog外任意區域取消操作并關閉；
- 點擊Android系統返回鍵取消操作并關閉。
4.?范例
安卓端的Keep利用Simple dialog來承載話題舉報的操作，用戶點擊任意一選項后觸發提交。（在iOS端其使用的是Action sheet）
Confirm dialogs 確認對話框
特屬于Google Material Design中定義的原生Dialog控件。
1. 使用場景
Confirm dialog通常用于復雜操作前的最終確認，使其有機會在必要時改變主意。
2. 注意事項
- 需同時提供明確的確認和取消按鈕；
- 在能夠使用Menus、Bottom sheets、Action sheet（iOS）或Activity view（iOS )的情況下不要使用Confirm dialogs；
- 絕對不能被其他元素遮擋，需一直保持焦點直到被關閉或某個動作已被執行。
3. 樣式類型
支持嵌套Selection controls。
4. 顯示與消失
顯示：Confirm dialog顯示時背景顯示深色遮罩，并會立即中斷用戶正在進行的操作。
消失：
Confirm dialog支持4種關閉方式：
- 點擊確定按鈕后立即執行并關閉；
- 點擊取消按鈕后取消操作并關閉；
- 點擊dialog外任意區域取消操作并關閉；
- 點擊Android系統返回鍵取消操作并關閉。
5. 內容滾動處理
應盡量避免內容滑動，當確實需要滑動時，標題需固定在頂部，按鈕固定在底部，保證滾動的同時仍然可見標題和按鈕。Dialogs存在時禁止滾動對話框以外的元素，例如背景。
6. 范例
原生安卓系統使用Confirm dialog來承載彩鈴設置功能。
Full-screen dialogs 全屏對話框
特屬于Google Material Design中定義的原生Dialog控件。
1. 使用場景
Full-screen dialog通常用于對一系列復雜任務的分組。
2. 注意事項
（1）僅在以下場景中使用Full-screen dialog：
- 有需要用戶輸入的選擇器或表單時；
- 編輯的內容無法實時保存時；
- 沒有本地自動保存的草稿功能；
- 在提交前需要進行批處理或更改隊列時。
（2）Full-screen dialog僅限于在移動端使用。
3. 樣式類型
在Top app bar上需展示“X”按鈕和確定性按鈕。
4. 顯示與消失
顯示Full-screen dialog顯示時填充全屏，使用沉浸式的全屏布局。
消失：
Full-screen dialog支持3種關閉方式：
- 點擊確定性按鈕后立即執行并關閉；
- 點擊X按鈕并確認取消操作后關閉；
- 點擊Android系統返回鍵并確認取消操作后關閉。
5. 二次確認
點擊“X”按鈕或系統返回鍵時將丟棄所有更改信息并退出，如果用戶發生了字段更改，需給予Confirm Dialog進行二次確認。
6. 范例
Teambition使用Full-screen dialog來承載Date picker和Time picker的多重時間設置。
提示控件的用法總結
俗話說的好，“好鋼用在刀刃上”，產品經理和設計師應當盡量將Dialogs應用于非常重要的使用場景（這里的也包含我們定制的活動彈窗），所謂物以稀為貴，少量使用可以凸顯出其重要性，過度使用則會使人感到異常反感（帶來同樣問題的還有過度的新手引導和紅點提示）。
那么如何來更好的來選擇控件呢？
我們可以將內容信息的重要程度為判斷基準：
- 不重要程度：用戶可以不注意或不操作；
- 一般重要程度：用戶可稍后注意或稍后操作；
- 很重要程度：用戶必須立即注意或立即操作。
若不重要，請使用Toast或Snackbar；若一般重要，請使用Banner；若很重要，請盡量先考慮使用Bottom sheets（Android）、Action sheet（iOS）或Activity view（iOS )等模態控件，若以上不能滿足需求，再使用Dialogs。
相關閱讀
本文由 @愚者秦 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
