Kulay sa disenyo ng web: kung paano pukawin ang tamang emosyon sa gumagamit
Kulay sa disenyo ng web: kung paano pukawin ang tamang emosyon sa gumagamit
Anonim

Tinutukoy ng kulay ang emosyonal na reaksyon ng gumagamit sa site, kahit na ang tao mismo ay hindi alam ito. Anong mga kulay ang gagamitin para sa background at iba't ibang elemento ng site upang pukawin ang ilang mga sensasyon, at kung paano tama na pagsamahin ang mga kulay sa disenyo ng web, basahin sa ibaba.

Kulay sa disenyo ng web: kung paano pukawin ang tamang emosyon sa gumagamit
Kulay sa disenyo ng web: kung paano pukawin ang tamang emosyon sa gumagamit

Sa buong kasaysayan ng sangkatauhan, ang mga master na pintor ay kinikilala sa buong mundo para sa kanilang kakayahang magtrabaho gamit ang kulay. Sa modernong mundo, ang mga espesyalista na alam kung paano pagsamahin ang mga kulay para sa komersyal at negosyo - sa advertising at disenyo ng web - ay pantay na kinikilala.

Ang kakayahang gumamit ng mga kulay ay maaaring pumped nang walang katiyakan. Ito ay isang tunay na kailaliman ng mga posibilidad para sa pag-impluwensya sa isang tao.

Sasaklawin natin ang mga pangunahing kaalaman sa teorya ng kulay at scheme ng kulay, at pagkatapos ay pag-uusapan natin ang emosyonal na epekto ng ilang mga kulay.

Teorya ng kulay

Ang isang buong libro ay maaaring italaga sa paksa ng kulay, kaya hindi namin ito kukunin sa kabuuan nito, ngunit limitahan lamang ang aming sarili sa kapaki-pakinabang na impormasyon na maaaring magamit kapag bumubuo ng isang disenyo ng interface.

Ang teorya ng kulay ay maaaring hatiin sa tatlong bahagi:

Contrast

Ang bawat lilim ay may kabaligtaran, kaya na magsalita, ang "nemesis" nito, na bumubuo ng pinakamalaking kaibahan sa kulay na ito. Upang makahanap ng gayong kulay, maaari mong gamitin ang color wheel. Pumili lang ng kulay sa tapat ng bilog.

Color wheel
Color wheel

Dagdag

Ang mga kulay na ito ay hindi palaging sumasalungat sa isa't isa. Ang mga pantulong na kulay ay nagbibigay-diin sa isa't isa, kumpara sa mga magkakaibang mga kulay. Sa gulong ng kulay, ang mga kulay na ito ay sumusunod sa bawat isa, halimbawa, mga pantulong na kulay ng lilac - asul at rosas.

Resonance

Ang bawat kulay ay nagbubunga ng isang tiyak na mood. Ang mga maliliwanag na mainit na kulay (pula, orange, dilaw) ay pinupuno ang isang tao ng enerhiya, gisingin siya, at malamig na madilim na lilim (berde, asul, lila), sa kabaligtaran, magpahinga at umamo.

Halimbawa, ginagamit nila ang pulang navigation bar upang gisingin ang mambabasa at palakasin ang kanilang pagkapukaw. Isinasaalang-alang ang pagtitiyak ng site - nakakagulat na balita - ang pula ay mukhang isang lohikal na desisyon.

BBC News
BBC News

Ang teorya ng kulay sa disenyo ng web ay higit pa sa dekorasyon. Maaaring baguhin ng kulay ang perception ng iyong site at gumaganap ng mahalagang papel sa iyong negosyo.

Emosyonal na pang-unawa ng kulay

Walang sinuman ang tatanggi sa malapit na ugnayan ng kulay at damdamin. At, siyempre, gustong gamitin ng sinumang web designer ang impluwensyang ito upang lumikha ng tamang vibe para sa bawat site.

Batay sa ilang mga pag-aaral - pagsusuri na nai-post sa website at isang post sa mga kulay sa - ipapaliwanag namin kung paano nakakaapekto ang mga kulay sa mga emosyon at makakatulong sa paglikha ng disenyo ng UX.

Mahalagang tandaan na ang iba't ibang kultura sa buong mundo ay may kakaibang pananaw sa mga kulay. Ilalarawan natin ang mga emosyonal na asosasyon na kakaiba sa kulturang Kanluranin.

Pula

Ang pinaka-stimulating na kulay, kaya energetically sisingilin na maaari itong kahit na taasan ang presyon ng dugo. Ang pula ay kumakatawan sa pagnanasa at kapangyarihan at ito ang pinaka nakakaakit ng pansin na kulay, kaya naman madalas itong ginagamit para sa mahahalagang babala at anunsyo.

