按鈕

按鈕可協助使用者啟動動作或流程。提供多種按鈕類型，做為強調效果。

資源

類型	連結	狀態
設計	設計來源 (Figma)	可使用
導入作業	Jetpack Compose	可使用

重點特色

• 根據動作重要性選擇按鈕類型。 動作越重要，按鈕就越顯眼。
• 按鈕應加上清楚的標籤，指出按鈕執行的動作。
• 請按照合理方式將按鈕放在螢幕上，方便使用者找到這些按鈕。
• 請勿過度使用按鈕。螢幕上的按鈕過多，會破壞視覺階層。

變化版本

按鈕類型共有六種：

1. 實心按鈕
2. 外框按鈕
3. 圖示按鈕
4. 外框圖示按鈕
5. 長按鈕
6. 圖片按鈕

根據動作重要性選擇按鈕類型。 動作越重要，按鈕內容應越強調。

實心和外框按鈕

已填寫的按鈕最具視覺影響力，建議用於完成流程的重要最終動作，例如「儲存」、「立即加入」、「確認」或「下載」。

外框按鈕為中強調按鈕。這類動作包含重要的動作，但並非應用程式的主要動作。外框按鈕與實心按鈕搭配得當，可用來表示次要的替代動作。

圖解

1. 容器
2. 標籤文字
3. 圖示 (選用)

狀態

元件狀態的視覺呈現。

1. 預設
2. 專注
3. 已按下

規格

圖示和大綱圖示按鈕

使用圖示按鈕在精簡版面配置中顯示動作。圖示按鈕可以代表開啟動作 (例如開啟溢位選單或搜尋)，或代表可開啟或關閉的二元動作，例如加入/加入收藏或書籤。也可用來播放或暫停媒體。

圖示按鈕有三種大小定義：小、中、大。

圖解

1. 容器
2. 圖示

狀態

1. 預設
2. 專注
3. 已按下

狀態是用來傳達元件或互動元素狀態的視覺化表示法。

規格

寬版按鈕

寬按鈕用於較一般的按鈕，包含重要動作。代表相關選項的按鈕會分為一組。群組應共用一個通用的途徑。

圖解

1. 容器
2. 前置圖示
3. 標題
4. 副標題

狀態

1. 預設
2. 專注
3. 已按下

狀態是用來傳達元件或互動元素狀態的視覺化表示法。

規格

圖片按鈕

圖片按鈕通常用於顯示下一個導覽層級的內容縮圖。這些類別通常會連同相關動作一起分組，且群組應共用同一個途徑。

圖解

1. 容器
2. 前置圖示
3. 標題
4. 副標題
5. 圖片圖層，包括：
   1. 紗罩 (狀態重疊)
   2. 漸層 (根據表面顏色)
   3. 圖片

狀態

1. 預設
2. 專注
3. 已按下

狀態是用來傳達元件或互動元素狀態的視覺化表示法。

規格

使用方式

按鈕通常用於傳達使用者可採取的行動。 這些元件通常位於對話方塊、強制回應視窗、表單、資訊卡和工具列等 UI 元素中。

按鈕只是使用者介面中代表動作的其中一種選項。請勿過度使用。螢幕上的按鈕過多，會幹擾視覺階層。

1. 容器
2. 圖示
3. 標籤文字
4. 標題
5. 副標題
6. 圖片

容器

按鈕會在內容周圍顯示容器。容器在焦點上會縮放 1.1 倍並維持內部邊框間距。以下是關於容器的幾點注意事項：

• 根據邊框間距一致的內容設定容器寬度。
• 將容器的相對位置設為回應式版面配置格線。
• 填滿按鈕應使用純色容器。
• 針對有外框的按鈕，使用筆觸和填滿色彩。在焦點上，容器會有一個填滿顏色和外框。
• 針對寬度和圖片按鈕，容器寬度會根據版面配置格線進行設定。
• 容器大小、位置和對齊方式可能會隨著父項容器縮放而改變。

文字和圖示按鈕容器具有完全圓的角。寬版和圖片按鈕容器有 12dp 的圓角容器。

圖示

圖示會以視覺效果傳達按鈕動作，有助於吸引目光。應放在按鈕的最前端。容器中的圖示一律會垂直置中。

標籤文字

標籤文字是按鈕最重要的元素。用來說明使用者輕觸按鈕時執行的動作。

如果按鈕標籤文字採用句首大寫，第一個字詞和專有名詞應使用大寫。避免文字換行。為求一目瞭然，標籤文字應集中在同一行。

圖片

在背景中，圖片按鈕一律會在圖片上方顯示漸層重疊和紗罩。漸層重疊會根據容器顏色進行設定。紗罩會隨狀態而改變。

按鈕群組

按鈕會同時顯示在資料列或資料欄中，以便維持動作之間的一致性。以下各節說明注意事項。

通知階層

每個畫面都應有一個主要動作，且該動作通常以顯眼的寬按鈕代表。按鈕應該一目瞭然。其他按鈕應較不顯眼，也不應幹擾使用者的主要動作。

由於焦點首先到達這個按鈕，群組中的第一個按鈕會做為主要動作。

繼續使用線性版面配置

1. 資料列版面配置
2. 欄版面配置

按照邏輯使用變化版本

在欄版面配置中，應維持單一按鈕變化版本。在列版面配置中，可將不同的變化版本分群在一個按鈕群組中，但邏輯應清楚明瞭。實心按鈕和外框按鈕可在同一個群組中使用，但請確保動作階層清楚分層。