Setiap hari, atas tugasan, saya perlu bertukar-tukar dengan pelakon projek yang berbeza. Bergantung pada kedudukan dan selera untuk disiplin reka bentuk UX-UI, setiap orang mempunyai pengetahuan yang berbeza tentang istilah yang digunakan.
Sepanjang misi, saya telah menyusun sebilangan besar konsep dan ia adalah perbendaharaan kata yang saya ingin miliki semasa saya mula dan oleh itu saya telah disatukan semasa saya pergi bersama untuk membantu pelajar masa depan atau baru kepada digital.
Oleh itu saya telah menyediakan satu siri artikel untuk anda di mana setiap konsep akan diterangkan supaya anda boleh merujuknya.
Kami meneruskan siri ini dengan bahagian ketiga ini dan 21 konsep yang membentuknya. Jika anda ingin merujuk kepada dua bahagian pertama terlebih dahulu, berikut adalah pautannya: bahagian 1 et bahagian 2.
#1 _ Grid dan jarak
Grille
Grid ialah repositori untuk membina struktur halaman dan mengutamakan maklumat. Ini adalah salah satu latihan yang perlu ditangani terlebih dahulu apabila mencipta rangka wayar dan model kami; dan ini untuk setiap peranti.
Garis dasar
Garis dasar menyediakan titik rujukan apabila meletakkan blok teks dan menentukan jarak baris yang hendak dipilih.
Titik putus
Titik pecah adalah dataran tinggi. Dari lebar tetingkap tertentu, susun atur dan susunan kandungan mungkin berbeza-beza untuk disesuaikan dengan ruang yang ada.
Jarak
Jarak antara elemen yang berbeza dan kandungan antara muka anda adalah sangat penting. Dengan menyesuaikan ruang dengan betul, anda akan dapat mencipta keselesaan membaca dan mengehadkan risiko ralat.
- Margin: Mengawal ruang antara elemen semasa dan elemen lain pada halaman
- Padding: Mengawal ruang antara kandungan dan sempadan elemen.
Jejari sempadan
Sifat "jejari sempadan" ialah sifat CSS yang membolehkan anda menentukan sudut sudut sesuatu elemen. Setiap sudut boleh ditakrifkan secara berbeza untuk mencipta bentuk yang tidak sekata atau setiap sudut boleh mempunyai nilai yang sama. Kami menemui jejari sempadan pada elemen antara muka yang berbeza: latar belakang, peta, butang, dsb. Pilihan jejari sempadan akan memberi kesan yang kuat pada keseluruhan perasaan antara muka. Oleh itu, adalah penting untuk memahami sifat yang ditawarkan oleh setiap.
Saya menulis artikel untuk dibimbing dalam pilihan jejari sempadan yang kami gunakan dalam reka bentuk UI: Saya akan berkongsi pautan dengan anda di sini.
#2 _ Pemberitahuan dan makluman
Roti bakar / Bar Snek
Roti bakar dan bar snek ialah komponen yang memberitahu pengguna tentang tindakan yang sedang dijalankan. Ini ialah pemberitahuan "dalam apl", kontekstual dan yang tidak menghalang (biasanya hanya muncul selama beberapa saat sebelum hilang).
Mereka membenarkan anda memberikan pesanan ringkas tentang sesuatu yang sedang berlaku (contohnya, keadaan).
- Roti bakar: memberikan maklum balas tentang perkara yang sedang berlaku
- muncul dan hilang tanpa tindakan pengguna diperlukan
- hanya ada mesej maklumat (tiada tindakan)
- boleh kontekstual dengan lebih meluas pada peringkat aplikasi
- Bar snek: memaparkan makluman, tindakan tambahan
- anda boleh membuatnya hilang secara manual menggunakan gerak isyarat atau butang
- tindakan kontekstual kepada tindakan itu dicadangkan
- mesti dipautkan kepada konteks skrin yang dipaparkan atau kepada tindakan semasa
Tetingkap modal/bukan modal
- Tetingkap modal: dibuka di atas aplikasi dan tidak membenarkan pengguna berinteraksi dengan tetingkap aplikasi "di bawah" (tetingkap yang membukanya), sehingga ia kekal terbuka.
- Tetingkap bukan modal: juga dibuka di atas aplikasi tetapi membenarkan pengguna untuk terus berinteraksi dengan tetingkap aplikasi yang terletak "di bawah", tanpa perlu menutupnya.
Pop-up / Pop-in
- Pop timbul: ialah tetingkap yang muncul di atas kandungan. Ini dibuka oleh penyemak imbas anda dan bukan oleh tapak. Sehingga pengguna menutupnya, mereka disekat.
Pop timbul digunakan untuk memaparkan mesej pengiklanan, amaran atau pemberitahuan. - Pop-in: ialah tetingkap yang dipaparkan di atas kandungan juga. Operasi mereka serupa dengan pop timbul. Perbezaannya ialah ia dicetuskan oleh kod laman web dan bukan pelayar. Pop-in digunakan untuk memaparkan kandungan yang berkaitan dengan laman web seperti imej, foto, video, dll.
Popover
Popover boleh digunakan untuk memaparkan satu kandungan berbanding kandungan yang lain. Contohnya, perihalan lokasi pada peta apabila anda mengklik pada bandar.
Pemberitahuan tolak
Pemberitahuan tolak ialah mesej amaran yang dihantar oleh pelayan (yang "menolak" maklumat) kepada pengguna melalui aplikasi mudah alih.
#3 _ Pelbagai jenis menu
Ia membolehkan anda mengumpulkan entri tapak di belakang satu butang.
Bar tab
Bar tab muncul di bahagian bawah aplikasi mudah alih dan membolehkan pengguna bergerak dengan cepat antara halaman utama aplikasi.
Kesimpulan
Kita akan bertemu lagi untuk siri seterusnya, yang keempat dan terakhir, di mana kita akan melihat tema besar bersama-sama: reka letak, bentuk dan komponen tindakan.
Jika anda ingin melihat dua bahagian pertama, berikut adalah pautannya: bahagian 1 et bahagian 2
Jika anda ingin mendalami pengetahuan anda dan berlatih mereka bentuk antara muka web, pusat latihan UX Republic menawarkan latihan "Reka Bentuk UI, asas". Berikut adalah pautan untuk mengetahui lebih lanjut.
Alexa CUELLAR, Pereka UX @UX-Republic
