標題方塊

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

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

原則

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

簡潔:標題晶片是為了提供簡短資訊而設計,通常是簡短的標題、名稱或狀態。

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

用量與刊登位置

根據預設,標題晶片是唯讀元件。

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

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

A 標題方塊

B 行動應用程式中的應用程式列

在版面配置中

根據預設,標題晶片是唯讀元件。

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

圖解

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

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

1. 標題方塊標籤

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

自訂

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

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