Warna dalam reka bentuk web: bagaimana membuat pengguna memerlukan emosi yang betul

Sepanjang sejarah manusia, artis induk telah diiktiraf secara universal kerana kemampuan mereka bekerja dengan warna. Di dunia hari ini, pakar yang boleh menggabungkan warna untuk tujuan komersil dan perniagaan – dalam iklan dan reka bentuk web – tidak kurang dikenali.

Keupayaan untuk menggunakan warna boleh dipam ke infiniti. Ini adalah jurang sebenar peluang untuk mempengaruhi orang.

Kami akan membincangkan asas-asas teori warna dan skema warna, dan kemudian bercakap tentang kesan emosi beberapa warna.

Teori warna

Kita boleh menumpukan seluruh buku kepada tema warna, jadi kita tidak akan mengambilnya sepenuhnya, tetapi hanya maklumat berguna yang boleh digunakan untuk reka bentuk antara muka.

Anda boleh memecahkan teori warna menjadi tiga bahagian:

Sebaliknya

Setiap naungan mempunyai sebaliknya, sebaliknya, “musuh bersumpah”, yang menjadikan kontras paling besar dengan warna ini. Untuk mencari warna sedemikian, anda boleh menggunakan roda warna. Hanya pilih warna pada bahagian yang bertentangan bulatan.

Roda warna
Roda warna

Tambahan

Warna-warna ini tidak selalunya bertentangan dengan satu sama lain. Warna-warna pelengkap menekankan satu sama lain, berbeza dengan kontras. Dalam bulatan warna, warna-warna ini menjadi satu demi satu, sebagai contoh, melengkapkan warna-warna ungu – biru dan merah jambu.

Resonans

Setiap warna menyebabkan mood tertentu. Warna-warna hangat terang (merah, oren, kuning) mengisi orang dengan tenaga, membangkitkannya, dan warna gelap yang sejuk (hijau, biru, ungu), sebaliknya, berehat dan menenangkan.

Sebagai contoh, BBC News menggunakan bar navigasi merah untuk membangkitkan pembaca, untuk menguatkan keadaannya yang teragak-agak. Memandangkan spesifik tapak – berita sensasi, – warna merah kelihatan seperti penyelesaian logik.

BBC News
BBC News

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

Persepsi emosi tentang warna

Tidak ada sesiapa yang akan menafikan interaksi dekat warna dan emosi. Dan tentu saja, setiap pereka web ingin menggunakan pengaruh ini untuk menciptakan suasana yang tepat untuk setiap laman web.

Berdasarkan beberapa kajian – analisis yang diterbitkan di laman web Vandelay Design dan jawatan tentang warna dalam Smash Magazine – kami akan menjelaskan bagaimana warna mempengaruhi emosi dan membantu membuat reka bentuk UX.

Adalah penting untuk diingat bahawa budaya yang berbeza di seluruh dunia menganggap warna berbeza. Kami akan menerangkan persatuan emosi yang hanya ciri budaya Barat.

Merah

Emosi dan persatuan: kuasa, kepentingan, belia.

Warna yang paling merangsang, sangat bertenaga, yang dapat meningkatkan tekanan darah. Warna merah mewakili semangat dan kekuatan, ia menarik perhatian lebih banyak daripada warna lain, oleh itu ia sering digunakan untuk amaran dan pengumuman penting.

Sebagai contoh, warna merah sangat sesuai untuk laman web No Way NSA, tujuannya untuk memberi amaran mengenai ancaman yang dikatakan.

Screenshot_2

Untuk menggunakan banyak warna merah di bahagian atas halaman adalah penyelesaian yang hebat, kerana ia menarik perhatian kepada maklumat penting dalam mesej. Pada masa yang sama, orang cenderung dengan cepat meninggalkan “zon berbahaya” warna merah dan tatal ke bawah. Dan ini pula membolehkan pengguna untuk menunjukkan lebih banyak kandungan.

