Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
使用者體驗模式7 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊

撤銷而不是確認對話框:設計幹擾性較小的 UI

為什麼要例行公事「你確定嗎?」當確認仍然正確時,對話方塊失敗,以及如何設計清晰、可訪問且安全的撤消訊息。

直接總結與定義

核心要點

可撤銷的操作使用撤銷:立即執行此操作,然後透過「撤銷」按鈕顯示一則簡短的非阻塞訊息。對於嚴重的、不可逆轉的操作(例如永久刪除或大額付款)保留確認對話框,並使其具體:命名物件和後果。確認常規操作可以訓練人們在不閱讀的情況下按一下「確定」。

為什麼例行確認不起作用

Nielsen Norman Group 關於確認對話方塊的指導很明確:在具有嚴重後果的操作之前使用它們,並且不要將它們用於常規操作。當人們多次看到同一個對話框時,他們會出於習慣進行確認,並且對話框將停止阻止其本來要捕獲的錯誤。同一篇文章建議盡可能提供撤銷,而不是依賴警告。

確認或撤銷:一個簡單的規則

問一個問題:這可以逆轉嗎?如果是,請採取行動並提供撤銷。如果不是,請先確認,並把確認的內容具體化。

  • 檔案、移動、標記為已讀、從清單中刪除:立即行動、提供撤銷。
  • 發送訊息:許多產品會短暫延遲發送,以便可以撤銷。 Gmail 讓人們可以選擇 5、10、20 或 30 秒的撤銷視窗。
  • 永久刪除、付費、公開發布:先確認,命名項目和影響(「刪除142個檔案」)。
  • 更好的是:使用垃圾或恢復期使刪除可逆,然後使用撤銷。
決策圖:撤銷 toast 後立即發生可逆操作;不可逆轉的操作會出現特定的確認對話框
可逆操作被撤消;只有認真的、不可逆轉的人才會得到一個對話,指出將會失去什麼。

設計撤銷訊息

Material Design 將此元件稱為小吃列:一條簡短的、幹擾最小的訊息,可以包含單一操作,這與需要回應的對話方塊不同。用幾句話寫下發生的事情,將「撤消」作為單一操作,並將其在螢幕上保留足夠長的時間以使人們做出反應。不要在兩秒鐘內消失的訊息中隱藏重要的撤消操作。

無障礙詳情

螢幕閱讀器使用者和需要更多時間的人可能會錯過自行消失的 Toast。透過禮貌的即時區域宣布訊息,讓鍵盤使用者到達「撤消」按鈕,在訊息懸停或聚焦時暫停計時器,並提供另一種方式來反轉操作,例如歷史清單或垃圾箱。

撤銷動作

從螢幕邊緣開始的簡短、平靜的入口和清晰的出口可以幫助人們在不被打擾的情況下注意到訊息。按下「撤銷」後,將項目動畫放回原位,以便可以看到反轉。透過簡單的淡入淡出來尊重減少運動的設定。

要記住的關鍵 Principle

  • 可逆操作:立即採取行動並提供撤銷
  • 不可逆轉的嚴重行動:明確影響的具體確認
  • 出於習慣點擊常規確認
  • 讓撤銷訊息易於存取:活動區域、鍵盤焦點、足夠的時間
  • 將逆轉動畫化,讓人們看到它有效

常見問題解答

來源

  1. Confirmation Dialogs Can Prevent User Errors — If Not Overused — Nielsen Norman Group
  2. Send or unsend Gmail messages — Gmail 幫助
  3. Snackbar guidelines — Material Design 3

相關指南和範例

反饋人們注意到的

瀏覽具有清晰的按下、成功和解除狀態的免費互動元件,並開啟其中任何一個進行適應。

瀏覽即時組件
免費試用