標題方塊

標題資訊方塊會提供一小段資訊。

設計元素應錨定在影格底部。

原則

情境:標題晶片的主要用途是為相關聯的內容提供清楚且即時的情境。

簡潔:標題資訊方塊的設計目的是提供簡短資訊,通常是簡短的標題、名稱或狀態。

視覺上與眾不同:雖然採用 Jetpack Compose Glimmer 美學,但外觀應與眾不同,可辨識為標籤,而非互動式按鈕。

使用方式與刊登位置

根據預設,標題資訊方塊是唯讀元件。

使用靜態或裝飾性元素的標題晶片,向使用者和標籤提供資訊。
由於標題方塊沒有焦點狀態,因此請改用按鈕,將標題方塊做為可輕觸的操作提示。

設計元素應錨定在影格底部 標題資訊方塊可與靜態行動應用程式列相比較。

在版面配置中

根據預設,標題資訊方塊是唯讀元件。

方塊會隨著版面配置捲動
或者,也可以在版面配置中固定顯示方塊。方塊會佔據頂端 56 dp。

圖解

設計元素應錨定在影格底部

顯示預設標題方塊和固定標題方塊。系統會顯示帶有外框的固定標題資訊方塊。

1. 標題方塊標籤

2. 可選的開頭圖示或實體

自訂

標題晶片可顯示圖示,也可不顯示,並搭配其他樣式屬性。

屬性 自訂 預設值
形狀 大圓
邊框間距 16 dp、8 dp
框線 2 dp,#606460
文字 Body Small
前置圖示 40 dp
厚度 0
最大寬度 352 dp
高度下限 56 dp