Warna dalam reka bentuk web: bagaimana untuk membangkitkan emosi yang betul dalam diri pengguna

2024 Pengarang: Malcolm Clapton | [email protected]. Diubah suai terakhir: 2023-12-17 04:06

Warna menentukan reaksi emosi pengguna terhadap tapak, walaupun orang itu sendiri tidak menyedarinya. Warna apa yang hendak digunakan untuk latar belakang dan elemen tapak yang berbeza untuk membangkitkan sensasi tertentu, dan cara menggabungkan warna dengan betul dalam reka bentuk web, baca di bawah.

Sepanjang sejarah manusia, pelukis sarjana telah diiktiraf secara universal kerana keupayaan mereka untuk bekerja dengan warna. Dalam dunia moden, pakar yang tahu cara menggabungkan warna untuk tujuan komersil dan perniagaan - dalam pengiklanan dan reka bentuk web - diiktiraf sama.

Keupayaan untuk menggunakan warna boleh dipam selama-lamanya. Ini adalah jurang sebenar kemungkinan untuk mempengaruhi seseorang.

Kami akan membincangkan asas teori warna dan skema warna, dan kemudian kami akan bercakap tentang kesan emosi warna tertentu.

Teori warna

Seluruh buku boleh ditumpukan kepada topik warna, jadi kami tidak akan mengambilnya secara keseluruhan, tetapi mengehadkan diri kami hanya kepada maklumat berguna yang boleh digunakan semasa membangunkan reka bentuk antara muka.

Teori warna boleh dibahagikan kepada tiga bahagian:

Berbeza

Setiap teduhan mempunyai lawan, boleh dikatakan, "musuh"nya, yang merupakan kontras terbesar dengan warna ini. Untuk mencari warna sedemikian, anda boleh menggunakan roda warna. Hanya pilih warna di bahagian bertentangan bulatan.

Penambahan

Warna-warna ini tidak selalu bercanggah antara satu sama lain. Warna pelengkap menekankan antara satu sama lain, berbanding dengan warna yang kontras. Dalam roda warna, warna-warna ini mengikuti satu sama lain, sebagai contoh, warna pelengkap ungu - biru dan merah jambu.

Resonans

Setiap warna membangkitkan mood tertentu. Warna hangat yang terang (merah, oren, kuning) mengisi seseorang dengan tenaga, menyedarkannya, dan warna gelap yang sejuk (hijau, biru, ungu), sebaliknya, berehat dan menenangkan.

Contohnya, mereka menggunakan bar navigasi merah untuk membangunkan pembaca dan meningkatkan keghairahan mereka. Memandangkan kekhususan tapak - berita sensasi - merah kelihatan seperti keputusan yang logik.

Teori warna dalam reka bentuk web adalah lebih daripada sekadar hiasan. Warna boleh mengubah persepsi tapak anda dan memainkan peranan penting dalam perniagaan anda.

Persepsi emosi warna

Tiada siapa yang akan menafikan interaksi warna dan emosi yang rapat. Dan, sudah tentu, mana-mana pereka web ingin menggunakan pengaruh ini untuk mencipta suasana yang sesuai untuk setiap tapak.

Berdasarkan beberapa kajian - analisis yang disiarkan di tapak web dan siaran tentang warna dalam - kami akan menerangkan cara warna mempengaruhi emosi dan membantu mencipta reka bentuk UX.

Adalah penting untuk diingat bahawa budaya yang berbeza di seluruh dunia melihat warna secara berbeza. Kami akan menerangkan persatuan emosi yang unik kepada budaya Barat.

merah

Warna yang paling merangsang, sangat bertenaga sehingga boleh meningkatkan tekanan darah. Merah melambangkan semangat dan kuasa serta merupakan warna yang paling menarik perhatian, itulah sebabnya ia sering digunakan untuk amaran dan pengumuman penting.

Sebagai contoh, warna merah sangat sesuai untuk tapak yang tujuannya adalah untuk memberi amaran tentang ancaman yang dirasakan.

Menggunakan banyak warna merah di bahagian atas halaman adalah bagus kerana ia menarik perhatian kepada maklumat penting dalam mesej anda. Pada masa yang sama, orang ramai cenderung dengan cepat meninggalkan "zon bahaya" merah dan tatal ke bawah. Dan ini, seterusnya, membolehkan anda menunjukkan lebih banyak kandungan kepada pengguna.

Tetapi warna ini boleh melawan anda juga, kerana ia boleh menyebabkan pencerobohan atau rangsangan berlebihan. Jika anda ingin mencipta suasana yang lebih santai, cuba gunakan warna merah secara sederhana dan pilih warna merah yang lebih terang.

Jingga

Sebagai nada hangat yang paling tenang, oren mampu membangkitkan pelbagai emosi yang pelbagai. Sebagai warna primer, ia boleh membangkitkan minat dan menyegarkan, dan sebagai warna sekunder, ia boleh mengekalkan sifat ini, tetapi dengan cara yang lebih tidak mengganggu.

