在前兩篇文章中為大家介紹過了Snackbars和Banners兩位輕量級(jí)提示控件的用法，今天就讓我們來(lái)繼續(xù)詳解一下BOSS級(jí)的提示控件Dialogs家族吧～

一、什么是Dialog

Dialog正是我們熟稱的“彈窗”，該控件屬于提示控件中的一種，通常用于強(qiáng)干擾的信息提示，該提示會(huì)打斷用戶的當(dāng)前操作，用戶必須執(zhí)行對(duì)應(yīng)操作后才可以對(duì)其進(jìn)行取消。

Dialogs因?yàn)閷儆趶?qiáng)干擾，所以在提示時(shí)的霸氣程度會(huì)遠(yuǎn)遠(yuǎn)大于Banner和Snackbar，讓我們來(lái)看看它的霸氣到底體現(xiàn)在哪里：

視覺層：

• Dialog顯示時(shí)會(huì)用深色遮擋背景，并居中顯示在頁(yè)面中央，使用戶不得不將注意力全部集中于Dialog之上；
• Banner顯示時(shí)僅占據(jù)頁(yè)面頂部，形成局部的視覺干擾；
• Snackbar顯示時(shí)展示在頁(yè)面底部，幾秒之后就會(huì)自己悄悄溜走。

操作層：

• Dialog持續(xù)期間會(huì)禁止用戶進(jìn)行其它頁(yè)面操作；
• Banner會(huì)長(zhǎng)時(shí)間持續(xù)，則不會(huì)影響用戶進(jìn)行其它操作；
• Snackbar僅會(huì)持續(xù)幾秒，用戶進(jìn)行其它操作時(shí)它會(huì)立即識(shí)趣的走開。

綜上所述，三個(gè)提示控件的干擾度從強(qiáng)到弱排序可以視為：Dialog > Banner > Snackbar。Dialog雖然霸氣非凡，但對(duì)用戶過份霸氣終究不是一件好事，畢竟強(qiáng)制中斷用戶行為會(huì)引起使用者強(qiáng)烈的反感。

因此我們不得不建議產(chǎn)品經(jīng)理和設(shè)計(jì)師們，盡量謹(jǐn)慎使用Dialog控件，采用相對(duì)柔和的一些控件來(lái)承載提示和操作，譬如Menus、Bottom sheet、Action sheet或者Activity view。當(dāng)然大家不必著急，這些控件稍后我也會(huì)進(jìn)行一一解析。本篇文章的篇幅還是留給Dialogs家族的成員們吧～

Alert dialogs 警告對(duì)話框

在Google Material Design和iOS Human Interface Guidelines中都對(duì)其有規(guī)范定義，屬于兩端皆可使用的原生控件。

1. 使用場(chǎng)景

Alert dialog通常用于緊急不可逆情況的提示，需要用戶確認(rèn)該信息。

2. 注意事項(xiàng)

1. 不要在標(biāo)題中使用“抱歉打擾”、“危險(xiǎn)！”、“你確定？”此類道歉、警告或含糊不清的標(biāo)題；
2. 不要打亂按鈕順序，肯定性按鈕在右，否定性按鈕在左；
3. 建議使用三種按鈕文案，確定文案(如刪除/導(dǎo)出）、駁回文案（如取消）和確認(rèn)文案（如我知道了/好的）；
4. 不要濫用，無(wú)預(yù)期的頻繁打斷用戶會(huì)引發(fā)反感；
5. 絕對(duì)不能被其他元素遮擋，需一直保持焦點(diǎn)直到被關(guān)閉或某個(gè)動(dòng)作已被執(zhí)行。

3. 樣式類型

左側(cè)豎排為Android樣式，右側(cè)豎排為iOS樣式。

僅在高風(fēng)險(xiǎn)情況下使用帶標(biāo)題欄的Alert。

4. 顯示與消失

（1）顯示

Alert顯示時(shí)背景顯示深色遮罩，并會(huì)立即中斷用戶正在進(jìn)行的操作。

（2）消失

Alert僅支持2種關(guān)閉方式：

1. 點(diǎn)擊確定按鈕后立即執(zhí)行并關(guān)閉；
2. 點(diǎn)擊取消按鈕后取消操作并關(guān)閉。

5. 范例

有道云筆記在刪除文檔時(shí)，使用Alert以警告用戶刪除的內(nèi)容將無(wú)法恢復(fù)。

Simple dialogs 簡(jiǎn)易對(duì)話框

特屬于Google Material Design中定義的原生Dialog控件。

1. 使用場(chǎng)景

Simple dialog通常用于提供列表項(xiàng)的詳細(xì)信息或操作。

2. 注意事項(xiàng)

1. 不要使用明確的按鈕進(jìn)行確認(rèn)或取消操作；
2. 在能夠使用Menus、Bottom sheets、Action sheet（iOS）或Activity view（iOS )的情況下不要使用Simple dialogs；
3. 絕對(duì)不能被其他元素遮擋，需一直保持焦點(diǎn)直到被關(guān)閉或某個(gè)動(dòng)作已被執(zhí)行。

樣式類型：

3. 顯示與消失

顯示：Simple dialog顯示時(shí)背景顯示深色遮罩，并會(huì)立即中斷用戶正在進(jìn)行的操作。

消失：

Simple dialog支持3種關(guān)閉方式：

1. 點(diǎn)擊一個(gè)選項(xiàng)后立即執(zhí)行并關(guān)閉；
2. 點(diǎn)擊dialog外任意區(qū)域取消操作并關(guān)閉；
3. 點(diǎn)擊Android系統(tǒng)返回鍵取消操作并關(guān)閉。

