Krāsa tīmekļa dizainā: kā lietotājam izraisīt īstās emocijas

2024 Autors: Malcolm Clapton | [email protected]. Pēdējoreiz modificēts: 2023-12-17 04:04

Krāsa nosaka lietotāja emocionālo reakciju uz vietni, pat ja cilvēks pats to neapzinās. Kādas krāsas izmantot fonam un dažādiem vietnes elementiem, lai izraisītu noteiktas sajūtas, un kā pareizi kombinēt krāsas tīmekļa dizainā, lasiet tālāk.

Visā cilvēces vēsturē gleznotāju meistari ir bijuši vispāratzīti par viņu spēju strādāt ar krāsām. Mūsdienu pasaulē vienlīdz atzīti ir speciālisti, kuri prot kombinēt krāsas komerciālos un biznesa nolūkos – reklāmā un web dizainā.

Spēja izmantot krāsas var tikt sūknēta bezgalīgi. Šī ir īsta cilvēku ietekmēšanas iespēju bezdibenis.

Mēs apskatīsim krāsu teorijas un krāsu shēmas pamatus, un pēc tam runāsim par noteiktu krāsu emocionālo ietekmi.

Krāsu teorija

Krāsu tēmai var veltīt veselu grāmatu, tāpēc mēs to neaplūkosim pilnībā, bet aprobežosimies tikai ar noderīgu informāciju, ko var izmantot, izstrādājot interfeisa dizainu.

Krāsu teoriju var iedalīt trīs daļās:

Kontrasts

Katram tonim ir pretstats, tā sakot, tā "nemesis", kas veido vislielāko kontrastu šai krāsai. Lai atrastu šādu krāsu, varat izmantot krāsu apli. Vienkārši izvēlieties krāsu apļa pretējā pusē.

Papildinājums

Šīs krāsas ne vienmēr ir pretrunā viena ar otru. Papildu krāsas izceļ viena otru, atšķirībā no kontrastējošām. Krāsu lokā šīs krāsas seko viena otrai, piemēram, ceriņu komplementāras krāsas - zila un rozā.

Rezonanse

Katra krāsa izraisa noteiktu noskaņu. Spilgtas siltas krāsas (sarkana, oranža, dzeltena) piepilda cilvēku ar enerģiju, pamodina viņu, bet aukstās tumšās nokrāsas (zaļa, zila, violeta), gluži pretēji, atslābina un nomierina.

Piemēram, viņi izmanto sarkano navigācijas joslu, lai pamodinātu lasītāju un palielinātu viņa uzbudinājumu. Ņemot vērā vietnes specifiku - sensacionālas ziņas - sarkanā krāsa izskatās pēc loģiska lēmuma.

Krāsu teorija tīmekļa dizainā ir vairāk nekā tikai dekorēšana. Krāsa var mainīt priekšstatu par jūsu vietni, un tai var būt izšķiroša nozīme jūsu biznesā.

Emocionālā krāsu uztvere

Neviens nenoliegs krāsu un emociju ciešo mijiedarbību. Un, protams, jebkurš tīmekļa dizaineris vēlas izmantot šo ietekmi, lai radītu pareizo atmosfēru katrai vietnei.

Pamatojoties uz dažiem pētījumiem - tīmekļa vietnē ievietoto analīzi un ziņu par krāsām, mēs izskaidrosim, kā krāsas ietekmē emocijas un palīdz izveidot UX dizainu.

Ir svarīgi atcerēties, ka dažādas kultūras visā pasaulē uztver krāsas atšķirīgi. Mēs aprakstīsim emocionālās asociācijas, kas raksturīgas tikai Rietumu kultūrai.

sarkans

Visstimulējošākā krāsa, tik enerģiski uzlādēta, ka spēj pat paaugstināt asinsspiedienu. Sarkanā krāsa simbolizē kaislību un spēku, un tā ir visvairāk uzmanību piesaistošā krāsa, tāpēc to bieži izmanto svarīgiem brīdinājumiem un paziņojumiem.

Piemēram, sarkanā krāsa ir ļoti piemērota vietnei, kuras mērķis ir brīdināt par uztvertiem draudiem.

Lapas augšdaļā ir lieliski izmantot sarkano krāsu, jo tas pievērš uzmanību svarīgai informācijai jūsu ziņojumā. Tajā pašā laikā cilvēki mēdz ātri pamest sarkano "bīstamo zonu" un ritināt uz leju. Un tas, savukārt, ļauj lietotājam parādīt vairāk satura.

Bet šī krāsa var darboties arī pret jums, jo tā var izraisīt agresiju vai pārmērīgu stimulāciju. Ja vēlaties radīt relaksējošāku atmosfēru, mēģiniet izmantot sarkano krāsu ar mēru un izvēlieties gaišākus sarkanos toņus.

apelsīns

Kā mierīgākais no siltajiem toņiem oranžais spēj izraisīt dažādas emocijas. Kā primārā krāsa tā var izraisīt interesi un uzmundrināt, un kā sekundārā krāsa var saglabāt šīs īpašības, bet neuzkrītošāk.

