Mewujudkan aplikasi dengan Desain Material

  • Mengembangkan aplikasi
  • Mendesain aplikasi

Ikuti prinsip-prinsip Desain Material untuk membuat aplikasi yang mengesankan tetapi tidak membingungkan pengguna.

Mengapa cara ini berhasil

Desain Material menyertakan praktik terbaik desain, konvensi umum, dan visual untuk membantu Anda membuat aplikasi yang terasa familier di perangkat apa pun. Saat pengguna mulai terbiasa dengan bahasa visual ini, mereka akan mengharapkannya pada aplikasi Anda. Ikuti desain ini untuk membuat aplikasi yang menawarkan daya tarik instan sekaligus menyempurnakan kegunaan serta meningkatkan interaksi dan retensi pengguna.

Prinsip Desain

  • Permukaan dan bayangan digunakan sebagai metafora, elemen UI harus berupa permukaan dengan lapisan tersendiri, yang ditumpuk di atas atau di samping satu sama lain. Bayangan harus digunakan untuk menunjukkan permukaan mana yang berada di depan permukaan lain, yang membantu memfokuskan perhatian dan membentuk hierarki.
  • Citra harus berupa gambar penuh. Minimalkan ruang antara foto, serta margin di antara foto dan tepi layar agar UI menjadi lebih imersif dan memiliki konten yang beragam.
  • Warna harus digunakan dengan jelas untuk menekankan branding dan elemen UI penting. Pastikan Anda memilih warna aksen dan warna dasar untuk memberikan pengalaman yang konsisten di seluruh aplikasi. Sebaiknya gunakan Palette API untuk mengambil warna langsung dari konten agar pengalaman menjadi lebih imersif.
  • Metrik dan keyline harus digunakan untuk menyelaraskan dan menyesuaikan ukuran konten menurut petak dasar pengukuran 8 dp agar mudah dibaca dan konsisten secara visual. Agar penempatan teks lebih akurat, gunakan petak 4 dp. Jika perlu, sejajarkan elemen-elemen seperti teks isi, thumbnail, judul panel aplikasi, dan sebagainya sesuai keyline standar.
  • Gerakan penting, meliputi animasi dan transisi, sebaiknya digunakan untuk membantu memandu dan memfokuskan pengguna, sekaligus memberikan penghubung dari satu layar ke layar berikutnya. Gerakan yang penting dalam penceritaan visual dapat membantu memberikan pengalaman pengguna yang mengesankan dan meningkatkan kontinuitas visual.
  • Interaksi responsif seperti masukan sentuhan dasar sebaiknya ditampilkan dalam bentuk permukaan riak. Di perangkat sebelum versi Android 5.0, tampilan riak bukanlah fitur yang diharapkan, jadi kembalikan ke perilaku default android:selectableItemBackground. Selain permukaan riak, permukaan interaktif juga harus terangkat saat disentuh untuk mengikuti jari pengguna selama proses input, dan setiap perubahan harus menyebar dari titik kontak.

Komponen antarmuka pengguna sistem

  • Status bar sistem di Android 5.0 ke atas sebaiknya diberi warna yang selaras dengan warna utama aplikasi atau konten layar saat ini. Untuk citra penuh, tampilan status bar dapat dibuat transparan. Untuk API level 23 ke atas, Anda dapat mengatur status bar sistem ke alternatif terang (dengan ikon yang menjadi gelap).
  • Panel aplikasi dan toolbar sebaiknya digunakan untuk menginformasikan dan membantu menunjukkan branding menggunakan warna, tipografi, dan logo produk (jangan gunakan ikon peluncur). Di layar yang kaya akan citra, panel aplikasi dapat dibuat transparan untuk memberikan pengalaman UI yang lebih imersif, karena gambar harus memenuhi layar dan bahkan dapat muncul di belakang panel aplikasi atau status bar. Pastikan Anda memberikan perlindungan teks menggunakan penyamaran untuk ikon di panel aplikasi transparan. Selain itu, pertimbangkan untuk menggunakan teknik scroll yang memberikan pengalaman visual yang lebih kaya bagi pengguna.
  • Tab harus mengikuti interaksi dan gaya Desain Material. Tab harus dapat digeser secara horizontal tanpa pemisah vertikal antar-tab. Tunjukkan tab yang dipilih dengan perubahan salah satu atau semua warna latar depan dan garis kecil di bawah teks tab (atau ikon) yang diberi warna aksen. Tab dan panel aplikasi berada di ketinggian permukaan yang sama kecuali jika ditandai dengan jelas dalam hierarki.
  • Panel navigasi hanya boleh memuat elemen navigasi utama, dan mengikuti pedoman visual yang baru. Panel ini akan muncul di depan panel aplikasi dan konten layar, serta berada di bawah status bar sistem. Sebagai praktik terbaik, pastikan panel ini terbuka saat aplikasi Anda pertama kali dijalankan agar lebih mudah ditemukan.
  • Pertimbangkan untuk menggunakan navigasi bawah jika aplikasi memiliki 3 hingga 5 tujuan level atas yang memerlukan akses langsung. Pola navigasi bawah yang bergeser direkomendasikan karena akan memberikan dampak visual lebih efektif dan dapat memuat string teks lebih panjang pada label. Pastikan menu navigasi bawah dapat diakses dari sebagian besar layar, tapi kecualikan layar detail level dalam, dan biarkan menu ini tersembunyi saat pengguna melakukan scroll.