Halimbawa, ang kulay na pula ay napaka-angkop para sa isang site na ang layunin ay magbigay ng babala sa mga nakikitang banta.

Screenshot_2
Screenshot_2

Ang paggamit ng maraming pula sa tuktok ng pahina ay mahusay dahil nakakakuha ito ng pansin sa mahalagang impormasyon sa iyong mensahe. Kasabay nito, ang mga tao ay may posibilidad na mabilis na umalis sa pulang "danger zone" at mag-scroll pababa. At ito, sa turn, ay nagbibigay-daan sa iyo upang ipakita sa gumagamit ang higit pang nilalaman.

Ngunit ang kulay na ito ay maaaring gumana laban sa iyo, dahil maaari itong maging sanhi ng pagsalakay o labis na pagpapasigla. Kung gusto mong lumikha ng isang mas nakakarelaks na kapaligiran, subukang gumamit ng pula sa katamtaman at pumili ng mas magaan na kulay ng pula.

Kahel

Bilang pinakakalma sa maiinit na tono, ang orange ay may kakayahang pukawin ang iba't ibang emosyon. Bilang isang pangunahing kulay, maaari itong pukawin ang interes at pasiglahin, at bilang pangalawang kulay, maaari nitong panatilihin ang mga katangiang ito, ngunit sa isang mas hindi nakakagambalang paraan.

Website ng Fanta
Website ng Fanta

Bilang karagdagan, nakakatulong ang orange na lumikha ng pakiramdam ng paggalaw at enerhiya. Halimbawa, maganda ang hitsura nito sa website ng cartoon ng kumpanya, na nagpapahiwatig ng kabataan at kilusan. Ang kulay ay nauugnay sa pagkamalikhain, habang pinapanatili ang isang pamilyar na pakiramdam ng tatak.

Dilaw

Ito ay isa sa mga pinaka-maraming nalalaman na kulay, at ang mga emosyong nagdudulot nito ay higit na nakadepende sa lilim.

Ang maliwanag na dilaw ay nagdaragdag ng enerhiya, ngunit walang anghang at anghang na nasa pula. Ang mga katamtamang kulay ng dilaw ay nagdudulot ng kaginhawaan habang nagpapasigla pa rin. Ang mga madilim na lilim (kabilang ang ginto) ay nagbibigay ng isang pakiramdam ng sinaunang panahon, na pinupuno ang espasyo ng walang tiyak na oras, karunungan at pagkamausisa.

Flash Media
Flash Media

Halimbawa, sa home page ng isang web design agency, ang mas madidilim na kulay ng dilaw ay nagpapalabas ng enerhiya, kuryusidad, at awtoridad. Ang kulay na ito ay mahusay para sa mga kumpanya na kumita ng pera mula sa pagkonsulta at nais na bigyang-diin ang kanilang propesyonalismo.

Kulay berde

Ang berde ay isang tulay sa pagitan ng mainit at malamig na lilim, bagama't ito ay mas malamig. Nangangahulugan ito na ang berde ay may nakakarelaks na epekto ng asul, ngunit mayroon ding kaunting enerhiya mula sa dilaw.

Ameritrade
Ameritrade

Bilang resulta, lumilikha ito ng napakabalanse at matatag na kapaligiran. Ang mas madidilim na kulay ng berde ay nagbibigay ng impresyon ng kayamanan at kasaganaan, tulad ng website.

Kulay asul

Tulad ng dilaw, ang epekto ng asul ay lubos na nakadepende sa kulay. Ang lahat ng mga kulay ng asul ay unibersal sa mga tuntunin ng pagpapahinga at kaligtasan, ngunit ang mga light tone ay nauugnay sa pagkamagiliw, at madilim na mga tono na may kalungkutan.

Ang mga social network tulad ng Twitter at Facebook ay gumagamit ng mas magaan hanggang katamtamang kulay ng asul, habang mas gusto ng mga corporate site ang mas madidilim na kulay ng lakas at pagiging maaasahan.

Ang isang ahensya ng disenyo ng kaganapan ay isang magandang halimbawa. Gamit ang mga asul na bulaklak bilang background, biswal nilang ipinahiwatig ang kanilang kaalaman at kasanayan sa floristry, at lumikha din ng pakiramdam ng pagiging maaasahan at tiwala.

Van vliet at bitag
Van vliet at bitag

Napakahalaga nito habang nakikipagtulungan sila sa mga kaganapan kung saan ang visual ay napakahalaga, tulad ng mga kasalan.

Lila

