Spalva interneto dizaine: kaip sukelti vartotojui tinkamas emocijas
Spalva interneto dizaine: kaip sukelti vartotojui tinkamas emocijas
Anonim

Spalva lemia vartotojo emocinę reakciją į svetainę, net jei pats žmogus to nežino. Kokias spalvas naudoti fonui ir skirtingiems svetainės elementams, kad sukeltų tam tikrus pojūčius, ir kaip teisingai derinti spalvas kuriant interneto svetainę, skaitykite toliau.

Spalva interneto dizaine: kaip sukelti vartotojui tinkamas emocijas
Spalva interneto dizaine: kaip sukelti vartotojui tinkamas emocijas

Per visą žmonijos istoriją tapytojų meistrai buvo visuotinai pripažinti dėl gebėjimo dirbti su spalvomis. Šiuolaikiniame pasaulyje lygiai taip pat pripažįstami specialistai, kurie žino, kaip derinti spalvas komerciniais ir verslo tikslais – reklamos ir interneto dizaino srityse.

Galimybė naudoti spalvas gali būti pumpuojama neribotą laiką. Tai tikra galimybių paveikti žmogų bedugnė.

Apžvelgsime spalvų teorijos ir spalvų schemos pagrindus, o tada pakalbėsime apie tam tikrų spalvų emocinį poveikį.

Spalvų teorija

Spalvų temai gali būti skirta visa knyga, todėl neimsime jos visos, o apsiribosime tik naudinga informacija, kurią galima panaudoti kuriant sąsajos dizainą.

Spalvų teoriją galima suskirstyti į tris dalis:

Kontrastas

Kiekvienas atspalvis turi priešingą, taip sakant, savo „nemezę“, kuri yra didžiausias kontrastas šiai spalvai. Norėdami rasti tokią spalvą, galite naudoti spalvų ratą. Tiesiog pasirinkite spalvą priešingoje apskritimo pusėje.

Spalvų ratas
Spalvų ratas

Papildymas

Šios spalvos ne visada prieštarauja viena kitai. Papildomos spalvos pabrėžia viena kitą, o ne kontrastingos. Spalvų rate šios spalvos seka viena kitą, pavyzdžiui, viena kitą papildančios alyvinės spalvos – mėlyna ir rožinė.

Rezonansas

Kiekviena spalva sukelia tam tikrą nuotaiką. Ryškios šiltos spalvos (raudona, oranžinė, geltona) pripildo žmogų energijos, pažadina, o šalti tamsūs atspalviai (žalia, mėlyna, violetinė), priešingai – atpalaiduoja ir nuramina.

Pavyzdžiui, jie naudoja raudoną naršymo juostą, kad pažadintų skaitytoją ir padidintų jo susijaudinimą. Atsižvelgiant į svetainės specifiką – sensacingą naujieną – raudona spalva atrodo kaip logiškas sprendimas.

BBC naujienos
BBC naujienos

Spalvų teorija interneto dizaino srityje yra daugiau nei tik puošyba. Spalva gali pakeisti jūsų svetainės suvokimą ir atlikti svarbų vaidmenį jūsų versle.

Emocinis spalvų suvokimas

Niekas nepaneigs glaudaus spalvų ir emocijų sąveikos. Ir, žinoma, bet kuris interneto dizaineris nori pasinaudoti šia įtaka, kad sukurtų tinkamą atmosferą kiekvienai svetainei.

Remdamiesi keliais tyrimais – svetainėje paskelbta analize ir įrašu apie spalvas – paaiškinsime, kaip spalvos veikia emocijas ir padės sukurti UX dizainą.

Svarbu atsiminti, kad skirtingos pasaulio kultūros skirtingai suvokia spalvas. Apibūdinsime emocines asociacijas, būdingas tik Vakarų kultūrai.

Raudona

Labiausiai stimuliuojanti spalva, tokia energingai įkrauta, kad gali net padidinti kraujospūdį. Raudona simbolizuoja aistrą ir galią ir yra labiausiai dėmesį patraukianti spalva, todėl ji dažnai naudojama svarbiems įspėjimams ir pranešimams.

