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