Pengalaman desktop bersifat adaptif sejak awal, mendukung berbagai ukuran pada layar yang terhubung atau di dalam jendela. Mendukung berbagai perangkat Android dengan membuat UI adaptif. Tata letak adaptif sangat penting untuk pengalaman desktop, sehingga pengguna dapat mengubah ukuran jendela aplikasi dengan lancar.
Untuk menyiapkan aplikasi Anda agar dapat digunakan di desktop, mulailah dengan menyesuaikan UI aplikasi, lalu lanjutkan ke desain interaksi input dan kepadatan. Untuk mengetahui informasi selengkapnya, lihat Tata letak adaptif. Untuk berlatih dengan lab desain, lihat Lab desain adaptif.
Berpikir dalam panel
Terapkan pendekatan berbasis panel untuk tata letak dengan menggunakan pengelompokan dan penampungan. Konten dapat diatur menggunakan penampung visual atau melalui pengelompokan implisit dengan ruang kosong. Panel ini menawarkan fleksibilitas, karena dapat diluaskan, dibatasi, disembunyikan, dipindahkan, atau ditampilkan sebagai pop-up. Mendesain dengan panel menyederhanakan proses pembuatan pengalaman yang kohesif di berbagai perangkat seluler dan dapat diintegrasikan dengan petak saat ini untuk menyederhanakan penyesuaian tata letak yang kompleks.
Anjuran
Skala
Meskipun layar yang luas menyediakan lebih banyak ruang untuk konten, ruang tambahan dan faktor ergonomis seperti jarak pandang harus diperhitungkan. Tipografi harus sedikit diperbesar agar nyaman bagi pengguna yang mungkin berada lebih jauh atau mengetik di keyboard.
Elemen UI dan huruf diskalakan pada layar yang diperluas dan terhubung, dan mungkin memiliki skala yang berbeda karena resolusi layar.
Gunakan satu atau dua langkah di atas desain skala huruf yang ada, atau pertimbangkan untuk menerapkan skala huruf khusus yang dirancang untuk desktop dan tampilan yang diperluas. Penyesuaian yang didasarkan pada pendapat dapat dilakukan dalam desain Anda untuk kualitas editorial yang lebih baik.
Gambar juga di-skalakan dan ditampilkan di seluruh layar. Hal ini memungkinkan pengguna melihat tanaman dengan lebih detail, tetapi tidak menggunakan ruang secara efisien. Perhatikan hal ini saat menyusun elemen UI.
Konten dan elemen UI
Setelah konten dikelompokkan dan diskalakan, beberapa UI konten juga dapat bergeser atau diperbarui agar lebih sesuai dengan titik henti.
Dalam setiap panel konten, tentukan apakah dan bagaimana konten akan beradaptasi. Lihat kontennya itu sendiri. Jika baris daftar berubah menjadi kartu, apakah konten kehilangan efisiensi interaksi dan kemampuan pemindaian? Komponen dapat berperilaku berbeda pada berbagai titik henti sementara. Anda dapat menyesuaikan lebar atau visibilitasnya, atau bahkan mengganti komponen.
Tentukan lebar maksimum untuk setiap elemen UI dan salinan dalam panel. Elemen UI tidak boleh meregang ke lebar penuh atau terdistorsi. Menetapkan padding dan margin maksimum dalam panel. Salinan harus memungkinkan pembacaan yang nyaman dengan membatasi panjang baris. Batasi teks singkat hingga sekitar 60 karakter, sementara konten panjang dapat lebih panjang.
Anjuran
Gunakan pengungkapan progresif yang baik. Dapatkah lebih banyak konten muncul saat pengguna memperbesar ukuran jendela? Pertimbangkan apakah konten tambahan meningkatkan produktivitas dengan lebih sedikit klik atau menimbulkan kebingungan.
Tata letak konten dalam setiap panel dapat berubah, lagi-lagi bergantung pada konten, dengan mengatur ulang ke kolom dan struktur petak yang berbeda. Misalnya, petak vertikal dengan carousel dapat diupdate menjadi petak masonry dengan carousel fitur. Pertimbangkan perubahan vertikal untuk elemen dan gabungkan dengan batasan dan perubahan presentasi. Anda mungkin tidak ingin menggeser komponen seperti ini, bergantung pada konsumsi konten.
Pertimbangkan untuk mengizinkan pengguna menyesuaikan tata letak sesuai preferensi mereka untuk keterbacaan dan produktivitas maksimum.
Navigasi
Setelah Anda menyesuaikan konten dan elemen UI, tentukan cara panel konten berinteraksi satu sama lain dan hierarki navigasi. Daripada mengetuk untuk berpindah ke konten detail, Anda dapat menggunakan ruang layar tambahan untuk menampilkan detail dan konten pendukung secara berdampingan.
- Jika menu navigasi sedang digunakan, menu bawah harus diupdate ke kolom samping navigasi di samping layar untuk meningkatkan ergonomi. Jangan meregangkan menu navigasi bawah.
- Untuk navigasi sekunder, seperti tab, pertimbangkan untuk menetapkannya ke lebar maksimum agar lebih mudah dinavigasi dengan presisi.
- Panel aplikasi juga dapat ditetapkan ke panel konten yang sesuai, tetapi pastikan tidak membingungkan hierarki navigasi.
Kepadatan
Pengalaman desktop dapat mengubah kepadatan interaksi dan kepadatan visualnya karena presisi input dan ukuran layar.
- Anda dapat meningkatkan kepadatan elemen visual, seperti data tabel, tanpa membebani pengguna dibandingkan dengan tata letak ponsel yang ringkas. Pertimbangkan kepadatan konten sebagai opsional dan selalu izinkan penskalaan teks dalam tata letak, jangan tetapkan ukuran huruf secara tetap.
- Komponen harus memiliki target klik yang lebih tepat. Target klik intrinsik di sekitar komponen dapat menyebabkan salah klik.
Input
Input tambahan berarti pola interaksi tambahan untuk pengguna Anda.
Saat pengguna memiliki mouse dan keyboard, aplikasi Anda harus memperhitungkan status melayang dan fokus.
- Menambahkan status pengarahan kursor untuk input penunjuk, seperti mouse dan stylus.
- Merekam status fokus untuk elemen saat pengguna melakukan navigasi menggunakan tombol Tab untuk aksesibilitas.
- Perhatikan status kursor, karena kursor juga dapat membantu mengomunikasikan interaksi dan status aplikasi kepada pengguna.
Negara bagian tambahan dapat meningkatkan efisiensi.
- Fungsi klik kanan dapat mencakup menu konteks untuk akses cepat ke fitur.
- Tips alat saat mengarahkan kursor dapat membantu pengguna memulai penggunaan.
- Pintasan keyboard membantu pengguna super meningkatkan produktivitas.
