Cadangan untuk mengikuti piawaian reka bentuk

2024-10-16

Digunakan untuk cadangan senarai semak Pengoptimuman Pengalaman Seni Bina yang Baik ini Power Platform :

XO:02	Ikut piawaian, konvensyen dan garis panduan yang ditetapkan. Gunakan corak reka bentuk biasa. Kekalkan konsistensi dalam elemen reka bentuk, istilah dan interaksi merentas antara muka. Gunakan corak dan piawaian yang konsisten untuk membimbing pengguna melalui antara muka dan mencipta pengalaman pengguna yang padu.

Panduan ini menerangkan cadangan untuk mewujudkan piawaian reka bentuk, konvensyen dan amalan terbaik untuk membangunkan antara muka pengguna yang meningkatkan pengalaman pengguna dan kejayaan keseluruhan aplikasi. Sisihan daripada piawaian harus dipertimbangkan dengan teliti untuk mengelakkan menjejaskan pengalaman pengguna dan kebolehgunaan aplikasi secara negatif.

Strategi reka bentuk utama

Mengikuti piawaian reka bentuk membantu mengurangkan usaha membuat keputusan dalam proses reka bentuk dengan mengenal pasti aspek penting reka bentuk. Memahami piawaian memperincikan dan menyelaraskan keupayaan pasukan untuk mencapai antara muka pengguna yang direka bentuk dengan baik. Pendekatan ini menghasilkan kitaran pembangunan yang lebih pantas, kebolehgunaan yang lebih baik dan kepuasan pengguna yang dipertingkatkan, akhirnya membawa kepada peningkatan produktiviti dan keberkesanan untuk sistem perisian dalaman.

Fahami prinsip reka bentuk

Penyelidikan yang meluas ke dalam kognisi manusia memaklumkan pemahaman kita tentang reka bentuk visual dan interaksi dengan produk digital. Pengetahuan ini menyokong banyak amalan dan piawaian terbaik, menyumbang kira-kira 80% daripada produk akhir. Prinsip reka bentuk boleh merapatkan baki 20% jurang kreatif yang tidak dilindungi oleh piawaian. Kebiasaan dengan pengetahuan ini meningkatkan pemahaman pasukan pembangunan tentang pertimbangan reka bentuk semasa perancangan, mengurangkan pergantungan kepada, atau meningkatkan kerjasama dengan, sumber reka bentuk.

Ikuti corak dan metafora biasa

Corak dan metafora sejagat diiktiraf secara meluas dan diharapkan dalam produk digital. Menggabungkan corak ini jika sesuai boleh memudahkan onboarding pengguna dan penggunaan jangka panjang, mengurangkan kos latihan dan sokongan, dan berpotensi mengurangkan keperluan untuk kemas kini atau reka bentuk semula. Amalan ini merangkumi pelbagai aspek reka bentuk, termasuk komposisi susun atur, struktur navigasi, hierarki maklumat dan reka bentuk interaksi.

Mematuhi metafora ikon standard dan warna semantik adalah penting. Ikon harus menggunakan persatuan visual yang ditetapkan untuk menyampaikan fungsi dengan cepat dan berkesan kepada pengguna. Begitu juga, warna semantik, seperti merah untuk ralat atau hijau untuk kejayaan, memberikan maklum balas visual segera yang sejajar dengan jangkaan dan model mental pengguna. Mengikuti konvensyen ini membantu mengurangkan beban kognitif dan meningkatkan kebolehgunaan dengan memupuk rasa keakraban dan keselesaan.

Wujudkan sistem reka bentuk

Sistem reka bentuk ialah koleksi blok binaan berfungsi boleh guna semula yang digunakan untuk membina antara muka pengguna. Ia direka khusus untuk organisasi supaya setiap elemen sejajar dengan piawaian jenama yang ditetapkan. Empat komponen utama sistem reka bentuk ialah token reka bentuk, komponen, perpustakaan corak dan garis panduan.

