Teknik desain responsif

Aplikasi UWP menggunakan piksel yang efektif untuk menjamin bahwa UI Anda akan dapat terbaca dan dapat digunakan di semua perangkat yang didukung Windows. Jadi, mengapa Anda ingin menyesuaikan UI aplikasi Anda untuk keluarga perangkat tertentu?

• Untuk memanfaatkan ruang yang paling efektif dan mengurangi kebutuhan untuk menavigasi

  Jika Anda merancang aplikasi agar terlihat bagus pada perangkat yang memiliki layar kecil, seperti tablet, aplikasi ini akan dapat digunakan pada PC dengan tampilan yang jauh lebih besar, tetapi mungkin akan ada beberapa ruang yang terbuang sia-sia. Anda dapat menyesuaikan aplikasi untuk menampilkan lebih banyak konten saat layar berada di atas ukuran tertentu. Misalnya, aplikasi belanja mungkin menampilkan satu kategori barang dagangan sekaligus di tablet, tetapi menampilkan beberapa kategori dan produk secara bersamaan di PC atau laptop.

  Dengan meletakkan lebih banyak konten di layar, Anda mengurangi jumlah navigasi yang perlu dilakukan pengguna.

• Untuk memanfaatkan kemampuan perangkat

  Perangkat tertentu lebih mungkin memiliki kemampuan perangkat tertentu. Misalnya, laptop cenderung memiliki sensor lokasi dan kamera, sementara TV mungkin tidak memiliki keduanya. Aplikasi Anda dapat mendeteksi kemampuan mana yang tersedia dan mengaktifkan fitur yang menggunakannya.

• Untuk mengoptimalkan input

  Pustaka kontrol universal berfungsi dengan semua jenis input (sentuhan, pena, keyboard, mouse), tetapi Anda masih dapat mengoptimalkan jenis input tertentu dengan mengatur ulang elemen UI Anda. Misalnya, jika Anda menempatkan elemen navigasi di bagian bawah layar, elemen tersebut akan lebih mudah diakses oleh pengguna telepon—tetapi sebagian besar pengguna PC berharap melihat elemen navigasi ke bagian atas layar.

Saat Anda mengoptimalkan UI aplikasi untuk lebar layar tertentu, kami mengatakan bahwa Anda membuat desain yang responsif. Berikut adalah enam teknik desain responsif yang dapat Anda gunakan untuk menyesuaikan UI aplikasi Anda.

Tip

Banyak kontrol UWP secara otomatis menerapkan perilaku responsif ini. Untuk membuat UI responsif, sebaiknya periksa kontrol UWP.

Reposisi

Anda dapat mengubah lokasi dan posisi elemen UI untuk memanfaatkan ukuran jendela sebaik-baiknya. Dalam contoh ini, jendela yang lebih kecil menumpuk elemen secara vertikal. Saat aplikasi diterjemahkan ke jendela yang lebih besar, elemen dapat memanfaatkan lebar jendela yang lebih lebar.

Dalam contoh desain untuk aplikasi foto ini, aplikasi foto memposisikan ulang kontennya di layar yang lebih besar.

Pengubahan ukuran

Anda dapat mengoptimalkan ukuran jendela dengan menyesuaikan margin dan ukuran elemen UI. Misalnya, ini dapat menambah pengalaman membaca di layar yang lebih besar hanya dengan mengembangkan bingkai konten.

Reflow

Dengan mengubah alur elemen UI berdasarkan perangkat dan orientasi, aplikasi Anda dapat menawarkan tampilan konten yang optimal. Misalnya, saat masuk ke layar yang lebih besar, mungkin masuk akal untuk menambahkan kolom, menggunakan kontainer yang lebih besar, atau menghasilkan item daftar dengan cara yang berbeda.

Contoh ini memperlihatkan bagaimana satu kolom konten bergulir vertikal pada layar yang lebih kecil yang dapat dialirkan kembali pada layar yang lebih besar untuk menampilkan dua kolom teks.

Perlihatkan/sembunyikan

Anda dapat menampilkan atau menyembunyikan elemen UI berdasarkan real estat layar, atau saat perangkat mendukung fungsionalitas tambahan, situasi tertentu, atau orientasi layar pilihan.

Misalnya, kontrol pemutar media mengurangi tombol yang diatur pada layar yang lebih kecil dan memperluas layar yang lebih besar. Pemutar media pada jendela yang lebih besar dapat menangani fungsionalitas yang jauh lebih banyak di layar daripada yang dapat dilakukan pada jendela yang lebih kecil.

Bagian dari teknik mengungkapkan atau menyembunyikan termasuk memilih kapan harus menampilkan lebih banyak metadata. Dengan jendela yang lebih kecil, yang terbaik adalah menunjukkan jumlah metadata minimal. Dengan jendela yang lebih besar, sejumlah besar metadata dapat muncul. Beberapa contoh kapan harus menampilkan atau menyembunyikan metadata meliputi:

• Di aplikasi email, Anda dapat menampilkan avatar pengguna.
• Di aplikasi musik, Anda dapat menampilkan info selengkapnya tentang album atau artis.
• Di aplikasi video, Anda dapat menampilkan info selengkapnya tentang film atau acara, seperti menampilkan detail transmisi dan kru.
• Di aplikasi apa pun, Anda dapat memecah kolom dan mengungkapkan detail selengkapnya.
• Di aplikasi apa pun, Anda dapat mengambil sesuatu yang ditumpuk secara vertikal dan meletakkannya secara horizontal. Saat beralih dari telepon atau phablet ke perangkat yang lebih besar, item daftar bertumpuk dapat berubah untuk mengungkapkan baris item daftar dan kolom metadata.

Ganti

Teknik ini memungkinkan Anda mengalihkan antarmuka pengguna untuk titik henti tertentu. Dalam contoh ini, panel navigasi dan UI sementara yang ringkas berfungsi dengan baik untuk layar yang lebih kecil, tetapi pada layar yang lebih besar, tab mungkin menjadi pilihan yang lebih baik.

Kontrol NavigationView mendukung teknik responsif ini, dengan memungkinkan pengguna mengatur posisi panel ke atas atau kiri.

Arsitek ulang

Anda dapat menciutkan atau mencabut arsitektur aplikasi Anda untuk menargetkan perangkat tertentu dengan lebih baik. Dalam contoh ini, memperluas jendela menunjukkan seluruh pola daftar/detail.

Topik terkait

• Ukuran layar dan titik henti
• Tata letak responsif dengan XAML
• Kontrol dan pola UWP