AUO Design System

Dialogs/Modal 對話框

概述

對話框是一種暫時覆蓋在應用程式主介面上的視窗，用於顯示重要資訊、請求使用者確認或執行特定操作。對話框會中斷使用者當前的操作流程，要求他們專注於對話框中的內容。對話框通常用於簡短且不頻繁的任務，如果使用者需要重複執行某個任務，請考慮將該任務設計成可在主頁面上完成，而不是透過對話框。

使用時機

對話框常用於以下情境：

  • 重要訊息：當需要向使用者顯示重要的訊息、警告或錯誤時。
  • 操作確認：當需要使用者確認某個操作的後果時，例如删除檔案、提交表單等。
  • 蒐集資訊：當需要在不離開當前頁面的情況下蒐集使用者輸入的資訊。
  • 需要集中注意力：當需要使用者專注於特定任務或資訊，不受其他介面元素干擾時。

使用規範

當您取用對話框元件進行設計時，應考慮以下原則：

  • 標題：對話框的標題應簡潔明瞭，準確反映其目的。
  • 内容：對話框的內容應簡潔明瞭，避免過多的文字或複雜的排版。
  • 按鈕：對話框的按鈕應具有明確的標籤，讓使用者知道點擊後會發生的事。
  • 關閉方式：對話框需提供明確的關閉方式，例如點擊關閉按鈕、按下 Esc 鍵或點擊對話框外部區域（選擇性）。

設計範例

  1. 標題 (Headline)：簡潔明瞭地描述對話框的目的。
  2. 輔助文字 (Supporting Text)：提供更多上下文或說明，解釋對話框的目的和使用者需要採取的行動。
  3. 按鈕 (Buttons)：提供使用者可以採取的行動，例如確認、取消或其他操作。
    1. 3-1主要動作按鈕 (Primary Action Button)：
      • 對話框中最重要的按鈕，用於確認或執行主要操作
      • 使用強調色或與背景形成強烈對比的顏色。
      • 標籤應簡短、明確，例如「確認」、「提交」、「儲存」等。
    2. 3-2次要動作按鈕 (Secondary Action Button)：
      • 視覺層級低於主要動作按鈕。
      • 提供返回或取消操作的選項
      • 通常標籤為「取消」。
  4. 狀態圖示：
    • 警告 (Warning)：當動作具有破壞性或不可逆性，例如删除檔案等，提醒使用者留意潛在風險。
    • 錯誤 (Error)：表示操作失敗或出錯誤。
    • 成功 (Success)：表示操作成功完成。
    • 通知 (Info)：提供一般性資訊或提示。
  1. 標題 (Headline)
  2. 輔助文字 (Supporting Text)
  3. 按鈕 (Buttons)：
    1. 3-1主要動作按鈕 (Primary Action Button)
    2. 3-2次要動作按鈕 (Secondary Action Button)
  4. 狀態圖示：
    • 警告 (Warning)：當動作具有破壞性或不可逆性，例如删除檔案等，提醒使用者留意潛在風險。
    • 錯誤 (Error)：表示操作失敗或出錯誤。
    • 成功 (Success)：表示操作成功完成。
    • 通知 (Info)：提供一般性資訊或提示。
回頁首