Dialogs 對話框

這是一個翻譯系列，原文是谷歌18年所出的材料設計指南（文末有鏈接），強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇，一共百余篇，歡迎關注哦。

對話框告知用戶一項包含重要信息的任務，它需要用戶做決策或喚起更多任務。

用法

對話框是模態窗口的一種，它出現在app內容的頂層并提供重要信息或征求決策。對話框出現時其他所有應用功能皆不可用，直到用戶執行確認、忽略或需要的操作后才會消失。

對話框會打斷用戶，所以請謹慎使用它。

原則

使用場景

對話框應用在：

出現了妨礙app正常運作的錯誤時

需要告知用戶重要信息，為便其完成特別任務、決策或確認時

組件	優先級	用戶操作
提示框	低	非必須：提示框自動消失
Banner	顯著，中等	非必須：用戶手動關閉，或觸發banner的條件被改變
對話框	最高	必須：直到用戶執行對話框操作或關掉它（若可操作），否則對話框一直阻止app使用。

類型

跨平臺適應

iOS端和對話框類似的組件有例如警告框和動作菜單。將對話框轉移到iOS時，視操作數量和文本長度來決定用這兩者（警告框和動作菜單）的哪一個。當有兩個操作、文本較短且水平布局時，用警告框。

當有三個或以上操作，文本較長時，則用動作菜單或底部動作條。

安卓

如果文本標簽太長了就把操作堆疊起來。

剖析

容器
標題
輔助文本
按鈕
遮罩

對話框和遮罩

對話框是模態窗口的一種。在該模態窗口被操作前，界面的其他部分是不可點擊的。所有模態窗口都會打斷用戶-它們的目的就是讓用戶注意到界面最頂層的這些內容。

為了使其余元素不可用且吸引用戶注意，模態窗口背后的內容會被遮罩遮擋。遮罩是材料界面臨時用到的增強內容顯著性的方法。

標題

標題和按鈕文字應該表明對話框的意圖。

標題應該是：

簡潔、清楚的陳述句或問句

避免使用表示歉意（“抱歉打擾了”）、警告（“注意！”）或表示疑問的語句（“你確定嗎？”）

按鈕

并排按鈕（推薦）

兩個按鈕并列擺放

這些并排按鈕提供“不同意”和“同意”的操作作為選項。

豎排全寬按鈕

豎排按鈕可容納更長的按鈕文本。確認按鈕放在忽略按鈕上方。

堆疊的全寬按鈕

海拔高度

對話框的海拔是24dp并有投影。它們浮現在其他內容之上，通常有一個遮罩在背后遮擋住整個應用內容。

行為

交互

對話框出現時沒有警告，只要求用戶停止當前任務。應謹慎使用對話框，因為不是每個選擇或設置都需要中斷用戶當前任務。

位置

對話框保持聚焦狀態，直到被關閉或執行操作，例如選擇設置。它們不應被其他元素遮擋或只占據屏幕的一部分，但全屏對話框除外。

滾動

大多數對話框內容應避免滾動。當需要滾動時，對話框標題固定在頂部，按鈕固定在底部。這確保了選定的內容在標題和按鈕旁邊仍然可見，即使在滾動時也是如此。

對話框不會滾動對話框外的元素，例如背景。

查看可滾動選項列表時，對話框標題和按鈕保持固定。

關閉對話框

對話框可以通過以下方式關閉：

點擊“取消”按鈕，如果有的話
按下鍵盤的Esc鍵
點擊遮罩（安卓、iOS）
點擊安卓系統的后退按鈕
使用其他的“取消”或“退出”操作，例如iOS的旁白退出手勢

如果禁用了用戶關閉對話框的功能，則用戶必須選擇要繼續的對話框操作。

轉換

對話框出現和退出都用淡入淡出方式。

淡入淡出的對話框

操作

操作類型

對話框通過標題，內容和操作為用戶提供了獨特的選擇。對話框操作表示為按鈕，允許用戶確認或取消某些內容。

對話框操作有三種類型：

