תצוגת רשימה מציגה תוכן כפריטים ברשימה שיש בה עמודה יחידה. הרשימה נגללת אנכית. התצוגה הזו מתאימה במיוחד למשתמשים שמסתמכים על קריאת טקסט והצגת נתונים כדי לבחור.
לפריטי רשימה נדרש פחות שטח אנכי מאשר פריטים ברשת, ולכן ניתן להציג יותר פריטים במסך.
אנטומיה
בתצוגת רשימה, כל שורה מכילה אריח שמייצג פריט אחד ברשימה. פעולות ראשיות יכולות למלא את המשבצת, כך שמשתמשים יוכלו לבצע פעולה מכל מקום במשבצת. לפעולות משלימות שמיוצגות על ידי סמלים וטקסט, רק האזור שמכיל את הסמלים והטקסט מתאפשר.
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-anatomy-1.png?authuser=5&hl=he)
2. לחצן החלפת המצב מופעל
3. לחצן החלפת המצב מושבת
4. טקסט ראשי וטקסט משני
5. משבצת תוכן
מפרטים
פריט ברשימה עם שורה אחת
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-1.png?authuser=5&hl=he)
פריט עם שתי שורות ברשימה
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-3.png?authuser=5&hl=he)
התבצע היפוך של פריט ברשימה עם שתי שורות
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-4.png?authuser=5&hl=he)
פריט ברשימה עם מספר שורות עם כותרת
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-5.png?authuser=5&hl=he)
פריט עם כמה שורות ללא כותרת
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-6.png?authuser=5&hl=he)
פריט ברשימה עם גלישת טקסט
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-2.png?authuser=5&hl=he)
פריט עם פעולות פיצול ברשימה
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-7.png?authuser=5&hl=he)
מיקום של סמל החיווי בפריטים ברשימה
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-8.png?authuser=5&hl=he)
התאמת פריסות
פריסות העזר האלה מראות איך להתאים פריטים ברשימה למסכים במידות רוחב וגובה שונות. (קטגוריות רוחב וגובה מוגדרות בקטע פריסה). לתשומת ליבך, כל ערכי הפיקסלים מופיעים בפיקסלים מעובדים, לפני שמבצעים דגימת הקטנה או דגימה למעלה.
מסכים רגילים, מסכים רחבים ורחבים במיוחד
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-1.png?authuser=5&hl=he)
מסכים רגילים, רחבים ורחבים במיוחד עם משבצת תוכן
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-3.png?authuser=5&hl=he)
מסכים רחבים במיוחד
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-2.png?authuser=5&hl=he)
סגנונות
טיפוגרפיה
סגנון סוג | גופן | משקל | גודל (dp) |
---|---|---|---|
גוף 1 | Roboto | רגיל | 32 |
גוף 3 | Roboto | רגיל | 24 |
צבע
רכיב | צבע(מצב יום) | צבע (מצב לילה) |
---|---|---|
סוג / סמלים ראשיים | לבן | לבן @ 88% |
סוג / סמלים משניים | לבן @ 72% | לבן @ 60% |
קו מפריד | לבן @ 22% | לבן @ 12% |
רקע של פריט ברשימה | שחור | שחור |
התאמת גודל
רכיב | גודל (dp) |
---|---|
גובה פריט הרשימה | 96 (מסכים קצרים) / 116 (מסך רגיל) / 128 (מסך גבוה) |
הסמל הראשי | 44 |
סמל שלישוני | 24 |
משבצת תוכן | גובה פריט ברשימה פחות 1dp |
דמות בינונית | 76 |
עובי קו מפריד | 1 |
דוגמאות
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-1.png?authuser=5&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-2.png?authuser=5&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-3.png?authuser=5&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-4.png?authuser=5&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-5.png?authuser=5&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-6.png?authuser=5&hl=he)