כרטיסי התראות מעבירים כמויות קטנות של מידע עדכני מהמערכת או מהאפליקציה.
העיצוב של הכרטיסים האלה עבור Android Automotive OS נועד לצמצם את הסחות הדעת לנהגים. לכרטיסים יש שלוש גרסאות בסיסיות:
- כרטיס של התראה עם אזהרה (HUN): משמש להודעה שמופיעה לזמן קצר במסך הנוכחי
- כרטיס של מרכז ההתראות: משמש להתראות שמפורטות במרכז ההתראות
- כרטיס התראות מקובצת: שילוב של כמה כרטיסים במרכז ההתראות בכרטיס אחד
בנוסף, בגרסאות האלה העיצובים עשויים להשתנות מעט בהתאם לקטגוריה של ההודעה. לדוגמה, להתראות על שיחות יש לחצנים וסמלים שונים מאלה של התראות ניווט.
אנטומיה
כרטיס ההתראות הוא רכיב גמיש שיכול לכלול מגוון רכיבים. יש לה שלוש גרסאות עיקריות:
- כרטיס HUN: הגרסה הזו רחבה יותר מהכרטיס של מרכז ההודעות, והיא מופיעה בחלק העליון של המסך הנוכחי עד שתסגור
- כרטיס של מרכז ההתראות: הגרסה הזו צרה יותר מכרטיס HUN, והיא מופיעה עם כרטיסים אחרים כאלה במרכז ההתראות, ברשימה אנכית
- כרטיס התראות מקובצות: הגרסה הזו של הכרטיס במרכז ההתראות משלבת מספר התראות קשורות בכרטיס אחד, עם פקדים להרחבה להצגת התראות בודדות.
וריאנטים של הגרסאות האלה לפי סוג ההודעה מוצגים בקטע סגנונות.
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-hun-std.png?authuser=9&hl=he)
1. כותרת
2. תוכן (עם או בלי תצוגה מקדימה אופציונלית של ההודעה, שאפשר להסתיר כשהרכב נוהג)
3. פעולות
4. סמל גדול
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-grouped.png?authuser=9&hl=he)
1. כותרת
2. תוכן
3. פעולת הרחבה/כיווץ
4. מדד הרחבה/כיווץ
מפרטים – כרטיס HUN
HUN רגיל
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hun.png?authuser=9&hl=he)
HUN עם דמות
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hunwavatar.png?authuser=9&hl=he)
שליחת הודעה ב-HUN עם תצוגה מקדימה
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview.png?authuser=9&hl=he)
שליחת הודעה ב-HUN עם כמה הודעות
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview-multiple.png?authuser=9&hl=he)
HUN לתמונה גדולה
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-largeimg.png?authuser=9&hl=he)
מפרטים – כרטיס של מרכז ההתראות
התראה רגילה
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-avatar.png?authuser=9&hl=he)
התראה על הודעות עם תצוגה מקדימה
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview.png?authuser=9&hl=he)
התראה על מספר הודעות
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview-multi.png?authuser=9&hl=he)
התראה על פעולה יחידה
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-onebutton.png?authuser=9&hl=he)
מפרט – כרטיס התראות מקובצות
הודעה מקובצת – מכווצת
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-collapsed.png?authuser=9&hl=he)
הודעה מקובצת – מורחבת
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-expanded.png?authuser=9&hl=he)
התאמת פריסות
פריסות העזר האלה מראות איך להתאים את ההתראות למסכים במידות רוחב וגובה שונות. (קטגוריות רוחב וגובה מוגדרות בקטע פריסה). לתשומת ליבך, כל ערכי הפיקסלים מופיעים בפיקסלים מעובדים, לפני שמבצעים דגימת הקטנה או דגימה למעלה.
מסכים ברוחב רגיל
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-std.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-std.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-std.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-std.png?authuser=9&hl=he)
מסכים רחבים
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-wide.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-wide.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-wide.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-wide.png?authuser=9&hl=he)
מסכים רחבים במיוחד וסופר רחב
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-xwide.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-xwide.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-xwide.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-xwide.png?authuser=9&hl=he)
ריווח אנכי של התראות במסכים בגבהים שונים
המפרטים לריווח אנכי בקטע הזה מיועדים לכרטיסי HUN בלבד. למידע על ריווח אנכי של כרטיסים במרכז ההתראות, עיין במפרטים של מרכז ההתראות.
מסכים קצרים
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-short.png?authuser=9&hl=he)
מסכים גבוהים ובגובה רגיל
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-stdtall.png?authuser=9&hl=he)
סגנונות
טיפוגרפיה
סגנון סוג | גופן | משקל | גודל (dp) |
---|---|---|---|
גוף 1 | Roboto | רגיל | 32 |
גוף 3 מיליון | Roboto | אמצעי הגעה לאתר | 24 |
גוף 3 | Roboto | רגיל | 24 |
צבע
רכיב | צבע(מצב יום) | צבע (מצב לילה) |
---|---|---|
סוג / סמלים ראשיים | לבן | לבן @ 88% |
סוג משני | לבן @ 72% | לבן @ 60% |
סמל משני | מבטאים של צד שלישי | מבטאים של צד שלישי |
קו מפריד | לבן 22% | לבן 12% |
רקע הכרטיס | אפור 868 | אפור 900 |
מברשת הדרגתית | שחור 100% - 0% | שחור 100% - 20% |
התאמת גודל
רכיב | גודל (dp) |
---|---|
הסמל הראשי | 44 |
סמל משני | 36 |
דמות בינונית | 76 |
רדיוס פינה מעוגלת (R2) | 8 |
דוגמאות
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-examples.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-examples.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-day.png?authuser=9&hl=he)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-night.png?authuser=9&hl=he)
תנועה
התנועות הבאות הן חלק חשוב מחוויית ההתראות:
- תנועת ההגעה ב-HUN
- תנועת החלקה לסגירת התראה
- תנועות של הרחבה וכיווץ של ההתראה המקובצת
הגעה ב-HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hud-auto-dismiss-new.gif?authuser=9&hl=he)
החלקה לסגירה
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-appear-dismiss-new.gif?authuser=9&hl=he)
הרחבה וכיווץ של ההתראה המקובצת
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-expand-group-2.gif?authuser=9&hl=he)