مربع الحوار هو نافذة مشروطة تظهر أمام أي تطبيق لعرض معلومات المهمة التي تتطلب ردًا فوريًا من المستخدم.
يمكن أن يكون مربّع الحوار تنبيهًا يتطلّب تفاعل المستخدم. ويمكن أن يكون أيضًا مربع حوار تحديد أو تأكيد، والذي يتطلب من المستخدم تحديد خيار أو تأكيده. يحتفظ مربّع الحوار بالتركيز إلى أن يتم إغلاقه أو يتم اتّخاذ الإجراء المطلوب. يجب استخدامها باعتدال لأن مربعات الحوار تقاطع تجربة المشاهدة.
وتكون مربّعات الحوار مرتبطة بالنقاط المحمصة (كلاهما عضو في مجموعة مكونات Dialog)، ولكنهما تختلفان في الغرض والأولوية، كما هو موضَّح أدناه.
المكوّن | الغرض | الأولوية |
الخبز المحمّص | تعرض رسالة إعلامية. لا يتطلب تفاعل المستخدم. يختفي بعد 8 ثوانٍ. | منخفض |
Dialog | يعرض المعلومات وخيارات المهام التي تتطلب تفاعل المستخدم. يحتفظ مربّع الحوار بالتركيز حتى يستجيب المستخدم. | عالٍ |
علم التشريح
تحتوي مربّعات الحوار على نص إعلامي وعناصر تحكم في واجهة المستخدم تطلب ردًا من المستخدم.
![](https://developers.google.cn/cars/design/automotive-os/components/images/Dialog-Anatomy-new.png?authuser=8&hl=ar)
2- عنوان البطاقة
3- منطقة المحتوى
4- منطقة إجراء البطاقة
المواصفات
مربّع حوار بدون عنوان
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-3.png?authuser=8&hl=ar)
مربّع حوار يحمل عنوان
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-4.png?authuser=8&hl=ar)
مربّع حوار يتضمّن عنوانًا في الوسط
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-5.png?authuser=8&hl=ar)
مربع حوار قابل للتمرير
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-spec-6.png?authuser=8&hl=ar)
التخصيص
يمكن للمصنّعين الأصليين للأجهزة إظهار علامتهم التجارية عن طريق تخصيص الجوانب التالية لمربعات الحوار:
- الخطوط
- تصميم الأزرار النشطة وغير النشطة والمتوقفة
- أبعاد الأزرار ومواضعها
يوفر Design system (نظام التصميم) إرشادات لتخصيص المكونات باستخدام التخطيط واللون وأسلوب الخط والتحجيم.
أمثلة
![](https://developers.google.cn/cars/design/automotive-os/components/images/Dialog-Mock-1-new.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/Dialog-Mock-2-new.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-mock-3.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-mock-4.png?authuser=8&hl=ar)
![](https://developers.google.cn/cars/design/automotive-os/components/images/dialog-animation-1.gif?authuser=8&hl=ar)