交互控件科普系列！Dialogs 的常見樣式和設計注意事項總結

在前兩篇文章中為大家介紹過 Snackbars 和 Banners 兩位輕量級提示控件的用法，今天就讓我們來繼續詳解一下 BOSS 級的提示控件 Dialogs 家族。

往期回顧：

• 《交互控件科普系列！ Sheet 的常見樣式和設計注意事項總結》
• 《交互控件科普系列！Snackbar 的常見樣式和設計注意事項總結》

什么是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. 顯示與消失

顯示

Alert 顯示時，背景顯示深色遮罩，并會立即中斷用戶正在進行的操作。

消失

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. 注意事項

僅在以下場景中使用 Full-screen dialog：

• 有需要用戶輸入的選擇器或表單時；
• 編輯的內容無法實時保存時；
• 沒有本地自動保存的草稿功能；
• 在提交前需要進行批量處理或更改隊列時。

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。

歡迎關注作者的微信公眾號：「愚者筆記」