Rekomendasi desain

Android membantu Anda mengembangkan aplikasi yang berjalan dengan baik pada berbagai ukuran layar perangkat dan faktor bentuk. Kompatibilitas yang luas ini membantu Anda mendesain satu aplikasi yang dapat didistribusikan secara luas ke semua perangkat target.

Namun, untuk memberikan pengalaman pengguna sebaik mungkin dalam setiap konfigurasi layar, Anda perlu mengoptimalkan tata letak dan komponen UI lainnya untuk berbagai ukuran. Di ChromeOS, pengoptimalan UI memungkinkan Anda memanfaatkan sepenuhnya ruang layar tambahan untuk menawarkan fitur baru, menampilkan konten baru, atau meningkatkan pengalaman untuk memperdalam interaksi pengguna.

Tata letak untuk layar yang lebih besar

Jika Anda mengembangkan aplikasi untuk handset dan ingin meningkatkan kualitas desain di ChromeOS dan faktor bentuk layar besar lainnya, mulailah dengan membuat penyesuaian kecil pada tata letak, font, dan spasi. Untuk tablet 7 inci atau game dengan kanvas besar, penyesuaian ini mungkin sangat Anda perlukan.

Untuk layar yang lebih besar, Anda dapat mendesain ulang bagian UI untuk menggantikan UI yang "dibentangkan" dengan UI multipanel yang efisien, navigasi yang lebih sederhana, dan konten tambahan. Studi Material tim Desain Material memberikan contoh tampilan yang dapat dicapai. Misalnya, lihat cara Reply beradaptasi dengan berbagai ukuran layar.

Aplikasi Reply pada berbagai ukuran layar

Berikut beberapa saran:

  • Sediakan tata letak kustom untuk layar yang lebih besar ini. Anda dapat melakukannya dengan menggunakan dimensi terpendek layar atau lebar dan tinggi minimum yang tersedia.
  • Bayangkan cara kerja UX dan tata letak Anda di lingkungan yang mengutamakan lanskap seperti ChromeOS. Sesuaikan tata letak Anda agar terlihat dan berfungsi dengan baik dalam orientasi ini berdasarkan ukuran jendela, atau berikan tata letak lanskap tertentu dengan menggunakan penentu resource lanskap. Anda dapat mempelajari lebih lanjut cara mengubah ukuran jendela secara dinamis dan pertimbangan lainnya untuk layar besar di halaman Pengelolaan jendela.
  • Menu navigasi bawah tidak diskalakan dengan baik saat aplikasi Anda direntangkan agar lebar. Pertimbangkan untuk memindahkan navigasi Anda ke menu sisi kiri agar lebih mudah diakses dan dapat menampilkan lebih banyak opsi. Contoh Reply menggambarkan hal ini dengan baik.
  • Pada tingkat minimum, sesuaikan dimensi seperti ukuran font, margin, dan spasi untuk layar yang lebih besar agar dapat meningkatkan penggunaan ruang dan keterbacaan konten. Pertimbangkan tampilan saat pengguna berada agak jauh dari perangkat, seperti perangkat ChromeOS atau lingkungan desktop lainnya.
  • Sesuaikan posisi kontrol UI agar dapat diakses oleh pengguna saat menggunakan mouse atau memegang tablet, seperti mengarah ke samping dan menjauhi tengah.
  • Padding elemen UI biasanya harus lebih besar di ChromeOS dan perangkat layar besar lainnya daripada di handset. Margin dan ruang antar kolom harus beradaptasi saat Anda beralih ke ukuran layar yang berbeda.
  • Lakukan padding konten teks secukupnya sehingga tidak diratakan langsung di sepanjang tepi layar. Gunakan padding minimum 16 dp di sekeliling konten dekat tepi layar.

Secara khusus, pastikan tata letak Anda tidak muncul "dibentangkan" di layar:

  • Baris teks tidak boleh terlalu panjang—optimalkan maksimum 100 karakter per baris, dengan hasil terbaik antara 50 dan 75 karakter.
  • Daftar dan menu tidak boleh menggunakan lebar layar penuh.
  • Gunakan padding untuk mengelola lebar elemen di layar atau beralih ke UI multipanel untuk perangkat layar yang lebih besar (lihat bagian berikutnya).

Manfaatkan area layar ekstra

Perangkat ChromeOS memberikan ruang layar yang jauh lebih luas untuk aplikasi Anda. Saat mendesain UI aplikasi untuk layar yang lebih besar, manfaatkan sepenuhnya area tambahan tersebut.

