Nota
Capaian ke halaman ini memerlukan kebenaran. Anda boleh cuba mendaftar masuk atau menukar direktori.
Capaian ke halaman ini memerlukan kebenaran. Anda boleh cuba menukar direktori.
Digunakan untuk cadangan senarai semak Pengoptimuman Pengalaman Seni Bina yang Baik ini Power Platform :
| XO:06 | Kekalkan reka letak yang boleh digunakan dan menarik secara visual merentas saiz dan resolusi skrin. Gunakan teknik penyesuaian untuk memaparkan kandungan secara dinamik dalam pelbagai cara. |
|---|
Panduan ini menerangkan cadangan untuk mereka bentuk reka letak skrin yang mudah dinavigasi dan disesuaikan dengan lancar merentas pelbagai peranti. Pendekatan ini memastikan pengguna mempunyai pengalaman tontonan yang konsisten dan optimum tanpa mengira peranti yang mereka gunakan.
Takrif
| Istilah | Takrif |
|---|---|
| Pelabuhan pandangan | Bahagian antara muka digital yang boleh dilihat, seperti penyemak imbas web atau aplikasi mudah alih, di mana kandungan dipaparkan. Julat viewport sering dikaitkan dengan kelas peranti (mudah alih, tablet dan desktop) berdasarkan dimensi dan resolusi skrin. |
| Titik putus | Nilai piksel khusus yang mentakrifkan julat viewport yang digunakan untuk menentukan tingkah laku reka letak penyesuaian. |
Strategi reka bentuk utama
Susun atur responsif memberikan pengalaman pengguna yang fleksibel dan cekap merentas saiz tetingkap yang berbeza. Mereka menyesuaikan diri dengan menskalakan kandungan, menyusun semula elemen dan memaparkan teks dan imej secara terpilih. Reka letak yang bertanggungjawab memenuhi keperluan pengguna tanpa mengira saiz skrin mereka.
Tentukan bingkai apl yang konsisten
Bingkai aplikasi terdiri daripada satu set kawalan yang tersedia secara konsisten pada setiap skrin. Ia terdiri daripada tiga subkomponen utama: pengepala, navigasi dan kawasan kandungan. Apl ringkas mempunyai fleksibiliti untuk menggunakan komponen pengepala, manakala apl yang lebih canggih selalunya menggunakan navigasi sisi untuk mendayakan berbilang halaman. Subkomponen boleh disesuaikan. Contohnya, anda boleh menggabungkan carian global dalam pengepala atau kumpulan item dalam navigasi sisi untuk memenuhi keperluan apl anda.
Tiga subkomponen utama bingkai apl ialah:
Pengepala ialah komponen teras yang direka untuk menjadi sebahagian daripada setiap aplikasi dalaman. Ia terdiri daripada sub-komponen yang memberi pengguna akses kepada fungsi seluruh sistem, membantu mengorientasikan mereka kepada UI dan memberikan konsistensi merentas pengalaman. Ia muncul di bahagian atas bingkai apl dan harus berterusan merentas semua halaman apl. Ia boleh mengehoskan arahan global secara pilihan, seperti carian, tetapan, pemberitahuan, maklum balas, profil atau bantuan. Nama apl hendaklah sentiasa dipaparkan, dan sebaik-baiknya juga berfungsi sebagai pautan yang boleh diklik ke halaman utama atau pendaratan. Pengepala hendaklah responsif, dengan arahan bergerak ke kawalan limpahan dalam viewport yang 600 piksel dan ke bawah. Lebar input carian juga responsif pada 1023 piksel dan ke bawah.
Navigasi ialah sistem kawalan yang bekerjasama untuk membantu pengguna mencari maklumat dan menyelesaikan tugas. Ia membantu pengguna melompat dari bahagian ke bahagian aplikasi. Secara hierarki, ia tidak dilampirkan pada mana-mana halaman atau bahagian, tetapi wujud di atas semua kandungan lain. Ia sentiasa ada, dan boleh diminimumkan kepada keadaan runtuh (juga dipanggil keadaan rel) untuk mengosongkan ruang tambahan untuk kandungan halaman. Pada saiz tetingkap yang lebih kecil, ia boleh diminimumkan ke dalam menu flyout. Bentuk navigasi yang paling biasa termasuk navigasi atas dan navigasi sisi. Jangan gunakan kedua-duanya secara serentak.
Rantau kandungan mengandungi fokus skrin. Saiz tetingkap penyemak imbas mempengaruhi bingkai kandungan dan ruang yang tersedia di rantau kandungan utama. Bingkai ini menyesuaikan diri berdasarkan titik putus dan tingkah laku responsif yang sepadan bagi setiap komponen. Ketahui lebih lanjut dalam Cipta matriks titik putus.
Rantau kandungan boleh mengandungi beberapa subrantau yang tersedia untuk peletakan elemen yang konsisten, seperti pengepala halaman, anak tetingkap sisi sebaris atau panel yang menindih kandungan.
Mematuhi bahasa reka bentuk yang konsisten dengan skema warna, tipografi dan struktur susun atur membantu pengguna mengenal pasti dan berinteraksi dengan pelbagai elemen dengan cepat tanpa kekeliruan. Semakin konsisten corak bingkai apl digunakan merentas semua aplikasi perniagaan dalaman, semakin kuat ingatan atau model mental pengguna. Selaras dengan piawaian industri atau corak platform biasa meningkatkan lagi kesan ini.
Selepas bingkai apl ditentukan, reka letak setiap skrin berada dalam kawasan kandungan bingkai apl.
Gunakan rantau kandungan dengan teliti
Pengguna mendambakan pengalaman yang lancar di mana maklumat mudah diakses, teks mudah dibaca dan estetika meningkatkan dan bukannya menghalang kebolehgunaan. Utamakan keterlihatan awal maklumat penting, pastikan kebolehbacaan merentas lajur dan selaraskan elemen reka bentuk untuk daya tarikan estetik.
Pastikan maklumat penting dapat dilihat dengan serta-merta apabila membuka skrin tanpa perlu menatal. Utamakan paparan maklumat penting seperti pilihan navigasi, kandungan penting dan item yang boleh diambil tindakan berhampiran bahagian atas skrin. Mencapai keseimbangan antara memaparkan item yang mencukupi dan memberikan maklumat terperinci untuk setiap item adalah cabaran yang berterusan. Sebaliknya, walaupun ia boleh menggoda untuk memberikan semua maklumat yang mungkin dalam paparan awal, terlalu banyak maklumat berisiko membebankan pengguna dan mencairkan kepentingan elemen utama. Pertimbangkan untuk menggunakan ringkasan ringkas atau pratonton yang menawarkan gambaran sekilas tentang kandungan yang lebih terperinci, menarik pengguna untuk menyelidiki lebih mendalam. Papan pemuka dioptimumkan untuk memenuhi tujuan ini untuk menggambarkan sejumlah besar data.
Gabungkan berbilang lajur, bahagian atau kumpulan untuk menyusun kandungan secara logik dan memaksimumkan ruang. Beri perhatian yang teliti kepada lebar lajur, memastikan teks kekal boleh dibaca tanpa tekanan yang berlebihan. Elakkan lajur yang terlalu sempit yang memaksa pengguna untuk sentiasa menatal secara mendatar, mengganggu aliran interaksi. Sebaliknya, lajur yang terlalu lebar boleh menghalang kebolehbacaan, memerlukan pengguna menjejaki garisan merentasi jarak jauh. Berusaha untuk keseimbangan yang menampung bacaan yang selesa sambil menggunakan ruang yang ada dengan cekap.
Saiz dan kedudukan elemen visual dengan sewajarnya untuk mencipta antara muka yang menyenangkan dan seimbang secara visual. Selaraskan kapsyen dengan visual atau tajuk yang sepadan, kekalkan jarak yang konsisten antara elemen dan patuhi hierarki berdasarkan keperluan pengguna. Potong hiasan yang tidak perlu dan peruntukkan piksel dengan bijak kepada elemen yang paling penting. Utamakan dan tekankan kandungan dan elemen navigasi, terutamanya pada apl intensif navigasi atau halaman utama, dan elakkan hiasan berlebihan yang menjejaskan kebolehgunaan.
Grid asas boleh berguna untuk menyusun elemen secara konsisten. Tingkah laku grid yang dipilih hendaklah konsisten merentas setiap kawasan kandungan skrin dalam apl dan juga boleh digunakan pada peringkat komponen, seperti kad atau anak tetingkap sisi. Jenis susun atur grid yang paling biasa digunakan dalam aplikasi web ialah grid lajur. Tingkah laku grid cecair (atau regangan) disyorkan untuk melaksanakan skrin responsif.
Gunakan susun atur dan corak kumpulan yang ditetapkan
Gunakan struktur dan susunan yang diiktiraf biasa untuk menyusun kandungan dan elemen dalam antara muka pengguna. Susun atur dan corak ini telah diperhalusi dan terbukti berkesan dari semasa ke semasa, menjadikannya biasa dan intuitif kepada pengguna sambil memudahkan untuk melaksanakan corak penyesuaian. Setelah senario dan elemen teras dikenal pasti, petakan setiap satu kepada susun atur yang ditetapkan yang memberikan interaksi terbaik. Utamakan kandungan dan ciri penting untuk penyiapan tugas. Tentukan elemen mana yang hendaklah sentiasa kelihatan dan boleh diakses pada skrin dan yang boleh disembunyikan atau diakses melalui menu atau tindakan lain.
Senarai berikut, walaupun tidak lengkap, menerangkan reka letak yang ditetapkan yang biasa digunakan untuk aplikasi perniagaan atau produktiviti. Semua boleh diletakkan dalam rantau kandungan utama.
Skrin pendaratan/Laman Utama
Skrin pendaratan atau utama berfungsi sebagai titik masuk kepada aplikasi, memberikan pengguna gambaran keseluruhan tawaran atau ciri apl. Ia biasanya bertujuan untuk menarik perhatian pelawat dan menggalakkan mengambil tindakan tertentu, seperti menyelesaikan tugasan kali pertama atau meneroka kandungan selanjutnya. Ia selalunya mengandungi imej wira dan pilihan navigasi yang bersih.
Ia sesuai untuk mengalu-alukan pengguna, menawarkan akses pantas kepada fungsi utama, pilihan navigasi atau seruan tindak, dan menetapkan nada untuk pengalaman apl. Utamakan kejelasan, kesederhanaan dan navigasi intuitif untuk membimbing pengguna dengan berkesan.
Papan pemuka
Papan pemuka ialah hab berpusat dalam aplikasi yang membentangkan pengguna gambaran keseluruhan komprehensif tentang data atau maklumat yang berkaitan. Ia selalunya terdiri daripada widget atau modul yang boleh disesuaikan, membolehkan pengguna memantau metrik tertentu atau melakukan tindakan.
Papan pemuka sesuai untuk aplikasi dengan set data yang kompleks atau fungsi pelbagai aspek, membolehkan pengguna menjejaki kemajuan, menganalisis arah aliran dan membuat keputusan termaklum sepintas lalu. Ia amat berguna dalam platform analitik, alat pengurusan projek dan apl pengurusan kewangan.
Borang
Borang ialah reka letak berstruktur yang memudahkan input data daripada pengguna, biasanya terdiri daripada medan untuk memasukkan pelbagai jenis maklumat seperti teks, nombor, tarikh dan pilihan. Borang adalah penting untuk mengumpul input pengguna, memproses transaksi dan memudahkan interaksi dalam aplikasi.
Ia biasanya digunakan dalam aliran pendaftaran, proses pembayaran, tugas kemasukan data dan sebarang senario yang memerlukan input atau maklum balas pengguna.
Paparan Entiti/Profil
Pandangan entiti atau profil membentangkan maklumat terperinci tentang entiti tertentu, seperti profil pengguna, penyenaraian produk atau item kandungan. Ia biasanya termasuk teks deskriptif, elemen multimedia dan tindakan atau interaksi yang berkaitan.
Ia sangat sesuai untuk mempamerkan maklumat terperinci tentang item dalam aplikasi. Mereka menyediakan pengguna cerapan yang mendalam, memudahkan membuat keputusan dan menyokong penglibatan dengan entiti tertentu seperti profil pengguna dalam apl rangkaian sosial atau penyenaraian produk dalam platform e-dagang.
Halaman senarai
Senarai atau jadual memaparkan koleksi item atau entiti dalam format berstruktur, selalunya dibentangkan dalam reka letak linear atau grid. Ia biasanya termasuk ringkasan ringkas atau pratonton setiap item, bersama-sama dengan kawalan navigasi untuk menyemak imbas atau menapis.
Halaman senarai berkesan untuk mempersembahkan set kandungan atau data yang besar dalam format yang boleh dihadam, membolehkan pengguna mengimbas, mencari dan menavigasi dengan cekap. Jika tindakan pada baris tertentu didayakan, prosesnya hendaklah jelas. Halaman senarai biasanya digunakan dalam sistem pengurusan kandungan, penyenaraian direktori, hasil carian dan suapan berita.
Ulasan mini (skrin belah)
Semakan mini atau skrin belah membahagikan antara muka kepada dua bahagian yang berbeza, dengan senarai dipaparkan di sebelah kiri dan paparan item di sebelah kanan. Senarai biasanya mengandungi koleksi item, manakala paparan item menyediakan maklumat terperinci tentang item yang dipilih dalam senarai.
Reka letak ini amat berkesan dalam senario di mana pengguna perlu menyemak imbas senarai item dengan cepat dan melihat maklumat terperinci tentang setiap item secara serentak, seperti semasa melakukan operasi pukal. Katalog produk, sistem pengurusan dokumen, klien e-mel atau komunikasi dan alat pengurusan tugas (contohnya, pemapar pertanyaan Azure Dev Ops) ialah senario yang biasanya sesuai dengan corak ini.
Bestari
Ahli sihir membimbing pengguna melalui satu siri langkah atau tugas berjujukan, biasanya dalam fesyen linear, untuk melengkapkan proses yang kompleks atau mencapai matlamat tertentu. Ia selalunya termasuk penunjuk kemajuan, gesaan dan semakan pengesahan. Wizard berfaedah untuk memudahkan proses yang kompleks, mengurangkan beban kognitif dan membimbing pengguna melalui tugas atau aliran kerja yang tidak dikenali. Ia biasanya digunakan dalam aliran onboarding, proses persediaan, borang berbilang langkah dan interaksi berasaskan tugas seperti mengkonfigurasi tetapan atau transaksi yang kompleks.
Sesuaikan dan bina susun atur standard untuk memenuhi keperluan tertentu. Proses ini mungkin termasuk menambah atau mengalih keluar elemen, melaraskan saiz dan kedudukan elemen, dan menggunakan penggayaan untuk dipadankan dengan identiti jenama atau garis panduan reka bentuk visual. Bereksperimen dengan konfigurasi dan variasi reka letak standard yang berbeza untuk mencari susunan yang paling berkesan untuk kandungan dan pengalaman pengguna keseluruhan.
Reka bentuk susun atur untuk semua peranti
Susun atur ialah kemuncak peraturan yang ditentukan dan organisasi kandungan yang disengajakan. Membawa kandungan anda ke dalam struktur yang bijaksana adalah kunci, tetapi menjadikan semuanya mengalir bersama-sama dengan hierarki yang jelas merentas platform dan saiz skrin memerlukan logik penskalaan. Secara individu, reka bentuk adaptif dan responsif masing-masing boleh menangani cabaran ini. Dalam sesetengah kes, gabungan reka bentuk adaptif dan responsif adalah pilihan yang tepat.
Reka bentuk responsif hanya menggunakan satu reka letak, di mana kandungannya lancar dan boleh menyesuaikan diri dengan perubahan saiz format. Teknik reka bentuk ini menggunakan pertanyaan media untuk memeriksa ciri peranti tertentu dan memaparkan kandungan dengan sewajarnya. Reka bentuk responsif membolehkan anda membina ciri sekali dan menjadikannya berfungsi dengan berkesan merentas semua saiz skrin.
Susun atur adaptif berubah sepenuhnya berdasarkan format yang dibentangkan. Reka bentuk adaptif mempunyai berbilang saiz reka letak tetap dan mencetuskan penyemak imbas untuk memuatkan reka letak tertentu berdasarkan ruang yang tersedia. Tapak web yang dibina dengan reka bentuk adaptif menggunakan pertanyaan media untuk mengesan titik putus, serupa dengan reka bentuk responsif. Mereka juga menggunakan markup tambahan berdasarkan keupayaan peranti. Proses ini dikenali sebagai "peningkatan progresif."
Kedudukan semula
Ubah kedudukan elemen halaman.
Pastikan kandungan anda teratur, boleh dibaca dan seimbang dengan mengoptimumkan komposisi apabila saiz tetingkap meningkat. Sebagai contoh, elemen disusun secara menegak pada viewport mudah alih boleh diletakkan semula secara mendatar pada viewport yang lebih besar. Perubahan ini mengikut susunan bacaan kiri ke kanan semula jadi, mewujudkan keseimbangan dalam reka bentuk dan mengekalkan fokus visual pada elemen utama pada halaman.
Saiz Semula
Laraskan saiz dan margin elemen halaman.
Ubah saiz elemen halaman untuk mengoptimumkan pengalaman pengguna yang kaya dengan memaparkan lebih banyak kandungan di bahagian atas tetingkap, mengurangkan keperluan untuk menatal menegak. Laraskan margin halaman untuk menambah ruang putih dan keseimbangan pada reka letak, yang membolehkan kandungan bernafas dan meningkatkan daya tarikan visual reka bentuk. Sebagai contoh, komponen wira mungkin meregang ke lebar penuh tetingkap untuk menunjukkan lebih banyak imej latar belakang. Kandungan di bawah imej mungkin dikembangkan tetapi gunakan margin yang berbeza untuk menambah kepelbagaian dalam reka letak dan membantu mentakrifkan hierarki visual.
Aliran semula
Optimumkan aliran elemen halaman.
Laraskan elemen halaman untuk memastikan ia dipaparkan sepenuhnya, dengan mengambil kira saiz dan orientasi tetingkap, dengan menyusun semula kandungan. Contohnya, satu lajur kandungan dalam tetingkap yang lebih kecil boleh disusun semula pada tetingkap yang lebih besar untuk memaparkan dua lajur teks. Teknik ini membolehkan lebih banyak kandungan dipaparkan "di atas lipatan."
Tunjukkan/sembunyikan
Optimumkan kandungan untuk saiz tetingkap dan orientasinya.
Tunjukkan atau sembunyikan elemen halaman untuk mengoptimumkan kandungan untuk saiz tetingkap dan orientasinya. Teknik responsif ini menyesuaikan jumlah maklumat dengan konteks tontonan. Sebagai contoh, kategori yang muncul pada skrin kecil mungkin memaparkan metadata terhad, seperti imej, tajuk dan pautan, supaya maklumat lain kelihatan untuk membantu fokus pengguna. Pada skrin yang lebih besar, kategori boleh memaparkan metadata tambahan seperti persona, tarikh dan perihalan ringkas, sambil masih sesuai dalam viewport.
Arkitek Semula
Garpu atau runtuhkan elemen dan kandungan halaman untuk mengekalkan tumpuan pada maklumat dan tindakan penting.
Pendekatan ini serupa dengan mengikuti amalan "pendedahan progresif" dalam reka bentuk anda tetapi untuk saiz dan orientasi tetingkap yang berbeza. Sebagai contoh, mengembangkan tetingkap membolehkan senarai item dipaparkan di sebelah butiran. Pautan visual antara kandungan ini membolehkan pengguna memilih item lain dengan mudah. Pada skrin yang lebih kecil, tumpuan kekal pada memaparkan maklumat penting.
Cipta matriks titik putus
Matriks titik putus berfungsi sebagai gambaran grafik tingkah laku responsif atau penyesuaian reka bentuk aplikasi merentas saiz dan orientasi skrin yang berbeza. Ia biasanya membentangkan grid atau susun atur berstruktur yang memperincikan tindak balas reka bentuk pada pelbagai titik putus. Setiap segmen sepadan dengan lebar skrin yang berbeza, menawarkan cerapan tentang struktur, susun atur dan fungsi reka bentuk. Matriks titik putus merangkumi pertimbangan lebar skrin, orientasi viewport, elemen reka bentuk, struktur susun atur, persembahan kandungan, navigasi, media dan komponen interaktif, untuk menggambarkan cara reka bentuk tapak web atau apl bertindak balas merentas saiz dan orientasi skrin yang berbeza. Pendekatan ini bukan sahaja membantu memuktamadkan reka bentuk setiap skrin, tetapi juga memudahkan pelaksanaan apabila perubahan sifat komponen utama dijejaki secara eksplisit dan disampaikan dengan baik.
Power Platform Kemudahan
Reka letak borang apl dipacu model dikonfigurasikan menggunakan Power Apps Studio. Pereka bentuk borang membenarkan pembuat menambah elemen pada struktur grid, yang membolehkan halaman borang menjadi responsif secara semula jadi. Komponen tersuai terbenam seperti halaman tersuai, komponen kanvas terbenam dan Power Apps komponen kod Rangka Kerja Komponen perlu menggabungkan tingkah laku responsif dalam pelaksanaannya. Sebagai contoh, halaman tersuai mesti melaksanakan tingkah laku responsif dengan cara yang sama seperti apl kanvas tulen untuk berfungsi dengan betul.
Apl kanvas memerlukan konfigurasi eksplisit untuk setiap komponen untuk melaksanakan tingkah laku responsif, membolehkan lebih kawalan ke atas pengalaman. Saiz skrin ditentukan dalam definisi apl, yang boleh dirujuk untuk menentukan kedudukan, tingkah laku, keterlihatan dan sifat lain yang berkaitan.