การ์ดการแจ้งเตือนจะสื่อสารข้อมูลเล็กๆ น้อยๆ จากระบบหรือจากแอป
การออกแบบการ์ดเหล่านี้สำหรับ Android Automotive OS มีวัตถุประสงค์เพื่อลดสิ่งรบกวนผู้ขับขี่ การ์ดมีเวอร์ชันพื้นฐาน 3 เวอร์ชัน ได้แก่
- การ์ดการแจ้งเตือนล่วงหน้า (HUN): ใช้สำหรับการแจ้งเตือนที่ปรากฏเพียงชั่วครู่บนหน้าจอปัจจุบัน
- การ์ดศูนย์การแจ้งเตือน: ใช้สำหรับการแจ้งเตือนที่แสดงในศูนย์การแจ้งเตือน
- การ์ดการแจ้งเตือนแบบกลุ่ม: รวมการ์ดศูนย์การแจ้งเตือนหลายรายการไว้ในการ์ดเดียว
การออกแบบในเวอร์ชันเหล่านี้อาจแตกต่างกันเล็กน้อยตามหมวดหมู่ของข้อความ เช่น การแจ้งเตือนสายเรียกเข้าจะมีปุ่มและไอคอนต่างจากการแจ้งเตือนการนำทาง
กายวิภาคศาสตร์
การ์ดการแจ้งเตือนเป็นคอมโพเนนต์ที่ยืดหยุ่นซึ่งมีองค์ประกอบได้หลากหลาย โดยมี 3 เวอร์ชันหลักๆ ดังนี้
- การ์ด HUN: เวอร์ชันนี้กว้างกว่าการ์ดศูนย์การแจ้งเตือน และปรากฏที่ด้านบนของหน้าจอปัจจุบันจนกว่าจะปิด
- การ์ดศูนย์การแจ้งเตือน: เวอร์ชันนี้แคบกว่าการ์ด HUN และปรากฏพร้อมกับการ์ดอื่นๆ ในศูนย์การแจ้งเตือนในรายการแนวตั้ง
- การ์ดการแจ้งเตือนแบบกลุ่ม: การ์ดศูนย์การแจ้งเตือนเวอร์ชันนี้รวมการแจ้งเตือนที่เกี่ยวข้องหลายรายการไว้ในการ์ดเดียว พร้อมส่วนควบคุมสำหรับการขยายเพื่อแสดงการแจ้งเตือนแต่ละรายการ
รูปแบบของเวอร์ชันเหล่านี้ตามประเภทข้อความจะแสดงในรูปแบบ

1. ส่วนหัว
2. เนื้อหา (มีและไม่มีตัวอย่างข้อความ (ไม่บังคับ) ซึ่งซ่อนได้เมื่อรถยนต์กำลังขับ)
3. การดำเนินการ
4. ไอคอนขนาดใหญ่

1. ส่วนหัว
2. เนื้อหา
3. การขยาย/ยุบ
4. สัญญาณบอกสถานะขยาย/ยุบ
ข้อกำหนด – การ์ด HUN
HUN แบบมาตรฐาน

HUN กับรูปโปรไฟล์

ส่งข้อความถึง HUN พร้อมตัวอย่าง

ส่งข้อความถึง HUN หลายข้อความ

HUN ภาพขนาดใหญ่

ข้อกำหนด - การ์ดศูนย์การแจ้งเตือน
การแจ้งเตือนแบบมาตรฐาน

การแจ้งเตือนข้อความพร้อมตัวอย่าง

การแจ้งเตือนเมื่อมีข้อความหลายรายการ

การแจ้งเตือนการกระทำเดียว

ข้อกำหนด – การ์ดการแจ้งเตือนแบบกลุ่ม
การแจ้งเตือนแบบกลุ่ม – ยุบ

การแจ้งเตือนแบบกลุ่ม – ขยาย

การปรับขนาดเลย์เอาต์
เลย์เอาต์ข้อมูลอ้างอิงเหล่านี้จะแสดงวิธีปรับการแจ้งเตือนให้เข้ากับหน้าจอที่มีความกว้างและความสูงที่หลากหลาย (หมวดหมู่ความกว้างและความสูงจะกำหนดอยู่ในส่วนการออกแบบ) โปรดทราบว่าค่าพิกเซลทั้งหมดจะเป็นพิกเซลที่แสดงผล ก่อนที่จะเกิดการสุ่มหรือสุ่มขึ้น
หน้าจอความกว้างมาตรฐาน




หน้าจอกว้าง




หน้าจอที่กว้างเป็นพิเศษและกว้างมาก




ระยะห่างในแนวตั้งของการแจ้งเตือนบนหน้าจอที่มีความสูงระดับต่างๆ
ข้อกำหนดด้านระยะห่างแนวตั้งในส่วนนี้มีไว้สำหรับการ์ด HUN เท่านั้น โปรดดูข้อมูลเกี่ยวกับระยะห่างในแนวตั้งของการ์ดในศูนย์การแจ้งเตือนที่หัวข้อข้อกำหนดของศูนย์การแจ้งเตือน
หน้าจอสั้น

หน้าจอสูงและความสูงมาตรฐาน

รูปแบบ
การพิมพ์
รูปแบบของประเภท | ลักษณะแบบอักษร | น้ำหนัก | ขนาด (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 |
ตัวอย่าง




การเคลื่อนไหว
การเคลื่อนไหวต่อไปนี้เป็นส่วนสำคัญของประสบการณ์การแจ้งเตือน
- การเคลื่อนไหวของ HUN
- การปัดเคลื่อนไหวเพื่อปิดการแจ้งเตือน
- การเคลื่อนไหวขยายและยุบการแจ้งเตือนที่จัดกลุ่มไว้
การมาถึงของ HUN

ปัดเพื่อปิด

ขยายและยุบการแจ้งเตือนที่จัดกลุ่มไว้
