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

原則
格式清晰:清單應以清楚、可快速瀏覽的直向排列方式呈現資訊。
項目呈現方式一致:清單項目應遵循一致的視覺結構。
焦點和導覽:在依賴方向鍵導覽的介面中,清單必須清楚指出焦點項目。
互動性:清單項目通常代表可選取或可執行的元素。
用量和刊登位置
清單可以包含各種同層級內容,以及可重複的元素。與堆疊不同,清單會填滿應用程式檢視區塊容器。

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

清單可視需要使用標題 清單可使用靜態或固定標題,為求明確。
錯誤做法
每個檢視畫面有多個清單,這會造成視覺和焦點上的負擔。

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

清單可具備動作功能
清單中的項目可以做為動作。但動作影響範圍應僅限於項目本身
醒目顯示輕觸時會啟動的控制項,即使你可以捲動其他項目也一樣。如果清單或資訊卡可捲動至其他元素後方,請只專注於回應輕觸的項目。
正確做法
只醒目顯示目前聚焦的元素,讓使用者探索可聚焦的控制項。
錯誤做法
醒目顯示多個可聚焦的 UI 元素,因為這樣會造成混淆,不知道輕觸輸入內容連結到哪個元素。
圖解
清單由捲動容器和間距一致的清單項目組成。 如果項目數量超過可視區域,清單應可垂直捲動,且溢出量應盡量減少。
A. 容器 - 可捲動區域
B. 清單項目
C. 系統資訊列
List
Item:清單中的每個個別元素。
A. 圖案
B. 框線
C. 前置圖示
D. 文字內容
E. 尾端指標
自訂
大部分的自訂作業都是透過清單項目完成。
| 屬性 | 自訂 | 預設值 |
|---|---|---|
| 清單項目:形狀 | 是 | 40 dp |
| 清單項目:前置和後置圖示 | 是 | 中等符號圖示 |
| 清單項目:邊框間距值 | 是 | 2d dp、20 dp |
| 清單項目:內容 | 是 | 單行:使用「內文小」的其中一個「文字」可組合項做為主要標籤 雙行:包含兩個「文字」可組合項的「資料欄」,分別做為主要和次要標籤 主要:「標題小」 次要:「內文小」 |
| 清單:verticalArrangement | 是 | 20 dp |