60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者要在目前情境完成儲存、取消、送出或刪除等動作。
- 動作發生後需要顯示處理中、成功、失敗或暫時不可操作。
不適合使用
- 使用者只是要前往另一個頁面、資源或頁內位置。
- 操作只是切換某個設定，且要立即反映目前狀態。
畫面規則
先讓主要動作清楚，再讓其他操作退一步。
一個區塊只留一個主要動作
主要操作才使用明顯的 Primary Button；其他操作退一步，避免整列藍色按鈕互相搶注意力。
危險操作是語意，不只是顏色
刪除或停用可使用 Danger token，但需要讓使用者理解後果與是否需要確認。
按鈕文字直接描述結果
用「儲存變更」比「確定」更容易讓人知道接下來會發生什麼。
必要狀態
按下去之後，使用者不能只能等。
預設與 Hover
可操作的按鈕要讓人看見可按，滑過時給予一致的回饋。
處理中
送出後顯示進行中並避免重複送出，不能只讓畫面安靜等待。
停用
不可操作時保留原因或下一步，不把停用當成唯一錯誤訊息。
Danger
高風險動作使用 Danger 樣式，必要時在執行前加入確認。
操作 Demo
分開看狀態與操作情境，才不會把八種按鈕混成一團。
操作前先知道
按鈕狀態
先觀察：觀察預設、處理中、失敗與停用時，文字與可操作性如何改變。
操作：切換狀態按鈕，再嘗試觸發主要操作。
預期結果：使用者能知道是否能按、系統是否正在處理，以及下一步怎麼做。
危險操作情境
先觀察：Danger 樣式只在刪除等高風險動作出現。
操作：啟用刪除情境並閱讀確認訊息。
預期結果：危險操作不會和一般儲存按鈕混在一起。
告訴 AI
把動作、狀態與高風險後果一次說清楚。
請為 LumenDesk 的「編輯成員」Dialog 設計操作區。
- 「取消」使用 Secondary Button，關閉尚未變更的 Dialog，焦點回到開啟 Dialog 的按鈕。
- 「儲存變更」使用唯一的 Primary Button。儲存中顯示「儲存中」並禁止重複送出。
- 儲存失敗時保留表單內容，顯示可理解的錯誤與「重新嘗試」Button。
- 「刪除 Aurora-01」使用 Danger Button，先顯示無法復原的後果與取消路徑，再執行刪除。
- 純圖示按鈕要有可存取名稱；Tab、Enter、Space 與可見焦點都要能操作。
- 360px 寬度下保留主要按鈕文字、錯誤訊息與取消路徑。驗收清單
不要只檢查「按鈕能不能點」。
- 主要操作是否只有一個明確視覺焦點？
- 處理中是否防止重複送出並保留回饋？
- Danger 是否只用於具有不可逆或高風險後果的動作？
- 按鈕文字是否說出結果，而不是只寫「確定」？
- Tab、Enter、Space 能否完成可預期的操作？