清單檢視畫面會將內容顯示為單一欄清單,並可垂直捲動的單一欄清單。這種檢視畫面最適合讓使用者根據閱讀文字及檢視資料做出選擇。
清單項目的垂直空間比格線項目更小,讓螢幕能顯示更多項目。
圖解
在清單檢視中,每個資料列都包含代表一個清單項目的資訊方塊。主要動作可以填入資訊方塊,讓使用者可以從資訊方塊的任意位置採取行動。以圖示和文字表示的補充動作時,只有包含圖示和文字的區域可以執行操作。
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-anatomy-1.png?authuser=7&hl=zh-tw)
2. 開啟切換器按鈕
3. 關閉切換器按鈕
4. 主要和次要文字
5. 內容圖塊
規格
單行清單項目
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-1.png?authuser=7&hl=zh-tw)
兩行清單項目
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-3.png?authuser=7&hl=zh-tw)
雙行清單項目已反轉
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-4.png?authuser=7&hl=zh-tw)
含有標題的多行清單項目
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-5.png?authuser=7&hl=zh-tw)
沒有標題的多行清單項目
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-6.png?authuser=7&hl=zh-tw)
包含文字溢位的清單項目
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-2.png?authuser=7&hl=zh-tw)
含有分割動作的清單項目
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-7.png?authuser=7&hl=zh-tw)
指標圖示在清單項目中的位置
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-8.png?authuser=7&hl=zh-tw)
縮放版面配置
這些參照版面配置說明如何配合各種寬度和高度的螢幕,調整清單項目。(如需定義寬度和高度類別,請參閱「版面配置」一節)。請注意,在執行任何降低取樣或提高取樣之前,所有像素值都是以算繪的像素為單位。
標準、寬螢幕和超寬螢幕
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-1.png?authuser=7&hl=zh-tw)
含內容圖塊的標準螢幕、寬螢幕和超寬螢幕
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-3.png?authuser=7&hl=zh-tw)
超寬螢幕
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-2.png?authuser=7&hl=zh-tw)
風格
字體排版
類型樣式 | 字體 | 重量 | 大小 (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 |
範例
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-1.png?authuser=7&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-2.png?authuser=7&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-3.png?authuser=7&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-4.png?authuser=7&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-5.png?authuser=7&hl=zh-tw)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-6.png?authuser=7&hl=zh-tw)