Ang kulay purple ay nauugnay sa kasaysayan sa royal grandeur, na nagpapahiwatig ng karangyaan. Ang mga kulay ng purple ay sumasalamin sa kabutihang-loob at kayamanan sa pangkalahatan, na ginagawang isang mahusay na pagpipilian para sa mga fashion at luxury goods (kahit na tsokolate tulad ng pagpipilian ng kulay ng brand).

Imahe
Imahe

Ang mga lighter shade gaya ng lavender (purple with a touch of pink) ay pumukaw ng mga saloobin ng romansa, habang ang darker shade ay mukhang mas chic at misteryoso.

Itim

Ang pinakamatibay sa mga neutral na kulay, itim, ay lilitaw sa halos anumang website. Maaari itong pukawin ang iba't ibang mga asosasyon depende sa mga kulay na kasama nito o mangibabaw sa kanila kung ginamit nang labis.

Ang lakas at neutralidad ng itim ay ginagawa itong isang mahusay na pagpipilian para sa malalaking bloke ng teksto, ngunit bilang isang pangunahing kulay maaari itong lumikha ng isang pakiramdam ng nerbiyos o kahit na nauugnay sa kasamaan.

Para sa karamihan ng mga site, ang itim ay ginagamit upang lumikha ng isang pakiramdam ng pagiging sopistikado. Ang kumbinasyon ng itim at puti sa isang minimalistic na disenyo ay nagbibigay ng impresyon ng kagandahan at istilo, tulad ng sa website ng BOSE.

Pangarap + Abot
Pangarap + Abot

Puti

Sa kulturang Kanluranin, ang puti ay nauugnay sa kadalisayan, kabaitan at kawalang-kasalanan. Ang kulay na ito ay kadalasang ginagamit para sa background ng minimalistic at simpleng mga website.

Site na may mga gawa ni Kloin Toshev
Site na may mga gawa ni Kloin Toshev

Bilang karagdagan, walang iisang kulay ang magbibigay-daan sa iyo na magbayad ng mas maraming pansin sa iba pang mga kulay bilang puti. Halimbawa, para sa nanalo ng Awwwards na si Kloin Toshev, ang lahat ng kanyang mga gawa ay inilatag sa isang puting background, na ginagawa lamang ang mga guhit na namumukod-tangi at nagbibigay ng impresyon ng isang eleganteng gallery.

Kulay abo

Sa kabila ng katotohanan na sa ilang mga sitwasyon, ang kulay abo ay maaaring lumikha ng isang madilim at malungkot na kapaligiran, madalas pa rin itong ginagamit ng mga propesyonal na taga-disenyo.

Ito ay tungkol sa mga shade: sa pamamagitan ng paghahalili sa kanila, makukuha mo ang lahat ng emosyong dulot ng parehong itim at puti. Sa kabuuan, ang grey ay isang makapangyarihang tool sa tamang mga kamay.

Awwwards
Awwwards

At sa kumbinasyon ng mas maliwanag na mga kulay sa disenyo, ang kulay abong background ay tila moderno, at hindi madilim, halimbawa, sa.

Beige

Ang beige mismo ay medyo mapurol at hindi maipahayag, ngunit mayroon itong isang kahanga-hangang pag-aari: ang beige ay tumatagal sa katangian ng mga bulaklak na nakapaligid dito. Samakatuwid, kung hindi ito nilayon upang ipahayag ang pagpigil, ang beige ay nagsisilbing background o pangalawang kulay.

Ang mga darker shade ng beige ay lumilikha ng isang pakiramdam ng tradisyon at earthiness, nagbibigay ng parang papel na pakiramdam, habang ang mga lighter shade ay mukhang mas sariwa at mas moderno.

Dishoom
Dishoom

Halimbawa, sa isang website ng restaurant, ang isang light beige na kulay sa paligid ng pangalan at mas madidilim na mga gilid ay nagbibigay ng impresyon na ang restaurant ay isang bagong ideya sa tradisyonal na lutuin.

Ivory

Ivory pati na rin ang cream ay pumukaw ng halos kaparehong emosyon gaya ng puti. Gayunpaman, ang garing ay mas mainit (o hindi gaanong sterile) kaysa puti, na lumilikha ng higit na pakiramdam ng kaginhawahan habang pinapanatili ang minimalism.

Maaari mong gamitin ang garing sa halip na puti upang mapahina ang kaibahan sa pagitan nito at mas madidilim na mga kulay. Halimbawa, sa site, ang mga brown-orange na elemento ay inilalagay laban sa isang ivory background (na mukhang kulay-abo) upang mapanatili ang isang pakiramdam ng init.

Sining sa kape ko
Sining sa kape ko

