清單檢視畫面會將內容顯示為單一欄清單,並可垂直捲動的單一欄清單。這種檢視畫面最適合讓使用者根據閱讀文字及檢視資料做出選擇。
清單項目的垂直空間比格線項目更小,讓螢幕能顯示更多項目。
圖解
在清單檢視中,每個資料列都包含代表一個清單項目的資訊方塊。主要動作可以填入資訊方塊,讓使用者可以從資訊方塊的任意位置採取行動。以圖示和文字表示的補充動作時,只有包含圖示和文字的區域可以執行操作。

2. 開啟切換器按鈕
3. 關閉切換器按鈕
4. 主要和次要文字
5. 內容圖塊
規格
單行清單項目

兩行清單項目

雙行清單項目已反轉

含有標題的多行清單項目

沒有標題的多行清單項目

包含文字溢位的清單項目

含有分割動作的清單項目

指標圖示在清單項目中的位置

縮放版面配置
這些參照版面配置說明如何配合各種寬度和高度的螢幕,調整清單項目。(如需定義寬度和高度類別,請參閱「版面配置」一節)。請注意,在執行任何降低取樣或提高取樣之前,所有像素值都是以算繪的像素為單位。
標準、寬螢幕和超寬螢幕

含內容圖塊的標準螢幕、寬螢幕和超寬螢幕

超寬螢幕

風格
字體排版
類型樣式 | 字體 | 重量 | 大小 (dp) |
---|---|---|---|
內文 1 | Roboto | 一般 | 32 |
內文 3 | Roboto | 一般 | 24 |
顏色
元素 | 顏色(日模式) | 顏色 (夜間模式) |
---|---|---|
主要類型 / 圖示 | White | 白色 @ 88% |
次要類型 / 圖示 | 白色 @ 72% | 白色 @ 60% |
分隔線 | 白色 @ 22% | 白色 @ 12% |
清單項目背景 | Black | Black |
尺寸
元素 | 大小 (dp) |
---|---|
清單項目高度 | 96 (短螢幕) / 116 (標準螢幕) / 128 (長螢幕) |
主要圖示 | 44 |
Tertiary 圖示 | 24 |
內容圖塊 | 清單項目高度減 1dp |
中型顯示圖片 | 76 |
分隔線粗細 | 1 |
範例





