การ์ดการแจ้งเตือนจะสื่อสารข้อมูลเล็กๆ น้อยๆ จากระบบหรือจากแอป
การออกแบบการ์ดเหล่านี้สำหรับ Android Automotive OS มีวัตถุประสงค์เพื่อลดสิ่งรบกวนผู้ขับขี่ การ์ดมีเวอร์ชันพื้นฐาน 3 เวอร์ชัน ได้แก่
- การ์ดการแจ้งเตือนล่วงหน้า (HUN): ใช้สำหรับการแจ้งเตือนที่ปรากฏเพียงชั่วครู่บนหน้าจอปัจจุบัน
- การ์ดศูนย์การแจ้งเตือน: ใช้สำหรับการแจ้งเตือนที่แสดงในศูนย์การแจ้งเตือน
- การ์ดการแจ้งเตือนแบบกลุ่ม: รวมการ์ดศูนย์การแจ้งเตือนหลายรายการไว้ในการ์ดเดียว
การออกแบบในเวอร์ชันเหล่านี้อาจแตกต่างกันเล็กน้อยตามหมวดหมู่ของข้อความ เช่น การแจ้งเตือนสายเรียกเข้าจะมีปุ่มและไอคอนต่างจากการแจ้งเตือนการนำทาง
กายวิภาคศาสตร์
การ์ดการแจ้งเตือนเป็นคอมโพเนนต์ที่ยืดหยุ่นซึ่งมีองค์ประกอบได้หลากหลาย โดยมี 3 เวอร์ชันหลักๆ ดังนี้
- การ์ด HUN: เวอร์ชันนี้กว้างกว่าการ์ดศูนย์การแจ้งเตือน และปรากฏที่ด้านบนของหน้าจอปัจจุบันจนกว่าจะปิด
- การ์ดศูนย์การแจ้งเตือน: เวอร์ชันนี้แคบกว่าการ์ด HUN และปรากฏพร้อมกับการ์ดอื่นๆ ในศูนย์การแจ้งเตือนในรายการแนวตั้ง
- การ์ดการแจ้งเตือนแบบกลุ่ม: การ์ดศูนย์การแจ้งเตือนเวอร์ชันนี้รวมการแจ้งเตือนที่เกี่ยวข้องหลายรายการไว้ในการ์ดเดียว พร้อมส่วนควบคุมสำหรับการขยายเพื่อแสดงการแจ้งเตือนแต่ละรายการ
รูปแบบของเวอร์ชันเหล่านี้ตามประเภทข้อความจะแสดงในรูปแบบ
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-hun-std.png?authuser=19&hl=th)
1. ส่วนหัว
2. เนื้อหา (มีและไม่มีตัวอย่างข้อความ (ไม่บังคับ) ซึ่งซ่อนได้เมื่อรถยนต์กำลังขับ)
3. การดำเนินการ
4. ไอคอนขนาดใหญ่
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-grouped.png?authuser=19&hl=th)
1. ส่วนหัว
2. เนื้อหา
3. การขยาย/ยุบ
4. สัญญาณบอกสถานะขยาย/ยุบ
ข้อกำหนด – การ์ด HUN
HUN แบบมาตรฐาน
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hun.png?authuser=19&hl=th)
HUN กับรูปโปรไฟล์
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hunwavatar.png?authuser=19&hl=th)
ส่งข้อความถึง HUN พร้อมตัวอย่าง
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview.png?authuser=19&hl=th)
ส่งข้อความถึง HUN หลายข้อความ
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview-multiple.png?authuser=19&hl=th)
HUN ภาพขนาดใหญ่
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-largeimg.png?authuser=19&hl=th)
ข้อกำหนด - การ์ดศูนย์การแจ้งเตือน
การแจ้งเตือนแบบมาตรฐาน
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-avatar.png?authuser=19&hl=th)
การแจ้งเตือนข้อความพร้อมตัวอย่าง
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview.png?authuser=19&hl=th)
การแจ้งเตือนเมื่อมีข้อความหลายรายการ
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview-multi.png?authuser=19&hl=th)
การแจ้งเตือนการกระทำเดียว
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-onebutton.png?authuser=19&hl=th)
ข้อกำหนด – การ์ดการแจ้งเตือนแบบกลุ่ม
การแจ้งเตือนแบบกลุ่ม – ยุบ
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-collapsed.png?authuser=19&hl=th)
การแจ้งเตือนแบบกลุ่ม – ขยาย
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-expanded.png?authuser=19&hl=th)
การปรับขนาดเลย์เอาต์
เลย์เอาต์ข้อมูลอ้างอิงเหล่านี้จะแสดงวิธีปรับการแจ้งเตือนให้เข้ากับหน้าจอที่มีความกว้างและความสูงที่หลากหลาย (หมวดหมู่ความกว้างและความสูงจะกำหนดอยู่ในส่วนการออกแบบ) โปรดทราบว่าค่าพิกเซลทั้งหมดจะเป็นพิกเซลที่แสดงผล ก่อนที่จะเกิดการสุ่มหรือสุ่มขึ้น
หน้าจอความกว้างมาตรฐาน
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-std.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-std.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-std.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-std.png?authuser=19&hl=th)
หน้าจอกว้าง
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-wide.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-wide.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-wide.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-wide.png?authuser=19&hl=th)
หน้าจอที่กว้างเป็นพิเศษและกว้างมาก
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-xwide.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-xwide.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-xwide.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-xwide.png?authuser=19&hl=th)
ระยะห่างในแนวตั้งของการแจ้งเตือนบนหน้าจอที่มีความสูงระดับต่างๆ
ข้อกำหนดด้านระยะห่างแนวตั้งในส่วนนี้มีไว้สำหรับการ์ด HUN เท่านั้น โปรดดูข้อมูลเกี่ยวกับระยะห่างในแนวตั้งของการ์ดในศูนย์การแจ้งเตือนที่หัวข้อข้อกำหนดของศูนย์การแจ้งเตือน
หน้าจอสั้น
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-short.png?authuser=19&hl=th)
หน้าจอสูงและความสูงมาตรฐาน
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-stdtall.png?authuser=19&hl=th)
รูปแบบ
การพิมพ์
รูปแบบของประเภท | ลักษณะแบบอักษร | น้ำหนัก | ขนาด (dp) |
---|---|---|---|
เนื้อความ 1 | Roboto | ปกติ | 32 |
เนื้อความ 3 M | Roboto | สื่อ | 24 |
เนื้อความ 3 | Roboto | ปกติ | 24 |
สี
องค์ประกอบ | สี(โหมดวัน) | สี (โหมดกลางคืน) |
---|---|---|
ประเภท / ไอคอนหลัก | สีขาว | สีขาว @ 88% |
ประเภทรอง | สีขาว @ 72% | สีขาว @ 60% |
ไอคอนรอง | สำเนียงของบุคคลที่สาม | สำเนียงของบุคคลที่สาม |
เส้นผมแบ่ง | ขาว 22% | สีขาว 12% |
พื้นหลังการ์ด | เทา 868 | เทา 900 |
ไล่ระดับสี Scrim | สีดำ 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=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-examples.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-day.png?authuser=19&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-night.png?authuser=19&hl=th)
การเคลื่อนไหว
การเคลื่อนไหวต่อไปนี้เป็นส่วนสำคัญของประสบการณ์การแจ้งเตือน
- การเคลื่อนไหวของ HUN
- การปัดเคลื่อนไหวเพื่อปิดการแจ้งเตือน
- การเคลื่อนไหวขยายและยุบการแจ้งเตือนที่จัดกลุ่มไว้
การมาถึงของ HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hud-auto-dismiss-new.gif?authuser=19&hl=th)
ปัดเพื่อปิด
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-appear-dismiss-new.gif?authuser=19&hl=th)
ขยายและยุบการแจ้งเตือนที่จัดกลุ่มไว้
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-expand-group-2.gif?authuser=19&hl=th)