對話框
對話框是由文字和各種不同物件所組成,用於中斷使用者目前的操作,來提示一些需要告知的資訊、需要進行的決定等。
使用時有以下幾個情況需要注意:
減少中斷由於對話框會中斷操作,因此必須要謹慎使用,並非所有需要做的選擇、設定或顯示資訊都需要靠對話框。也可以用選單或是延展物件來顯示詳細內容。
開關方式對話框不應該可以直接由其他物件開啟。且可以透過點擊取消、點擊對話框外部和系統返回鍵關閉。
生命週期在被取消或是完成決定前,對話框都不應該被關閉。
滾動元件對話框內容應盡量攤平,避免使用可滾動的元件
以下有兩種特殊的對話框類型,可跳脫一些限制:
- 全螢幕因為不會產生圖層上的變化,所以可再開啟一層對話框
- 可滾動元件有些時候使用滾動元件是不能避免的
固定標頭可以隨時在語意上連結每一選項
類型對話框有分成以下幾種類型:
- 警告無標頭,用一行或兩行闡述問題,並提供操作按鈕。
有標頭的對話框用於重要性較高的警告,像是連線問題或刪除檔案,並伴隨著問題說明
選項在點選後即會立即啟動相對應操作並關閉
當選單對話框的任一選項多於單行時,則應改為使用此類型
- 確認對話框列出控制物件或選取氣給使用者選擇,並提供確認和取消的按鈕。
時間選取器
日期選取器
- 全螢幕在有限的空間下使用複雜的對話框時,在手機端應使用全螢幕呈現。多用於設定頁面,並提供關閉和確認按鈕。
關閉和確認按鈕應置於上方
應用列標題至多2行,如在某些語系下超過,則應放入對話框中
運用全螢幕,將在視覺上把畫面的基準面抬升到與對話框相同,所以可以再開一層對話框
如果有改變設定,則未存擋就退出時需要進行確認;反之則直接關閉
規範
文字
同於卡片
- 警告
內容上下左右間距:24 dp
標題下間距:20 dp
同於平面化按鈕
按鈕間距:8 dp
同於分隔線
按鈕
高:48 dp
寬:容器寬
內間距:16 dp
按鈕欄位下間距:8 dp
- 簡易對話框
選項高:56 dp
左圖欄位寬:80 dp圖示
直徑:40 dp
左間距:24 dp
右間距:16 dp
上下間距:8 dp文字
字體:16 sp
右間距:24dp
上下間距:20 dp
- 確認對話框
選項高:48 dp
左圖欄位寬:72 dp圖示
同系統圖示
左右間距:24 dp
上下間距:垂直居中文字
字體:16 sp
右間距:24 dp
上下間距:16 dp
- 全螢幕
高:56 dp(單行),80 dp(兩行)
圖示
同系統圖示
上下左間距:16 dp
右間距: 32 dp標題
右間距:72 dp
上間距:20 dp
下間距:與圖示同(官方為 20 dp)
字體:20 sp操作文字
左右間距:20 dp
下間距:與標頭同
字體:14 sp