Token reka bentuk ialah elemen visual asas antara muka pengguna, termasuk aspek seperti warna, tipografi dan jarak. Ia dinyatakan sebagai pembolehubah dalam format standard, memudahkan penciptaan dan penyelenggaraan aplikasi menggunakan sistem reka bentuk. Tanpa mengira reka bentuk tertentu, token reka bentuk menyelaraskan terjemahan reka bentuk ke dalam kod. Sebagai contoh, dengan mentakrifkan token bernama "warna utama" dengan nilai yang ditetapkan, pembangun boleh menyepadukan reka bentuk dengan lancar menggunakan token dan bukannya membenamkan nilai tertentu terus ke dalam kod. Token reka bentuk boleh diselaraskan dengan panduan gaya organisasi dan diuruskan secara berpusat untuk menghasilkan token yang mudah digunakan.

Komponen mewakili unit modular diskret antara muka pengguna. Ia berfungsi sebagai elemen visual untuk memasang antara muka apl. Komponen yang direka dengan baik mempamerkan dua ciri utama: kebolehgunaan semula dan modulariti. Ia harus direka bentuk untuk memastikan ia mengekalkan konsistensi visual merentas berbilang aplikasi dalam ekosistem jenama, mengurangkan keperluan untuk mencipta semula reka bentuk setiap kali. Satu komponen harus berfungsi dengan lancar dalam pelbagai konteks.

Power Apps Menyediakan set komprehensif komponen sejagat asas, seperti butang dan senarai juntai bawah, dan komponen komposit, seperti jadual moden. Gunakan kawalan ini sebanyak mungkin untuk keperluan asas, kemudian pertimbangkan untuk membina komponen komposit di mana jurang wujud untuk corak antara muka pengguna yang boleh diulang.

Komponen komposit hendaklah cukup serba boleh untuk digunakan sedia ada atau dengan sedikit variasi (melalui parameter) merentas konteks apl yang berbeza, tanpa memerlukan pengubahsuaian. Beberapa contoh komponen tersuai termasuk:

Pengepala atau pengaki berjenama syarikat
Komponen halaman sumber bersaiz skrin untuk pengguna memberikan maklum balas dan mendapatkan bantuan IT
Kandungan sejagat seperti notis atau pautan hak cipta

Perpustakaan corak menawarkan satu set corak reka bentuk yang telah ditetapkan untuk digunakan oleh pembuat sebagai titik permulaan untuk membina antara muka pengguna. Corak ini berfungsi sebagai penyelesaian piawai kepada cabaran reka bentuk biasa. Objektif utama perpustakaan corak adalah untuk menawarkan koleksi corak berpusat yang direka dengan baik, membolehkan penciptaan antara muka pengguna yang konsisten dan berkesan. Perpustakaan corak memperkasakan pembangun untuk menggunakan corak tertentu dan mengikut garis panduan yang ditetapkan untuk penggunaan, memastikan koheren dan kecekapan merentas reka bentuk antara muka pengguna.

Garis panduan menawarkan peraturan dan amalan terbaik untuk pasukan projek tentang cara menggunakan komponen dan gaya visual dengan berkesan. Tidak seperti garis panduan gaya, yang memberi tumpuan kepada estetika, garis panduan sistem reka bentuk mentakrifkan tingkah laku fungsional komponen dan jangkaan interaksi pengguna. Sebagai contoh, jika sistem reka bentuk menyediakan set token reka bentuk untuk merujuk warna, garis panduan harus menjelaskan masa untuk menggunakan warna ini dan cara pembangun boleh mengakses warna Power Apps yang sepadan. Untuk komponen, perlu ada dokumentasi tentang penggunaan yang betul, parameter input dan output, dan variasi keadaan yang boleh dijangkakan daripada komponen.

Usaha sistem reka bentuk berpusat juga boleh mengehoskan aset media sejagat seperti logo syarikat dan aset reka bentuk lain dalam repositori untuk membolehkan pembangunan pesat yang meluas.

UI Fluent Microsoft ialah contoh sistem reka bentuk sumber terbuka yang diterima pakai secara meluas. Ia boleh menjadi rujukan yang berkesan untuk banyak keputusan reka bentuk yang dibuat kerana Power Apps semua kawalan moden menggunakan komponen dalam sistem reka bentuk Fluent (2). Sistem reka bentuk seperti Fluent UI adalah hasil daripada sejumlah besar usaha penyelidikan dan pembangunan untuk mencipta komponen untuk memastikan ia memenuhi keperluan pengguna. Ia juga direka bentuk dengan cara yang boleh berada di mana-mana dan mudah digunakan merentas pelbagai produk dan platform digital. Setiap komponen mempunyai garis panduan khusus untuk memastikan aplikasi sejajar dengan pengalaman yang dimaksudkan. Manfaatkan pengetahuan yang disokong penyelidikan dengan menyemak panduan Fluent 2.

