Ukuran ikon, avatar, dan target sentuh merupakan pertimbangan penting untuk meminimalkan gangguan bagi pengemudi.
Target sentuh yang berukuran besar memudahkan dan mempercepat pengemudi untuk berinteraksi dengan aplikasi dan mengembalikan perhatian pada mengemudi.
Panduan sekilas (TL;DR):
- Gunakan ukuran ikon dan avatar standar agar konsisten
- Ukuran target sentuh minimum adalah 76 x 76 dp
- Meratakan dan memusatkan ikon dan elemen dalam target sentuh
Ukuran ikon
Berikut adalah ukuran ikon standar yang digunakan oleh Android untuk Mobil:
![Ukuran ikon Android untuk Mobil](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-1.png?authuser=8&hl=id)
Ikon utama | Ikon sekunder | Ikon tersier |
---|---|---|
44 x 44dp | 36 x 36dp | 24 x 24dp |
Ukuran avatar
Berikut ukuran avatar standar yang digunakan oleh Android untuk Mobil:
![Ukuran avatar Android untuk Mobil](https://developers.google.cn/cars/design/automotive-os/design-system/images/Avatar_AR.png?authuser=8&hl=id)
Avatar kecil | Avatar sedang | Avatar besar |
---|---|---|
56 x 56dp | 76 x 76dp | 96 x 96dp |
Menyelaraskan ikon dan target sentuh
Ukuran target sentuh minimum di Android untuk Mobil adalah 76 x 76 dp. Target sentuh harus cukup besar agar mudah dilihat dan dipilih dengan mudah oleh pengemudi saat mobil bergerak. Elemen seperti tombol harus ditempatkan di tengah dalam batas target sentuh, dan tidak ada bagian dari elemen yang harus berada di luar batas target sentuh.
![Mempertahankan ukuran target sentuh pada atau di atas 76 x 76 dp](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-2.png?authuser=8&hl=id)
Anjuran
![Pusatkan elemen dalam area target sentuh](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-3.png?authuser=8&hl=id)
Anjuran
![Jangan sejajarkan elemen dengan salah satu tepi target sentuh](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-4.png?authuser=8&hl=id)
Larangan
![Jangan izinkan elemen berada di luar target sentuh](https://developers.google.cn/cars/design/automotive-os/design-system/images/Size-5.png?authuser=8&hl=id)
Larangan