按鈕可協助使用者啟動動作或流程。提供多種按鈕類型，做為強調效果。
資源
| 類型 | 連結 | 狀態 |
|---|---|---|
| 設計 | 設計來源 (Figma) | 可使用 |
| 導入作業 | Jetpack Compose | 可使用 |
重點特色
- 根據動作重要性選擇按鈕類型。 動作越重要，按鈕就越顯眼。
- 按鈕應加上清楚的標籤，指出按鈕執行的動作。
- 請按照合理方式將按鈕放在螢幕上，方便使用者找到這些按鈕。
- 請勿過度使用按鈕。螢幕上的按鈕過多，會破壞視覺階層。
變化版本
按鈕類型共有六種：
- 實心按鈕
- 外框按鈕
- 圖示按鈕
- 外框圖示按鈕
- 長按鈕
- 圖片按鈕
根據動作重要性選擇按鈕類型。 動作越重要，按鈕內容應越強調。
實心和外框按鈕
已填寫的按鈕最具視覺影響力，建議用於完成流程的重要最終動作，例如「儲存」、「立即加入」、「確認」或「下載」。
外框按鈕為中強調按鈕。這類動作包含重要的動作，但並非應用程式的主要動作。外框按鈕與實心按鈕搭配得當，可用來表示次要的替代動作。
圖解
- 容器
- 標籤文字
- 圖示 (選用)
狀態
元件狀態的視覺呈現。
- 預設
- 專注
- 已按下
規格
圖示和大綱圖示按鈕
使用圖示按鈕在精簡版面配置中顯示動作。圖示按鈕可以代表開啟動作 (例如開啟溢位選單或搜尋)，或代表可開啟或關閉的二元動作，例如加入/加入收藏或書籤。也可用來播放或暫停媒體。
圖示按鈕有三種大小定義：小、中、大。
圖解
- 容器
- 圖示
狀態
- 預設
- 專注
- 已按下
狀態是用來傳達元件或互動元素狀態的視覺化表示法。
規格
寬版按鈕
寬按鈕用於較一般的按鈕，包含重要動作。代表相關選項的按鈕會分為一組。群組應共用一個通用的途徑。
圖解
- 容器
- 前置圖示
- 標題
- 副標題
狀態
- 預設
- 專注
- 已按下
狀態是用來傳達元件或互動元素狀態的視覺化表示法。
規格
圖片按鈕
圖片按鈕通常用於顯示下一個導覽層級的內容縮圖。這些類別通常會連同相關動作一起分組，且群組應共用同一個途徑。
圖解
- 容器
- 前置圖示
- 標題
- 副標題
- 圖片圖層，包括：
- 紗罩 (狀態重疊)
- 漸層 (根據表面顏色)
- 圖片
狀態
- 預設
- 專注
- 已按下
狀態是用來傳達元件或互動元素狀態的視覺化表示法。
規格
使用方式
按鈕通常用於傳達使用者可採取的行動。 這些元件通常位於對話方塊、強制回應視窗、表單、資訊卡和工具列等 UI 元素中。
按鈕只是使用者介面中代表動作的其中一種選項。請勿過度使用。螢幕上的按鈕過多，會幹擾視覺階層。
- 容器
- 圖示
- 標籤文字
- 標題
- 副標題
- 圖片
容器
按鈕會在內容周圍顯示容器。容器在焦點上會縮放 1.1 倍並維持內部邊框間距。以下是關於容器的幾點注意事項：
- 根據邊框間距一致的內容設定容器寬度。
- 將容器的相對位置設為回應式版面配置格線。
- 填滿按鈕應使用純色容器。
- 針對有外框的按鈕，使用筆觸和填滿色彩。在焦點上，容器會有一個填滿顏色和外框。
- 針對寬度和圖片按鈕，容器寬度會根據版面配置格線進行設定。
- 容器大小、位置和對齊方式可能會隨著父項容器縮放而改變。
文字和圖示按鈕容器具有完全圓的角。寬版和圖片按鈕容器有 12dp 的圓角容器。
正確做法
注意
圖示
圖示會以視覺效果傳達按鈕動作，有助於吸引目光。應放在按鈕的最前端。容器中的圖示一律會垂直置中。
正確做法
錯誤做法
注意
標籤文字
標籤文字是按鈕最重要的元素。用來說明使用者輕觸按鈕時執行的動作。
如果按鈕標籤文字採用句首大寫，第一個字詞和專有名詞應使用大寫。避免文字換行。為求一目瞭然，標籤文字應集中在同一行。
正確做法
注意
圖片
在背景中，圖片按鈕一律會在圖片上方顯示漸層重疊和紗罩。漸層重疊會根據容器顏色進行設定。紗罩會隨狀態而改變。
按鈕群組
按鈕會同時顯示在資料列或資料欄中，以便維持動作之間的一致性。以下各節說明注意事項。
通知階層
每個畫面都應有一個主要動作，且該動作通常以顯眼的寬按鈕代表。按鈕應該一目瞭然。其他按鈕應較不顯眼，也不應幹擾使用者的主要動作。
由於焦點首先到達這個按鈕，群組中的第一個按鈕會做為主要動作。
繼續使用線性版面配置
- 資料列版面配置
- 欄版面配置
按照邏輯使用變化版本
在欄版面配置中，應維持單一按鈕變化版本。在列版面配置中，可將不同的變化版本分群在一個按鈕群組中，但邏輯應清楚明瞭。實心按鈕和外框按鈕可在同一個群組中使用，但請確保動作階層清楚分層。
正確做法
錯誤做法
注意