Perkongsian untuk mengelakkan pelaksanaan pendua bukan sahaja meningkatkan kecekapan pengeluaran tetapi juga memastikan pengalaman kekal koheren dari semasa ke semasa. Sumbangan kepada elemen yang dikongsi membantu mengekalkan pengalaman segar dan mencerminkan kepakaran dari seluruh organisasi. Pada masa ini, koherensi adalah satu cabaran kerana komponen, sistem, proses dan budaya selalunya tidak dikongsi, tidak menggalakkan koherensi dan menyukarkan sumbangan.

Menjalankan semakan reka bentuk

Akses kepada sumber yang bertujuan untuk membimbing reka bentuk pengalaman pengguna adalah penting untuk memastikan apl memenuhi piawaian UI/UX yang ditetapkan. Pasukan berpusat harus bertujuan untuk membiasakan diri dengan piawaian reka bentuk asas dan amalan terbaik. Walaupun pereka bentuk biasanya berpengetahuan tentang pengalaman pengguna, pengurus projek juga boleh mendapat manfaat daripada mempelajari kemahiran ini untuk menyumbang dengan berkesan kepada pasukan.

Cara paling berkesan untuk mengesahkan pengalaman ialah berjalan melaluinya secara fizikal. Walau bagaimanapun, anda juga boleh membaca Power Apps metadata apl secara teraturcara. Kaedah untuk mencapai ini mungkin termasuk menyemak bahawa tema yang betul digunakan pada apl atau mengesahkan bahawa nilai token tema dirujuk dalam kawalan warisan. Contohnya, jika elemen teks tertentu mesti menggunakan token reka bentuk tertentu, nama komponen teks boleh sepadan dengan nilai tertentu dan sifat komponen kemudiannya sepadan dengan pemetaan token reka bentuk tertentu.

Menilai bilangan elemen yang merupakan jenis komponen tertentu dan memenuhi kriteria tertentu berbanding yang tidak. Sebagai contoh, pertimbangkan komponen teks yang sama ada dinamakan salah atau dinamakan dengan betul tetapi tidak mengikut garis panduan nilai sifat. Untuk menguatkuasakan reka letak responsif, bekas reka letak tertentu boleh memetakan kepada konvensyen penamaan dan nilai sifat tertentu (seperti LayoutWrap).

Memenuhi piawaian kebolehcapaian untuk meningkatkan pangkalan pengguna

Menggabungkan prinsip reka bentuk inklusif memastikan produk memenuhi khalayak yang pelbagai, termasuk individu dari semua kebolehan. Reka bentuk inklusif bertujuan untuk mengenal pasti halangan yang berpotensi bagi pengguna semua kebolehan untuk mencipta produk yang menangani cabaran sebelum pelaksanaan akhir. Adalah penting untuk memahami dan membincangkan aspek fungsi yang boleh membawa kepada halangan interaksi untuk mengatasinya dengan berkesan.

