這是一個翻譯系列,原文是谷歌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 圓角半徑16dp 圓角半徑16dp 圓角半徑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 句首字母大寫 |
形狀
Reply的對話框具有自定義圓角形狀。
元素 |
類別 |
屬性 |
值 |
容器 |
中等組件 |
Famliy尺寸 |
尖角半徑0;0;0;0dp
|
規格
移動端
簡單對話框
警告框
確認對話框
確認對話框(滾動)
有長按鈕的確認對話框
全屏對話框
桌面
移動警告框
原文地址:Material Design
譯者:珠珠
轉載請注明:學UI網 » Dialogs 對話框