Material Design 的對話視窗

Material Design 的對話視窗

不論前台瀏覽、後台設定經常出現半遮蓋視窗,中斷操作,讓你做重複確認動作。這種在系統上重複確認的動作也可被稱為是防呆機制的一種,在你要做某種重大設定前,跳出提醒讓你確認。在Material Design 裡,也有針對Dialong對話視窗的規範。
除了常見的dialong對話框,另外還有兩種很像但其重要度排在對話框之後:
Snackbar 重要性最低,出現提醒後會自動消失。
Banner 中等重要,會一直出現,但使用者還是可以繼續進行其他操作,使用者可以選擇關閉或因為問題被解決就自動消失。
Dialong 重要度最高,出現的訊息最為重要,使用者沒有下任何動作前此視窗不會消失。例如常見的確定刪除等警告視窗。
Dialong對話框設計重點
  • dialong 對話框未被動作前,其他操作都不能設定,所以當對話框出現時,背景會加上黑色覆蓋,有助於使用者專注於目前的動作。
  • dialong 對話框的標題必須利用簡短明確句子看出目的,例如:請選擇優惠券,不能是請選擇;範例後台設定,標題最好是確定刪除目錄嗎?
  • dialong 對話框的選項要能明確讓使用者知道按下後的動作,例如刪除此目錄?,選項最佳建議應該是"確定刪除""取消",而不是"是""否"等
  • dialong 的選項按鈕設定,可以並排排列、或堆疊排列

對話框種類有下列三種
  • Alert dialog 警告對話視窗(例如:確定刪除的跳出視窗)
  • Confirmation dialog 選擇並確認選項 (例如:選擇優惠券,但是按鈕一定會有2個 確定跟取消,不能只有一個)對話框02
  • Full-screen dialog (例如:全屏幕的視窗,例如google帳戶切換)

對話框的動作選項設定
  • Confirming actions,此動作可能會刪除某些內容之類,確定刪除與取消,而較符合內容敘述的按鈕要擺右邊,例如你確定要刪除此目錄?確定刪除要擺右邊
  • Dismissive actions - 取消操作,擺在確定刪除的左邊。
  • Acknowledgement actions - 只有一個選項,提供訊息,確認已閱讀訊息使用
對話框-03-錯誤
未修改前
對話框03
建議修改版本


更多文章:

  1. Design system設計系統概述
  2. Material You是什麼?Material Design3 與2的比較
  3. 網頁配色怎麼選?使用配色工具挑顏色2
  4. 網頁配色怎麼選?使用配色工具挑顏色1
  5. Material Design-Android網站分析2