按鈕

按鈕可協助使用者啟動動作或流程。您可以選擇各種不同的按鈕類型來強調效果。

資源

類型	連結	狀態
設計	設計來源 (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. Scrim (狀態重疊)
   2. 漸層 (根據表面顏色)
   3. 圖片

狀態

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

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

規格

使用方法

按鈕通常用於傳達使用者可執行的動作。 它們經常出現在對話方塊、互動視窗、表單、卡片和工具列等 UI 元素中。

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

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

容器

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

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

文字和圖示按鈕容器採全圓角設計。寬版和圖片按鈕容器的圓角容器為 12dp。

圖示

圖示能以視覺化的方式傳達按鈕動作，有助於吸引註意力。應置於按鈕的側邊。圖示一律會在容器內垂直置中。

標籤文字

標籤文字是按鈕最重要的元素。其說明輕觸按鈕時所執行的動作。

為按鈕標籤文字採用句首大寫的格式，第一個字詞和專有名詞的字母大寫。避免換行。為求清晰易讀，標籤文字應保留一行。

圖片

圖片按鈕在背景的圖片上一律有漸層重疊和剪裁。漸層疊加層是根據容器顏色設定。紗罩會隨狀態變化。

按鈕群組

按鈕會一起顯示在同一列或欄中，在動作之間保持一致的瀏覽方式。以下各節將說明注意事項。

說明階層

每個畫面都應有一個主要動作，並以一個顯眼 (通常是寬) 的按鈕表示。這個按鈕應該要能讓內容一目瞭然。 其他按鈕應該較不顯眼，而且不應對使用者造成主要動作的干擾。

群組中的第一個按鈕是主要動作，因為焦點會先到達該按鈕。

維持線性版面配置

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

有邏輯使用變化版本

在欄版面配置中，應維持單一按鈕變化版本。在資料列版面配置中，不同的變化版本可以聚集在按鈕群組中，但邏輯應清楚明瞭。填滿和外框按鈕可以用於同一個群組，但請確保動作階層清晰明確。