Dalam contoh Reply dan Rally, aplikasi mengambil pendekatan yang berbeda untuk menggunakan ukuran layar yang lebih besar. Reply menambahkan ruang untuk tampilan yang lebih bersih, sementara Rally menampilkan lebih banyak data untuk mengurangi scroll dan ketukan.

Aplikasi Rally pada berbagai ukuran layar

Cara terbaik untuk memulai adalah dengan melihat hal-hal yang mungkin tersembunyi dari pengguna dan cara membuatnya terlihat. Hal ini dapat menampilkan informasi lebih lanjut tentang item, membuat menu yang mungkin tersembunyi di balik klik kanan atau tekan lama menjadi terlihat, atau menampilkan opsi navigasi yang berbeda atau lebih dalam karena Anda kini memiliki area navigasi sisi kiri yang lebih besar. Ini adalah kemenangan kegunaan besar yang dapat meningkatkan UX Anda dan memberikan nuansa yang lebih mirip desktop pada aplikasi Anda, tanpa mendesain ulang sepenuhnya pengalaman saat ini.

Berikut beberapa rekomendasi untuk aplikasi Anda:

  • Merek Anda menentukan arah yang harus Anda tuju saat memikirkan berbagai ukuran layar ini. Keputusan tentang apa yang harus diprioritaskan dan ditampilkan kepada pengguna bergantung pada jenis perjalanan pengguna yang ada dan fitur yang paling umum digunakan. Untuk mendapatkan inspirasi, lihat Studi Material dan perhatikan bagaimana setiap produk merespons secara berbeda terhadap layar yang lebih besar.
  • Pikirkan bagaimana desain aplikasi Anda harus berperilaku menggunakan sistem petak responsif, dan bagaimana konten, navigasi, dan opsi harus bergerak saat Anda mendapatkan ruang layar yang lebih besar.
  • Tentukan ukuran layar tempat Anda akan menggunakan tata letak yang berbeda, lalu berikan tata letak yang berbeda dalam bucket ukuran jendela yang sesuai (seperti besar/sangat besar) atau lebar jendela minimum (seperti sw600dp/sw720). Ingatlah bahwa saat Anda beralih ke tata letak ini, konteks keseluruhan yang digunakan pengguna tidak boleh berubah, dan Anda harus mencoba mempertahankan semua status pengguna saat bertransisi antar-tata letak (posisi scroll, teks yang sedang ditulis, dll.)

Menggunakan aset yang didesain untuk layar yang lebih besar & kepadatan yang lebih tinggi

Agar aplikasi Anda terlihat sebaik mungkin, sediakan ikon dan aset bitmap lainnya untuk setiap kepadatan dalam rentang yang umumnya didukung oleh ChromeOS. Secara khusus, Anda harus mendesain ikon untuk panel aplikasi, notifikasi, dan peluncur sesuai dengan panduan ikonografi dan menyediakannya dalam format vektor sehingga dapat diskalakan dengan baik di berbagai layar tempat aplikasi Anda akan ditampilkan.

Untuk mengetahui informasi selengkapnya tentang VectorDrawable dan aset vektor di Android, lihat postingan blog ini oleh Nick Butcher.

Sesuaikan ukuran font dan target sentuh

Agar aplikasi Anda dapat digunakan di ChromeOS dan layar dengan kepadatan yang lebih tinggi, sesuaikan ukuran font dan target sentuh di UI untuk semua konfigurasi layar yang Anda targetkan. Anda dapat menyesuaikan ukuran font melalui atribut styleable atau resource dimensi, dan Anda dapat menyesuaikan target sentuh melalui tata letak dan drawable bitmap, seperti yang dibahas sebelumnya.

Berikut beberapa pertimbangan:

  • Teks tidak boleh terlalu besar atau kecil pada kepadatan dan ukuran layar yang lebih besar. Pastikan label berukuran tepat untuk elemen UI terkait dan tidak ada baris baru yang tidak tepat dalam label, judul, dan elemen lainnya.
  • Ukuran target sentuh yang direkomendasikan untuk elemen di layar adalah 48 dp. Penyesuaian tertentu mungkin diperlukan di UI layar yang lebih besar. Baca selengkapnya tentang Metode Penspasian untuk mempelajari target sentuh dan penspasian antar-item saat ukuran layar berubah. Rekomendasi ini juga memenuhi pedoman aksesibilitas minimum.
  • Jika memungkinkan, untuk ikon yang lebih kecil, luaskan area sentuh hingga lebih dari 48 dp menggunakan TouchDelegate atau cukup dengan memusatkan ikon dalam tombol transparan.