清單

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

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

原則

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

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

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

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

用量和刊登位置

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

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

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

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

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

清單可視需要使用標題 清單可使用靜態或固定標題,為求明確。

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

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

使用深度表示焦點

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

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

清單可具備動作功能

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

醒目顯示輕觸時會啟動的控制項,即使你可以捲動其他項目也一樣。如果清單或資訊卡可捲動至其他元素後方,請只專注於回應輕觸的項目。

只醒目顯示目前聚焦的元素,讓使用者探索可聚焦的控制項。
醒目顯示多個可聚焦的 UI 元素,因為這樣會造成混淆,不知道輕觸輸入內容連結到哪個元素。

圖解

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

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

B. 清單項目

C. 系統資訊列

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

A. 圖案

B. 框線

C. 前置圖示

D. 文字內容

E. 尾端指標

自訂

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

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