Spectrum ng kulay

Ang bawat site ay may scheme ng kulay na gumagamit ng mga pangunahing kulay upang punan ang mas maraming espasyo. Tulad ng sinabi namin kanina, ang paggamit ng mga kulay na ito ay nakakaapekto sa isip at mood ng isang tao higit sa lahat subconsciously. Kaya piliin ang mga ito nang maingat.

Bagama't maraming paraan upang pagsamahin ang mga kulay, tututuon natin ang tatlo sa pinakamatagumpay at karaniwang ginagamit.

Triad (triple harmony, tatsulok)

Triad
Triad

Ang triad ay ang pangunahing at pinakabalanseng sistema ng tatlong kulay. Gumagamit ito ng resonance at color complement, ngunit walang kumplikadong contrast, na ginagawang pinaka-maaasahang gamut ang triad.

Sa isang 12-kulay na gulong, pumili ng alinmang tatlong 120 degrees ang pagitan: isa para sa foreground at dalawa para sa content at navigation bar.

Dual complementary system

Dual complementary system
Dual complementary system

Ang hanay na ito ay mas mahirap ipatupad, ngunit maaari itong maging isang kumikitang solusyon. Apat na kulay ang ginagamit: dalawang contrasting at dalawang complementary.

Tingnan kung ano ang hitsura ng isang mahusay na pahina ng Florida Flourish batay sa layout na ito. Ang pula at berdeng mga kulay ay magkasalungat sa mga halaman at mga bloke ng teksto, habang ang asul na background at orange na disyerto ay epektibong umaakma sa larawan.

Umunlad
Umunlad

Mga analog (serial system)

Mga analogue
Mga analogue

Ang hanay ng mga katulad na kulay ay gumagamit ng pangunahing mga pantulong na lilim. Ito ay nagbibigay-daan sa iyo upang lalo na malinaw na bigyang-diin ang ilang mga katangian at pukawin ang ilang mga emosyon.

Halimbawa, ang kumbinasyon ng pula, orange at dilaw na mga kulay ay nagbibigay-diin sa enerhiya at sigla. Napakasimpleng gumamit ng gayong mga kaliskis, ngunit mahirap piliin kung aling mga kulay ang isasama sa kumbinasyon. Ang epekto ng mga ito ay magiging labis, kaya hindi ka maaaring magkamali.

Halimbawa, ang paggamit ng asul, turkesa at berdeng mga kulay sa disenyo ng website ay lumikha ng isang kapaligiran ng kalmado at katahimikan. Pansinin kung paano ginamit ang dilaw upang i-highlight ang mahahalagang punto.

Blinksale
Blinksale

Ito ay ang mga pangunahing kaalaman lamang sa teorya ng kulay na makakatulong sa iyong lumikha ng mga kahanga-hangang custom na disenyo, at walang limitasyon sa kung gaano kalayo ang magagawa mo sa mga tuntunin ng kulay sa iyong site.

Mga Tool sa Tagapili ng Kulay

Sa kabutihang palad, mayroong ilang mga tool na magagamit upang matulungan kang maisagawa ang teorya ng kulay. Subukan ang mga palette na ito upang hindi mo na kailangang magsimula sa simula upang lumikha ng iyong sarili:

  1. dating kilala bilang Adobe Kuler. Ito ay isa sa mga pinaka-maaasahang tool sa pagpili ng kulay.
  2. … Kung gusto mo ng simpleng tool para pumili ng kulay sa lalong madaling panahon, mahusay ang Paletton.
  3. … Isang mahusay na tool para sa pagpili ng kulay ng user interface.

At kung ang mga tool na ito ay hindi gumagana para sa iyo, narito ang iba't ibang mga tool sa pagpili ng kulay.

Direktang relasyon sa pagitan ng kulay at damdamin

Tandaan: bihirang mapansin at pinahahalagahan ng mga gumagamit ang kulay ng background, navigation bar, mga indibidwal na detalye, ngunit hindi ito nangangahulugan na ang kulay ay hindi nakakaapekto sa kanila. Nangyayari lamang ito nang hindi sinasadya.

Ang gumagamit ay may ilang mga emosyon, nagkakaroon ng saloobin patungo sa site o brand, nagsasagawa siya ng ilang mga aksyon: nag-scroll pababa, nag-click sa mga pindutan na nag-uudyok ng pagkilos, o, sa kabaligtaran, hindi napapansin ang mga ito. At ang kulay ay may malaking papel sa lahat ng ito.

Kung mayroon kang anumang mga tip para sa paggamit ng kulay sa disenyo ng web, mangyaring ibahagi sa mga komento.

Inirerekumendang: