Aplikasi media

Meskipun pengembang aplikasi menyediakan konten inti, ikon, dan tindakan khusus untuk aplikasi media mereka, produsen mobil memiliki fleksibilitas untuk menyesuaikan pengalaman visual secara keseluruhan. Hal ini memastikan bahwa aplikasi media pihak ketiga terasa seperti bagian asli dari pengalaman infotainment di dalam kendaraan.

Apa yang dapat dikustomisasi oleh produsen mobil?

Konfigurasikan bilah aplikasi

App bar adalah elemen navigasi dan branding utama untuk aplikasi media di mobil dengan Google terintegrasi. App bar memberikan konteks kepada pengguna tentang posisi mereka di dalam aplikasi dan memberi mereka akses cepat ke fitur-fitur penting seperti pencarian dan penjelajahan.

Anda dapat menyesuaikan bilah aplikasi agar selaras dengan merek mobil Anda dengan menggunakan token desain untuk memodifikasi tampilan, tata letak, dan fungsinya.

Anatomi

Bilah aplikasi media biasanya terdiri dari elemen-elemen berikut:

  • Ikon navigasi: Biasanya berupa panah kembali untuk kembali ke layar sebelumnya.
  • Branding aplikasi: Logo atau nama aplikasi Anda.
  • Tab: Tautan navigasi untuk kategori tingkat atas, seperti "Jelajahi" atau "Cari".
  • Ikon aksi: Aksi kontekstual seperti ikon Pencarian.

Sesuaikan tampilannya

Gunakan token desain untuk memastikan bilah aplikasi sesuai dengan tema sistem mobil Anda. Token memungkinkan Anda menentukan warna dan tipografi yang secara otomatis diperbarui di seluruh antarmuka pengguna.

  • Latar Belakang: Atur warna latar belakang dan opasitas bilah aplikasi menggunakan token permukaan yang sesuai.
  • Tipografi: Gunakan font dan ketebalan merek Anda untuk judul aplikasi dan label tab dengan memetakannya ke token tipografi sistem.
  • Ikon: Pastikan ikon navigasi dan aksi menggunakan ukuran dan token warna yang konsisten agar mudah dibaca saat berkendara.

Konfigurasi fungsional

Kelola tab

Anda dapat memilih tab mana yang muncul di bilah aplikasi berdasarkan struktur aplikasi Anda. Konfigurasi umum meliputi:

  • Penelusuran standar: Tab untuk kategori seperti Daftar Putar, Artis, dan Album.
  • Integrasi pencarian: Tab atau ikon pencarian khusus di bilah aplikasi untuk akses cepat ke keyboard atau pencarian suara.

Tampilan merek

Untuk menjaga tampilan yang konsisten, Anda dapat menentukan bagaimana logo atau merek aplikasi ditampilkan di bilah aplikasi. Anda dapat memilih untuk:

  • Tampilkan logo: Tempatkan logo aplikasi di sebelah ikon navigasi.
  • Tampilkan judul: Gunakan teks untuk nama aplikasi jika tidak ada logo yang disediakan.

Tampilan penelusuran gaya

Tampilan penelusuran memungkinkan pengguna untuk menjelajahi konten media melalui kisi dan daftar. Produsen mobil dapat menyesuaikan tampilan ini untuk memastikan pengalaman media selaras dengan citra merek kendaraan dan desain sistem secara keseluruhan.

Kustomisasi header

Header penelusuran memberikan konteks untuk lokasi pengguna saat ini dalam hierarki konten. Anda dapat menyesuaikan aspek-aspek berikut dari header:

  • Posisi dan gaya: Sesuaikan penempatan vertikal dan desain visual header, termasuk tinggi dan pengaturan latar belakang.
  • Elemen header: Sesuaikan komponen tertentu, seperti gaya teks judul dan tampilan ikon sekunder.

Item dalam bentuk kisi dan daftar