Elemen dan pola antarmuka pengguna

  • Tema harus diupdate sesuai tema material terbaru agar tampilan aplikasi tidak terlihat kuno. Mengupdate tema sistem merupakan salah satu cara tercepat untuk menyempurnakan visual. Pastikan Anda mengupdate dari tema Gingerbread dan Holo untuk memberikan desain visual dan pengalaman pengguna yang konsisten. Update tema elemen UI seperti pemilih, alat pilih, dialog, menu, dan kolom teks sesuai standar Desain Material.
  • Tombol adalah elemen interaktif yang paling sering digunakan dalam aplikasi. Oleh karena itu, mengupdatenya sesuai pola desain visual terbaru akan memberikan perubahan yang benar-benar berpengaruh. Jika Anda menggunakan tombol kustom, hindari penggunaan sudut yang terlalu bulat, gradien yang berlebihan, atau permukaan yang berkilau karena jenis tombol seperti ini membuat aplikasi Anda tampak kuno. Gunakan tombol timbul untuk tindakan penting yang perlu diperjelas secara visual, atau untuk tata letak dengan banyak teks yang akan membuat tombol datar sulit terlihat. Untuk tindakan sederhana yang tidak perlu diperjelas, tombol datar paling umum digunakan. Untuk tindakan utama di layar tertentu, gunakan tombol tindakan mengambang (FAB), yaitu tombol dengan tampilan visual mencolok yang mengambang di atas elemen UI lainnya.
  • Kartu dan daftar sebaiknya digunakan ketika pengguna membandingkan satu item dengan yang lain secara langsung. Gunakan tampilan daftar untuk konten dengan banyak teks yang akan dibaca dengan cepat oleh pengguna. Gunakan petak jika elemen utama konten bersifat visual. Pastikan Anda menggunakan widget RecyclerView saat membuat daftar dan kartu untuk opsi tata letak yang lebih beragam.
  • Kartu sebaiknya digunakan jika ada perpaduan berbagai jenis konten, saat pengguna menjelajahi konten dan tidak membandingkan gambar atau string teks secara langsung. Gunakan juga jika ada beberapa tindakan di sebuah permukaan. Sekalipun menjadikan item tampak mencolok dan memberikan fokus visual, penggunaan kartu secara berlebihan akan menghasilkan gangguan visual yang tidak perlu. Pastikan Anda menggunakan widget CardView saat membuat konten kartu.
  • Penelusuran dalam aplikasi sebaiknya diimplementasikan menggunakan penelusuran langsung di panel aplikasi. Jika penelusuran konten adalah fungsi utama aplikasi, pertimbangkan untuk menggunakan panel aplikasi widget penelusuran tetap.
  • Pemisah sebaiknya hanya digunakan untuk memisahkan bagian-bagian utama konten atau untuk menunjukkan perbedaan penting antar-area teks. Berhati-hatilah saat menggunakan pemisah untuk setiap item dalam tampilan daftar sederhana karena akan menimbulkan banyak gangguan visual tanpa peningkatan yang signifikan pada keterbacaan. Sebaiknya gunakan spasi kosong dan tipografi untuk membantu menandai konten.
  • Saat mendesain status kosong, pastikan Anda memberitahukan alasannya kepada pengguna dan sertakan pesan ajakan untuk mengatasi status kosong tersebut.

Yang baru di Android 7.0

  • Notifikasi telah diperbaiki dengan area konten, interaksi, kontrol pengguna, dan input teks singkat baru.

Contoh