按鈕

按鈕可協助使用者執行動作或流程。您可以選擇不同類型的按鈕來強調訊息。

資源

類型	連結	狀態
設計	設計來源 (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 元素中，例如對話方塊、強制回應視窗、表單、資訊卡和工具列。

按鈕只是用來表示 UI 動作的其中一種選項。切勿過度使用。螢幕上的按鈕過多，會幹擾視覺階層。

1. 容器
2. 圖示
3. 為文字加上標籤
4. 標題
5. 副標題
6. 映像檔

容器

按鈕會在內容周圍顯示容器。容器在對焦時縮放 1.1 倍，維持內部邊框間距。以下是容器的幾個注意事項：

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

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

圖示

圖示會以視覺化的方式傳達按鈕動作，有助於吸引使用者註意。應該放在按鈕的最前方。圖示一律會在容器內垂直置中。

為文字加上標籤

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

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

映像檔

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

按鈕群組

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

通知階層

每個畫面都應有一項主要動作，並以醒目的寬幅按鈕表示。使用者應更容易理解及理解按鈕。其他按鈕應較不顯眼，且不應幹擾使用者主要動作。

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

維持線性版面配置

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

有邏輯地使用變化版本

在資料欄版面配置中，應維持單一按鈕變化版本。在列版面配置中，您可以在按鈕群組中將不同的變化版本匯總在一起，但邏輯應該清楚。填滿和外框按鈕可以用於同一個群組，但請為動作使用清楚的階層。