Konten media diatur dalam bentuk tabel atau daftar untuk membantu pengguna menelusuri secara efisien. Anda dapat menyesuaikan tata letak ini untuk meningkatkan keterbacaan dan kemudahan melihat sekilas:

  • Penataan item: Sesuaikan tampilan visual setiap item, termasuk ukuran dan bentuk thumbnail serta tipografi untuk judul dan subjudul.
  • Pemilihan tata letak: Pilih antara format kisi atau daftar berdasarkan jenis konten yang ditampilkan (misalnya, menggunakan kisi untuk sampul album dan daftar untuk nama lagu).
  • Status fokus: Menentukan bagaimana item muncul ketika dipilih atau disorot oleh pengguna.

Tata letak pemutaran gaya

Tampilan pemutaran menyediakan kontrol dan metadata untuk media yang sedang diputar. Produsen mobil dapat menyesuaikan tampilan ini dan bilah kontrol yang diperkecil untuk menciptakan pengalaman yang kohesif dan selaras dengan merek kendaraan.

Anatomi tampilan pemutaran

Tampilan pemutaran biasanya mencakup komponen-komponen berikut:

  • Sampul album: Representasi visual dari media saat ini.
  • Metadata: Informasi seperti judul lagu, nama artis, dan judul album.
  • Kontrol pemutaran: Tindakan penting seperti putar, jeda, lewati, dan acak.
  • Bilah kemajuan: Indikator visual kemajuan trek saat ini, seringkali termasuk penggeser yang dapat disejajarkan.

Opsi penyesuaian

Anda dapat menggunakan token desain untuk memodifikasi gaya visual pengalaman pemutaran.

Layar pemutaran utama

  • Latar belakang dan lapisan: Sesuaikan warna latar belakang, gradien, atau tingkat opasitas agar sesuai dengan tema sistem Anda.
  • Tipografi: Tentukan jenis huruf, ukuran, dan ketebalan untuk judul lagu dan informasi artis menggunakan token tipografi sistem.
  • Pengaturan gaya kontrol: Sesuaikan bentuk, warna, dan gaya ikon tombol pemutaran (misalnya, putar, jeda, berikutnya) untuk memastikan konsistensinya dengan kontrol sistem lainnya.
  • Bilah kemajuan: Beri gaya pada jalur dan ibu jari bilah kemajuan menggunakan warna khusus merek.

Batang kontrol minimal (MCB)

Bilah kontrol yang diminimalkan memungkinkan pengguna untuk mengontrol media sambil menavigasi bagian lain dari sistem. Anda dapat menyesuaikan:

  • Posisi dan tata letak: Tentukan di mana MCB muncul di layar dan bagaimana elemen-elemen diatur di dalamnya.
  • Visibilitas elemen: Pilih kontrol mana (seperti putar/jeda atau lewati) yang ditampilkan dalam keadaan diminimalkan.
  • Penataan gaya: Terapkan warna yang konsisten dan sudut membulat untuk memastikan MCB terasa seperti bagian asli dari antarmuka pengguna sistem.

Pencarian dalam aplikasi adalah fitur penting yang memungkinkan pengguna menemukan media dengan cepat saat berada di dalam kendaraan. Meskipun pengembang aplikasi menyediakan konten pencarian, produsen mobil bertanggung jawab untuk mendesain lapisan pencarian, termasuk papan ketik dan tampilan hasil pencarian.

Desain keyboard

Overlay pencarian menggunakan konfigurasi keyboard yang berbeda tergantung pada kondisi mengemudi kendaraan untuk memastikan keamanan dan kemudahan penggunaan.

  • Papan ketik standar: Ditampilkan saat kendaraan diparkir. Ini adalah papan ketik lengkap untuk memasukkan teks secara manual.
  • Keyboard yang dioptimalkan untuk berkendara: Ditampilkan saat kendaraan sedang bergerak. Versi ini biasanya memprioritaskan input suara dan mungkin menawarkan entri manual yang disederhanakan atau saran untuk meminimalkan gangguan pengemudi.

