對話框

對話框是由文字和各種不同物件所組成,用於中斷使用者目前的操作,來提示一些需要告知的資訊、需要進行的決定等。

類型
規範

使用時有以下幾個情況需要注意:

  • 減少中斷由於對話框會中斷操作,因此必須要謹慎使用,並非所有需要做的選擇、設定或顯示資訊都需要靠對話框。也可以用選單或是延展物件來顯示詳細內容。

  • 開關方式對話框不應該可以直接由其他物件開啟。且可以透過點擊取消、點擊對話框外部和系統返回鍵關閉。

  • 生命週期在被取消或是完成決定前,對話框都不應該被關閉。

  • 滾動元件對話框內容應盡量攤平,避免使用可滾動的元件

以下有兩種特殊的對話框類型,可跳脫一些限制:

  • 全螢幕因為不會產生圖層上的變化,所以可再開啟一層對話框

  • 可滾動元件有些時候使用滾動元件是不能避免的

固定標頭可以隨時在語意上連結每一選項

類型對話框有分成以下幾種類型:

  • 警告無標頭,用一行或兩行闡述問題,並提供操作按鈕。

有標頭的對話框用於重要性較高的警告,像是連線問題或刪除檔案,並伴隨著問題說明

  • 簡易式選單詳細請查看選單內的簡易式選單

  • 簡易對話框列出可點擊的選項,不提供關閉按鈕。

選項在點選後即會立即啟動相對應操作並關閉

當選單對話框的任一選項多於單行時,則應改為使用此類型

  • 確認對話框列出控制物件或選取氣給使用者選擇,並提供確認和取消的按鈕。

時間選取器

日期選取器

  • 全螢幕在有限的空間下使用複雜的對話框時,在手機端應使用全螢幕呈現。多用於設定頁面,並提供關閉和確認按鈕。

關閉和確認按鈕應置於上方

應用列標題至多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