Pavyzdžiui, raudona spalva labai tinka svetainei, kurios tikslas – įspėti apie jaučiamas grėsmes.

Ekrano kopija_2
Ekrano kopija_2

Puslapio viršuje naudoti daug raudonos spalvos yra puiku, nes tai atkreipia dėmesį į svarbią jūsų pranešimo informaciją. Tuo pačiu metu žmonės linkę greitai palikti raudoną „pavojaus zoną“ir slinkti žemyn. O tai, savo ruožtu, leidžia vartotojui parodyti daugiau turinio.

Tačiau ši spalva gali veikti ir prieš jus, nes gali sukelti agresiją ar perdėtą stimuliaciją. Jei norite sukurti labiau atpalaiduojančią atmosferą, stenkitės saikingai naudoti raudoną spalvą ir rinkitės šviesesnius raudonos spalvos atspalvius.

Oranžinė

Kaip ramiausias iš šiltų tonų, oranžinė spalva gali sukelti įvairių emocijų. Kaip pagrindinė spalva, ji gali kelti susidomėjimą ir pagyvinti, o kaip antrinė spalva – išlaikyti šias savybes, tačiau neįkyriau.

Fanta svetainė
Fanta svetainė

Be to, oranžinė padeda sukurti judesio ir energijos pojūtį. Pavyzdžiui, tai puikiai atrodo įmonės animacinių filmų svetainėje, kurioje galima suprasti jaunystę ir judėjimą. Spalva siejama su kūrybiškumu, išlaikant pažįstamą prekės ženklo pojūtį.

Geltona

Tai viena universaliausių spalvų, o jos sukeliamos emocijos labiau priklauso nuo atspalvio.

Ryškiai geltona spalva prideda energijos, bet be raudonos spalvos ryškumo ir ryškumo. Vidutiniai geltonos spalvos atspalviai suteikia komforto jausmą, bet vis tiek gaivina. Tamsūs atspalviai (taip pat ir auksiniai) suteikia senovės pojūtį, užpildydami erdvę nesenstymu, išmintimi ir smalsumu.

Flash laikmena
Flash laikmena

Pavyzdžiui, interneto dizaino agentūros pagrindiniame puslapyje tamsesni geltoni tonai trykšta energija, smalsumu ir autoritetu. Ši spalva puikiai tiks įmonėms, kurios užsidirba iš konsultacijų ir nori pabrėžti savo profesionalumą.

Žalia spalva

Žalia yra tiltas tarp šiltų ir šaltų atspalvių, nors dažniausiai būna šaltesnis. Tai reiškia, kad žalia spalva atpalaiduoja mėlyną spalvą, tačiau turi ir šiek tiek energijos iš geltonos spalvos.

Ameritrade
Ameritrade

Dėl to sukuriama labai subalansuota ir stabili atmosfera. Tamsesni žalios spalvos atspalviai sukuria turtingumo ir gausos įspūdį, kaip ir svetainė.

Mėlyna spalva

Kaip ir geltonos spalvos, mėlynos spalvos poveikis labai priklauso nuo atspalvio. Visi mėlynos spalvos atspalviai yra universalūs atsipalaidavimo ir saugumo požiūriu, tačiau šviesūs tonai asocijuojasi su draugiškumu, o tamsūs – su liūdesiu.

Socialiniuose tinkluose, tokiuose kaip „Twitter“ir „Facebook“, naudojami šviesesni ir vidutiniai mėlynos spalvos atspalviai, o įmonių svetainės teikia pirmenybę tamsesniems stiprumo ir patikimumo atspalviams.

Renginių dizaino agentūra yra puikus pavyzdys. Naudodami mėlynas gėles kaip foną, jie vaizdžiai užsiminė apie savo žinias ir įgūdžius floristikos srityje, taip pat sukūrė patikimumo ir pasitikėjimo jausmą.

Van vliet ir spąstai
Van vliet ir spąstai

Tai labai svarbu, nes jie dirba su renginiais, kuriuose labai svarbus vaizdas, pavyzdžiui, vestuvėse.

Violetinė

