Praktik terbaik untuk mendesain aplikasi

Mengoptimalkan tata letak vertikal

Sederhanakan desain aplikasi menggunakan tata letak vertikal, yang memungkinkan pengguna men-scroll ke satu arah untuk menjelajahi konten.

Yang harus dilakukan

Sasaran aplikasi ini adalah mengarahkan pengguna dari titik A ke B.

Yang tidak boleh dilakukan

Gunakan scroll vertikal dan horizontal, karena dapat membuat pengalaman aplikasi Anda membingungkan.

Menampilkan waktu

Menampilkan waktu (overlay) di bagian atas, karena hal ini memberikan tempat yang konsisten bagi pengguna untuk melihat waktu.

Yang harus dilakukan

Menampilkan waktu di bagian atas overlay, karena hal ini memberikan tempat yang konsisten bagi pengguna untuk melihat waktu.

Yang tidak boleh dilakukan

Menampilkan waktu di dialog sementara, overlay konfirmasi, atau pemilih, misalnya, pengguna hanya cenderung melihat layar konfirmasi dalam waktu yang sangat singkat.

Titik entri inline yang dapat diakses

Pastikan semua tindakan ditampilkan inline, menggunakan ikon dan label yang jelas untuk aksesibilitas. Ini termasuk titik entri ke setelan dan preferensi.

Yang harus dilakukan

Menggunakan ikon dan label jika memungkinkan.

Yang tidak boleh dilakukan

Mengandalkan ikon saja untuk meminta pengguna mengambil tindakan.

Menggunakan label untuk mengorientasikan pengguna

Untuk dialog yang lebih panjang, bantu orientasikan pengguna dengan label saat mereka men-scroll konten.

Yang harus dilakukan

Menggunakan batas bagian, label, dan petunjuk lainnya untuk mengatur konten serta membantu mengorientasikan pengguna saat mereka men-scroll tampilan yang lebih panjang dengan konten campuran.

Yang tidak boleh dilakukan

Menambahkan label untuk dialog yang berisi satu jenis konten.

Mendorong tindakan utama

Memudahkan pengguna mengambil tindakan dalam aplikasi Anda dengan menarik tindakan utama ke bagian atas overlay.

Yang harus dilakukan

Mengangkat tindakan utama yang tidak ambigu ke bagian atas.

Yang tidak boleh dilakukan

Tempatkan tindakan utama di halaman yang sangat panjang di bagian bawah.

Menampilkan scrollbar di layar scroll

Hanya gunakan indikator scroll di layar scroll untuk menghindari ekspektasi interaksi yang salah. Demikian pula, jangan lupa untuk menambahkan indikator scroll di layar scroll untuk menunjukkan bagian layar yang Anda lihat.

Yang harus dilakukan

Menampilkan indikator scroll jika seluruh tampilan di-scroll.

Yang tidak boleh dilakukan

Menampilkan indikator scroll pada tampilan non-scroll, atau tidak menampilkan scrollbar pada tampilan scroll.

Membuat desain yang responsif untuk ukuran layar yang lebih besar

Pastikan komponen yang Anda gunakan mengisi lebar yang tersedia dan pertimbangkan tinggi pada tata letak non-scroll.

Semua komponen Compose dibuat secara responsif, tetapi sebaiknya Anda melakukan penyesuaian untuk meningkatkan kualitas desain dan menambahkan nilai tambahan pada layar yang lebih besar.

Yang harus dilakukan

Pastikan konten mengisi lebar dan tinggi yang tersedia serta elemen layar penuh (ProgressIndicators, TimeText, dll.) beradaptasi secara responsif pada tata letak non-scroll.

Yang tidak boleh dilakukan

Menggunakan komponen dengan lebar tetap yang tidak mengisi layar secara responsif atau tidak menyesuaikan perilaku konten untuk mengisi ruang yang tersedia.

Menggunakan margin responsif (persentase)

Sebaiknya gunakan margin persentase agar ukuran margin beradaptasi dengan kurva tampilan yang terus berkembang.

Yang harus dilakukan

Gunakan margin persentase tambahan untuk memastikan konten tidak terpotong di bagian atas dan bawah.

Yang tidak boleh dilakukan

Komponen tidak boleh hanya diskalakan untuk mengisi ruang yang tersedia tanpa margin tambahan.