按鈕

按鈕可協助使用者啟動動作或流程。選擇不同類型的按鈕，以便傳達強調效果。

資源

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

重點特色

• 請根據動作的重要性選擇按鈕類型。動作越重要，按鈕就越醒目。
• 按鈕應附有清楚的標籤，指出所執行的動作。
• 在螢幕上以邏輯方式放置按鈕，也就是使用者可能會預期找到按鈕的位置。
• 請勿過度使用按鈕。畫面上的按鈕過多會破壞視覺階層。

版本

按鈕分為六種類型：

1. 填滿型按鈕
2. 外框按鈕
3. 圖示按鈕
4. 外框圖示按鈕
5. 長按按鈕
6. 圖片按鈕

請根據動作的重要性選擇按鈕類型。動作的重要性越高，按鈕的強調程度就應越高。

填滿和外框按鈕

填滿的按鈕具有最強烈的視覺效果，應用於完成流程的重要最終動作，例如「儲存」、「立即加入」、「確認」或「下載」。

外框按鈕是指中強調按鈕。這些按鈕包含重要的動作，但不是應用程式中的主要動作。輪廓按鈕與填充按鈕搭配使用，可用於指出次要動作。

圖解

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

狀態

元件狀態的視覺呈現。

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

規格

圖示和輪廓圖示按鈕

使用圖示按鈕，在緊湊的版面配置中顯示動作。圖示按鈕可代表開啟動作，例如開啟溢出選單或搜尋，或代表可切換開啟/關閉的二元動作，例如收藏或書籤。也用於播放或暫停媒體。

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

圖解

1. 容器
2. Icon

狀態

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

狀態是用來傳達元件或互動元素狀態的視覺化呈現方式。

規格

寬按鈕

寬按鈕比一般按鈕更強調。其中包含重要的動作。代表相關選項的按鈕會分組顯示。群組應共用相同的介面。

圖解

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

狀態

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

狀態是用來傳達元件或互動元素狀態的視覺化呈現方式。

規格

圖片按鈕

圖片按鈕通常用於顯示下一層級導覽中可用的內容縮圖。通常會與相關動作一同分組，且群組應共用相同的介面。

圖解

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

狀態

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

狀態是用來傳達元件或互動元素狀態的視覺化呈現方式。

規格

用量

按鈕通常用於傳達使用者可採取的動作。這類元素經常出現在對話方塊、模式視窗、表單、資訊卡和工具列等 UI 元素中。

按鈕只是在 UI 中表示動作的一種方式。請勿過度使用。畫面上的按鈕過多會破壞視覺階層。

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

容器

按鈕會在內容周圍顯示容器。容器會在聚焦時縮放 1.1 倍，並保留內部邊框間距。以下是容器的幾點注意事項：

• 根據內容設定容器寬度，並維持一致的邊框間距。
• 將容器的相對位置設為回應式版面配置格狀。
• 請為填滿的按鈕使用單色容器。
• 請在聚焦時使用輪廓按鈕的筆觸和填充顏色。在聚焦時，容器會取得填滿顏色和外框。
• 對於寬和圖片按鈕，容器寬度會根據版面配置格線設定。
• 容器大小、位置和對齊方式會隨著父項容器的縮放而變更。

文字和圖示按鈕容器的圓角為完全圓角。寬型和圖片按鈕容器的圓角容器為 12dp。

Icon

圖示可視覺化呈現按鈕的動作，並吸引使用者注意。應放置在按鈕的前端。圖示一律會在容器內垂直置中。

標籤文字

標籤文字是按鈕最重要的元素。它會說明使用者輕觸按鈕時會發生的動作。

請使用句首大寫的格式輸入按鈕標籤文字，並將第一個字和專有名詞的首字母大寫。避免文字斷行。為確保最佳可讀性，標籤文字應保持在單一行。

圖片

圖片按鈕一律會在背景圖片上方顯示漸層疊加和遮罩。漸層疊加畫面會根據容器顏色設定。遮罩會根據狀態而變更。

按鈕群組

按鈕會在資料列或欄中一同顯示，以便在各項動作之間維持一致的導覽體驗。以下各節將說明相關注意事項。

告知階層

每個畫面都應有一個主要動作，並以醒目 (通常是寬廣) 的按鈕呈現。按鈕應更容易看見及理解。其他按鈕應較不顯眼，且不得分散使用者對主要動作的注意力。

群組中的第一個按鈕會做為主要動作，因為焦點會先落在該按鈕上。

維持線性版面配置

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

以邏輯方式使用變化版本

在欄式版面配置中，應保留單一按鈕變化版本。在資料列版面配置中，您可以在按鈕群組中將不同變化版本分組，但邏輯應明確。您可以在同一個群組中使用填滿和外框按鈕，但請確保動作的階層清楚。