Dialog 最典型的應(yīng)用場(chǎng)景是提示用戶去做一個(gè)些被安排好的決定，而這些決定可能是當(dāng)前任務(wù)的一部分或者是前至條件。 Dialog 可以用于告知用戶具體的問題以便他們作用重要的決定(話外音：起到一個(gè)確認(rèn)作用)，或者是用于解釋接下來的動(dòng)作的重要性及后果。(話外音：起到一個(gè)警示作用)。

一些復(fù)雜的操作，尤其是每個(gè)決策都需要相關(guān)解釋說明的情況下是不適合使用 Dialog 形式的。

http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-usage-dialog_03_large_mdpi.png" alt="contact chips" />

Dialog 包含了一個(gè)標(biāo)題(可選)，內(nèi)容，事件。

標(biāo)題：主要是用于簡(jiǎn)單描述下選擇類型。它是可選的，要需要的時(shí)候賦值即可。

內(nèi)容：主要是描述要作出一個(gè)什么樣的決定。

事件：主要是允許用戶通過確認(rèn)一個(gè)具體操作來繼續(xù)下一步活動(dòng)。

http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-usage-dialogs_07_large_mdpi.png" alt="contact chips" />

按鈕的寬度及邊框示例

http://wiki.jikexueyuan.com/project/material-design/images/components-buttons-buttonsindialogs_large_mdpi.png" alt="contact chips" />

http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-usage-dialogs_07a_large_mdpi.png" alt="contact chips" />

http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-usage-dialogs_07b_large_mdpi.png" alt="contact chips" />

加寬型豎排按鈕（Stacked full-width buttons）

當(dāng)按鈕的文本超過了通常的按鈕寬度時(shí)，你就可以使用這種豎向疊模式來呈現(xiàn)我們的按鈕文字信息。

http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-usage-stackedfullwidthbuttonsa_large_mdpi.png" alt="contact chips" />

并排按鈕（Side-by-side buttons）

在每個(gè)按鈕的文本信息都沒有超過通常的按鈕寬度時(shí)，推薦使用并排模式。比如說最常用的確定/取消按鈕

http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-usage-sidebysidebuttonsa_large_mdpi.png" alt="contact chips" />

http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-usage-sidebysidebuttonsb_large_mdpi.png" alt="contact chips" />

內(nèi)容

提示框標(biāo)題

提示框的標(biāo)題是可選的，用于說明提示的類型。可以是與之相關(guān)的程序名，或者是選擇后會(huì)影響到的內(nèi)容。例如：設(shè)置

提示框標(biāo)題應(yīng)該作為提示框的一部分被整體地顯示出來。

提示框內(nèi)容

提示框的內(nèi)容是變化多樣的。但是通常情況下由文本和(或) 其它 UI 元素組成的，并且主要是用于聚焦于某個(gè)任務(wù)或者是某個(gè)步驟。比如說"確認(rèn)"、"刪除"或選擇某個(gè)選項(xiàng)。

http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-content-dialogs_03a_large_mdpi.png" alt="contact chips" />
http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-content-dialogs_03b_large_mdpi.png" alt="contact chips" />

事件

提示框事件

提示框呈現(xiàn)的是一組聚焦和有限的事件，通常是一個(gè)肯定的事件和否定(與肯定的事件對(duì)立)的事件組成。

肯定的事件是放于提示框的右邊并且可以繼續(xù)接下來的步驟?？隙ǖ氖录梢允菗?jù)有破壞性的，比如:"刪除"，"移除"。(話外音：肯定的事件主要是指產(chǎn)品期望用戶的一個(gè)決策。與按鈕文字呈現(xiàn)的語(yǔ)意無關(guān))

否定的事件是放于提示框的左邊。用于返回用戶原始的屏幕或者是步驟。(話外音：一般就是關(guān)閉提示框作用)

事件的按鈕排列類型可以是并列的，也可以是豎向疊加加寬型的。這取決于事件按鈕里面的文字長(zhǎng)短。

肯定事件和否定事件除了可以使用"確認(rèn)"/"取消"外，也可以是其它一些動(dòng)詞或者是動(dòng)詞短語(yǔ)來表明決策后的結(jié)果。

http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-actions-dialogs_11_large_mdpi.png" alt="contact chips" />

表現(xiàn)(Behavior)

滾動(dòng)

提示框是與父視圖是分隔開的。不會(huì)隨著父視圖滾動(dòng)。

如果可以，請(qǐng)盡量保持提示框里面的內(nèi)容不需要滾動(dòng) 。如果滾動(dòng)的內(nèi)容太多了，那么可以考慮使用其它的容器或者是呈現(xiàn)方式。然而，如果內(nèi)容是滾動(dòng)的，那么請(qǐng)使用較明顯的方式來提示用戶。比如說被讓文字或者是控件露一截出來。 http://wiki.jikexueyuan.com/project/material-design/images/components-dialogs-behavior-dialogs_12_large_mdpi.png" alt="contact chips" />

手勢(shì)

觸摸提示框外面的區(qū)域可以關(guān)閉提示框

提示框焦點(diǎn)

提示框的焦點(diǎn)是整個(gè)屏幕。提示框在關(guān)閉前或者是用戶選擇了一個(gè)事件(比如說選擇了一個(gè)選項(xiàng))前都會(huì)持有焦點(diǎn)。

原文：Dialogs 翻譯：Kris 校對(duì)：huanglizhuo

上一篇：滑塊控件(Sliders)下一篇：底部動(dòng)作條