Function	Tujuan
Kognisi	Keupayaan kita untuk menerima, mentafsir dan memproses maklumat dipengaruhi oleh banyak faktor. Faktor-faktor ini termasuk perhatian, kesedaran, fokus, ingatan, pertimbangan, pemahaman, penyelesaian masalah dan penaakulan. Kognisi seseorang boleh menjejaskan cara mereka belajar, sama ada belajar cara menggunakan peranti baharu atau mempelajari maklumat baharu di dalam bilik darjah. Banyak aspek kognisi mempengaruhi satu sama lain.
Mobiliti	Anatomi dan otot kita memberi kita mobiliti, dan mereka bergantung pada isyarat otak, yang mengawal otot. Mobiliti melibatkan genggaman, kemahiran motor halus, koordinasi, kawalan (pergerakan sukarela vs sukarela), kelajuan, nada otot, daya tahan, postur, dan kecederaan sementara. Mobiliti boleh dipengaruhi oleh keadaan situasi, sementara, progresif atau kekal.
Penglihatan	Keupayaan kita untuk melihat dan memahami maklumat visual daripada persekitaran kita membimbing pemikiran dan pergerakan. Penglihatan dipengaruhi oleh kedua-dua faktor fizikal dan neurologi. Had penglihatan termasuk buta, penglihatan rendah (separa penglihatan), penurunan ketajaman, kehilangan medan visual, buta warna, fotofobia (kepekaan cahaya), dan juga cahaya matahari terang yang memberi kesan kepada kebolehbacaan teks pada skrin.
Pendengaran	Keupayaan kita untuk menerima dan memahami audio daripada persekitaran kita juga membimbing pemikiran dan pergerakan. Tahap kehilangan pendengaran berbeza-beza merentasi spektrum yang luas, yang membawa kepada halangan kepada penggunaan teknologi harian. Contoh sementara atau situasi termasuk persekitaran yang kuat atau zon senyap di mana main balik bunyi tidak boleh dilakukan.
Suara, pertuturan, dan komunikasi	Keupayaan kita untuk berkomunikasi (secara lisan atau bukan lisan) adalah penting untuk menyatakan kehendak dan keperluan kita, membentuk hubungan, menyampaikan maklumat kepada orang lain, dan berinteraksi dengan persekitaran kita.
Sensasi dan persepsi	Sensasi ialah keupayaan kita untuk mengesan deria seperti sentuhan atau kedudukan badan kita. Persepsi ialah cara otak memproses dan menyampaikan deria ini. Batasan sensasi termasuk gangguan vestibular, sakit kronik, integriti kulit, sensasi (hipersensitif dan hiposensitif), dan proprioception.

Kaedah mengakses kandungan

Pengguna mengakses kandungan digital dalam pelbagai cara. Selain input tetikus dan penunjuk, mereka juga mungkin menggunakan papan kekunci dan teknologi bantuan seperti pembaca skrin dan braille, pembesar, kapsyen, pengecaman suara dan tetapan kontras tinggi, yang semuanya menyesuaikan pengalaman untuk memenuhi keperluan pengguna.

Alat bantuan

Alat bantuan biasa termasuk:

Papan kekunci: Orang yang cacat penglihatan berinteraksi dengan tapak web dan apl menggunakan perisian pembaca skrin, yang membaca kandungan dan mengawal dengan kuat menggunakan teknologi teks-ke-pertuturan dan menggunakan papan kekunci sebagai input alternatif kepada interaksi tunjuk dan klik dengan tetikus standard. Selain menyokong set asas arahan papan kekunci, pembaca skrin juga menyediakan satu set arahan papan kekunci yang kompleks. Arahan ini memberi pengguna set alat tambahan yang berkuasa untuk berinteraksi dengan antara muka pengguna dengan lebih cekap.
Pembaca skrin: Pembaca skrin menukar teks digital kepada pertuturan yang disintesis dan output braille. Mereka memperkasakan pengguna untuk mendengar kandungan dan menavigasi dengan papan kekunci. Teknologi ini membolehkan individu buta atau penglihatan rendah menggunakan teknologi maklumat dengan tahap kebebasan dan privasi yang sama seperti mana-mana pengguna lain. Pembaca skrin juga digunakan oleh individu yang mempunyai masalah kognitif atau pembelajaran, dan oleh pengguna yang lebih suka kandungan audio daripada teks. Alat ini melangkaui penggunaan web, membantu dalam navigasi dokumen, hamparan dan sistem pengendalian.
Sentuh: Sasaran sentuh sebahagian besarnya disasarkan kepada orang yang mengalami kelewatan motor, yang mungkin menghadapi masalah mengetik skrin. Lebih khusus lagi, sentuhan direka untuk membantu orang ramai mengehadkan jumlah input palsu daripada sentuhan yang tidak disengajakan (atau tidak didaftarkan).
Kandungan dinamik: Peranan mercu tanda atau ARIA label menawarkan faedah serta-merta kepada pengguna pembaca skrin. Terdapat lapan peranan, setiap satu mewakili blok kandungan yang biasa berlaku di halaman web. Untuk menggunakannya, tambahkan atribut peranan yang berkaitan pada bekas yang sesuai dalam HTML anda, membolehkan pengguna pembaca skrin menavigasi dengan cepat ke bahagian halaman tersebut.

Gaya visual

