reka bentuk interaksi UI yang indah: menang dengan keanggunan dan bukannya memamerkan

mata utama

• Keanggunan reka bentuk interaksi UI adalah untuk memastikan peralihan yang lancar dan mesra pengguna untuk menyokong operasi pengguna dan bukannya elemen gangguan.
• microinteractions, seperti menu drop-down atau memaparkan butiran produk, harus direka dengan teliti untuk meningkatkan kebolehgunaan dan mencetuskan tindak balas emosi positif dari pengguna.
• Peraturan utama untuk membuat interaksi UI yang elegan termasuk: mengelakkan lompatan segera, tetapi menggunakan peralihan; operasi dalam satu siri operasi;
• semakin banyak interaksi UI mematuhi undang -undang fizikal dunia nyata, yang lebih semula jadi dan elegan. Adalah penting untuk menguji dan tweak interaksi ini untuk memastikan ia intuitif, konsisten, cekap, dan memberikan maklum balas yang mencukupi kepada pengguna.

Istilah baru "reka bentuk interaktif" telah dikaitkan rapat dengan proses reka bentuk UX. Selepas 2015, suis segera antara unsur antara muka antara dua negeri statik tidak lagi mencukupi. Hari ini, kata -kata seperti "slaid," "melantun," dan "melantun kembali" telah menjadi sebahagian daripada perbincangan tentang bagaimana antara muka pengguna yang baik berfungsi.

Walau bagaimanapun, dalam bidang interaksi -seperti jam tangan mahal - "glamor" tidak semestinya bermaksud "keanggunan." Walaupun kita mungkin ingin tahu tentang kerumitan jam tangan mewah ini (gambar) di bawah ini, saya mengesyaki bahawa beberapa daripada kita benar -benar mahu memakainya. Dalam reka bentuk antara muka kami, keanggunan semulajadi hampir selalu melebihi hiasan.

Jika anda kreatif seperti saya, mudah tertarik untuk mewujudkan interaksi mewah hanya untuk menjadikan laman web anda berasa lebih moden dan menarik. Sudah tentu, kita tahu di dalam hati kita bahawa pendekatan ini mungkin salah satu cara yang paling boleh dipercayai untuk mengganggu keseluruhan pengalaman pengguna.

Jadi, saya mendapati sangat penting untuk memberi tumpuan kepada animasi yang lancar dan menyenangkan yang pengguna kami tidak dapat melihatnya. Pada masa itu, animasi kami akan beralih dari perhatian dan menyokong apa yang pengguna cuba lakukan.

Mengapa ini penting?

Kenapa Apple menghabiskan banyak masa dan wang untuk pembungkusan yang sering dibuang ke dalam tong kitar semula dengan cepat? Mengapa syarikat kereta mewah menyesuaikan bunyi pintu?

Ini kerana kita mendapati bahawa butir -butir yang tidak penting, yang tidak penting dapat memberi impak yang tidak seimbang terhadap reka bentuk yang baik dan meningkatkan UX dari "baik" kepada "sangat baik".

memperkayakan laman web anda dengan "interaksi mikro" yang direka dengan indah yang bukan sahaja memudahkan untuk digunakan, tetapi juga mencetuskan emosi positif di kalangan pengguna (sama seperti membuka kotak Apple). Pengalaman emosi ini bermakna memakan lebih banyak dopamin, yang sebenarnya membantu mereka menjadi ketagih ke laman web/aplikasi anda.

Jadi, apakah "interaksi mikro"?

Apabila pengguna memasuki (mis., Klik, seret, jenis kandungan), laman web anda bertindak balas -ini adalah interaksi. Ini adalah cara untuk pengguna berkomunikasi dengan laman web anda, jadi ia adalah sebahagian daripada perbualan. Apabila merancang aliran tingkah laku pengguna di laman web anda, anda boleh menggunakan beberapa jenis interaksi yang berbeza:

1. Interaksi Navigasi: Apabila pengguna akhirnya memasuki halaman/negeri baru.
2. Interaksi modal: Apabila keadaan semasa laman web dibekukan dan beberapa keadaan sementara dipaparkan di atasnya (contohnya, galeri "Lightbox" atau dialog pengesahan).
3. MicroInterAction: Apabila anda hanya mahu elemen individu dalam halaman untuk bertindak balas terhadap input pengguna-contohnya, paparkan menu lungsur atau paparkan lebih banyak butiran produk.

Bagaimana kita membuat mikrointeraksi ini lebih elegan?

Laman web harus merasa seperti konsert elemen antara muka interaktif, bekerjasama untuk menarik perhatian anda. Keanggunan adalah kriteria utama untuk membuat kesan ini. Walaupun sukar untuk menentukan keanggunan dalam istilah teknikal semata -mata, kita boleh menggunakan beberapa helah logik untuk membantu kita membuat interaksi yang elegan. Peraturan Utama #1 - Tiada Lompat Segera

Idea ini mudah - sentiasa menggunakan peralihan apabila menukar elemen pada halaman. Ini bermakna tidak ada pemotongan cepat pada GUI anda. Setiap elemen yang muncul, hilang, atau transformasi harus dilaksanakan dengan menggunakan pelonggaran atau/dan animasi.