Produsen mobil dapat menyesuaikan gaya visual keyboard ini—seperti bentuk tombol, warna latar belakang, dan tipografi—menggunakan token desain sistem agar sesuai dengan merek kendaraan.

Setelah pengguna memasukkan kueri, hasilnya akan ditampilkan dalam overlay. Anda dapat menyesuaikan aspek-aspek berikut dari tampilan ini:

  • Tata letak dan spasi: Tentukan bagaimana hasil pencarian dikelompokkan dan berapa banyak spasi yang diberikan di antara item untuk keterbacaan yang lebih baik.
  • Tampilan item: Sesuaikan gaya item daftar dalam hasil pencarian, termasuk gaya font untuk judul dan subjudul, serta ukuran thumbnail terkait.
  • Status kosong dan error: Rancang tampilan overlay saat tidak ditemukan hasil atau jika terjadi kesalahan koneksi.

Tampilkan merek aplikasi

Untuk menciptakan pengalaman media yang terpadu di mobil dengan Google terintegrasi, Anda dapat menyesuaikan bagaimana branding aplikasi pihak ketiga diintegrasikan ke dalam UI sistem. Hal ini memastikan bahwa meskipun pengguna mengetahui aplikasi mana yang mereka gunakan, tampilan visual tetap konsisten dengan desain keseluruhan kendaraan.

Elemen merek

Anda dapat menyesuaikan penempatan dan integrasi elemen-elemen khusus aplikasi berikut:

  • Ikon aplikasi: Pengidentifikasi visual utama untuk layanan media.
  • Warna aksen: Warna khusus merek yang disediakan oleh pengembang aplikasi.
  • Nama aplikasi: Nama layanan media berbasis teks.

Opsi penyesuaian

Gunakan token desain untuk menentukan bagaimana elemen-elemen branding ini muncul di berbagai layar media.

Penempatan dan penataan ikon

Anda memiliki fleksibilitas dalam cara ikon aplikasi ditampilkan di dalam antarmuka media:

  • Penempatan: Tentukan di mana ikon aplikasi muncul di layar konten, seperti di dalam bilah aplikasi atau pada tampilan pemutaran.
  • Penskalaan dan bentuk: Gunakan token sistem untuk menentukan ukuran dan radius sudut ikon guna memastikan kesesuaiannya dengan ikon tingkat sistem lainnya.

Integrasikan warna aksen

Warna aksen aplikasi dapat digunakan untuk memberikan sedikit petunjuk tentang merek aplikasi tanpa mengganggu antarmuka pengguna kendaraan:

  • Penataan gaya adaptif: Anda dapat memilih cara menggabungkan warna aksen aplikasi ke dalam komponen UI seperti bilah kemajuan, indikator tab aktif, atau tombol.
  • Normalisasi warna: Pastikan warna yang disediakan aplikasi memenuhi persyaratan kontras untuk keamanan dan keterbacaan dengan menerapkan transformasi warna yang ditentukan sistem.

Praktik terbaik desain

  • Jaga keharmonisan sistem: Pastikan bahwa branding aplikasi tidak mengalihkan perhatian dari tugas utama mengemudi atau bertentangan dengan tema sistem keseluruhan kendaraan.
  • Prioritaskan keterbacaan: Jika menggunakan warna aksen aplikasi untuk teks atau ikon, pastikan warna tersebut memenuhi rasio kontras yang diperlukan terhadap latar belakang yang Anda pilih.
  • Penerapan yang konsisten: Terapkan aturan branding secara konsisten di semua aplikasi media pihak ketiga untuk memberikan pengalaman pengguna yang dapat diprediksi.
  • Gunakan token sistem: Selalu petakan penyesuaian merek ke token desain yang disediakan untuk menjaga kompatibilitas dengan pembaruan sistem di masa mendatang.