Untuk mencipta produk inklusif untuk pengguna yang mempunyai keupayaan penglihatan yang berbeza, adalah penting untuk mempertimbangkan gaya visual seperti warna, kontras dan saiz teks. Ini melibatkan memastikan kontras yang mencukupi antara teks dan latar belakangnya, termasuk teks pada imej, ikon dan butang, untuk meningkatkan kebolehbacaan untuk pengguna yang mempunyai sensitiviti kontras rendah atau buta warna. Kandungan yang berbeza meningkatkan kebolehbacaan dalam pelbagai keadaan pencahayaan, memberi manfaat kepada semua pengguna.

Teks standard hendaklah mengekalkan nisbah kontras sekurang-kurangnya 4.5:1 dengan latar belakang. Untuk teks yang lebih besar, komponen interaktif dan visualisasi data, nisbah kontras minimum 3:1 dengan warna latar belakang diperlukan. Penunjuk status harus menggunakan warna semantik, jenis dan imejan dengan berkesan untuk menyampaikan maklumat, memastikan kandungan boleh dilihat oleh semua pengguna. Pertimbangkan untuk menyokong palet warna kontras tinggi, yang menormalkan palet warna untuk memaparkan kandungan dengan nisbah kontras sekurang-kurangnya 7:1, memastikan keterlihatan dan kejelasan. Menawarkan mod gelap boleh meningkatkan kebolehbacaan dengan ketara dan mengurangkan ketegangan mata.

Tipografi

Tipografi memainkan peranan penting dalam memastikan kebolehbacaan untuk pengguna yang mempunyai keperluan yang pelbagai. Teks mestilah cukup besar dan jarak yang mencukupi untuk menampung keperluan pengguna yang berbeza. Pengguna sepatutnya boleh melaraskan tetapan seperti tahap orientasi dan zum, dengan aplikasi menyesuaikan reka letak kandungan mereka dengan lancar dengan sewajarnya. Tipografi yang ditetapkan dengan baik bukan sahaja membantu dalam kebolehbacaan tetapi juga memudahkan orientasi dan navigasi halaman, memberi manfaat kepada individu yang mempunyai penglihatan rendah, ketidakupayaan kognitif dan buta warna, dan mereka yang bergantung pada pembaca skrin.

Tajuk hendaklah menampilkan teks besar atau tebal untuk membolehkan pengimbasan dan kefahaman pantas, terutamanya untuk pengguna berorientasikan visual. Elemen tajuk yang digunakan dengan betul memastikan navigasi yang cekap untuk semua pengguna. Lebar dan jarak garisan memberi kesan ketara kepada kebolehbacaan; Sebagai contoh, garisan yang terlalu lebar menegangkan mata manakala garis yang terlalu pendek mengganggu irama dan pemahaman. Sasarkan panjang baris 50 hingga 70 aksara dan ketinggian baris iaitu 120% hingga 145% daripada saiz fon untuk meningkatkan kebolehbacaan.

Pada peranti mudah alih, teks hendaklah boleh diubah saiznya sehingga 200% tanpa menjejaskan kandungan atau fungsi. Fleksibiliti ini memastikan pengguna boleh melaraskan saiz teks mengikut pilihan atau keperluan mereka, meningkatkan kebolehcapaian keseluruhan. Tambahan pula, pengguna harus mempunyai keupayaan untuk mengezum masuk pada antara muka, dengan susun atur halaman direka untuk mengalir semula kandungan dengan lancar tanpa tatal mendatar untuk tahap zum sehingga 400%. Memastikan kandungan kekal boleh diakses dan boleh dibaca, tanpa mengira saiz skrin peranti, menyumbang kepada pengalaman yang lebih mesra pengguna untuk semua pengguna.

Imej, grafik dan gerakan

Imej dan grafik menjadikan kandungan lebih menyenangkan dan lebih mudah difahami oleh ramai orang, dan khususnya bagi mereka yang mempunyai masalah kognitif dan pembelajaran. Walaupun imej boleh berfungsi sebagai isyarat untuk orang cacat penglihatan, membantu mengorientasikan mereka dalam kandungan, penggunaan meluas di tapak web boleh mewujudkan halangan utama untuk pengguna.

Amalan yang boleh diakses di sekitar kandungan media memberi manfaat kepada pengguna braille dan pembaca skrin, pengguna yang menyemak imbas dengan imej dimatikan untuk menjimatkan lebar jalur dan perangkak enjin carian. Mereka juga boleh membantu orang yang mengalami kehilangan pendengaran atau ketidakupayaan kognitif.

