Material Design 的對話視窗

BY Grace │ 2019-09-26 11:21:26

不論前台瀏覽、後台設定經常出現半遮蓋視窗，中斷操作，讓你做重複確認動作。這種在系統上重複確認的動作也可被稱為是防呆機制的一種，在你要做某種重大設定前，跳出提醒讓你確認。在Material Design 裡，也有針對Dialong對話視窗的規範。
除了常見的dialong對話框，另外還有兩種很像但其重要度排在對話框之後：

Snackbar	重要性最低，出現提醒後會自動消失。
Banner	中等重要，會一直出現，但使用者還是可以繼續進行其他操作，使用者可以選擇關閉或因為問題被解決就自動消失。
Dialong	重要度最高，出現的訊息最為重要，使用者沒有下任何動作前此視窗不會消失。例如常見的確定刪除等警告視窗。

Dialong對話框設計重點

dialong 對話框未被動作前，其他操作都不能設定，所以當對話框出現時，背景會加上黑色覆蓋，有助於使用者專注於目前的動作。
dialong 對話框的標題必須利用簡短明確句子看出目的，例如：請選擇優惠券，不能是請選擇；範例後台設定，標題最好是確定刪除目錄嗎？
dialong 對話框的選項要能明確讓使用者知道按下後的動作，例如刪除此目錄?，選項最佳建議應該是"確定刪除""取消"，而不是"是""否"等
dialong 的選項按鈕設定，可以並排排列、或堆疊排列

對話框種類有下列三種

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

對話框的動作選項設定

Confirming actions，此動作可能會刪除某些內容之類，確定刪除與取消，而較符合內容敘述的按鈕要擺右邊，例如你確定要刪除此目錄?確定刪除要擺右邊
Dismissive actions - 取消操作，擺在確定刪除的左邊。
Acknowledgement actions - 只有一個選項，提供訊息，確認已閱讀訊息使用

對話框-03-錯誤

未修改前

對話框03

建議修改版本

文章關鍵字：Material Design Dialong UI設計質感設計

更多文章：