Ini membantu pengguna memberi tumpuan kepada kawasan yang anda mahu mereka fokus. Sudah tentu, ini juga mewujudkan rasa aliran yang elegan dan konsisten.

### Rule#2: Togol suis lebih baik daripada butang

Di rumah, anda biasanya menggunakan suis yang sama untuk menghidupkan dan mematikan cahaya. Konsep yang sama berlaku untuk kawalan togol di laman web anda. Sekiranya kawalan togol mencetuskan keadaan baru elemen yang diberikan, kawalan dengan

yang sama harus melancarkan semula keadaan itu.

Di samping itu, menurut undang -undang Fitz, kawalan sedemikian memerlukan sedikit usaha untuk cepat beralih antara negeri -negeri di dan off. ### Peraturan#3: Pencetus harus berdekatan

Peralihan selalu memerlukan beberapa jenis pencetus. Apabila berinteraksi, pengguna kami biasanya memberi tumpuan kepada elemen pencetus ini. Ini bermakna peralihan mesti bermula pada

atau sangat dekat dengan pencetus

. Jika anda memulakan peralihan terlalu jauh dari elemen pencetus, mudah bagi pengguna untuk terlepasnya dan prosesnya akan terganggu.

Di samping itu, peralihan biasanya perlu disebarkan dari pencetus ke mana anda ingin menumpukan perhatian pengguna anda. Caranya mudah - anda membimbing mata pengguna dari pencetus ke mana mereka harus pergi ke langkah seterusnya. Dengan cara ini, pengguna tidak akan kehilangan tumpuan dan akan terus ke tempat yang anda mahu mereka pergi.

### Peraturan#4: Gunakan masa peralihan semula jadi

Masa peralihan mentakrifkan tempoh animasi untuk dimainkan. Masalah utama dengan masa ialah tidak ada tongkat yang boleh melakukan ini. Jika anda membuat peralihan anda terlalu lama, ia mewujudkan titik kesakitan bagi pengguna yang mengulangi interaksi yang sama dengan kerap atau cepat.

Sebaliknya, jika terlalu pendek, ia akan merasa tidak wajar - atau pengguna mungkin terlepas sama sekali. Malangnya, semua yang anda boleh lakukan ialah menggunakan mata dan intuisi yang menyala untuk menilai peralihan. Nasihat terbaik yang saya dapati bukan untuk membiarkan semua peralihan mempunyai masa yang sama. Cubalah dengan santai dan cari titik keseimbangan yang betul. Juga ambil perhatian bahawa walaupun perbezaan 0.05 saat adalah penting.

### Rule#5: Rollback peralihan tidak boleh memusnahkan rasa kawalan pengguna

Kadang -kadang, pengguna mengubah fikiran mereka dengan cepat semasa proses peralihan. Dalam kes ini, respons peralihan adalah penting. Jika pengguna membatalkan interaksi terakhir (mis., Dua klik pada butang pencetus), animasi peralihan harus diterbalikkan dengan segera. Jika tidak, pengguna kami akan segera kehilangan kawalan. Di samping itu, anda akan membuat pengguna anda berfikir bahawa mereka melakukan sesuatu yang salah.

### Peraturan#6: Sentiasa secara automatik fokus pada operasi seterusnya dalam satu siri operasi

Teknik ini bertujuan untuk interaksi pengguna melakukan siri tindakan. Apabila merancang urutan sedemikian, anda harus sentiasa mengelakkan sebarang interaksi yang tidak perlu dan sentiasa memberi tumpuan kepada kawalan seterusnya dalam urutan. Contoh yang paling asas dalam interaksi ini ialah butang [edit] , yang membuka borang dan secara ajaib memberi tumpuan kepada medan pertama supaya pengguna tidak perlu mengkliknya secara manual.

### Peraturan#7: Sentiasa beritahu pengguna bila hendak melengkapkan

Pengguna harus selalu dapat mengenal pasti apabila interaksi selesai. Sekiranya interaksi anda tidak berubah dengan cara yang jelas apabila selesai, anda harus sentiasa mempertimbangkan untuk melaksanakan beberapa jenis maklum balas visual, memberitahu pengguna

"Hei, anda sudah selesai!" Jika anda melangkau ini, pengguna cenderung mengulangi tindakan yang sama beberapa kali, membuat kesilapan dan mungkin juga memusnahkan sesuatu yang berharga.

Gunakan petua ini

Singkatnya, anda boleh menggunakan tips ini sebagai helaian cheat untuk interaksi mikro di laman web anda. Ia harus membantu anda merancang butiran interaksi sebelum melaksanakan interaksi mikro. Walau bagaimanapun, terdapat kebarangkalian yang tinggi bahawa anda tidak akan dapat mencapai kesempurnaan pada kali pertama. Dalam kes ini, anda perlu menyesuaikan diri dengan keadaan anda sendiri - jadi bersiaplah untuk memberikannya sedikit.

