Krāsa web dizains: kā radīt lietotāja vēlamo emocijas
Padomi / / December 19, 2019
Visā cilvēces vēsturē, meistars-mākslinieki saņēma vispārēju atzinību, pateicoties spējai strādāt ar krāsu. Mūsdienu pasaulē nesaņem mazāk atpazīšanas speciālistus, kuri spēj apvienot krāsas tirdzniecības un biznesa nolūkos - reklāmas un web dizains.
Spēja izmantot krāsas, var sūknē līdz bezgalībai. Tas ir reāls dziļums iespēju ietekmi uz cilvēku.
Mēs jums pastāstīs pamati krāsu teoriju un krāsu shēmu, un tad runāt par emocionālo ietekmi uz konkrētu krāsu.
krāsu teorija
krāsu tēmu, jūs varat veltīt veselu grāmatu, tāpēc mēs neveiks to pilnībā, un aprobežoties ar noderīgu informāciju, ko var izmantot, izstrādājot interfeisa dizainu.
To var iedalīt krāsu teoriju trīs daļās:
kontrasts
Katrs tonis ir pretējs, tā sakot, no tās "zvērināts ienaidnieks", kas ir lielākais kontrasts ar šo krāsu. Lai atrastu krāsu, jūs varat izmantot krāsu ritenis. Vienkārši izvēlieties krāsu uz pretējo pusi apļa.
papildinājums
Šīs krāsas ne vienmēr pretrunā viens ar otru. Papildu krāsas uzsvērt otru, atšķirībā kontrastu. Jo krāsu riteņa, šādas krāsas ir viens otram, piemēram, papildu krāsas violetā - zilā un rozā.
rezonanse
Katra krāsa ir noteikta noskaņojumu. Bright siltās krāsas (sarkans, oranžs, dzeltens) piepilda ar cilvēka enerģiju, modināt to, auksti tumšas krāsas (zaļa, zila, violeta), gluži pretēji, atpūsties un nomierina.
Tā, piemēram, BBC News Lietojiet sarkano navigācijas joslu, lai modināt lasītāju, lai stiprinātu tās ierosinātu stāvokli. Ņemot vērā objekta specifiku - sensacionālais ziņas - sarkans ir loģisks risinājums.
teorija krāsu web dizains - ir vairāk nekā tikai apdare. Krāsu var mainīt uztveri jūsu vietni, un tām ir izšķiroša loma jūsu biznesu.
Emocionālā krāsu uztvere
Neviens noliegt ciešo mijiedarbību krāsas un emocijas. Un, protams, jebkurš web dizainers vēlas izmantot šo efektu, lai radītu noteiktu atmosfēru katrā vietā.
Pamatojoties uz vairākiem pētījumiem - analīzi, kas publicēts tīmekļa vietnē Vandelay DizainsUn post par krāsām Smash Magazine - mēs, paskaidrojiet, kā krāsas ietekmē emocijas un palīdz veidot UX-dizainu.
Ir svarīgi atcerēties, ka dažādu kultūru visā pasaulē ir dažādi uzskati par krāsu. Mēs aprakstīt emocionālo asociācijas, kas ir unikāla ar Rietumu kultūru.
sarkans
Emocijas un asociācijas: jauda, nozīme, jaunieši.
Visveicinošākā krāsu, tāpēc enerģiski uzlādēts, tas var pat paaugstināt asinsspiedienu. Sarkanā ir kaislība un jaudu, tas ir vairāk nekā citām krāsām piesaista uzmanību, tāpēc bieži lieto svarīgiem brīdinājumiem un paziņojumiem.
Piemēram, sarkanā ir ļoti piemērota vieta Nr Way NSAKuru mērķis - lai novērstu iespējamos draudus.
Izmantot daudz sarkana lapas augšpusē - tas ir lielisks risinājums, jo tā vērš uzmanību uz svarīgu informāciju ziņojumā. Tajā pašā laikā, cilvēki mēdz ātri pamest "bīstama zona" ir sarkanā krāsā, un ritiniet uz leju. Tas, savukārt, ļauj lietotājam, lai parādītu vairāk satura.
Bet šī krāsa var strādāt pret jums, jo tas var izraisīt agresiju vai olnīcu. Ja jūs vēlaties, lai radītu relaksējošu atmosfēru, mēģiniet izmantot sarkans mēreni un izvēlēties vieglākas toņos sarkanā krāsā.
oranžs
Emocijas un asociācijas: draudzīgumu, enerģētikas un unikalitāti.
Kā klusākajiem un silti toņi, oranža, var izraisīt visu spektru dažādu emociju. Kā pamata krāsu, tas var būt interese un lencēm, kā sekundāro - saglabāt šīs īpašības, bet neuzbāzīgas veidā.
Turklāt, Orange palīdz radīt sajūtu kustību un enerģiju. Piemēram, tas izskatās lieliski uz multfilmas mājas lapā FantaKas ir kas liecina par jauniešu un kustību. Krāsa ir saistīta ar radošumu, saglabājot sajūtu pazīstamo zīmolu.
dzeltens
Emocijas un asociācijas: laime, entuziasms, arhaisms (tumšākas krāsas).
Šis ir viens no visvairāk universāls krāsu un emocijām, kas to izraisa, ir atkarīgi ēnā, lai lielākā mērā.
Spilgti dzeltena krāsa piebilst enerģiju, bet bez smaguma un skarbums, kas ir klāt sarkanā krāsā. Vidēja toņos dzeltenas krāsas izraisīt komforta sajūtu, lai gan joprojām ir spēcīga. Tumši toņi (ieskaitot zeltu), sniedz sajūtu senatne, aizpildīt telpu timelessness, gudrību un zinātkāri.
Piemēram, galvenajā lapā web dizaina aģentūra Flash Media tumšāku toni izstaro enerģiju, zinātkāri un iestādi. Šī krāsa ir ideāli piemērots uzņēmumiem, kas pelna ar konsultācijām, un viņi vēlas, lai uzsvērtu savu profesionalitāti.
zaļš
Emocijas un asociācijas: izaugsme, stabilitāte, finanšu tēmas ap tēmu vidi.
Green - tilts starp silto un auksto toņu, bet nosliecas vairāk uz aukstumu. Tas nozīmē, ka zaļā ir relaksējoša iedarbība zilā krāsā, bet arī mazliet sparu no dzeltenas.
Kā rezultātā, tas rada ļoti līdzsvarotu un stabilu atmosfēru. Tumšāki zaļās krāsas toņi rada iespaidu bagātību un pārpilnību, gan tiešsaistē Ameritrade.
zils
Emocijas un asociācijas: sirdsmiers, drošības, atvērtību (gaišākiem), uzticamību (tumšākas nokrāsas).
Tāpat kā gadījumā, dzeltenā krāsā, efekts ir ļoti atkarīga no zilo nokrāsu. Visi zilā toņi ir universāls ziņā atpūtai un drošību, bet spilgtas krāsas, kas saistītas ar draudzīgumu, un tumsā - ar skumjām.
Sociālie tīkli, piemēram, Twitter un Facebook, tiek izmantots vairāk gaismas un vidēja toņos zilā un korporatīvās vietnes dod tumšāki toņi izturību un uzticamību.
Lielisks piemērs - notikums dizaina aģentūra Van Vliet & Trap. Izmantojot zilo krāsu kā fona, tie ir vizuāli mājienu to zināšanu un prasmju ziedu dizainu, bet arī radīja sajūtu uzticamību un uzticēšanos.
Tas ir ļoti svarīgi, jo viņi strādā ar notikumiem, kas ir svarīgi, lai vizuālo daļu, piemēram, ar kāzām.
purpurs
Emocijas un asociācijas: luksusa, romantika (gaiši toņi), misticisms un mystery (tumšas krāsas).
Violeta krāsa ir vēsturiski bijusi saistīta ar karalisko varenību, mājieni pie greznības. Violeta nokrāsas atspoguļo dāsnumu un bagātību kopumā, kas padara tos lieliska izvēle modes un luksusa precēm (pat šokolādes, piemēram, CadburyKurš izvēlējās savu zīmolu krāsā).
Gaišākiem, piemēram, lavandas (purpura rozā ar papildus) raisa domas par romantiku, savukārt tumšas nokrāsas parādās vairāk elegants un noslēpumains.
melns
Emocijas un asociācijas: jauda, izsmalcinātība, nervozitāte.
Visjaudīgākais no neitrālās krāsās - melnā, - parādās uz praktiski jebkuras tīmekļa vietnes. Tas var izraisīt dažādas asociācijas, atkarībā no pievienoto krāsā vai dominētu pār tiem, ja lieto pārmērīgi.
Spēks un neitralitāte melns padara to par lielisku izvēli lielos blokos teksta, bet pamatkrāsa tas var radīt sajūtu nervozitātes vai pat būt saistīta ar ļaunumu.
Vairumam vietņu melnā tiek izmantota, lai radītu sajūtu elegance. Par melnā un baltā minimālisma dizains kombinācija rada iespaidu par eleganci un stilu, gan uz vietas Dream un sasniedzamība Kompānija BOSE.
balts
Emocijas un asociācijas: tīrību, vienkāršību, labestību.
Rietumu kultūrā, balts ir saistīta ar tīrību, labestību un nevainību. Šī krāsa ir bieži izmanto fona minimālisma un vienkāršam lapām.
Turklāt neviens no krāsas neļaus pievērst tik lielu uzmanību uz citām krāsām, piemēram, balts. Piemēram, mājas lapa Awwwards Kloina uzvarētājs Toshev visiem saviem darbiem ir izklāstīts uz balta fona, kas piešķir tikai ilustrācijas, un rada iespaidu eleganta galerijā.
pelēks
Emocijas un asociācijas: neitralitāte, formalitātes, skumjas.
Neskatoties uz to, ka dažās situācijās pelēkā var radīt drūmu un skumjas atmosfēru, tas joprojām bieži vien profesionāli dizaineri izmanto.
Ar toņos lieta: mainīgu tos, jūs varat saņemt visus emocijas, ko izraisa gan melnā un baltā krāsā. Kopumā pelēks - ir spēcīgs instruments, īstajās rokās.
Bet kombinācijā ar vairāk košās krāsās pelēkā fona dizainu šķiet moderni, bet ne drūma, piemēram, Awwwards.
bēšs
Emocijas un asociācijas: tā rada raksturu citām krāsām.
Ar sevi, smilškrāsa diezgan blāvi un izteiksmes, bet viņš ir ievērojams īpašumu: bēša uzņemas raksturu krāsu, kas ieskauj to. Tāpēc, ja tas ir paredzēts, lai paustu balsti smilškrāsas kalpo kā fonu vai otrā krāsā.
Tumšākas nokrāsas smilškrāsas rada sajūtu tradīciju un ikdienišķa, dod sajūtu tekstūru papīra un gaišākiem šķiet svaigāku un modernāku.
Piemēram, restorānā Dishoom gaiši bēša krāsā ap vārdiem un tumšākas malām rada iespaidu, ka šajā restorānā - svaigu skatījumu uz tradicionālo virtuvi.
ziloņkauls
Emocijas un asociācijas: komforts, elegance, vienkāršība.
Ziloņkauls un krējuma ražo gandrīz tādas pašas emocijas kā balts. Tomēr ziloņkaula siltāks (vai mazāk sterils) par baltu, kas rada lielāku komforta sajūtu, saglabājot minimālisms.
Jūs varat izmantot ziloņkaula vietā baltas mīkstināt kontrastu starp to un tumšākas krāsas. Piemēram, vietā Art in My Coffee brūns-oranžs elementi ir novietoti uz ziloņkaula fona (kas izskatās pelēcīga), kas saglabā siltuma sajūta.
krāsu spektrs
Katrā vietā ir krāsu diapazonu, kurā pamatkrāsas izmanto, lai aizpildītu lielāku telpu. Kā mēs teicām iepriekš, izmantojot šo krāsu ietekmē prātu un noskaņojumu galvenokārt zemapziņā. Tātad, izvēlēties tos uzmanīgi.
Neskatoties uz to, ka ir daudzi veidi, kā apvienot krāsas, mēs koncentrēsies uz trīs veiksmīgāko un parasti izmanto.
Triāde (triple harmonijas trijstūris)
Triāde - galvenā un visvairāk līdzsvarota sistēma trīs krāsās. Tas izmanto rezonanse un pievienošanu krāsas, bet ir sarežģīts kontrasts, jo to, ko triāde ir visdrošākais diapazonā.
Uz krāsu ritenis 12 krāsas, izvēlēties jebkuru trīs, kas atrodas 120 grādos no otra: vienā krāsā par galveno fona, un divi, kas satura un navigācijas joslā.
Double papildu sistēma
Šis diapazons ir grūtāk īstenot, bet tas var būt rentabls risinājums. To izmanto četras krāsas: divas kontrastējošas un divas papildus.
Skatiet, kā lapa izskatās ļoti Floridas attīstīties, balstoties uz šādu shēmu. Sarkanā un zaļā krāsa kontrastu augu un teksta blokus, un zila fona un oranža tuksnesis efektīvi pabeigtu attēlu.
Analogiem (secīga sistēma)
Gamma līdzīgas krāsas galvenokārt izmanto papildu krāsas. Tas visskaidrāk ļauj uzsvērt dažas īpašības un rada noteiktas emocijas.
Piemēram, kombinācija sarkanā, oranžā un dzeltenā parādījusi spars un vitalitāti. Izmantot šāda mēroga ir ļoti vienkāršs, bet tas ir grūti izvēlēties, kura krāsa tiks iekļauti kombināciju. To ietekme būs pārspīlēts, tāpēc tas nevar būt nepareizi.
Piemēram, izmantojot zila, tirkīza un zaļo krāsu dizaina vietā Blinksale Tas radīja atmosfēru mieru un klusumu. Paziņojums, kā dzeltenā krāsa izmantota, lai uzsvērtu svarīgus punktus.
Tas ir tikai pamati krāsu teoriju, kas var palīdzēt, lai izveidotu iespaidīgu individuāls dizains, un nav nekādu ierobežojumu, cik tālu jūs varat iet ziņā krāsas jūsu vietnē.
Instrumenti Helper lai izvēlētos krāsu
Par laimi, ir vairāki instrumenti, kas palīdz celt krāsu teoriju praksē. Izmēģiniet šos paletes, lai nebūtu jāsāk no nulles radīšanā viņa:
- Adobe Color CC, Agrāk pazīstama kā Adobe Kuler. Šis ir viens no visvairāk uzticamu rīkus krāsu izvēlē.
- Paletton. Ja jums ir nepieciešams vienkāršs rīks, lai ātri krāsu izvēle, Paletton ir perfekta.
- Dzīvoklis UI Color Picker. Ideāls līdzeklis, lai izvēlētos lietotāja interfeisa krāsas.
Un, ja šie instrumenti nav uzvalks jums, šeit ir vēl viens 28 vietnes ar paletes un dažādi instrumenti krāsu izvēli.
Tieša saikne starp krāsu un emociju
Atcerieties, ka lietotāju reti paziņojumu un novērtēt krāsu fona, navigācijas joslā, atsevišķām daļām, bet tas nenozīmē, ka krāsa nav skārusi tiem. Tieši tas notiek neapzināti.
Lietotāja rodas jebkādas emocijas, ir attiecības ar vietni vai zīmolu, tas padara dažas darbības: ritiniet uz leju, noklikšķiniet uz pogas, kas ātru darbības, vai, gluži pretēji, nav pamanīs. Un krāsu spēlē visu šo milzīgu lomu.
Ja jums ir jūsu padomu par to izmantošanu krāsu web dizains, lūdzu, dalīties ar komentāriem.