Android mencakup berbagai perangkat, bentuk, dan ukuran layar, sehingga mendesain untuk tampilan sempurna piksel tertentu tidak hanya tidak efektif, tetapi juga dapat berdampak negatif pada pengalaman pengguna. Sebagai gantinya, desain, bangun, dan berpikir secara adaptif. Baru-baru ini kami memperkenalkan API baru yang menghadirkan beberapa konsep desain yang sudah dikenal untuk membantu membangun tata letak adaptif.
Pawparazzi adalah aplikasi contoh yang menunjukkan konsep ini. Aplikasi ini dirancang dan dibangun untuk menyoroti desain adaptif menggunakan API adaptif, seperti Grid dan Flexbox.
Berpikir secara adaptif bukan hanya soal mendesain dengan titik henti sementara, tetapi juga memikirkan konten dalam penampung yang fleksibel.
Semuanya adalah petak!
Memiliki fondasi untuk menyusun konten membantu praktik desain yang baik, dan dapat membantu Anda memutuskan cara konten harus disesuaikan. Android memiliki petak dasar pengukuran 8 dp yang mendasari dan dapat kita gunakan untuk menyelaraskan semua konten pada tingkat mikro.
Pawparazzi menggunakan petak tata letak hierarkis, bukan petak modular yang merata atau petak kolom satu arah, yang berarti kolom dan baris yang membentuknya ditentukan berdasarkan hierarki konten.
Keputusan terkait jenis petak harus bergantung pada konten. Mulai dengan konten aplikasi Anda dan pikirkan cara mengelompokkan konten tersebut. Hal ini membantu menentukan struktur tata letak secara keseluruhan. Lihat Petak dan Unit, Struktur konten , dan cara memulai di desktop untuk mengetahui informasi selengkapnya tentang cara berpikir dalam panel.
Untuk Pawparazzi, tujuan utamanya adalah melihat hewan peliharaan tim dalam berbagai cara, dimulai dengan Ringkasan hewan peliharaan, Detail hewan peliharaan, lalu hewan peliharaan yang diberi peringkat. Hal ini berarti galeri hewan peliharaan akan menempati panel konten utama dan lebih banyak petak, diikuti dengan elemen navigasi dan filter. Jika ada lebih banyak ruang, galeri dapat diperluas di lebih banyak baris, lebih banyak hewan peliharaan, dan menampilkan detail hewan peliharaan secara bersamaan. Prinsip adaptif ini adalah pengungkapan, atau menampilkan lebih banyak konten pada tata letak yang lebih besar.
Melihat tujuan utama aplikasi dan kontennya membantu menentukan bagaimana dan kapan petak tata letak perlu disesuaikan: ukuran class jendela, penempatan engsel, dan orientasi perangkat.
Dari petak tata letak, subpetak membantu membangun struktur konten yang lebih fleksibel. Galeri itu sendiri adalah petak. Untuk ukuran ringkas, digunakan petak 2 kolom.
Petak adalah konsep tata letak dua arah, sehingga konten dapat mengalir dalam arah horizontal dan vertikal.
Tata letak ini dapat digunakan untuk membuat tata letak yang lebih menarik atau membuat hierarki visual yang lebih jelas, seperti Hewan peliharaan minggu ini, di mana petak digunakan untuk menyampaikan hewan peliharaan dengan peringkat teratas. Petak dapat berukuran 2x4, tetapi posisi teratas mencakup 2 kolom dan baris.
Semua ini dilakukan dengan Grid API.
Menyesuaikan komponen tersebut
Meskipun petak mencakup struktur konten makro dan mikro, Flexbox membantu komponen yang perlu merespons kontennya. Ini digunakan untuk konten satu arah, yang hanya menentukan horizontal atau vertikal. Misalnya, chip filter dapat merespons labelnya dan area filter dapat diperluas bergantung pada jumlah filter. Gunakan Reveal di layar yang lebih besar untuk menampilkan lebih banyak filter sekaligus.
Kueri bernuansa
Dengan mendesain petak tata letak dan menggunakan petak serta flexbox, kita dapat membuat tata letak adaptif di beberapa layar dan bahkan mengakomodasi bentuk unik seperti perangkat foldable. Namun, bagaimana dengan konteks pengguna yang berbeda? Pengguna Android dapat terhubung ke layar atau mencolokkan mouse. MediaQuery memungkinkan kita membuat keputusan desain yang cermat untuk mengakomodasi pengguna dalam semua konteks.
Di Pawparazzi, hal ini berarti memanfaatkan input penunjuk presisi, dengan area target yang lebih kecil dan konten yang lebih padat.
Contoh AdaptiveUI Android
Pelajari desain yang menginspirasi dan dioptimalkan untuk perangkat layar besar. Jelajahi template UI/UX untuk kategori aplikasi populer, termasuk media, kreativitas, game, dan lainnya.