Gunakan teks alt untuk menjadikan kandungan visual boleh diakses. Atribut Alt menerangkan kandungan visual, contohnya, teks yang dipaparkan semasa imej dimuat turun. Sesuaikan teks alt dengan konteks imej. Ringkas dan bermaklumat (gunakan dari 150 hingga 250 aksara). Ingat untuk menandakan imej yang menduplikasi kandungan teks sebagai hiasan.

Interaksi

Interaksi ialah tempat kebolehcapaian paling penting. Jika pengguna tidak dapat menavigasi produk dengan lancar dan menyelesaikan tugas, produk itu tidak boleh diakses. Interaksi papan kekunci dan sentuhan yang cekap membantu pengguna pembaca skrin, pembaca braille dan mereka yang menavigasi menggunakan papan kekunci. Interaksi biasa termasuk:

Navigasi: Pengguna teknologi bantuan menavigasi halaman web dengan tab, carian dan, dalam kes pembaca skrin, menggunakan senarai tajuk dan pautan. Pastikan navigasi papan kekunci yang cekap dengan mercu tanda, tajuk dan pintasan seperti "langkau ke kandungan utama".
Hiperpautan: Kebolehgunaan dan kebolehcapaian hiperpautan boleh dipertingkatkan dengan menjadikannya jelas, ringkas dan bermakna di luar konteks. Gunakan kontras warna yang mencukupi dan bezakan secara visual daripada kandungan lain.
Jadual: Bergantung pada isyarat visual sahaja tidak mencukupi untuk mencipta jadual yang boleh diakses. Penanda struktur membolehkan teknologi bantuan mengenali pengepala dan sel data.
Borang: Medan input, yang digunakan untuk pelbagai interaksi web, sering menimbulkan kebimbangan kebolehcapaian bagi individu yang menggunakan pembaca skrin atau papan kekunci.
Fokus: Kebolehlihatan fokus membantu pengguna yang bergantung pada papan kekunci untuk menavigasi halaman, dengan menunjukkan secara visual elemen yang mereka berinteraksi dengan seterusnya. Kadangkala fokus perlu dialihkan secara terprogram atau terhad kepada kawasan tertentu untuk mengoptimumkan pengalaman.
Perubahan negeri: Tentukan teks untuk sebarang perubahan dan pengumuman negeri. Menyampaikan keadaan ralat dan membimbing pengguna melalui pemulihan ralat, seperti maklumat yang hilang atau isu sistem, adalah penting.

Power Platform Kemudahan

Kawalan moden tersedia untuk apl kanvas dan apl dipacu model.

Apl kanvas menyokong tema moden, membolehkan anda melaksanakan palet jenama yang konsisten merentas semua kawalan dalam apl. Apl dipacu model menyokong tema untuk mengubah suai elemen penjenamaan asas seperti warna pengepala apl, pautan dan beberapa ikon borang.

Komponen yang boleh diguna semula dan menyedari penyelesaian tersedia dalam pelbagai bentuk untuk pelbagai jenis apl. Komponen kanvas tersuai boleh digunakan dalam apl kanvas atau halaman tersuai dan dibina menggunakan kod rendah. Rangka Power Apps kerja komponen boleh digunakan untuk melaksanakan komponen kod untuk apl kanvas, apl dipacu model dan Power Pages.

Apl kanvas menyokong sifat yang boleh diakses yang memetakan kepada fungsi teknologi bantuan tertentu. Gunakan alat dalam studio untuk mengesahkan pematuhan kebolehcapaian.

Walaupun apl dipacu model boleh diakses tanpa konfigurasi, pastikan semua sumber web yang ditambahkan pada apl boleh diakses. Pengalaman kanvas terbenam, termasuk halaman tersuai, mesti dikonfigurasikan secara manual untuk memenuhi piawaian kebolehcapaian.

Apl dipacu model menyediakan pintasan papan kekunci standard terbina dalam untuk menavigasi borang dan pandangan.

Apl kanvas memerlukan komponen kod untuk mendayakan pintasan papan kekunci, yang boleh dikonfigurasikan menggunakan pintasan papan kekunci Kit Pencipta.