Menggunakan Manusia Cara Memproses Maklumat Visual dalam Reka Bentuk Web

Merancang laman web dan antara muka pengguna telah menjadi lebih mudah dalam beberapa tahun kebelakangan ini. Terdapat banyak alat di luar sana yang boleh anda gunakan yang menjadikannya tidak berguna untuk bermula dari awal apabila membangunkan UI (lihat kompilasi UI segar kami). Tetapi saya tidak di sini untuk berhujah tentang kematian reka bentuk web.

Sebaliknya, apa yang saya akan lakukan ialah menerangkan konsep berasaskan psikologi asas di belakang kebanyakan alat reka bentuk visual (dari kit CSS yang paling asas kepada tema premium yang paling maju). Anda bukan sahaja akan menggunakannya, tetapi juga memahaminya. Saya yakin bahawa ini juga akan memudahkan untuk mengubah suai yang sedia ada dengan kejayaan juga.

Mari kita lihat bagaimana minda dan tubuh manusia berfungsi ketika memajukan maklumat visual dan bagaimana pengetahuan ini ditafsirkan dalam merancang untuk web.

Prinsip-prinsip Persepsi Organisasi

Menurut psikologi Gestalt, keseluruhannya berbeza daripada jumlah bahagiannya. Pengikut sekolah ini berpendapat bahawa terdapat beberapa prinsip tentang bagaimana objek fikiran manusia menjadi objek. Ini bukan hanya teori, fikiran anda, tetapi fakta praktikal sebenarnya tentang mengatur kumpulan visual.

Di bawah ini anda akan dapati beberapa undang-undang dan penggunaan yang lebih popular dan terkenal mengenai prinsip-prinsip ini. Anda mungkin dapat mencari beberapa idea baru untuk reka bentuk seterusnya anda.

Undang-undang Persamaan

Prinsip pertama menyatakan bahawa objek kecil yang serupa dianggap sebagai satu kumpulan, bukannya banyak contoh objek kecil yang sama. Kesamaan mungkin berdasarkan bentuk, warna, teduhan atau beberapa kualiti lain. Prinsip ini adalah asas kepada reka bentuk corak serta banyak reka bentuk logo geometri dan minimalis.

Sebagai contoh, gambar ini menunjukkan sebagai logo pekeliling dan bukan segitiga berasingan. Bentuk segi tiga di bagian bawah helang membuat kita berfikir bahawa bentuknya juga merupakan sebahagian dari imej.

Anda mungkin juga menggunakan undang-undang ini tanpa sedar apabila mencipta beberapa, kotak kandungan yang bersaiz sama untuk laman web anda. Jika anda ingin menunjukkan bahawa elemen kandungan tertentu mempunyai kepentingan yang sama atau berkongsi maklumat yang serupa, membuat bentuk tertentu hanya untuk tujuan itu. Dengan cara ini, pengguna anda akan segera mengaitkan bentuk tertentu dengan kawasan maklumat tertentu.

Hukum Kedekatan

Mengikut undang-undang ini objek yang lebih dekat satu sama lain adalah dianggap sebagai kumpulan yang sama. Kuadrat yang sama, apabila diberikan bersebelahan berdekatan, jarak tetap, mewujudkan rasa pengelompokan.

Prinsip ini telah digunakan untuk sebahagian besar di web baru-baru ini, terutamanya ketika bekerja dengan gelung kandungan, contohnya. di blog dan tapak web.

Anda boleh segera menyusun tajuk, imej pilihan, metadata dan petikan bersama tanpa sebarang sempadan atau latar belakang. Anda mungkin dapat membersihkan garis dan warna yang tidak perlu dari reka bentuk anda untuk menjadikannya lebih minimalis, namun masih dapat difahami sepenuhnya.

Untuk kemudahan anda, saya akan memetik Wikipedia juga menyatakan:

Undang-Undang Borang yang Baik

Juga dikenali sebagai Hukum Pragnanz atau Good Gestalt, undang-undang ini menyatakan bahawa kita cenderung untuk mengumpulkan objek bersama jika mereka membentuk corak yang mudah, teratur dan teratur. Fikiran kita cuba memisahkan bentuk kompleks dan persepsi sulit ke dalam banyak kumpulan bentuk yang mudah difahami; ini membawa kepada kepentingan kesederhanaan.

Ini juga salah satu sebab yang mungkin di sebalik kejayaan reka bentuk berasaskan grid dan ini dibuat jadual dan berasaskan bingkai (perkara-perkara yang bersyukur pada zaman kegelapan rekaan) struktur web yang begitu popular.

Sekiranya anda memelihara prinsip ini, anda mungkin tidak akan membuat laman web yang dipenuhi dengan bentuk kompleks blok kandungan yang akan dihubungkan melalui undang-undang lain di atas. Namun, anda boleh kumpulan objek anda bersama-sama dengan cara yang menarik, contohnya. dalam bentuk berlian atau layang-layang, kerana mereka masih dianggap sebagai bentuk yang teratur dan ringkas.