確認操作

要解決觸發對話框的內容，確認操作會確認建議的操作。這些操作可能涉及刪除某些內容，例如適應上下文的“刪除”或“移除”。它們位于屏幕的右側。

忽略操作

忽略操作會解除建議的操作，并將用戶返回到原始界面或步驟。它們直接放在確認操作的左側。

確知操作

當需要用戶確認以繼續時，可以呈現該單個動作。或者，可用Snackbar來傳達此類信息。

在做出選擇之前，禁用確認操作（1）。永不禁用取消操作。

拒絕動作（1）應該位于確認動作的左側。

只有確知時才可以提供單個操作。

避免向用戶提供有歧義的選擇。“取消”在這里沒有意義，因為沒有提出明確的行動。

操作的數量

對話框最多包含兩個操作。

如果提供單個操作，則必須是確知操作。
如果提供了兩個動作，則必須一個是確認，另一個是忽略。
建議不要提供第三個操作，例如“了解更多”，因為它會讓用戶離開對話框，以致對話框任務未完成。

用行內展開來顯示更多信息，而非添加第三個操作。如果需要展示更多，請將其放在進入對話框之前。

“了解更多”操作（1）將帶用戶離開此對話框，也就使其處于未決定狀態。

警告框

用法

警告框會以緊急信息、詳細信息或一些操作來打斷用戶。

行為

要關閉警告框，必須選擇其中一個操作。

簡單對話框

用法

簡單對話框能展示在選中時立即可操作的項目。他們沒有文字按鈕。

由于簡單的對話框是打斷性的，所以謹慎使用它們。備選方案是用非模態的、不太打擾用戶的下拉菜單。

行為

一個簡單的對話框允許以下交互：

點擊操作以選擇它并關閉對話框
在對話框外部點擊以關閉對話框而不執行操作

簡單對話框示例

沒有操作的簡單對話框

簡單的對話框允許用戶對所選元素進行操作，而無需操作文本。例如，用戶只需選擇一個列表項即可對其執行操作。

不要在簡單的對話框中放文字按鈕。點擊時，選擇本身是可操作的。

不要在簡單的對話框中放諸如“取消”之類的拒絕操作。用戶可以點擊對話框外的任何位置來關閉它。

確認對話框

用法

確認對話框讓用戶能在提交之前最終確認其選擇，因此他們有機會在必要時改變主意。

如果用戶確認了選擇，則執行該操作。否則，用戶可以關閉該對話框。例如，用戶可以試聽多個鈴聲，但只有在點擊“OK”時才最終選擇。

行為

要確認選擇，用戶點擊確認按鈕。要取消，則點擊取消按鈕。

在繼續之前，用戶必須確認選擇或關閉對話框。

位置

確認對話框主要作為列表出現，但也可以有很多其他的布局和形式，比如日期選擇器、時間選擇器等。

列表中的確認對話框

用戶點擊ok鍵來選擇和確認。

日期選擇器中的確認對話框

用戶通過點擊日期來選擇，然后點ok鍵確認

時間選擇器中的確認對話框

用戶拖動時鐘指針后點ok鍵確認。

按鈕

確認對話框有確認和取消兩個按鈕。點擊確認按鈕后，確認選擇。如果點擊取消按鈕或對話框外的區域，則取消操作。

提供確認和取消的按鈕。

不要提供單一操作，因為用戶不知道如何解除對話。

全屏對話框

用法

全屏對話框將一系列任務分組，例如創建包含事件標題、日期、位置和時間的日歷條目。因為它們占據整個屏幕，所以全屏對話框是唯一可以包含其他對話框的對話框。

日歷app啟動全屏對話框

全屏對話框可用于滿足以下任何條件的內容或任務：

包含需要鍵盤輸入的組件的對話框，例如表單字段
不用立即保存更改
當對話框中的組件打開其他對話框時

全屏對話框僅適用于移動設備。對于平板電腦或桌面端，請使用模態對話框。

行為

保存選擇