4.?范例

安卓端的Keep利用Simple dialog來(lái)承載話題舉報(bào)的操作，用戶點(diǎn)擊任意一選項(xiàng)后觸發(fā)提交。（在iOS端其使用的是Action sheet）

Confirm dialogs 確認(rèn)對(duì)話框

特屬于Google Material Design中定義的原生Dialog控件。

1. 使用場(chǎng)景

Confirm dialog通常用于復(fù)雜操作前的最終確認(rèn)，使其有機(jī)會(huì)在必要時(shí)改變主意。

2. 注意事項(xiàng)

1. 需同時(shí)提供明確的確認(rèn)和取消按鈕；
2. 在能夠使用Menus、Bottom sheets、Action sheet（iOS）或Activity view（iOS )的情況下不要使用Confirm dialogs；
3. 絕對(duì)不能被其他元素遮擋，需一直保持焦點(diǎn)直到被關(guān)閉或某個(gè)動(dòng)作已被執(zhí)行。

3. 樣式類型

支持嵌套Selection controls。

4. 顯示與消失

顯示：Confirm dialog顯示時(shí)背景顯示深色遮罩，并會(huì)立即中斷用戶正在進(jìn)行的操作。

消失：

Confirm dialog支持4種關(guān)閉方式：

1. 點(diǎn)擊確定按鈕后立即執(zhí)行并關(guān)閉；
2. 點(diǎn)擊取消按鈕后取消操作并關(guān)閉；
3. 點(diǎn)擊dialog外任意區(qū)域取消操作并關(guān)閉；
4. 點(diǎn)擊Android系統(tǒng)返回鍵取消操作并關(guān)閉。

5. 內(nèi)容滾動(dòng)處理

應(yīng)盡量避免內(nèi)容滑動(dòng)，當(dāng)確實(shí)需要滑動(dòng)時(shí)，標(biāo)題需固定在頂部，按鈕固定在底部，保證滾動(dòng)的同時(shí)仍然可見標(biāo)題和按鈕。Dialogs存在時(shí)禁止?jié)L動(dòng)對(duì)話框以外的元素，例如背景。

6. 范例

原生安卓系統(tǒng)使用Confirm dialog來(lái)承載彩鈴設(shè)置功能。

Full-screen dialogs 全屏對(duì)話框

特屬于Google Material Design中定義的原生Dialog控件。

1. 使用場(chǎng)景

Full-screen dialog通常用于對(duì)一系列復(fù)雜任務(wù)的分組。

2. 注意事項(xiàng)

（1）僅在以下場(chǎng)景中使用Full-screen dialog：

1. 有需要用戶輸入的選擇器或表單時(shí)；
2. 編輯的內(nèi)容無(wú)法實(shí)時(shí)保存時(shí)；
3. 沒有本地自動(dòng)保存的草稿功能；
4. 在提交前需要進(jìn)行批處理或更改隊(duì)列時(shí)。

（2）Full-screen dialog僅限于在移動(dòng)端使用。

3. 樣式類型

在Top app bar上需展示“X”按鈕和確定性按鈕。

4. 顯示與消失

顯示Full-screen dialog顯示時(shí)填充全屏，使用沉浸式的全屏布局。

消失：

Full-screen dialog支持3種關(guān)閉方式：

1. 點(diǎn)擊確定性按鈕后立即執(zhí)行并關(guān)閉；
2. 點(diǎn)擊X按鈕并確認(rèn)取消操作后關(guān)閉；
3. 點(diǎn)擊Android系統(tǒng)返回鍵并確認(rèn)取消操作后關(guān)閉。

5. 二次確認(rèn)

點(diǎn)擊“X”按鈕或系統(tǒng)返回鍵時(shí)將丟棄所有更改信息并退出，如果用戶發(fā)生了字段更改，需給予Confirm Dialog進(jìn)行二次確認(rèn)。

6. 范例

Teambition使用Full-screen dialog來(lái)承載Date picker和Time picker的多重時(shí)間設(shè)置。

提示控件的用法總結(jié)

俗話說(shuō)的好，“好鋼用在刀刃上”，產(chǎn)品經(jīng)理和設(shè)計(jì)師應(yīng)當(dāng)盡量將Dialogs應(yīng)用于非常重要的使用場(chǎng)景（這里的也包含我們定制的活動(dòng)彈窗），所謂物以稀為貴，少量使用可以凸顯出其重要性，過度使用則會(huì)使人感到異常反感（帶來(lái)同樣問題的還有過度的新手引導(dǎo)和紅點(diǎn)提示）。

那么如何來(lái)更好的來(lái)選擇控件呢？

我們可以將內(nèi)容信息的重要程度為判斷基準(zhǔn)：

• 不重要程度：用戶可以不注意或不操作；
• 一般重要程度：用戶可稍后注意或稍后操作；
• 很重要程度：用戶必須立即注意或立即操作。

若不重要，請(qǐng)使用Toast或Snackbar；若一般重要，請(qǐng)使用Banner；若很重要，請(qǐng)盡量先考慮使用Bottom sheets（Android）、Action sheet（iOS）或Activity view（iOS )等模態(tài)控件，若以上不能滿足需求，再使用Dialogs。

相關(guān)閱讀

還在用Toast？快試試更好用的Snackbar！

彈窗提示太強(qiáng)，Toast又太弱？不妨來(lái)試試Banner吧！

本文由 @愚者秦 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議