Violetinė spalva istoriškai siejama su karališka didybe, sufleruojančia apie prabangą. Violetinės spalvos atspalviai atspindi dosnumą ir turtus apskritai, todėl yra puikus pasirinkimas mados ir prabangos prekėms (net šokoladui, kaip prekės ženklo spalvų pasirinkimas).

Vaizdas
Vaizdas

Šviesesni atspalviai, tokie kaip levandos (violetinė su rožinės spalvos atspalviu), sukelia romantikos mintis, o tamsesni atrodo prašmatnesni ir paslaptingesni.

Juoda

Stipriausia iš neutralių spalvų – juoda – yra beveik bet kurioje svetainėje. Jis gali sukelti įvairias asociacijas, priklausomai nuo jį lydinčių spalvų, arba jose dominuoti, jei naudojamas per daug.

Dėl juodos spalvos stiprumo ir neutralumo tai puikus pasirinkimas dideliems teksto blokams, tačiau kaip pagrindinė spalva ji gali sukelti nervingumo jausmą ar net būti siejama su blogiu.

Daugumoje svetainių juoda spalva naudojama siekiant sukurti rafinuotumo jausmą. Minimalistinio dizaino juodos ir baltos spalvų derinys sukuria elegancijos ir stiliaus įspūdį, kaip ir BOSE svetainėje.

Dream + Reach
Dream + Reach

Baltas

Vakarų kultūroje balta spalva siejama su tyrumu, gerumu ir nekaltumu. Ši spalva dažnai naudojama minimalistinių ir paprastų svetainių fone.

Svetainė su Kloin Toshev darbais
Svetainė su Kloin Toshev darbais

Be to, jokia viena spalva neleis kitoms spalvoms skirti tiek dėmesio kaip balta. Pavyzdžiui, „Awwwards“nugalėtojui Kloinui Toševui visi jo darbai išdėlioti baltame fone, todėl iliustracijos tik išsiskiria ir sukuria elegantiškos galerijos įspūdį.

Pilka spalva

Nepaisant to, kad kai kuriose situacijose pilka gali sukurti niūrią ir liūdną atmosferą, ją vis dar dažnai naudoja profesionalūs dizaineriai.

Viskas dėl atspalvių: kaitaliojant juos galima išgauti visas emocijas, kurias sukelia tiek juoda, tiek balta. Apskritai pilka yra galingas įrankis tinkamose rankose.

Awwwardai
Awwwardai

Ir kartu su ryškesnėmis dizaino spalvomis pilkas fonas atrodo modernus, o ne niūrus, pavyzdžiui, ant.

Smėlio spalvos

Pati smėlio spalva yra gana blanki ir neišraiškinga, tačiau turi vieną nepaprastą savybę: smėlio spalvos įgauna ją supančių gėlių charakterį. Todėl, jei nesiekiama išreikšti santūrumo, smėlio spalvos naudojamas kaip fonas arba antra spalva.

Tamsesni smėlio spalvos atspalviai sukuria tradicijos ir žemiškumo pojūtį, suteikia popieriaus pojūtį, o šviesesni atspalviai atrodo gaivesni ir modernesni.

Dishoom
Dishoom

Pavyzdžiui, restorano svetainėje šviesiai smėlio spalva aplink pavadinimą ir tamsesni kraštai sukuria įspūdį, kad restoranas yra nauja tradicinės virtuvės idėja.

Dramblio kaulas

Dramblio kaulas, taip pat grietinėlė, sukelia beveik tas pačias emocijas kaip ir balta. Tačiau dramblio kaulas yra šiltesnis (arba mažiau sterilus) nei balta, o tai sukuria didesnį komforto jausmą išlaikant minimalizmą.

Galite naudoti dramblio kaulą, o ne baltą, kad sušvelnintumėte kontrastą tarp jo ir tamsesnių spalvų. Pavyzdžiui, svetainėje rudai oranžiniai elementai dedami dramblio kaulo fone (kuris atrodo pilkšvas), kad būtų išlaikytas šilumos jausmas.

Menas mano kavoje
Menas mano kavoje

Spalvų spektras

