تنقل بطاقات الإشعارات كميات صغيرة من المعلومات في الوقت المناسب من النظام أو من التطبيق.
ويهدف تصميم هذه البطاقات لنظام التشغيل Android Automotive إلى تقليل تشتيت السائقين. تتوفر البطاقات في ثلاثة إصدارات أساسية:
- بطاقة إشعار التنبيه (HUN): تُستخدَم لإشعار يظهر لفترة قصيرة على الشاشة الحالية.
- بطاقة "مركز الإشعارات": تُستخدَم هذه البطاقة للإشعارات المدرجة في "مركز الإشعارات".
- بطاقة الإشعارات المجمّعة: تدمج بطاقات مركز الإشعارات متعددة في بطاقة واحدة.
ضمن هذه الإصدارات، يمكن أن تختلف التصميمات أيضًا قليلاً اعتمادًا على فئة الرسالة. على سبيل المثال، تحتوي إشعارات المكالمات على أزرار ورموز مختلفة عن إشعارات التنقُّل.
علم التشريح
بطاقة الإشعار هي مكوِّن مرن يمكن أن يتضمن مجموعة متنوعة من العناصر. له ثلاثة إصدارات رئيسية:
- بطاقة HUN: هذه النسخة أعرض من بطاقة "مركز الإشعارات" وتظهر في أعلى الشاشة الحالية إلى أن يتم إغلاقها.
- بطاقة مركز الإشعارات: هذه النسخة أضيق من بطاقة HUN وتظهر مع بطاقات أخرى مشابهة في "مركز الإشعارات" في قائمة عمودية.
- بطاقة الإشعارات المجمّعة: يجمع هذا الإصدار من بطاقة "مركز الإشعارات" بين الإشعارات المتعددة ذات الصلة في بطاقة واحدة، مع عناصر التحكّم لتوسيع نطاق عرض الإشعارات الفردية.
تظهر صِيغ هذه الإصدارات حسب نوع الرسالة في الأنماط.
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-hun-std.png?authuser=8&hl=ar)
1. العنوان
2- المحتوى (مع أو بدون معاينة اختيارية للرسالة، والتي يمكن إخفاءها أثناء قيادة السيارة)
3. الإجراءات
4- رمز كبير
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-grouped.png?authuser=8&hl=ar)
1. العنوان
2- المحتوى
3. إجراء التوسيع/التصغير
4. مؤشر التوسيع/التصغير
المواصفات – بطاقة HUN
HUN عادي
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hun.png?authuser=8&hl=ar)
لعبة HUN باستخدام الصورة الرمزية
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hunwavatar.png?authuser=8&hl=ar)
رسالة HUN مع المعاينة
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview.png?authuser=8&hl=ar)
إرسال رسالة HUN برسائل متعددة
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview-multiple.png?authuser=8&hl=ar)
صورة كبيرة HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-largeimg.png?authuser=8&hl=ar)
المواصفات - بطاقة مركز الإشعارات
إشعار عادي
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-avatar.png?authuser=8&hl=ar)
إشعار رسالة مع معاينة
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview.png?authuser=8&hl=ar)
إشعار بتلقّي رسائل متعددة
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview-multi.png?authuser=8&hl=ar)
إشعار بإجراء واحد
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-onebutton.png?authuser=8&hl=ar)
المواصفات – بطاقة الإشعار المجمّع
إشعار مجمّع – مصغّر
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-collapsed.png?authuser=8&hl=ar)
إشعار مجمّع – موسّع
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-expanded.png?authuser=8&hl=ar)
تغيير حجم التخطيطات
توضح هذه التخطيطات المرجعية كيفية تكييف الإشعارات لتلائم الشاشات ذات العرض والارتفاع المختلفة. (يتم تحديد فئات العرض والارتفاع في قسم التصميم). تجدر الإشارة إلى أنّ جميع قيم البكسل تكون في وحدات البكسل المعروضة، قبل حدوث أي انخفاض في أخذ العينات أو زيادة العيّنات.
شاشات بعرض عادي
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-std.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-std.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-std.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-std.png?authuser=8&hl=ar)
شاشات عريضة
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-wide.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-wide.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-wide.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-wide.png?authuser=8&hl=ar)
الشاشات العريضة جدًا والكبيرة جدًا
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-xwide.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-xwide.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-xwide.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-xwide.png?authuser=8&hl=ar)
تباعد رأسي للإشعارات على شاشات من ارتفاعات مختلفة
إنّ مواصفات التباعد الرأسي في هذا القسم مخصّصة لبطاقات HUN فقط. للحصول على معلومات حول التباعد الرأسي للبطاقات في "مركز الإشعارات"، يُرجى الاطّلاع على مواصفات "مركز الإشعارات".
الشاشات القصيرة
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-short.png?authuser=8&hl=ar)
الشاشات الطويلة والعادية الارتفاع
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-stdtall.png?authuser=8&hl=ar)
الأنماط
فن الطباعة
نمط النوع | الخط | الوزن | الحجم (dp) |
---|---|---|---|
Body 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=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-examples.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-day.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-night.png?authuser=8&hl=ar)
الحركة
تُعدّ الحركات التالية جزءًا مهمًا من تجربة الإشعار:
- حركة وصول HUN
- حركة التمرير السريع لإغلاق إشعار
- توسيع الإشعارات المُجمّعة وتصغيرها
وصول HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hud-auto-dismiss-new.gif?authuser=8&hl=ar)
التمرير سريعًا للإغلاق
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-appear-dismiss-new.gif?authuser=8&hl=ar)
توسيع الإشعار المجمّع وتصغيره
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-expand-group-2.gif?authuser=8&hl=ar)