按鈕可協助使用者執行動作或流程。您可以選擇不同類型的按鈕來強調訊息。
資源
類型 | 連結 | 狀態 |
---|---|---|
設計 | 設計來源 (Figma) | 可用 |
導入作業 | Jetpack Compose | 可用 |
重點特色
- 根據動作的重要性選擇按鈕類型。 動作越重要,按鈕的注意力越強調。
- 按鈕應使用清楚的標籤,表明按鈕執行的動作。
- 請自然地將按鈕放在畫面上,讓使用者能預期看到按鈕的地方。
- 請勿濫用按鈕。螢幕上的按鈕過多,會幹擾視覺階層。
變化版本
按鈕類型共有六種:
- 填滿按鈕
- 外框按鈕
- 圖示按鈕
- 外框圖示按鈕
- 長按鈕
- 圖片按鈕






根據動作的重要性選擇按鈕類型。 動作越重要,按鈕應該就越強調。
填滿和外框按鈕
填滿按鈕的視覺影響最大,建議用於完成流程的重要最終動作,例如「儲存」、「立即加入」、「確認」或「下載」。
外框按鈕是中強調的按鈕。這類按鈕包含重要動作,但並非應用程式的主要動作。外框按鈕和已填滿的按鈕適合用來表示替代的次要動作。
圖解
- 容器
- 為文字加上標籤
- 圖示 (選用)
狀態
元件狀態的視覺表示。
- 預設
- 專注
- 按下
規格
圖示和外框圖示按鈕
使用圖示按鈕在精簡版面配置中顯示動作。圖示按鈕可用來代表開啟動作 (例如開啟溢位選單或搜尋),或代表可開啟或關閉的二進位檔動作,例如收藏或書籤。也能用來播放或暫停媒體。
圖示按鈕分為三種大小:小、中、大。
圖解
- 容器
- 圖示
狀態
- 預設
- 專注
- 按下
狀態是視覺表示法,用於傳達元件或互動式元素的狀態。
規格
寬按鈕
寬按鈕的用途是比一般按鈕更能突顯效果。其中包含重要的動作。代表相關選項的按鈕會歸為一組。群組應共用一個共通的介面。
圖解
- 容器
- 待開發客戶圖示
- 標題
- 副標題
狀態
- 預設
- 專注
- 按下
狀態是視覺表示法,用於傳達元件或互動式元素的狀態。
規格
圖片按鈕
圖片按鈕通常用於顯示下一個導覽層提供的內容縮圖。這些類別通常會與相關動作分組,而群組應共用相同的途徑。
圖解
- 容器
- 待開發客戶圖示
- 標題
- 副標題
- 圖片圖層,由以下項目組成:
- Scrim (狀態重疊)
- 漸層 (根據表面顏色)
- 映像檔
狀態
- 預設
- 專注
- 按下
狀態是視覺表示法,用於傳達元件或互動式元素的狀態。
規格
適用情境
按鈕通常用於表示使用者可執行的操作。這類按鈕經常出現在 UI 元素中,例如對話方塊、強制回應視窗、表單、資訊卡和工具列。
按鈕只是用來表示 UI 動作的其中一種選項。切勿過度使用。螢幕上的按鈕過多,會幹擾視覺階層。
- 容器
- 圖示
- 為文字加上標籤
- 標題
- 副標題
- 映像檔
容器
按鈕會在內容周圍顯示容器。容器在對焦時縮放 1.1 倍,維持內部邊框間距。以下是容器的幾個注意事項:
- 使用一致的邊框間距設定容器寬度。
- 將容器的相對位置設為回應式版面配置格線。
- 請為填滿的按鈕使用純色容器。
- 為有外框的按鈕使用筆觸和填滿色彩。聚焦時,容器會獲得填滿顏色和外框。
- 針對寬和圖片按鈕,系統會根據版面配置格線設定容器寬度。
- 容器大小、位置和對齊方式可能會隨父項容器縮放而改變。
文字和圖示按鈕容器具有完全圓角。寬圖片按鈕容器具有 12dp 的圓角容器。

正確做法

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

正確做法

錯誤做法

注意
為文字加上標籤
標籤文字是按鈕最重要的元素。說明使用者輕觸按鈕時會執行的動作。
按鈕標籤文字應採用句首大寫的格式,第一個字詞和專有名詞大寫。避免設定文字換行。為求清晰易讀,標籤文字應單獨在同一行。

正確做法

注意
映像檔
圖片按鈕一律會在背景中顯示圖片的漸層重疊和紗罩。漸層疊加層是根據容器顏色設定。 紗罩會隨狀態而改變。
按鈕群組
按鈕會顯示在列或欄中,以維持不同動作的一致的瀏覽方式。以下各節說明注意事項。
通知階層
每個畫面都應有一項主要動作,並以醒目的寬幅按鈕表示。使用者應更容易理解及理解按鈕。其他按鈕應較不顯眼,且不應幹擾使用者主要動作。
群組中的第一個按鈕是主要動作,因為焦點會先到達該按鈕。
維持線性版面配置


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

正確做法

錯誤做法

注意
