Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Berlaku untuk rekomendasi daftar periksa Pengoptimalan Pengalaman yang Dirancang dengan Baik ini Power Platform :
| XO:06 | Pertahankan tata letak yang dapat digunakan dan menarik secara visual di seluruh ukuran dan resolusi layar. Gunakan teknik adaptif untuk merender konten secara dinamis dengan berbagai cara. |
|---|
Panduan ini menjelaskan rekomendasi untuk mendesain tata letak layar yang mudah dinavigasi dan disesuaikan dengan lancar di berbagai perangkat. Pendekatan ini memastikan bahwa pengguna memiliki pengalaman menonton yang konsisten dan optimal, terlepas dari perangkat yang mereka gunakan.
Definisi
| Istilah | Devinisi |
|---|---|
| Viewport | Bagian yang terlihat dari antarmuka digital, seperti browser web atau aplikasi seluler, tempat konten ditampilkan. Rentang area pandang sering dikaitkan dengan kelas perangkat (seluler, tablet, dan desktop) berdasarkan dimensi dan resolusi layar. |
| Titik henti | Nilai piksel tertentu yang menentukan rentang area pandang yang digunakan untuk menentukan perilaku tata letak adaptif. |
Strategi desain utama
Tata letak responsif memberikan pengalaman pengguna yang fleksibel dan efisien di berbagai ukuran jendela. Mereka beradaptasi dengan menskalakan konten, mengatur ulang elemen, dan menampilkan teks dan gambar secara selektif. Tata letak yang bertanggung jawab memenuhi kebutuhan pengguna terlepas dari ukuran layar mereka.
Menentukan bingkai aplikasi yang konsisten
Bingkai aplikasi terdiri dari serangkaian kontrol yang tersedia secara konsisten di setiap layar. Ini terdiri dari tiga subkomponen utama: header, navigasi, dan wilayah konten. Aplikasi sederhana memiliki fleksibilitas untuk menggunakan komponen header, sementara aplikasi yang lebih canggih sering menggunakan navigasi samping untuk mengaktifkan beberapa halaman. Subkomponen dapat disesuaikan. Misalnya, Anda dapat memasukkan penelusuran global di header atau mengelompokkan item di navigasi samping agar sesuai dengan kebutuhan aplikasi.
Tiga subkomponen utama dari bingkai aplikasi adalah:
Header adalah komponen inti yang dirancang untuk menjadi bagian dari setiap aplikasi internal. Ini terdiri dari sub-komponen yang memberi pengguna akses ke fungsi seluruh sistem, membantu mengarahkan mereka ke UI, dan memberikan konsistensi di seluruh pengalaman. Aplikasi ini muncul di bagian atas bingkai aplikasi dan harus tetap ada di semua halaman aplikasi. Ini dapat secara opsional menghosting perintah global, seperti pencarian, pengaturan, notifikasi, masukan, profil, atau bantuan. Nama aplikasi harus selalu ditampilkan, dan idealnya juga berfungsi sebagai tautan yang dapat diklik ke beranda atau halaman arahan. Header harus responsif, dengan perintah yang bergerak ke kontrol luapan di area pandang yang berukuran 600 piksel ke bawahnya. Lebar input pencarian juga responsif pada 1023 piksel ke bawah.
Navigasi adalah sistem kontrol yang bekerja sama untuk membantu pengguna menemukan informasi dan menyelesaikan tugas. Ini membantu pengguna melompat dari satu bagian ke bagian lain dari aplikasi. Secara hierarkis, itu tidak dilampirkan ke halaman atau bagian mana pun, tetapi ada di atas semua konten lainnya. Ini selalu ada, dan dapat diminimalkan ke status ciutkan (juga disebut status rel) untuk mengosongkan ruang tambahan untuk konten halaman. Pada ukuran jendela yang lebih kecil, dapat diminimalkan menjadi menu flyout. Bentuk navigasi yang paling umum termasuk navigasi atas dan navigasi samping. Jangan gunakan keduanya secara bersamaan.
Wilayah konten berisi fokus layar. Ukuran jendela browser memengaruhi bingkai konten dan ruang yang tersedia di wilayah konten utama. Bingkai ini beradaptasi berdasarkan titik henti dan perilaku responsif yang sesuai dari setiap komponen. Pelajari lebih lanjut di Membuat matriks titik henti.
Wilayah konten secara opsional dapat berisi beberapa sub-wilayah yang tersedia untuk penempatan elemen yang konsisten, seperti header halaman, panel samping sebaris, atau panel yang melapisi konten.
Mengikuti bahasa desain yang konsisten dengan skema warna, tipografi, dan struktur tata letak membantu pengguna dengan cepat mengidentifikasi dan berinteraksi dengan berbagai elemen tanpa kebingungan. Semakin konsisten pola bingkai aplikasi digunakan di semua aplikasi bisnis internal, semakin kuat ingatan atau model mental pengguna. Menyelaraskan dengan standar industri atau pola platform umum semakin meningkatkan efek ini.
Setelah bingkai aplikasi ditentukan, tata letak setiap layar berada di dalam area konten bingkai aplikasi.
Gunakan wilayah konten dengan cermat
Pengguna mendambakan pengalaman tanpa batas di mana informasi mudah diakses, teks mudah dibaca, dan estetika meningkatkan daripada menghambat kegunaan. Prioritaskan visibilitas awal informasi penting, pastikan keterbacaan di seluruh kolom, dan selaraskan elemen desain untuk daya tarik estetika.
Pastikan informasi penting segera terlihat saat membuka layar tanpa perlu menggulir. Prioritaskan tampilan informasi penting seperti opsi navigasi, konten penting, dan item yang dapat ditindaklanjuti di dekat bagian atas layar. Mencapai keseimbangan antara menampilkan item yang cukup dan memberikan informasi terperinci untuk setiap item adalah tantangan yang konstan. Sebaliknya, meskipun tergoda untuk memberikan semua informasi yang mungkin dalam tampilan awal, terlalu banyak informasi berisiko membanjiri pengguna dan melemahkan signifikansi elemen kunci. Pertimbangkan untuk menggunakan ringkasan atau pratinjau ringkas yang menawarkan sekilas tentang konten yang lebih rinci, menarik pengguna untuk menggali lebih dalam. Dasbor dioptimalkan untuk melayani tujuan ini untuk memvisualisasikan data dalam jumlah besar.
Gabungkan beberapa kolom, bagian, atau pengelompokan untuk mengatur konten secara logis dan memaksimalkan ruang. Berikan perhatian yang cermat pada lebar kolom, pastikan teks tetap dapat dibaca tanpa ketegangan yang berlebihan. Hindari kolom yang terlalu sempit yang memaksa pengguna untuk terus-menerus menggulir secara horizontal, mengganggu alur interaksi. Sebaliknya, kolom yang terlalu lebar dapat menghambat keterbacaan, mengharuskan pengguna untuk melacak garis melintasi jarak yang jauh. Berusahalah untuk keseimbangan yang mengakomodasi bacaan yang nyaman sambil memanfaatkan ruang yang tersedia secara efisien.
Ukuran dan posisikan elemen visual dengan tepat untuk menciptakan antarmuka yang menyenangkan dan seimbang secara visual. Sejajarkan teks dengan visual atau judul yang sesuai, pertahankan jarak yang konsisten antar elemen, dan patuhi hierarki berdasarkan kebutuhan pengguna. Pangkas hiasan yang tidak perlu dan alokasikan piksel dengan bijaksana ke elemen yang paling penting. Prioritaskan dan tekankan konten dan elemen navigasi, terutama pada aplikasi atau halaman beranda intensif navigasi, dan hindari ornamen berlebihan yang mengurangi kegunaan.
Kisi yang mendasarinya dapat berguna untuk mengatur elemen secara konsisten. Perilaku kisi yang dipilih harus konsisten di setiap wilayah konten layar di aplikasi dan juga dapat diterapkan di tingkat komponen, seperti kartu atau panel samping. Jenis tata letak kisi yang paling umum digunakan dalam aplikasi web adalah kisi kolom. Perilaku grid yang lancar (atau peregangan) direkomendasikan untuk menerapkan layar responsif.
Gunakan tata letak dan pola pengelompokan yang ditetapkan
Gunakan struktur dan pengaturan yang umum diakui untuk mengatur konten dan elemen dalam antarmuka pengguna. Tata letak dan pola ini telah disempurnakan dan terbukti efektif dari waktu ke waktu, membuatnya akrab dan intuitif bagi pengguna sekaligus memudahkan untuk menerapkan pola adaptif. Setelah skenario dan elemen inti diidentifikasi, petakan masing-masing ke tata letak yang ditetapkan yang memberikan interaksi terbaik. Prioritaskan konten dan fitur yang penting untuk penyelesaian tugas. Tentukan elemen mana yang harus selalu terlihat dan dapat diakses di layar dan mana yang dapat disembunyikan atau diakses melalui menu atau tindakan lain.
Daftar berikut, meskipun tidak lengkap, menjelaskan tata letak mapan yang biasa digunakan untuk aplikasi bisnis atau produktivitas. Semua dapat ditempatkan dalam wilayah konten utama.
Layar pendaratan/Beranda
Layar landing atau beranda berfungsi sebagai titik masuk ke aplikasi, memberi pengguna gambaran umum tentang penawaran atau fitur aplikasi. Ini biasanya bertujuan untuk menarik perhatian pengunjung dan mendorong mengambil tindakan tertentu, seperti menyelesaikan tugas pertama kali atau menjelajahi konten lebih lanjut. Ini sering berisi gambar pahlawan dan opsi navigasi yang bersih.
Ini ideal untuk menyambut pengguna, menawarkan akses cepat ke fungsionalitas utama, opsi navigasi, atau ajakan bertindak, dan mengatur nada untuk pengalaman aplikasi. Prioritaskan kejelasan, kesederhanaan, dan navigasi intuitif untuk memandu pengguna secara efektif.
Dasbor
Dasbor adalah hub terpusat dalam aplikasi yang menyajikan ikhtisar komprehensif data atau informasi yang relevan kepada pengguna. Ini sering kali terdiri dari widget atau modul yang dapat disesuaikan, memungkinkan pengguna untuk memantau metrik tertentu atau melakukan tindakan.
Dasbor cocok untuk aplikasi dengan kumpulan data kompleks atau fungsionalitas multifaset, memungkinkan pengguna untuk melacak kemajuan, menganalisis tren, dan membuat keputusan yang tepat secara sekilas. Mereka sangat berguna dalam platform analitik, alat manajemen proyek, dan aplikasi manajemen keuangan.
Formulir
Formulir adalah tata letak terstruktur yang memfasilitasi input data dari pengguna, biasanya terdiri dari bidang untuk memasukkan berbagai jenis informasi seperti teks, angka, tanggal, dan pilihan. Formulir sangat penting untuk mengumpulkan masukan pengguna, memproses transaksi, dan memfasilitasi interaksi dalam aplikasi.
Mereka biasanya digunakan dalam alur pendaftaran, proses checkout, tugas entri data, dan skenario apa pun yang memerlukan masukan atau umpan balik pengguna.
Tampilan Entitas/Profil
Tampilan entitas atau profil menyajikan informasi terperinci tentang entitas tertentu, seperti profil pengguna, listingan produk, atau item konten. Ini biasanya mencakup teks deskriptif, elemen multimedia, dan tindakan atau interaksi yang relevan.
Mereka sangat cocok untuk menampilkan informasi terperinci tentang item dalam aplikasi. Mereka memberi pengguna wawasan mendalam, memfasilitasi pengambilan keputusan, dan mendukung keterlibatan dengan entitas tertentu seperti profil pengguna di aplikasi jejaring sosial atau daftar produk di platform e-niaga.
Halaman daftar
Daftar atau tabel menampilkan kumpulan item atau entitas dalam format terstruktur, sering disajikan dalam tata letak linier atau kisi. Ini biasanya mencakup ringkasan singkat atau pratinjau setiap item, bersama dengan kontrol navigasi untuk menjelajah atau memfilter.
Halaman daftar efektif untuk menyajikan kumpulan besar konten atau data dalam format yang mudah dicerna, memungkinkan pengguna untuk memindai, mencari, dan menavigasi secara efisien. Jika tindakan pada baris tertentu diaktifkan, prosesnya harus jelas. Halaman daftar biasanya digunakan dalam sistem manajemen konten, daftar direktori, hasil pencarian, dan umpan berita.
Ulasan mini (layar terpisah)
Tinjauan mini atau layar terpisah membagi antarmuka menjadi dua bagian berbeda, dengan daftar ditampilkan di sisi kiri dan tampilan item di sisi kanan. Daftar biasanya berisi kumpulan item, sedangkan tampilan item memberikan informasi terperinci tentang item yang dipilih dalam daftar.
Tata letak ini sangat efektif dalam skenario di mana pengguna perlu menelusuri daftar item dengan cepat dan melihat informasi terperinci tentang setiap item secara bersamaan, seperti saat melakukan operasi massal. Katalog produk, sistem manajemen dokumen, klien email atau komunikasi, dan alat manajemen tugas (misalnya, penampil kueri Azure Dev Ops) adalah skenario yang biasanya sesuai dengan pola ini.
Wizard
Wizard memandu pengguna melalui serangkaian langkah atau tugas berurutan, biasanya secara linier, untuk menyelesaikan proses yang kompleks atau mencapai tujuan tertentu. Ini sering kali mencakup indikator kemajuan, petunjuk, dan pemeriksaan validasi. Wizard bermanfaat untuk menyederhanakan proses yang kompleks, mengurangi kelebihan kognitif, dan memandu pengguna melalui tugas atau alur kerja yang tidak dikenal. Mereka biasanya digunakan dalam alur orientasi, proses penyiapan, formulir multi-langkah, dan interaksi berbasis tugas seperti mengonfigurasi pengaturan atau transaksi yang kompleks.
Sesuaikan dan bangun tata letak standar agar sesuai dengan kebutuhan tertentu. Proses ini mungkin termasuk menambahkan atau menghapus elemen, menyesuaikan ukuran dan posisi elemen, dan menerapkan gaya agar sesuai dengan identitas merek atau pedoman desain visual. Bereksperimenlah dengan berbagai konfigurasi dan variasi tata letak standar untuk menemukan pengaturan yang paling efektif untuk konten dan pengalaman pengguna secara keseluruhan.
Desain tata letak untuk semua perangkat
Tata letak adalah puncak dari aturan yang ditentukan dan organisasi konten yang disengaja. Membawa konten Anda ke dalam struktur yang bijaksana adalah kuncinya, tetapi membuat semuanya mengalir bersama dengan hierarki yang jelas di seluruh platform dan ukuran layar memerlukan logika penskalaan. Secara individual, desain adaptif, dan responsif masing-masing dapat mengatasi tantangan ini. Dalam beberapa kasus, perpaduan desain adaptif dan responsif adalah pilihan yang tepat.
Desain responsif hanya menggunakan satu tata letak, di mana kontennya lancar dan dapat beradaptasi dengan perubahan ukuran format. Teknik desain ini menggunakan kueri media untuk memeriksa karakteristik perangkat tertentu dan merender konten yang sesuai. Desain responsif memungkinkan Anda membuat fitur sekali dan membuatnya berfungsi secara efektif di semua ukuran layar.
Tata letak adaptif berubah sepenuhnya berdasarkan format yang disajikan. Desain adaptif memiliki beberapa ukuran tata letak tetap dan memicu browser untuk memuat tata letak tertentu berdasarkan ruang yang tersedia. Situs web yang dibuat dengan desain adaptif menggunakan kueri media untuk mendeteksi titik henti, mirip dengan desain responsif. Mereka juga menggunakan markup tambahan berdasarkan kemampuan perangkat. Proses ini dikenal sebagai "peningkatan progresif".
Reposisi
Ubah posisi elemen halaman.
Jaga agar konten Anda tetap teratur, mudah dibaca, dan seimbang dengan mengoptimalkan komposisi seiring bertambahnya ukuran jendela. Misalnya, elemen yang ditumpuk secara vertikal pada area pandang seluler dapat diposisikan ulang secara horizontal pada area pandang yang lebih besar. Perubahan ini mengikuti urutan pembacaan kiri ke kanan yang alami, menciptakan keseimbangan dalam desain, dan mempertahankan fokus visual pada elemen kunci pada halaman.
Ubah ukuran
Sesuaikan ukuran dan margin elemen halaman.
Ubah ukuran elemen halaman untuk mengoptimalkan pengalaman pengguna yang kaya dengan menampilkan lebih banyak konten di bagian atas jendela, mengurangi kebutuhan untuk menggulir vertikal. Sesuaikan margin halaman untuk menambahkan ruang putih dan keseimbangan ke tata letak, yang memungkinkan konten bernafas dan meningkatkan daya tarik visual desain. Misalnya, komponen pahlawan mungkin membentang ke lebar penuh jendela untuk menampilkan lebih banyak gambar latar belakang. Konten di bawah gambar mungkin diperluas, tetapi gunakan margin yang berbeda untuk menambahkan variasi dalam tata letak dan membantu menentukan hierarki visual.
Mengalir kembali
Optimalkan alur elemen halaman.
Sesuaikan elemen halaman untuk memastikan bahwa elemen tersebut ditampilkan sepenuhnya, dengan mempertimbangkan ukuran dan orientasi jendela, dengan mengatur ulang konten. Misalnya, satu kolom konten di jendela yang lebih kecil dapat dialihkan pada jendela yang lebih besar untuk menampilkan dua kolom teks. Teknik ini memungkinkan lebih banyak konten ditampilkan "di atas lipatan".
Menampilkan/menyembunyikan
Optimalkan konten untuk ukuran jendela dan orientasinya.
Tampilkan atau sembunyikan elemen halaman untuk mengoptimalkan konten untuk ukuran jendela dan orientasinya. Teknik responsif ini menyesuaikan jumlah informasi dengan konteks menonton. Misalnya, kategori yang muncul di layar kecil mungkin menampilkan metadata terbatas, seperti gambar, judul, dan tautan, sehingga informasi lain terlihat untuk membantu pengguna fokus. Pada layar yang lebih besar, kategori dapat menampilkan metadata tambahan seperti persona, tanggal, dan deskripsi singkat, sambil tetap sesuai dengan area pandang.
Arsitektur ulang
Fork atau ciutkan elemen dan konten halaman untuk mempertahankan fokus pada informasi dan tindakan penting.
Pendekatan ini mirip dengan mengikuti praktik "pengungkapan progresif" dalam desain Anda tetapi untuk ukuran dan orientasi jendela yang berbeda. Misalnya, memperluas jendela memungkinkan daftar item ditampilkan di sebelah detail. Tautan visual antar konten ini memungkinkan pengguna untuk dengan mudah memilih item lain. Pada layar yang lebih kecil, fokusnya tetap pada tampilan informasi penting.
Membuat matriks titik henti
Matriks titik henti berfungsi sebagai penggambaran grafis dari perilaku responsif atau adaptif dari desain aplikasi di berbagai ukuran dan orientasi layar. Ini biasanya menyajikan kisi atau tata letak terstruktur yang merinci respons desain di berbagai titik henti. Setiap segmen sesuai dengan lebar layar yang berbeda, menawarkan wawasan tentang struktur, tata letak, dan fungsionalitas desain. Matriks titik henti mencakup pertimbangan lebar layar, orientasi area pandang, elemen desain, struktur tata letak, presentasi konten, navigasi, media, dan komponen interaktif, untuk mengilustrasikan bagaimana desain situs web atau aplikasi merespons di berbagai ukuran dan orientasi layar. Pendekatan ini tidak hanya membantu menyelesaikan desain setiap layar, tetapi juga membuat implementasi lebih mudah ketika perubahan properti komponen utama dilacak secara eksplisit dan dikomunikasikan dengan baik.
Power Platform Fasilitasi
Tata letak formulir aplikasi berbasis model dikonfigurasi menggunakan Power Apps Studio. Desainer formulir mengizinkan pembuat untuk menambahkan elemen ke struktur kisi, yang memungkinkan halaman formulir secara inheren responsif. Komponen kustom yang disematkan seperti halaman kustom, komponen kanvas tertanam, dan Power Apps komponen kode Kerangka Kerja Komponen perlu menggabungkan perilaku responsif dalam implementasinya. Misalnya, halaman kustom harus menerapkan perilaku responsif dengan cara yang sama seperti aplikasi kanvas murni agar berfungsi dengan benar.
Aplikasi kanvas memerlukan konfigurasi eksplisit untuk setiap komponen untuk menerapkan perilaku responsif, memungkinkan lebih banyak kontrol atas pengalaman. Ukuran layar ditentukan dalam definisi aplikasi, yang dapat direferensikan untuk menentukan posisi, perilaku, visibilitas, dan properti relevan lainnya.