按鈕群組

按鈕群組提供可導覽的按鈕容器。

設計元素應錨定在畫面底部。

原則

以動作為導向:包含可執行的按鈕,而非標籤群組。

包含:將動作與動作和焦點分組。

彈性:可包含多種按鈕類型。

用量和刊登位置

使用按鈕群組顯示多個按鈕。呈現多個按鈕時,請使用按鈕群組元件,而不是個別配置每個按鈕。

按鈕群組

按鈕群組可包含任何按鈕類型組合,但按鈕高度必須相同。

按鈕群組中的按鈕高度應保持一致。
將不同高度的按鈕分組。

按鈕群組可與其他元素 (例如資訊卡或堆疊) 配對,做為相關動作。

每個版面配置只能有一個按鈕群組。
堆疊多個按鈕群組。

按鈕群組版面配置可包含或溢出 1 到 10 個按鈕。

按鈕群組

A. 已包含:按鈕群組符合容器寬度,不會有任何元素遭到截斷。

B. 溢位:按鈕群組的寬度大於容器中的可用空間。

按鈕數量請少於 10 個,且只保留必要按鈕,盡量減少滑動次數。
將按鈕群組擴充至超過 10 個按鈕。

專注

初始焦點預設為最左側的按鈕,但可以設定為對稱按鈕群組的中心。

設定焦點,醒目顯示最常存取或重要性較高的功能。
如果所有項目在用途重要性方面都相似,請覆寫預設的初始焦點。

置中版面配置

以初始焦點元素為準,置中對齊按鈕群組,每次滑動時,焦點會移至下一個按鈕。請避免使用溢位版面配置,因為所有按鈕都應顯示在置中的版面配置中。

靠左對齊的版面配置

靠左對齊的按鈕群組版面配置包含從邊緣開始和結束的 44dp 邊界。按鈕會在滑動時平穩地捲動到中央,並在滑動時加速。

圖解

靠左對齊的版面配置

按鈕群組是容器元件,可將 1 到 10 個任何類型的按鈕分組,並保持高度一致。如要進一步瞭解按鈕,請參閱按鈕指南。

自訂

按鈕群組集可包含相同按鈕高度的任何按鈕類型組合。

屬性 自訂 預設值
初期重點 0