Selain itu, oren membantu mewujudkan rasa pergerakan dan tenaga. Sebagai contoh, ia kelihatan hebat di laman web kartun syarikat, yang menunjukkan keremajaan dan pergerakan. Warna dikaitkan dengan kreativiti, sambil mengekalkan rasa jenama yang biasa.

Kuning

Ia adalah salah satu warna yang paling serba boleh, dan emosi yang ditimbulkannya lebih bergantung pada naungan.

Kuning terang menambah tenaga, tetapi tanpa ketajaman dan ketajaman yang terdapat dalam warna merah. Warna kuning sederhana membangkitkan rasa selesa sementara masih menyegarkan. Warna gelap (termasuk emas) memberikan rasa kuno, mengisi ruang dengan keabadian, kebijaksanaan dan rasa ingin tahu.

Contohnya, pada halaman utama agensi reka bentuk web, warna kuning yang lebih gelap memancarkan tenaga, rasa ingin tahu dan kuasa. Warna ini bagus untuk syarikat yang membuat wang daripada perundingan dan ingin menekankan profesionalisme mereka.

Warna hijau

Hijau adalah jambatan antara warna hangat dan sejuk, walaupun ia cenderung lebih sejuk. Ini bermakna hijau mempunyai kesan santai biru, tetapi juga mempunyai sedikit tenaga daripada kuning.

Akibatnya, ia mewujudkan suasana yang sangat seimbang dan stabil. Warna hijau yang lebih gelap memberi kesan kekayaan dan kelimpahan, sama seperti tapak web.

Warna biru

Seperti kuning, kesan biru sangat bergantung pada warna. Semua warna biru adalah universal dari segi kelonggaran dan keselamatan, tetapi ton terang dikaitkan dengan keramahan, dan ton gelap dengan kesedihan.

Rangkaian sosial seperti Twitter dan Facebook menggunakan warna biru yang lebih cerah hingga sederhana, manakala tapak korporat lebih suka warna kekuatan dan kebolehpercayaan yang lebih gelap.

Agensi reka bentuk acara adalah contoh yang bagus. Menggunakan bunga biru sebagai latar belakang, mereka secara visual membayangkan pengetahuan dan kemahiran mereka dalam floristry, dan juga mewujudkan rasa kebolehpercayaan dan kepercayaan.

Ini amat penting kerana mereka bekerja dengan acara yang visualnya sangat penting, seperti perkahwinan.

Ungu

Warna ungu secara sejarah dikaitkan dengan kemegahan diraja, membayangkan kemewahan. Warna ungu mencerminkan kemurahan hati dan kekayaan secara umum, menjadikannya pilihan yang bagus untuk fesyen dan barangan mewah (malah coklat seperti pilihan warna jenama).

Warna yang lebih terang seperti lavender (ungu dengan sentuhan merah jambu) membangkitkan pemikiran romantik, manakala warna yang lebih gelap kelihatan lebih bergaya dan misteri.

Hitam

Warna neutral terkuat, hitam, muncul di hampir mana-mana laman web. Ia boleh menimbulkan persatuan yang berbeza bergantung pada warna yang mengiringinya atau menguasainya jika digunakan secara berlebihan.

Kekuatan dan neutraliti hitam menjadikannya pilihan yang bagus untuk blok teks yang besar, tetapi sebagai warna utama ia boleh menimbulkan rasa gementar atau dikaitkan dengan kejahatan.

Untuk kebanyakan tapak, hitam digunakan untuk mewujudkan rasa kecanggihan. Gabungan hitam dan putih dalam reka bentuk minimalis memberikan kesan keanggunan dan gaya, sama seperti di laman web BOSE.

putih

Dalam budaya Barat, putih dikaitkan dengan kesucian, kebaikan dan tidak bersalah. Warna ini sering digunakan untuk latar belakang laman web minimalis dan ringkas.

Di samping itu, tiada warna tunggal akan membolehkan anda memberi perhatian kepada warna lain seperti putih. Sebagai contoh, bagi pemenang Awwwards, Kloin Toshev, semua karyanya diletakkan pada latar belakang putih, yang hanya menonjolkan ilustrasi dan memberikan kesan galeri yang elegan.

warna kelabu

Walaupun fakta bahawa dalam beberapa situasi, kelabu boleh mencipta suasana yang suram dan sedih, ia masih sering digunakan oleh pereka profesional.

Ini semua tentang warna: dengan berselang-seli, anda boleh mendapatkan semua emosi yang disebabkan oleh hitam dan putih. Secara keseluruhannya, kelabu ialah alat yang berkuasa di tangan yang betul.

Dan dalam kombinasi dengan warna yang lebih cerah dalam reka bentuk, latar belakang kelabu kelihatan moden, dan tidak suram, sebagai contoh, pada.

Beige