Dan ... Akhirnya, ada cadangan lain untuk anda. Secara umumnya, lebih banyak interaksi anda mematuhi undang-undang fizik dunia nyata, lebih semula jadi dan elegan mereka.

Saya doakan pengeluaran animasi gembira!

soalan yang sering ditanya mengenai mewujudkan interaksi UI yang elegan

Prinsip utama apa yang perlu dipertimbangkan ketika merancang interaksi UI?

Apabila merancang interaksi UI, pastikan anda menyimpan pengguna dalam fikiran. Interaksi harus intuitif dan mudah difahami. Konsistensi juga penting - pengguna tidak boleh meneka bagaimana untuk berinteraksi dengan antara muka anda. Interaksi juga harus memberi maklum balas kepada pengguna, membiarkan mereka tahu bahawa operasi mereka telah dikenalpasti dan sedang diproses. Akhirnya, interaksi harus cekap, meminimumkan langkah -langkah yang diperlukan oleh pengguna untuk mencapai matlamat mereka.

bagaimana membuat interaksi UI saya lebih menarik?

Untuk menjadikan interaksi UI anda lebih menarik, pertimbangkan untuk menambah animasi. Animasi boleh membuat interaksi berasa lebih bertenaga dan juga dapat memberikan maklum balas yang berharga kepada pengguna. Walau bagaimanapun, pastikan anda menggunakan animasi dengan berhati -hati dan jangan biarkan mereka mengalihkan perhatian dari tugas utama. Di samping itu, ia mungkin dianggap menggunakan maklum balas bunyi atau haptik untuk meningkatkan interaksi.

Apakah kesilapan biasa yang harus dielakkan ketika merancang interaksi UI?

Beberapa kesilapan biasa yang harus dielakkan ketika merancang interaksi UI termasuk membuat interaksi terlalu kompleks, tidak memberikan maklum balas yang cukup kepada pengguna, dan ketidakkonsistenan. Interaksi yang terlalu rumit boleh mengelirukan pengguna dan membuat antara muka anda sukar digunakan. Kekurangan maklum balas boleh membuat pengguna tidak pasti sama ada tindakan mereka telah dikenalpasti. Ketidakkonsistenan boleh membuat antara muka anda tidak dapat diramalkan dan mengecewakan.

Bagaimana untuk menguji keberkesanan interaksi UI saya?

anda boleh menguji keberkesanan interaksi UI melalui ujian pengguna. Ini termasuk mengamati interaksi pengguna dengan antara muka dan mengumpul maklum balas. Anda juga boleh menggunakan alat analisis untuk mengesan bagaimana pengguna berinteraksi dengan antara muka dan mengenal pasti kawasan yang sukar atau mengelirukan.

Bagaimana untuk meningkatkan kebolehcapaian interaksi UI?

Untuk meningkatkan kebolehcapaian interaksi UI, pertimbangkan bagaimana pengguna dengan keupayaan yang berbeza akan berinteraksi dengan antara muka anda. Sebagai contoh, pastikan interaksi anda boleh menggunakan papan kekunci supaya pengguna yang tidak dapat menggunakan tetikus juga boleh menggunakannya. Juga, pastikan interaksi anda serasi dengan pembaca skrin dan teknologi bantuan lain.

Bagaimana untuk memasukkan bercerita ke dalam interaksi UI saya?

Cerita cerita boleh dimasukkan ke dalam interaksi UI anda dengan mencipta naratif di sekitar perjalanan pengguna. Ini boleh dicapai dengan menggunakan animasi, bunyi, dan isyarat visual untuk membimbing pengguna melalui interaksi.

Apakah sumber untuk mengetahui lebih lanjut mengenai interaksi UI?

Terdapat banyak sumber yang tersedia untuk mengetahui lebih lanjut mengenai interaksi UI. Beberapa sumber popular termasuk kursus dalam talian, blog, dan buku mengenai topik ini. Anda juga boleh belajar banyak dengan mengkaji interaksi UI aplikasi dan laman web yang popular.

betapa pentingnya kelajuan dalam interaksi UI?

kelajuan sangat penting dalam interaksi UI. Pengguna mengharapkan interaksi menjadi responsif dan cepat. Mana -mana kelewatan boleh menyebabkan kekecewaan dan boleh menyebabkan pengguna melepaskan tugas.

Bagaimana menggunakan warna untuk meningkatkan interaksi UI saya?

Warna boleh digunakan untuk meningkatkan interaksi UI dengan menarik perhatian kepada unsur -unsur penting, menunjukkan status dan memberikan maklum balas. Walau bagaimanapun, adalah penting untuk menggunakan warna dengan teliti dan konsisten dan untuk mempertimbangkan kebutaan warna dalam reka bentuk anda.

Bagaimana untuk mengikuti trend interaksi UI?

Untuk mengikuti trend interaksi UI, sebaiknya mengikuti blog industri, menghadiri mesyuarat reka bentuk, dan menyertai komuniti pereka UI dalam talian. Anda juga boleh belajar banyak dengan mengkaji interaksi UI antara aplikasi dan laman web baru dan popular.

Atas ialah kandungan terperinci 7 Peraturan mudah untuk mewujudkan interaksi UI yang elegan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!