Turklāt apelsīns palīdz radīt kustības un enerģijas sajūtu. Piemēram, tas lieliski izskatās uzņēmuma karikatūru vietnē, kas liecina par jaunību un kustību. Krāsa ir saistīta ar radošumu, vienlaikus saglabājot pazīstamu zīmola sajūtu.

Dzeltens

Tā ir viena no daudzpusīgākajām krāsām, un tās radītās emocijas ir vairāk atkarīgas no toņa.

Spilgti dzeltenā krāsa pievieno enerģiju, bet bez asuma un asuma, kas ir sarkanā krāsā. Vidēji dzelteni toņi rada komforta sajūtu, vienlaikus uzmundrinoši. Tumšie toņi (arī zelts) sniedz senatnes sajūtu, piepildot telpu ar mūžīgumu, gudrību un zinātkāri.

Piemēram, web dizaina aģentūras mājaslapā tumšāki dzeltenie toņi izstaro enerģiju, zinātkāri un autoritāti. Šī krāsa ir lieliski piemērota uzņēmumiem, kas pelna naudu ar konsultācijām un vēlas uzsvērt savu profesionalitāti.

Zaļā krāsa

Zaļais ir tilts starp siltajiem un aukstajiem toņiem, lai gan tas mēdz būt aukstāks. Tas nozīmē, ka zaļajai krāsai ir zilā relaksējoša iedarbība, bet tajā ir arī nedaudz enerģijas no dzeltenās.

Rezultātā tas rada ļoti līdzsvarotu un stabilu atmosfēru. Tumšākas zaļās nokrāsas rada bagātības un pārpilnības iespaidu, tāpat kā vietne.

Zilā krāsa

Tāpat kā ar dzelteno krāsu, zilās krāsas efekts ir ļoti atkarīgs no nokrāsas. Visi zilie toņi ir universāli relaksācijas un drošības ziņā, bet gaišie toņi asociējas ar draudzīgumu, bet tumšie ar skumjām.

Sociālajos tīklos, piemēram, Twitter un Facebook, tiek izmantoti gaiši līdz vidēji zili toņi, savukārt korporatīvās vietnes dod priekšroku tumšākiem stiprības un uzticamības toņiem.

Pasākumu dizaina aģentūra ir lielisks piemērs. Izmantojot zilos ziedus kā fonu, viņi vizuāli norādīja uz savām zināšanām un prasmēm floristikas jomā, kā arī radīja uzticamības un uzticības sajūtu.

Tam ir liela nozīme, jo viņi strādā ar pasākumiem, kur vizuālajam ir ļoti liela nozīme, piemēram, kāzās.

Violets

Violetā krāsa vēsturiski ir saistīta ar karalisko varenību, dodot mājienu uz greznību. Violetās nokrāsas atspoguļo dāsnumu un bagātību kopumā, padarot tos par lielisku izvēli modes un luksusa precēm (pat šokolādei, piemēram, zīmola krāsu izvēlei).

Gaišāki toņi, piemēram, lavandas (violeta ar rozā piesitienu), raisa domas par romantiku, savukārt tumšāki toņi šķiet elegantāki un noslēpumaināki.

Melns

Spēcīgākā no neitrālajām krāsām, melna, ir redzama gandrīz jebkurā vietnē. Tas var izraisīt dažādas asociācijas atkarībā no pievienotajām krāsām vai dominēt tajās, ja to lieto pārmērīgi.

Melnās krāsas stiprums un neitralitāte padara to par lielisku izvēli lieliem teksta blokiem, taču kā primārā krāsa var radīt nervozitātes sajūtu vai pat būt saistīta ar ļaunumu.

Lielākajā daļā vietņu melnā krāsa tiek izmantota, lai radītu izsmalcinātības sajūtu. Melnbaltā kombinācija minimālistiskā dizainā rada elegances un stila iespaidu, gluži kā BOSE mājaslapā.

Balts

Rietumu kultūrā baltā krāsa ir saistīta ar tīrību, laipnību un nevainību. Šo krāsu bieži izmanto minimālistisku un vienkāršu vietņu fonam.

Turklāt neviena viena krāsa neļaus jums pievērst tik lielu uzmanību citām krāsām kā balta. Piemēram, Awwwards uzvarētājam Kloinam Toševam visi viņa darbi ir izklāti uz balta fona, kas ilustrācijas tikai izceļ un rada elegantas galerijas iespaidu.

Pelēka krāsa

Neskatoties uz to, ka dažās situācijās pelēkā krāsa var radīt drūmu un skumju atmosfēru, to joprojām bieži izmanto profesionāli dizaineri.

Tas viss ir par toņiem: mainot tos, jūs varat iegūt visas emocijas, ko izraisa gan melns, gan balts. Kopumā pelēkā krāsa ir spēcīgs instruments labajās rokās.

Un kombinācijā ar košākām dizaina krāsām pelēkais fons šķiet moderns, nevis drūms, piemēram, uz.

Bēšs

Bēšs pats par sevi ir diezgan blāvs un neizteiksmīgs, taču tam ir viena ievērojama īpašība: bēšs iegūst to ieskaujošo ziedu raksturu. Tāpēc, ja tas nav paredzēts, lai izteiktu atturību, bēšs kalpo kā fons vai otrā krāsa.