Tetapi warna ini boleh berfungsi terhadap anda, kerana ia boleh menyebabkan pencerobohan atau terlalu rangsangan. Jika anda ingin mencipta suasana yang lebih santai, cuba gunakan warna merah dan pilih warna yang lebih ringan dari warna merah.

Orange

Emosi dan persatuan: keramahan, tenaga, keunikan.

Sebagai paling tenang nada hangat, oren dapat menimbulkan pelbagai jenis emosi serba boleh. Sebagai warna primer, ia dapat menarik dan menyegarkan, dan sebagai warna sekunder ia dapat mengekalkan sifat-sifat ini, tetapi dengan cara yang lebih tidak mengganggu.

Laman web Fanta
Laman web Fanta

Di samping itu, oren membantu mewujudkan pergerakan dan tenaga. Sebagai contoh, ia kelihatan hebat di laman kartun syarikat Fanta, yang mencadangkan pemikiran pemuda dan pergerakan. Warna dikaitkan dengan kreativiti, sambil mengekalkan sensasi jenama yang biasa.

Kuning

Emosi dan persatuan: kebahagiaan, semangat, archaism (nada gelap).

Ini adalah salah satu warna paling universal, dan emosi yang menyebabkannya lebih bergantung pada naungan.

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

Media Flash
Media Flash

Contohnya, di halaman utama agensi reka bentuk web Flash Media, warna-warna gelap warna kuning, rasa ingin tahu dan berkuasa. Warna ini hebat untuk syarikat yang mendapat wang dengan konsultasi dan ingin menekankan profesionalisme mereka.

Warna hijau

Emosi dan persatuan: pertumbuhan, kestabilan, topik kewangan, tema alam sekitar.

Warna hijau adalah jambatan antara warna hangat dan sejuk, walaupun ia lebih cenderung ke arah yang sejuk. Ini bermakna bahawa hijau mempunyai kesan biru yang santai, tetapi juga mempunyai sedikit semangat daripada kuning.

Ameritrade
Ameritrade

Akibatnya, ia mewujudkan suasana yang sangat seimbang dan stabil. Warna gelap yang berwarna hijau menghasilkan kesan kekayaan dan kelimpahan, seperti pada laman web Ameritrade.

Warna biru

Emosi dan persatuan: ketenangan, keselamatan, keterbukaan (warna yang lebih ringan), kebolehpercayaan (warna gelap).

Seperti dalam kes kuning, pengaruh biru sangat bergantung kepada teduhan. Semua warna biru adalah universal dari segi kelonggaran dan keselamatan, tetapi warna cahaya dikaitkan dengan keramahan, dan gelap adalah berkaitan dengan kesedihan.

Rangkaian sosial seperti Twitter dan Facebook menggunakan warna yang lebih ringan dan sederhana biru, dan laman web korporat lebih suka warna gelap dan kebolehpercayaan.

Contoh yang sangat baik ialah agensi reka bentuk acara Van Vliet Perangkap. Menggunakan bunga biru sebagai latar belakang, mereka secara visual membayangkan pengetahuan dan kemahiran mereka dalam bidang seni gubahan, dan juga mewujudkan rasa kebolehpercayaan dan kepercayaan.

Van Vliet & Trap
Van Vliet Perangkap

Ini sangat penting, kerana mereka bekerja dengan peristiwa-peristiwa di mana bahagian visual sangat penting, contohnya dengan majlis perkahwinan.

Ungu

Emosi dan persatuan: kemewahan, roman (cahaya warna), mistik dan misteri (warna gelap).

Ungu secara bersejarah dikaitkan dengan keagungan diraja, merujuk kepada kemewahan. Warna ungu mencerminkan kemurahan hati dan kekayaan secara umum, menjadikannya pilihan yang sangat baik untuk barangan fesyen dan mewah (walaupun untuk coklat, contohnya, seperti Cadbury, yang memilihnya sebagai warna jenama).

