Kartu notifikasi menyampaikan sejumlah kecil informasi tepat waktu dari sistem atau aplikasi.
Desain kartu ini untuk Android Automotive OS dimaksudkan untuk meminimalkan gangguan bagi pengemudi. Kartu ini tersedia dalam tiga versi dasar:
- Kartu notifikasi pendahuluan (HUN): Digunakan untuk notifikasi yang muncul sebentar di layar saat ini
- Kartu Pusat Notifikasi: Digunakan untuk notifikasi yang tercantum di Pusat Notifikasi
- Kartu notifikasi yang dikelompokkan: Menggabungkan beberapa kartu Pusat Notifikasi dalam satu kartu
Dalam versi tersebut, desain juga dapat sedikit berbeda tergantung pada kategori pesan. Misalnya, notifikasi panggilan memiliki tombol dan ikon yang berbeda dari notifikasi navigasi.
Anatomi
Kartu notifikasi adalah komponen fleksibel yang dapat menyertakan berbagai elemen. Laporan ini memiliki tiga versi utama:
- Kartu HUN: Versi ini lebih lebar daripada kartu Notification Center dan muncul di bagian atas layar saat ini hingga ditutup
- Kartu Pusat Notifikasi: Versi ini lebih sempit daripada kartu HUN dan muncul dengan kartu lain di Pusat Notifikasi, dalam daftar vertikal
- Kartu notifikasi yang dikelompokkan: Versi kartu Pusat Notifikasi ini menggabungkan beberapa notifikasi terkait dalam satu kartu, dengan kontrol untuk meluaskan dan menampilkan masing-masing notifikasi
Varian versi ini menurut jenis pesan ditampilkan di Gaya.
1. Header
2. Konten (dengan dan tanpa pratinjau pesan opsional, yang dapat disembunyikan saat mobil mengemudi)
3. Tindakan
4. Ikon besar
1. Header
2. Konten
3. Tindakan luaskan/ciutkan
4. Luaskan/ciutkan indikator
Spesifikasi – kartu HUN
HUN standar
HUN dengan avatar
Pesan HUN dengan pratinjau
Pesan HUN dengan beberapa pesan
HUN gambar besar
Spesifikasi – Kartu Pusat Notifikasi
Notifikasi standar
Notifikasi pesan dengan pratinjau
Notifikasi pesan dengan beberapa pesan
Notifikasi tindakan tunggal
Spesifikasi – Kartu notifikasi yang dikelompokkan
Notifikasi yang dikelompokkan – Diciutkan
Notifikasi yang dikelompokkan – Diperluas
Tata letak penskalaan
Tata letak referensi ini menunjukkan cara menyesuaikan notifikasi untuk mengakomodasi layar dengan lebar dan tinggi yang berbeda. (Kategori lebar dan tinggi ditentukan di bagian Tata Letak.) Perhatikan bahwa semua nilai piksel dalam piksel yang dirender, sebelum terjadi down-sampling atau up-sampling.
Layar dengan lebar standar
Layar lebar
Layar ekstra lebar dan super lebar
Spasi vertikal notifikasi di layar dengan berbagai ketinggian
Spesifikasi spasi vertikal di bagian ini hanya untuk kartu HUN. Untuk informasi tentang jarak vertikal kartu di Pusat Notifikasi, lihat spesifikasi Pusat Notifikasi.
Layar pendek
Layar tinggi dan standar
Gaya
Tipografi
| Gaya jenis | Jenis Huruf | Berat | Ukuran (dp) |
|---|---|---|---|
| Bodi 1 | Roboto | Reguler | 32 |
| Bodi 3 M | Roboto | Media | 24 |
| Isi 3 | Roboto | Reguler | 24 |
Warna
| Elemen | Warna(mode siang) | Warna (mode malam) |
|---|---|---|
| Jenis / ikon utama | Putih | Putih @ 88% |
| Jenis sekunder | Putih @ 72% | Putih @ 60% |
| Ikon sekunder | Aksen pihak ketiga | Aksen pihak ketiga |
| Garis rambut pemisah | Putih 22% | Putih 12% |
| Latar belakang kartu | Abu-abu 868 | Abu-abu 900 |
| Scrim Gradien | Hitam 100% - 0% | Hitam 100% - 20% |
Pengaturan ukuran
| Elemen | Ukuran (dp) |
|---|---|
| Ikon utama | 44 |
| Ikon sekunder | 36 |
| Avatar sedang | 76 |
| Radius sudut bulat (R2) | 8 |
Contoh
Motion
Gerakan berikut merupakan bagian penting dari pengalaman notifikasi:
- Gerakan kedatangan HUN
- Gerakan geser untuk menutup notifikasi
- Gerakan notifikasi yang diperluas dan diciutkan untuk notifikasi
Kedatangan HUN
Geser untuk menutup
Luaskan dan ciutkan notifikasi yang dikelompokkan