Tumšāki smilškrāsas toņi rada tradīciju un zemiskuma sajūtu, piešķir papīra sajūtu, savukārt gaišāki toņi izskatās svaigāki un modernāki.

Piemēram, restorāna tīmekļa vietnē gaiši smilškrāsas krāsa ap nosaukumu un tumšākas malas rada iespaidu, ka restorāns ir tradicionālās virtuves svaigums.

Ziloņkauls

Ziloņkauls, kā arī krēms izraisa gandrīz tādas pašas emocijas kā baltais. Tomēr ziloņkauls ir siltāks (vai mazāk sterils) nekā balts, kas rada lielāku komforta sajūtu, vienlaikus saglabājot minimālismu.

Varat izmantot ziloņkaulu, nevis baltu, lai mīkstinātu kontrastu starp to un tumšākām krāsām. Piemēram, vietnē brūni oranži elementi ir novietoti uz ziloņkaula fona (kas izskatās pelēcīgi), lai saglabātu siltuma sajūtu.

Krāsu spektrs

Katrai vietnei ir krāsu shēma, kas izmanto primārās krāsas, lai aizpildītu vairāk vietas. Kā jau teicām iepriekš, šo krāsu izmantošana cilvēka prātu un noskaņojumu ietekmē galvenokārt zemapziņā. Tāpēc izvēlieties tos uzmanīgi.

Lai gan ir daudz veidu, kā apvienot krāsas, mēs koncentrēsimies uz trim veiksmīgākajiem un biežāk izmantotajiem.

Triāde (trīskāršā harmonija, trīsstūris)

Triāde ir pamata un līdzsvarotākā trīs krāsu sistēma. Tas izmanto rezonansi un krāsu komplementu, taču tam nav sarežģīta kontrasta, kas padara triādi par visuzticamāko gammu.

12 krāsu ritenī atlasiet jebkurus trīs 120 grādu attālumā viens no otra: vienu priekšplānam un divus satura un navigācijas joslai.

Divkārša papildinoša sistēma

Šo diapazonu ir grūtāk ieviest, taču tas var būt izdevīgs risinājums. Tiek izmantotas četras krāsas: divas kontrastējošas un divas papildinošas.

Apskatiet, kā izskatās lieliska Florida Flourish lapa, pamatojoties uz šo izkārtojumu. Sarkanās un zaļās krāsas kontrastē augos un teksta blokos, savukārt zilais fons un oranžais tuksnesis efektīvi papildina attēlu.

Analogi (sērijas sistēma)

Līdzīgu krāsu diapazonā galvenokārt tiek izmantoti papildu toņi. Tas ļauj īpaši skaidri uzsvērt dažas īpašības un izraisīt noteiktas emocijas.

Piemēram, sarkano, oranžo un dzelteno krāsu kombinācija uzsver enerģiju un vitalitāti. Ir ļoti vienkārši izmantot šādus svarus, taču ir grūti izvēlēties, kuras krāsas tiks iekļautas kombinācijā. To ietekme būs pārspīlēta, tāpēc jūs nevarat kļūdīties.

Piemēram, zilas, tirkīza un zaļas krāsas izmantošana mājas lapas dizainā radīja miera un rāmuma atmosfēru. Ievērojiet, kā dzeltenā krāsa tika izmantota, lai izceltu svarīgus punktus.

Šie ir tikai krāsu teorijas pamati, kas var palīdzēt jums izveidot iespaidīgus pielāgotus dizainus, un nav nekādu ierobežojumu tam, cik tālu varat iet savā vietnē krāsu ziņā.

Krāsu atlasītāja palīga rīki

Par laimi, ir pieejami vairāki rīki, kas palīdzēs īstenot krāsu teoriju praksē. Izmēģiniet šīs paletes, lai jums nebūtu jāsāk no nulles, lai izveidotu savu:

1. agrāk pazīstams kā Adobe Kuler. Tas ir viens no uzticamākajiem krāsu izvēles rīkiem.
2. … Ja vēlaties vienkāršu rīku, lai pēc iespējas ātrāk izvēlētos krāsu, Paletton ir lieliski piemērots.
3. … Lielisks rīks lietotāja interfeisa krāsas izvēlei.

Un, ja šie rīki jums neder, šeit ir dažādi krāsu atlasītāja rīki.

Tieša saikne starp krāsu un emocijām

Atcerieties: lietotāji reti pamana un novērtē fona krāsu, navigācijas joslu, atsevišķas detaļas, taču tas nenozīmē, ka krāsa viņus neietekmē. Tas vienkārši notiek zemapziņā.

Lietotājam ir dažas emocijas, veidojas attieksme pret vietni vai zīmolu, viņš veic noteiktas darbības: ritina uz leju, noklikšķina uz pogām, kas izraisa darbību, vai, gluži pretēji, tās nepamana. Un krāsai šajā visā ir milzīga loma.

Ja jums ir kādi padomi krāsu izmantošanai tīmekļa dizainā, lūdzu, dalieties komentāros.