Cadbury

Warna yang lebih terang, seperti lavender (ungu dengan penambahan merah jambu), mencadangkan pemikiran romantik, sementara warna gelap kelihatan lebih bergaya dan misterius.

Hitam

Emosi dan persatuan: kuasa, perbaikan, kegelisahan.

Paling kuat warna neutral – hitam – muncul di hampir mana-mana laman web. Ia boleh menyebabkan persatuan yang berbeza bergantung kepada warna yang mengiringi atau menguasai mereka jika anda menggunakannya secara berlebihan.

Kekuatan dan ketelusan hitam menjadikannya pilihan yang sangat baik untuk blok besar teks, tetapi sebagai warna utama, ia dapat membuat perasaan gugup atau bahkan mengaitkan dengan kejahatan.

Bagi kebanyakan laman web, hitam digunakan untuk mewujudkan rasa kecanggihan. Gabungan hitam dan putih dalam reka bentuk minimalis memberi gambaran keanggunan dan gaya, seperti di Dream and Reach BOSE tapak.

Dream + Reach
Dream + Reach

Putih

Emosi dan persatuan: kesucian, kesederhanaan, kebaikan.

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

Tapak dengan karya-karya Kloin Toshev
Tapak dengan karya-karya Kloin Toshev

Di samping itu, warna tidak akan membolehkan anda membayar lebih banyak perhatian kepada warna yang lain seperti putih. Sebagai contoh, di laman web pemenang Awwwards Kloin Toshev semua karya beliau dibentangkan pada latar belakang putih, yang hanya menonjolkan ilustrasi dan memberi kesan galeri yang elegan.

Warna kelabu

Emosi dan persatuan: berkecuali, formaliti, melankolis.

Walaupun dalam beberapa keadaan, kelabu boleh mewujudkan suasana suram dan sedih, namun masih sering digunakan oleh pereka profesional.

Ini semua tentang warna: bergantian mereka, anda boleh mendapatkan semua emosi yang disebabkan oleh hitam dan putih. Secara umum, kelabu adalah alat yang berkuasa dalam tangan yang mahir.

Awwwards
Awwwards

Dan dalam kombinasi dengan warna yang lebih terang dalam reka bentuk, latar belakang kelabu nampaknya moden, tidak suram, seperti Awwwards.

Beige

Emosi dan persatuan: menyampaikan sifat baki warna.

Warna beige itu sendiri agak membosankan dan tidak jelas, tetapi ia mempunyai satu sifat yang luar biasa: kuning air mengambil ciri-ciri bunga yang mengelilinginya. Oleh itu, jika ia tidak bertujuan untuk mengekang pengekangan, beige berfungsi sebagai latar belakang atau warna kedua.

Shades of beige berwarna membuat rasa tradisi dan kebodohan, memberi rasa tekstur kertas, dan nuansa ringan kelihatan segar dan moden.

Dishoom
Dishoom

Contohnya, di laman web restoran Dishoom, warna kuning muda di sekitar nama dan tepi gelap memberi kesan bahawa restoran ini adalah penampilan segar pada masakan tradisional.

Warna gading

Emosi dan persatuan: keselesaan, keanggunan, kesederhanaan.

Warna gading, serta berkrim, menyebabkan hampir sama emosi seperti putih. Walau bagaimanapun, warna gading lebih hangat (atau kurang steril) daripada putih, yang menimbulkan rasa keselesaan yang lebih tinggi sambil mengekalkan minimalism.

Anda boleh menggunakan gading bukannya putih untuk melembutkan kontras antara warna dan warna yang lebih gelap. Sebagai contoh, di laman Art di My Coffee, unsur-unsur coklat-oren diletakkan di latar belakang gading (yang kelihatan berwarna kelabu), yang mengekalkan rasa kehangatan.

