Kartu notifikasi

Kartu notifikasi menyampaikan sejumlah kecil informasi tepat waktu dari sistem atau dari aplikasi.

Desain kartu-kartu ini untuk Android Automotive OS dimaksudkan untuk meminimalkan gangguan bagi pengemudi. Kartu-kartu ini hadir dalam tiga versi dasar:

  • Kartu notifikasi heads-up (HUN): Digunakan untuk notifikasi yang muncul sebentar di atas layar saat ini.
  • Kartu Pusat Pemberitahuan: Digunakan untuk pemberitahuan yang tercantum di Pusat Pemberitahuan.
  • Kartu notifikasi berkelompok: Menggabungkan beberapa kartu Pusat Notifikasi dalam satu kartu.

Dalam versi-versi ini, 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 mencakup berbagai elemen. Kartu notifikasi memiliki tiga versi utama:

  • Kartu HUN: Versi ini lebih lebar daripada kartu Pusat Pemberitahuan dan muncul di bagian atas layar saat ini hingga ditutup.
  • Kartu Pusat Pemberitahuan: Versi ini lebih sempit daripada kartu HUN dan muncul bersama kartu serupa lainnya di Pusat Pemberitahuan, dalam daftar vertikal.
  • Kartu Notifikasi Berkelompok: Versi kartu Pusat Notifikasi ini menggabungkan beberapa notifikasi terkait dalam satu kartu, dengan kontrol untuk memperluas dan menampilkan notifikasi individual.

Varian dari versi-versi ini berdasarkan jenis pesan ditampilkan di bagian Gaya .

Berikut ini ditampilkan versi HUN dan Notification Center dari kartu notifikasi yang sama, yang menampilkan elemen-elemen berikut:
1. Header
2. Konten (dengan dan tanpa pratinjau pesan opsional, yang dapat disembunyikan saat mobil sedang berjalan)
3. Tindakan
4. Ikon besar


Berikut ini ditampilkan kartu notifikasi grup dalam versi yang dilipat dan diperluas, yang menampilkan elemen-elemen berikut:
1. Header
2. Konten
3. Aksi perluasan/penyusutan
4. Indikator perluasan/penyusutan

Spesifikasi – Kartu HUN

Standar HUN

HUN dengan avatar

Kirim pesan HUN dengan pratinjau

Pesan HUN dengan beberapa pesan

HUN gambar besar

Spesifikasi – Kartu Pusat Pemberitahuan

Pemberitahuan standar

Notifikasi pesan dengan pratinjau

Notifikasi pesan dengan beberapa pesan

Pemberitahuan tindakan tunggal

Spesifikasi – Kartu pemberitahuan berkelompok

Notifikasi yang dikelompokkan – Diciutkan

Pemberitahuan berkelompok – Diperluas

Tata letak yang dapat diskalakan

Tata letak referensi ini menunjukkan cara menyesuaikan notifikasi agar sesuai dengan layar dengan berbagai lebar dan tinggi. Perhatikan bahwa semua nilai piksel adalah dalam piksel yang dirender, sebelum terjadi pengurangan atau peningkatan resolusi.

ikon panggilan
Tata Letak
Margin, garis tepi, dan padding untuk berbagai ukuran layar.

Layar dengan lebar standar

Kartu HUN.


Kartu Pusat Pemberitahuan.

Kartu pemberitahuan kelompok (dilipat).

Kartu pemberitahuan kelompok (diperluas).

Layar lebar

Kartu HUN.


Kartu Pusat Pemberitahuan.

Kartu pemberitahuan kelompok (dilipat).

Kartu pemberitahuan kelompok (diperluas).

Layar ekstra lebar dan super lebar

Kartu HUN.


Kartu Pusat Pemberitahuan.

Kartu pemberitahuan kelompok (dilipat).

Kartu pemberitahuan kelompok (diperluas).

Penataan vertikal notifikasi pada layar dengan ketinggian berbeda

Spesifikasi spasi vertikal di bagian ini hanya berlaku untuk kartu HUN.

Layar pendek

Kartu HUN.

Layar tinggi dan layar standar

Kartu HUN.

Gaya

Tipografi

Gaya huruf Jenis Huruf Berat Ukuran (dp)
Tubuh 1 Robot Biasa 32
Badan 3M Robot Sedang 24
Tubuh 3 Robot Biasa 24

Warna

Elemen Warna (mode siang) Warna (mode malam)
Tipe/ikon utama Putih Putih @ 88%
Tipe sekunder Putih @ 72% Putih @ 60%
Ikon sekunder aksen pihak ketiga aksen pihak ketiga
Garis rambut pembatas Putih 22% Putih 12%
Latar belakang kartu Abu-abu 868 Abu-abu 900
Kain kasa gradien Hitam 100% - 0% Hitam 100% - 20%

Perekat

Elemen Ukuran (dp)
Ikon utama 44
Ikon sekunder 36
Avatar ukuran sedang 76
Radius sudut membulat (R2) 8

Contoh

Kartu HUN: Panggilan, Pesan, Peringatan mobil, dan Navigasi.
Kartu Pusat Pemberitahuan: Panggilan, Pesan, dan Peringatan Mobil.
Kartu notifikasi berkelompok: Pesan, diperluas dan diciutkan - harian.
Kartu notifikasi berkelompok: Pesan, diperluas dan diciutkan - malam.

Gerakan

Gerakan-gerakan berikut merupakan bagian penting dari pengalaman notifikasi:

  • Gerakan kedatangan HUN
  • Gerakkan tangan untuk menutup notifikasi.
  • Gerakan perluasan dan penyusutan pemberitahuan berkelompok

Kedatangan HUN

Gerakan huruf HUN yang meluncur turun dari bagian atas layar membantu pengguna memperhatikan kemunculannya, dan juga memberikan petunjuk tentang cara mengakses notifikasi menggunakan gesekan ke bawah jika Pusat Notifikasi diimplementasikan sebagai panel tarik-turun.

Geser untuk menutup

Gerakan menyeret saat pengguna menggeser ke samping pada notifikasi memberikan konfirmasi visual bahwa notifikasi tersebut sedang ditutup, kemudian gerakan ke atas dari notifikasi berikutnya mengisi kekosongan dalam daftar.

Notifikasi grup (perluas dan ciutkan)

Dengan menampilkan kartu notifikasi yang dikelompokkan dan memanjang ke bawah, akan tercipta transisi yang mulus dari keadaan terlipat ke keadaan terbuka.