按鈕與動作系統
目的
按鈕與動作系統提供了一種方法論，用於設計使用者互動的主要驅動元素。按鈕是使用者意圖與系統回應之間的基本橋樑。此系統確保每個動作都能在視覺上獲得優先排序（層級）、風格一致（凝聚力），並在所有裝置上易於操作（可用性）。它超越了「製作一個按鈕」的概念，轉而定義一個邏輯框架，說明不同類型的動作如何在佈局中相互關聯。
使用案例
- 為設計系統定義按鈕組件庫。
- 在 Hero 區塊或頁面標題中建立動作的層級結構。
- 組織相關動作的群組（例如：儲存、取消、刪除）。
- 設計特殊觸發器，如僅圖示按鈕或浮動動作按鈕 (FAB)。
- 標準化按鈕尺寸與佈局密度之間的關係。
何時不應使用
- 全域導覽連結： 若要在主要網站區塊之間移動，請使用
site-navigation-system。 - 內文超連結： 對於嵌入段落文字中、導向更多資訊的連結，請使用標準排版處理方式。
- 純裝飾性元素： 請勿對無法點擊或輕觸的元素使用按鈕樣式。
- 複雜表單輸入： 對於選取選項（核取方塊、選項按鈕、下拉式選單），請使用
form-design-system。
輸入內容
- 動作優先級： 該任務是主要（第 1 級）、次要（第 2 級）還是第三級（第 3 級）？
- 動作傾向： 該動作是「正向」（提交）、「中性」（取消）還是「破壞性」（刪除）？
- 情境密度： 按鈕位於何處？（例如，寬敞的 Hero 區塊 vs 緊湊的資料表格列）。
- 品牌代碼： 色彩調色盤、字體比例尺與圓角偏好設定。
輸出內容
- 按鈕變體矩陣： 為主要、次要、幽靈和危險變體定義樣式。
- 尺寸比例： 一系列的高度與內距（例如：小、中、大）。
- 結構規格： 文字、圖示與容器的內部間距規則。
- 動作分組規則： 多個按鈕之間的對齊、順序與間距指南。
工作流程
1. 建立變體層級
根據按鈕對使用者目標的重要性來分配視覺權重：
- 主要（第 1 級）： 高對比度、填充背景。通常是頁面的「主要」目標。每個檢視區塊僅一個。
- 次要（第 2 級）： 外框線或低對比度背景。用於替代或輔助動作。
- 第三級/幽靈（第 3 級）： 預設狀態下無背景或邊框。用於低優先級任務或密集 UI（如表格）中。
- 危險： 高對比度顏色（通常為紅色）。嚴格用於破壞性的永久性動作。
2. 定義尺寸比例
使用 fluid-spacing-system 將按鈕尺寸對應到佈局情境：
- 大（Hero/登陸頁）： 最高顯著度。高垂直內距。
- 中（預設）： 適用於表單、模態視窗和標題的標準尺寸。
- 小（緊湊）： 用於空間有限的側邊欄、卡片和資料表格。
3. 設計內部結構
標準化按鈕容器的結構：
- 內距： 保持一致的橫向與縱向比例（通常橫向 = 縱向的 1.5 倍到 2 倍）。
- 圖示整合： 定義圖示與文字之間的間距（例如：
--space-xs）。 - 圓角： 決定「圓潤度」（銳利、圓角或藥丸狀）以符合品牌的視覺調性。
4. 建立按鈕群組
當將多個動作放在一起時，遵循邏輯順序：
- 順序： 將主要動作放在「結論」位置（桌上型電腦靠右，垂直行動堆疊中靠上）。
- 間距： 在群組中的按鈕之間使用一致的間隙（例如：
--space-s）。 - 對齊： 在模態視窗/標題中靠右對齊動作；在表單中靠左對齊；在 Hero 區塊中置中對齊。
5. 定義響應式行為
確保動作在所有畫面上保持可用：
- 全寬（區塊）按鈕： 在行動裝置上，小按鈕通常會擴展為填滿容器寬度，以方便拇指觸及。
- 僅圖示的備用方案： 在極度緊湊的標題中，文字標籤可能被隱藏，改用圖示（確保存在
aria-label）。
決策規則
- 「一個主要」規則： 在任何單一檢視區塊/情境中，應該只顯示一個主要（第 1 級）按鈕，以避免「選擇麻痺」。
- 幽靈 vs. 連結： 當動作為功能性時（例如「關閉」、「取消」）使用幽靈按鈕；當動作為導航性時（例如「了解更多關於我們的政策」）使用文字連結。
- 圖示放置： 使用前導圖示（左側）來說明動作（例如搜尋圖示）；使用尾隨圖示（右側）來指示方向（例如用於「下一步」的箭頭）。
- 危險的對比度： 破壞性按鈕必須看起來與主要按鈕有顯著差異，以防止意外點擊。
限制條件
- 無障礙性： 文字必須符合 WCAG AA 對比度 (4.5:1)。互動元素必須有清晰的
focus狀態（參閱interactive-state-system）。 - 觸控目標： 所有按鈕必須有至少 24x24 像素的互動區域 (WCAG 2.2 SC 2.5.8)，即使視覺元素較小；對於主要動作和行動裝置版面，請使用 44x44 像素作為舒適預設值。
- 截斷： 按鈕文字不應截斷。如果標籤太長，請重新評估文案或允許按鈕換行/展開。
常見失敗模式
- 按鈕湯： 在一個頁面上使用 3-4 個主要按鈕，稀釋了主要 CTA 的重要性。
- 「灰色地帶」： 使按鈕看起來像是已停用的元素，因為它們缺乏足夠的對比度或顏色。
- 缺少互動： 未能定義
hover或active狀態，讓使用者不確定其點擊是否已被記錄。 - 小型目標： 設計僅文字的小型幽靈按鈕，在行動裝置螢幕上幾乎無法點擊。
- 混淆的對齊方式： 在同一個流程中混用不同的按鈕對齊方式，迫使使用者「尋找」下一個動作。
驗證標準
- 每個頁面/檢視區塊都有一個明確的主要動作。
- 按鈕變體（主要、次要、幽靈、危險）的一致性使用。
- 按鈕符合 WCAG 2.2 24x24 像素的最小觸控目標 (2.5.8)，主要及行動裝置動作使用 44x44 像素。
- 按鈕群組在一起時，視覺層級得以維持。
- 焦點狀態明顯且高對比度。
- 按鈕標籤簡潔並使用「動作動詞」（例如「儲存」、「建立」、「加入」）。
- 行動裝置檢視區塊在適當情況下使用全寬按鈕以利觸及。