Seni dalam kopi saya
Art in My Coffee

Warna

Setiap tapak mempunyai skema warna di mana warna utama digunakan untuk mengisi ruang yang lebih besar. Seperti yang kita katakan sebelum ini, penggunaan warna-warna ini memberi kesan kepada minda dan perasaan seseorang pada dasarnya tidak sedar. Oleh itu pilihlah dengan teliti.

Walaupun terdapat banyak cara untuk menggabungkan warna, kami akan memberi tumpuan kepada tiga yang paling berjaya dan sering digunakan.

Triad (harmoni triple, segitiga)

Triad
Triad

Triad adalah sistem asas dan paling seimbang tiga warna. Ia menggunakan tambahan resonans dan warna, tetapi tidak ada kontras yang kompleks, itulah sebabnya triad adalah gamma yang paling boleh dipercayai.

Pada roda warna 12 warna, pilih mana-mana tiga yang terletak 120 darjah berasingan: satu untuk latar belakang utama dan dua untuk kandungan dan bar navigasi.

Double sistem percuma

Double sistem percuma
Double sistem percuma

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

Lihat betapa indahnya halaman Florida Flourish, berdasarkan skema ini. Warna merah dan hijau bertentangan dengan tumbuhan dan blok dengan teks, dan latar belakang biru dan padang pasir oren secara berkesan melengkapkan gambar.

Berkembang
Berkembang

Analog (sistem urutan)

Analog
Analog

Pelbagai warna yang serupa menggunakan warna yang saling melengkapi. Ini membolehkan anda menyerlahkan beberapa sifat yang cerah dan menyebabkan emosi tertentu.

Sebagai contoh, kombinasi warna merah, oren dan kuning menekankan daya hidup dan kecergasan. Gunakan skala sedemikian adalah sangat mudah, tetapi sukar untuk memilih warna mana yang akan dimasukkan dalam kombinasi. Kesannya akan dibesar-besarkan, jadi anda tidak boleh membuat kesilapan.

Sebagai contoh, penggunaan bunga biru, biru dan hijau dalam reka bentuk tapak Blinksale mencipta suasana ketenangan dan ketenangan. Perhatikan bagaimana warna kuning digunakan untuk menekankan perkara penting.

Blinksale
Blinksale

Ini hanya asas teori warna, yang boleh membantu dalam mewujudkan reka bentuk khusus yang mengagumkan, dan tidak ada batasan seberapa jauh anda boleh pergi dari segi warna di laman web anda.

Alat pembantu untuk pemilihan warna

Nasib baik, terdapat beberapa alat yang membantu untuk menerjemahkan teori warna ke dalam amalan. Cuba palet ini supaya anda tidak perlu bermula dari awal untuk membuat anda sendiri:

  1. Adobe Color CC, dahulunya dikenali sebagai Adobe Kuler. Ini adalah salah satu alat yang paling boleh dipercayai dalam memilih warna.
  2. Paletton. Jika anda memerlukan alat mudah untuk pemilihan warna terpantas, Paletton adalah sempurna.
  3. Pemetik Warna UI Flat. Alat yang hebat untuk memilih warna antara muka pengguna.

Dan jika alat ini tidak sesuai dengan anda, berikut adalah 28 lagi tapak dengan palet dan alat yang berbeza untuk pemilihan warna.

Hubungan langsung antara warna dan emosi

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

Pengguna mempunyai beberapa jenis emosi, sikap terhadap tapak atau jenama sedang berkembang, dia melakukan tindakan tertentu: skrol ke bawah, menekan butang yang mendorong ke tindakan, atau sebaliknya, tidak menyedarinya. Dan warna memainkan peranan besar dalam semua ini.

Jika anda mempunyai sebarang nasihat mengenai penggunaan warna dalam reka bentuk web, sila kongsi ulasan.

Leave a Reply

Your email address will not be published. Required fields are marked *

1 + 2 =