Teori warna, persepsi dan penggunaan

Penglihatan warna dan persepsi warna adalah sebahagian besarnya subjektif berdasarkan bagaimana otak pemikir bertindak balas kepada gelombang cahaya yang dicerminkan oleh objek atau bentuk yang berwarna-warni. Peraturannya adalah bahawa orang yang berlainan, walaupun tanpa gangguan visual melihat objek yang sama dalam warna yang berbeza (anda mungkin ingat pakaian itu).

Sifat warna

Masih terdapat tiga sifat objektif warna; hue, nilai dan keamatan.

Hue adalah nama warna yang dilabelkan pada roda warna atau dalam pelangi. Terdapat enam (atau dua belas, bergantung kepada siapa yang anda sedang bercakap dengan) warna asas: merah, oren, kuning, hijau, biru, dan ungu.

Kuning, biru dan merah adalah utama, oren, hijau dan ungu sekunder warna; juga, ada tertiari warna yang merupakan campuran langsung dua warna primer dan sekunder (cth. kuning hijau atau merah ungu).

Nilai adalah cahaya atau kegelapan warna, yang disebut sebagai nilai tinggi untuk warna cahaya atau nilai rendah untuk warna gelap.

Intensiti merujuk kepada kecerahan atau kegelapan warna; ini bermakna bahawa warna dengan warna yang sama dan nilai yang sama masih boleh dimalapkan atau dipancarkan dengan mengubah intensiti dan menghasilkan output warna yang berbeza.

Keamatan tertinggi setiap warna adalah warna yang ditunjukkan pada roda warna (lihat di bawah), manakala yang paling rendah adalah kelabu warna.

Warna berbeza

Merujuk kepada undang-undang kesamaan yang disebutkan di atas, minda perceivers membuat kumpulan objek kecil yang mereka lihat berdasarkan sifat yang serupa dan berbeza - sering warna.

Apabila anda memilih palet warna anda untuk laman web anda, terutamanya jika anda pergi untuk pendekatan minimalis atau jika anda merekabentuk kawasan kandungan teks-berat, mis. blog atau iklan, anda harus ketahui perbezaan warna yang berlainan yang mungkin membantu anda mencari nilai warna yang tepat untuk hasil yang terbaik.

Terdapat 7 kontras warna mengikut Johannes Itten, walaupun saya hanya akan menyebut 3.

1. Sebaliknya warna

Kuning, merah dan biru dengan intensiti penuh adalah kontras langsung dan jelas. Warna sekunder membuat perbezaan yang kurang tajam, tetapi masih berfungsi, sama seperti warna tersier, walaupun tidak menghasilkan hasil yang hebat seperti dengan warna utama.

2. Sebaliknya

Dua warna dalam kontras pelengkap jika apabila dicampur bersama mereka membuat kelabu neutral. Ini juga dipanggil pasangan aneh. Jika mereka bersebelahan, mereka meningkatkan keterujaan dan keamatan, sementara bercampur-campur bersama mereka membatalkan satu sama lain. Setiap warna mempunyai satu dan hanya satu pelengkap; pada roda warna, pasangannya bertentangan dengan satu sama lain.

3. Sebutan terang-gelap

Sekiranya anda ingin mencuba laman web warna tunggal, menggunakan nilai yang berbeza dari warna yang sama boleh menghasilkan hasil yang hebat. Selalunya digunakan dalam reka bentuk web minimalis, anda juga boleh menghasilkan hasil yang hebat berdasarkan kontras cahaya gelap jika anda ingin memberikan pilihan warna tema kepada pengguna anda. Sebaliknya ini juga digunakan untuk reka bentuk skala kelabu.

Sekiranya anda ingin meneruskan kontras 4 warna, anda boleh mencarinya di sini.

Mewujudkan palet dan semak kontras

Mengetahui teori itu hebat, menafsirkan idea anda adalah satu perkara lagi. Anda tidak perlu bimbang walaupun, web memberikan sokongan yang besar untuk keperluan penjolok warna anda. Terdapat banyak alat yang membantu anda membuat pola warna tersuai berdasarkan peraturan kontras warna, cth. Paletton atau Adobe Kuler.

Untuk tujuan web, anda mungkin ingin menyemak kontras yang anda pilih untuk digunakan di webAIM, di laman web Jonathan Snook atau muat turun contoh Penganalisis Kontras Warna oleh The Paciello Group di sini.

Kesimpulannya

Apabila anda mula bekerja dengan tema baru atau mula mengubah suai yang sedia ada, cuba memikirkan prinsip persepsi untuk mengatur kandungan anda dan ingat untuk mempertimbangkan peraturan warna apabila memberikan reka bentuk anda bentuk akhir dan warna.

Nota editor: Jawatan tetamu ini ditulis untuk Hongkiat.com oleh Marton Fekete. Marton adalah pemaju laman web Hungary yang baru-baru ini ketinggalan di WordPress. Beliau adalah penggemar reka bentuk semula dan penulis kandungan bebas yang suka bermain RPG dalam masa lapangnya.