要在全屏對話框中保存選擇，用戶點擊“保存”。要放棄所有更改并退出，用戶點擊“X”圖標或“返回”按鈕。

確認

在填寫所有必填字段之前，將禁用確認操作。使用描述性動詞，例如“保存”、“發送”、“分享”、“更新”、“創建”等。不要使用含糊不清的術語，例如“完成”、“OK”或“關閉” 。

如果未進行任何更改，在對話框關閉時不會詢問是否確認丟棄
如果用戶進行了更改，在對話框關閉時會詢問是否確認丟棄

“關閉”按鈕（1）含糊不清，因為它未表示是保存還是丟棄更改。

對話窗口

啟動全屏對話框會暫時重置app的海拔高度，允許在全屏對話框上方顯示簡單的菜單或對話框。

日歷app啟動全屏對話框，隨后可觸發確認對話框和警告框。

布局

全屏對話框覆蓋屏幕，但不會顯示為浮動模態窗口。

操作

把確認和拒絕操作放在頂部應用欄。

導航

由于全屏對話框必須被完成、忽略或關閉，因此只能使用“X”按鈕來關閉。

避免使用除“X”以外的任何導航圖標。返回箭頭（1）表示正在保存界面的狀態，在全屏對話框中不該有這種情況。

標題

標題應該簡潔。如有必要，可以換行和使用省略號。如果有長標題或可變長度的標題（例如翻譯），請將它們放在內容區域而不是應用欄中。

避免在對話框的頂部應用欄（1）中放置長標題，因為省略的文本可能會導致誤解。

想辦法縮短應用欄的文字，并將長標題放到全屏對話框的內容區域（1）。

主題化

Crane材料主題

這個旅行app的對話框已使用材料主題進行了自定義。定制領域包括顏色，文本和形狀。

Crane的自定義對話框

顏色

Crane的對話框在五個元素上使用自定義顏色：容器，標題文本，支持文本，按鈕文本和平遮罩。

元素	類別	屬性	值
容器	表面	顏色不透明度	#FFFFFF 100％
標題文本	表面之上	顏色不透明度	＃000000 87％
輔助文字	表面之上	顏色不透明度	＃000000 60％
按鈕文字	主色	顏色不透明度	＃5C1349 100％
遮罩	表面之上	顏色不透明度	＃000000 32％

文本

Crane的對話框的標題文本、支持文本和按鈕文本使用了自定義排版。

元素	類別	屬性	值
標題文本	標題6（H6）	字體字型字號大小寫	Raleway Bold 20 首字母大寫
支持文本	正文1（Body1）	字體字型字號大小寫	Raleway Medium 16 句首字母大寫
按鈕文字	按鈕（Button）	字體字型字號大小寫	Raleway SemiBold 14 全部大寫

形狀

Crane的對話框有自定義的圓角形狀。

元素

類別

值

容器

左上角

右上角

右下角

左下角

圓角半徑16dp

Reply的材料主題

此電子郵件app的對話框也使用了材料主題進行自定義。定制領域包括顏色、文本和形狀。

Reply的自定義對話框

顏色

Reply的對話框在五個元素上使用了自定義顏色：對話框，標題文本，支持文本，按鈕文本和遮罩。

元素	類別	屬性	值
容器	表面	顏色不透明度	＃000000 100％
標題文本	表面之上	顏色不透明度	＃232F34 100％
支持文本	表面之上	顏色不透明度	＃232F34 100％
按鈕文本	主色	顏色不透明度	＃344955 100％
遮罩	表面之上	顏色不透明度	＃232F34 32％

文本

Reply對話框的標題文本，支持文本和按鈕文本都使用了自定義排版。

元素	類別	屬性	值
標題文字	標題6（H6）	字體字型字號大小寫	Work Sans Bold 21 句首字母大寫
支持文本	正文1（Body1）	字體字型字號大小寫	Work Sans Regular 16 句首字母大寫
按鈕文本	按鈕（ Button)	字體字型字號大小寫	Work Sans SemiBold 15 句首字母大寫