Beige sendiri agak membosankan dan tidak ekspresif, tetapi ia mempunyai satu sifat yang luar biasa: kuning air mengambil watak bunga yang mengelilinginya. Oleh itu, jika ia tidak bertujuan untuk menyatakan kekangan, kuning air berfungsi sebagai latar belakang atau warna kedua.

Warna kuning air yang lebih gelap mewujudkan rasa tradisi dan kebumian, memberikan rasa seperti kertas, manakala warna yang lebih terang kelihatan lebih segar dan lebih moden.

Sebagai contoh, pada tapak web restoran, warna kuning air terang di sekeliling nama dan bahagian tepi yang lebih gelap memberi gambaran bahawa restoran itu adalah masakan tradisional yang segar.

gading

Ivory dan juga krim membangkitkan emosi yang hampir sama seperti putih. Walau bagaimanapun, gading adalah lebih panas (atau kurang steril) daripada putih, yang mewujudkan rasa selesa yang lebih besar sambil mengekalkan minimalisme.

Anda boleh menggunakan gading sebagai ganti putih untuk melembutkan kontras antaranya dan warna yang lebih gelap. Sebagai contoh, di tapak, elemen coklat-oren diletakkan pada latar belakang gading (yang kelihatan kelabu) untuk mengekalkan rasa kehangatan.

Spektrum warna

Setiap tapak mempunyai skema warna yang menggunakan warna primer untuk mengisi lebih banyak ruang. Seperti yang kami katakan sebelum ini, penggunaan warna-warna ini mempengaruhi minda dan mood seseorang terutamanya secara tidak sedar. Jadi pilih mereka dengan berhati-hati.

Walaupun terdapat banyak cara untuk menggabungkan warna, kami akan menumpukan pada tiga yang paling berjaya dan biasa digunakan.

Triad (harmoni tiga, segi tiga)

Triad ialah sistem asas dan paling seimbang bagi tiga warna. Ia menggunakan resonans dan pelengkap warna, tetapi tidak mempunyai kontras yang kompleks, yang menjadikan triad gamut yang paling boleh dipercayai.

Pada roda 12 warna, pilih mana-mana tiga jarak 120 darjah: satu untuk latar depan dan dua untuk bar kandungan dan navigasi.

Sistem dwi pelengkap

Julat ini lebih sukar untuk dilaksanakan, tetapi ia boleh menjadi penyelesaian yang menguntungkan. Empat warna digunakan: dua kontras dan dua pelengkap.

Lihat rupa halaman Florida Flourish yang hebat berdasarkan reka letak ini. Warna merah dan hijau berbeza dalam tumbuhan dan blok teks, manakala latar belakang biru dan padang pasir oren melengkapkan gambar dengan berkesan.

Analog (sistem bersiri)

Julat warna yang serupa menggunakan warna pelengkap terutamanya. Ini membolehkan anda dengan jelas menekankan beberapa kualiti dan membangkitkan emosi tertentu.

Sebagai contoh, gabungan warna merah, oren dan kuning menekankan tenaga dan kecergasan. Sangat mudah untuk menggunakan skala sedemikian, tetapi sukar untuk memilih warna mana yang akan dimasukkan ke dalam kombinasi. Kesannya akan dibesar-besarkan, jadi anda tidak boleh salah.

Contohnya, penggunaan warna biru, turquoise dan hijau dalam reka bentuk laman web mewujudkan suasana tenang dan tenteram. Perhatikan bagaimana kuning digunakan untuk menyerlahkan perkara penting.

Ini hanyalah asas teori warna yang boleh membantu anda mencipta reka bentuk tersuai yang mengagumkan, dan tiada had untuk sejauh mana anda boleh pergi dari segi warna di tapak anda.

Alat Pembantu Pemilih Warna

Nasib baik, terdapat beberapa alat yang tersedia untuk membantu anda mempraktikkan teori warna. Cuba palet ini supaya anda tidak perlu bermula dari awal untuk mencipta sendiri:

1. dahulunya dikenali sebagai Adobe Kuler. Ia adalah salah satu alat memilih warna yang paling boleh dipercayai.
2. … Jika anda mahukan alat mudah untuk memilih warna secepat mungkin, Paletton bagus.
3. … Alat yang hebat untuk memilih warna antara muka pengguna.

Dan jika alat ini tidak berfungsi untuk anda, berikut ialah alat pemilih warna yang berbeza.

Hubungan langsung antara warna dan emosi

Ingat: pengguna jarang melihat dan menghargai warna latar belakang, bar navigasi, butiran individu, tetapi ini tidak bermakna warna itu tidak menjejaskan mereka. Ia hanya berlaku secara tidak sedar.

Pengguna mempunyai beberapa emosi, mengembangkan sikap terhadap tapak atau jenama, dia melakukan tindakan tertentu: tatal ke bawah, klik pada butang yang mendorong tindakan, atau, sebaliknya, tidak menyedarinya. Dan warna memainkan peranan yang besar dalam semua ini.

Jika anda mempunyai sebarang petua untuk menggunakan warna dalam reka bentuk web, sila kongsi dalam komen.