Kiekviena svetainė turi spalvų schemą, kurioje naudojamos pagrindinės spalvos, kad užpildytų daugiau vietos. Kaip minėjome anksčiau, šių spalvų naudojimas daugiausia paveikia žmogaus protą ir nuotaiką nesąmoningai. Taigi rinkitės juos atsargiai.

Nors yra daug būdų derinti spalvas, mes sutelksime dėmesį į tris sėkmingiausius ir dažniausiai naudojamus.

Triada (triguba harmonija, trikampis)

Triada
Triada

Triada yra pagrindinė ir labiausiai subalansuota trijų spalvų sistema. Jis naudoja rezonansą ir spalvų papildymą, tačiau neturi sudėtingo kontrasto, todėl triada yra patikimiausia gama.

12 spalvų ratuke pasirinkite bet kuriuos tris 120 laipsnių atstumu vienas nuo kito: vieną priekiniam planui ir du turinio ir naršymo juostai.

Dviguba viena kitą papildanti sistema

Dviguba viena kitą papildanti sistema
Dviguba viena kitą papildanti sistema

Šį diapazoną įgyvendinti sunkiau, tačiau tai gali būti pelningas sprendimas. Naudojamos keturios spalvos: dvi kontrastingos ir dvi viena kitą papildančios.

Pažiūrėkite, kaip atrodo puikus „Florida Flourish“puslapis pagal šį išdėstymą. Raudona ir žalia spalvos kontrastuoja augaluose ir teksto blokuose, o mėlynas fonas ir oranžinė dykuma efektyviai papildo vaizdą.

Klestėti
Klestėti

Analogai (serijinė sistema)

Analogai
Analogai

Panašių spalvų diapazone daugiausia naudojami papildomi atspalviai. Tai leidžia ypač aiškiai pabrėžti kai kurias savybes ir sukelti tam tikras emocijas.

Pavyzdžiui, raudonos, oranžinės ir geltonos spalvų derinys pabrėžia energiją ir gyvybingumą. Naudoti tokias svarstykles labai paprasta, tačiau sunku pasirinkti, kokios spalvos bus įtrauktos į derinį. Jų poveikis bus perdėtas, todėl negalite klysti.

Pavyzdžiui, mėlynos, turkio ir žalios spalvos naudojimas svetainės dizaine sukūrė ramybės ir ramybės atmosferą. Atkreipkite dėmesį, kaip geltona buvo naudojama svarbiems dalykams pabrėžti.

Blinksale
Blinksale

Tai tik spalvų teorijos pagrindai, kurie gali padėti jums sukurti įspūdingą individualų dizainą, ir nėra jokių apribojimų, kiek galite nueiti spalvų srityje savo svetainėje.

Spalvų parinkimo pagalbinės priemonės

Laimei, yra keletas įrankių, padedančių spalvų teoriją pritaikyti praktikoje. Išbandykite šias paletes, kad nereikėtų pradėti nuo nulio, kad sukurtumėte savo:

  1. anksčiau žinomas kaip Adobe Kuler. Tai vienas patikimiausių spalvų parinkimo įrankių.
  2. … Jei norite, kad paprastas įrankis kuo greičiau išrinktų spalvą, „Paletton“yra puikus.
  3. … Puikus įrankis pasirenkant vartotojo sąsajos spalvą.

Ir jei šie įrankiai jums netinka, čia yra skirtingų spalvų rinkiklio įrankių.

Tiesioginis santykis tarp spalvos ir emocijų

Atminkite: vartotojai retai pastebi ir vertina fono spalvą, naršymo juostą, atskiras detales, tačiau tai nereiškia, kad spalva jiems neturi įtakos. Tai tiesiog vyksta pasąmoningai.

Vartotojas turi tam tikrų emocijų, susiformuoja požiūris į svetainę ar prekės ženklą, jis atlieka tam tikrus veiksmus: slenka žemyn, spaudžia mygtukus, kurie skatina veiksmą, arba, atvirkščiai, jų nepastebi. Ir spalva visame tame vaidina didžiulį vaidmenį.

Jei turite patarimų, kaip naudoti spalvas kuriant interneto dizainą, pasidalykite jais komentaruose.

Rekomenduojamas: