清單

清單是元素的容器,內建捲動和焦點功能。

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

原則

格式清晰:清單應以清楚、可快速瀏覽的直向排列方式呈現資訊。

項目呈現方式一致:清單項目應遵循一致的視覺結構。

焦點和導覽:在依賴方向鍵導覽的介面中,清單必須清楚指出焦點項目。

互動性:清單項目通常代表可選取或可執行的元素。

使用方式與刊登位置

清單可以包含各種同層級內容,以及可重複的元素。與堆疊不同,清單會填滿應用程式檢視區塊容器。

設計元素應錨定在畫面底部。
清單可在檢視畫面中顯示一或多個可選取的項目。

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

使用半透明遮罩表示溢出的內容

如果清單中的項目超過檢視區塊可容納的數量,清單邊界附近就會顯示黑色半透明遮罩。

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

清單可視需要使用標題

清單中可使用靜態或固定標題,讓內容更清楚。

每個檢視畫面有多個清單,這會造成視覺和焦點上的負擔。

設計元素應錨定在畫面底部。 使用深度表示焦點

清單項目在未聚焦和聚焦狀態下,會在 0 到 +4 深度之間移動。

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

清單可具備動作功能

清單中的項目可以做為動作。但動作影響範圍應僅限於項目本身

圖解

清單由捲動容器和間距一致的清單項目組成。 當項目數量超過可視區域時,清單應可垂直捲動,且溢出量應盡可能減少。

設計元素應錨定在畫面底部。 A. 容器 - 可捲動區域

B. 清單項目

C. 系統資訊列

設計元素應錨定在畫面底部。 List Item:清單中的每個個別元素。

A. 形狀

B. 邊框

C. 前置圖示

D. 文字內容

E. 尾端指標

自訂

大部分的自訂作業都是透過清單項目完成。

屬性 自訂 預設值
清單項目:形狀 40 dp
清單項目:前置和後置圖示 中等符號圖示
清單項目:邊框間距值 2d dp、20 dp
清單項目:內容 單行:使用「內文小」的其中一個「文字」可組合項做為主要標籤 雙行:包含兩個「文字」可組合項的「資料欄」,分別做為主要和次要標籤 主要:「標題小」 次要:「內文小」
清單:verticalArrangement 20 dp