在前兩篇文章中為大家介紹過 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. 顯示與消失

顯示

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!