Farba v návrhu internetových stránok: ako vyvolať užívateľskú žiaduce emócie
Tipy / / December 19, 2019
V celej ľudskej histórii, master-umelci získal všeobecné uznanie vďaka schopnosti pracovať s farbami. V dnešnom svete nedostávajú menej špecialistov uznanie, ktorí sú schopní kombinovať farby v komerčnom a obchodným účely - v reklame a webdesignu.
Schopnosť farbách použitie sa môže využívať až do nekonečna. Je to skutočná hĺbka príležitostí na vystavenie človeka.
Budeme vám rozprávať o základy teórie farieb a farebnej schémy, a potom hovoriť o emocionálny dopad určitých farieb.
teórie farby
farebnú schému, môžete venovať celú knihu, takže nebudeme to brať úplne, a obmedziť na užitočné informácie, ktoré môžu byť použité pri vývoji dizajnu rozhrania.
To môže byť rozdelené do teórie farby do troch častí:
kontrastné
Každý odtieň je opakom, aby som tak povedal, z jeho "zarytý nepriateľ", čo je najväčší kontrast s touto farbou. Ak chcete nájsť farby, môžete použiť farebné koliesko. Stačí len vybrať farbu na opačnej strane kruhu.
pridanie
Tieto farby nie sú vždy v rozpore so sebou. Doplnkové farby zdôrazniť seba, na rozdiel od kontrastu. V farebnom kole, tieto farby sú k sebe navzájom, ako sú komplementárne farby fialovej - modrej a ružovej.
rezonancie
Každá farba je určitá nálada. Jasné teplé farby (červená, oranžová, žltá) naplnené ľudskej energie, ju prebudiť, studené tmavé farby (zelená, modrá, fialová), naopak, relaxovať a upokojenie.
napríklad, BBC News Použite červený navigačnú lištu, prebudiť čitateľa, aby posilnila svoju excitovaného stavu. Vzhľadom na špecifickosť miesta - senzačný novinky - červená je logickým riešením.
teória farieb v web design - je viac než len dekorácia. Farba môže zmeniť vnímanie vášho webu, a hrajú kľúčovú úlohu vo vašom podnikaní.
Emocionálne vnímanie farieb
Nikto nebude popierať úzku spoluprácu farieb a emócií. A samozrejme akýkoľvek web designer chce použiť tento efekt vytvoriť určitú atmosféru pre každú lokalitu.
Na základe viacerých štúdií - analýzy, zverejnená na internetových stránkach Vandelay dizajnA písať o farby v smash Magazine - vysvetlíme, ako farby ovplyvňujú emócie a pomáhajú vytvoriť UX-design.
Je dôležité si uvedomiť, že rôzne kultúry po celom svete majú odlišné vnímanie farieb. Popíšeme emocionálne asociácie, ktoré sú jedinečné pre západnú kultúru.
červená
Emócie a asociácie: sila, význam, mládežou.
Najviac stimulujúce farba, tak energicky nabitá, môže dokonca zvyšovať krvný tlak. Červená predstavuje vášeň a silu, že viac ako ostatné farby priťahujú pozornosť, takže sa často používa pre dôležitá varovania a oznámenia.
Napríklad, červená je veľmi vhodné miesto No Way NSAKtorého účel - zabrániť údajnej hrozby.
Používajú veľa červenej farby v hornej časti stránky - to je skvelé riešenie, pretože to vyžaduje pozornosť k dôležitým informáciám v správe. V rovnakej dobe, ľudia majú tendenciu rýchlo opustiť "nebezpečnej zóny" v červenej farbe a prejdite nadol. To zase umožňuje užívateľovi zobraziť viac obsahu.
Ale táto farba môže pracovať proti vám, pretože to môže spôsobiť agresiu alebo nadmernú. Ak chcete vytvoriť viac uvoľnenú atmosféru, skúste použiť červené stredne a zvoliť svetlejšie odtiene červenej.
oranžový
Emócie a asociácie: príjemnosť, energetiky a jedinečnosť.
Ako najtichší teplých tónov oranžovej môže spôsobiť celý škálu rôznych emócií. Ako základné farby, môže byť zaujímavé a výstuhou, a ako sekundárny - zachovať tieto vlastnosti, ale v non-rušivé spôsobom.
Okrem toho Orange pomáha vytvárať dojem pohybu a energie. Napríklad, to vyzerá skvele na stránkach kreslených FantaKtorý je pripomínajúce mladosti a pohybu. Farba je spájaná s kreativitou pri zachovaní pocitu známej značky.
žltý
Emócie a asociácie: šťastie, nadšenie, archaizmus (tmavšie farby).
To je jeden z najvšestrannejších farieb a emócií, že to spôsobuje, sú závislé od odtieňa vo väčšej miere.
Jasne žltá farba dodáva energiu, ale bez závažnosti a tvrdosti, ktorý je prítomný v červenej farbe. Stredná odtiene žltej farby vyvolávajú pocit pohodlia, aj keď stále vitálny. Tmavé odtiene (zahŕňajúce zlato) poskytujú pocit staroveku, zaplniť priestor nadčasovosť, múdrosť a zvedavosť.
Napríklad na hlavnej stránke designu agentúry webovej flash Media tmavší žltú tón vyžarujú energiu, zvedavosť a autoritu. Táto farba je ideálna pre firmy, ktoré zarábajú na konzultácie a chcú zdôrazniť ich profesionalitu.
zelená
Emócie a asociácie: rast, stabilita, finančné témy obklopujúce tému životného prostredia.
Green - most medzi teplé a chladné odtiene, ale nakláňa viac k chladu. To znamená, že zelená má relaxačný účinok modrú farbu, ale tiež má trochu elánu od žltej.
Výsledkom je, že sa vytvára veľmi vyrovnané a stabilné atmosféru. Tmavšie odtiene zelenej vytvoriť dojem bohatstva a hojnosti, a to ako on-line Ameritrade.
modrý
Emócie a asociácie: pokoj, bezpečie, otvorenosť (svetlejšie odtiene), spoľahlivosti (tmavšie odtiene).
Rovnako ako v prípade žltej farby, efekt je vysoko závislá na modrý odtieň. Všetky odtiene modrej sú univerzálne, pokiaľ ide o relaxáciu a bezpečnosti, ale svetlé farby spojené s príjemnosť a tmy - so smútkom.
Sociálne siete ako Twitter a Facebook sú používané viac ľahké a stredné odtiene modrej a firemných stránok preferujú tmavšie odtiene sily a spoľahlivosti.
Výborným príkladom - event agentúra dizajnu Van Vliet & Trap. Používanie modrú farbu ako pozadie, sú vizuálne narážal na svoje vedomosti a zručnosti v kvetinovým vzorom, ale tiež vytvoril pocit spoľahlivosti a dôvery.
To má veľký význam, pretože pracujú s udalosťami, čo je dôležité pre vizuálnu časť, napríklad svadby.
nachový
Emócie a asociácie: luxusné, romantika (svetlé odtiene), mysticizmus a tajomstvo (tmavé farby).
Fialová farba v minulosti spájané s kráľovskou veľkoleposťou, narážky na luxus. Fialové odtiene odrážajú veľkorysosť a bohatstva ako celku, čo z nich robí vynikajúcou voľbou pre módy a luxusného tovaru (aj čokoláda, napríklad, CadburyKtorí sa rozhodli svoju farbu značky).
Svetlejšie odtiene, ako je levanduľa (fialové ružové s prídavkom) evokujú myšlienky o romantiku, zatiaľ čo tmavé tóny vyzerať viac elegantný a tajomné.
čierna
Emócie a asociácie: výkon, sofistikovanosť, nervozita.
Najsilnejší z neutrálnych farieb - čiernej - je uvedený na prakticky ľubovoľnej webovej stránky. To môže spôsobiť rôzne asociácie v závislosti na sprievodnom farbu alebo dominovať im, ak sa používa príliš.
Sila a neutralita čierne z neho robí ideálnou voľbou pre veľké bloky textu, ale hlavná farba môže vytvoriť pocit nervozity alebo dokonca byť spájaný so zlom.
U väčšiny lokalít, čierny sa používa na vytvorenie zmysel pre eleganciu. Kombinácia čiernej a bielej minimalistický dizajn budí dojem elegancie a štýlu, a to ako na mieste Dream a Reach Spoločnosť BOSE.
biela
Emócie a asociácie: čistota, jednoduchosť, dobrotu.
V západnej kultúre, biela je spojená s čistotou, dobroty a nevinnosti. Táto farba sa často používa pre pozadie minimalistickej a jednoduchej stránky.
Okrem toho žiadna z farieb nedovolí čerpať toľko pozornosti ostatnými farbami, ako je biela. napríklad v webové stránky Awwwards Kloina víťaz Toshev všetkých jeho diel sú stanovené na bielom pozadí, ktorý prideľuje iba ilustrácie a vytvára dojem elegantného galérii.
šedá
Emócie a asociácie: neutralite, formalita melanchólia.
Napriek skutočnosti, že v niektorých situáciách šedej môže vytvoriť ponurú a melancholické atmosféry, to je ešte často používajú profesionálne návrhári.
Tá vec v odtieňoch: je striedavý, môžete získať všetky emócie spôsobené tak v čiernej a bielej. Všeobecne platí, že šedá - je mocný nástroj, v správnych rukách.
Ale v kombinácii s živšími farbami v šedom pozadí dizajn sa zdá, moderné, ale nie ponuré, ako je Awwwards.
béžový
Emócie a asociácie: to vyjadruje charakter ostatnými farbami.
Sama o sebe, béžová trochu nudná a bez výrazu, ale on má pozoruhodnú vlastnosť: béžová nadobúda charakteru farieb, ktoré ju obklopujú. Preto, ak je nemá v úmysle vyjadrovať zádržný béžová slúžia ako pozadie alebo druhou farbou.
Tmavšie odtiene béžovej vytvoriť pocit tradície a rutinných operácií, dávať zmysel pre textúry papiera a svetlejšie odtiene sa zdajú čerstvejší a modernejšie.
Napríklad v hotelovej reštaurácii Dishoom svetlo béžová farba okolo mena a tmavšie hrany vyvolávajú dojem, že v tejto reštaurácii - nový pohľad na tradičnú kuchyňu.
slonová kosť
Emócie a asociácie: komfort, elegancia, jednoduchosť.
Ivory a smotana produkujú takmer rovnaké emócie ako biele. Avšak slonoviny teplejšie (alebo menej sterilné) ako bielu, ktorý vytvára väčší pocit pohodlia pri zachovaní minimálnej umenia.
Môžete použiť Slonoviny namiesto bieleho zjemniť kontrast medzi ňou a tmavšie farby. Napríklad, miesto Art v káve hnedo-oranžové prvky sú umiestnené na Slonoviny pozadí (ktorý vyzerá našedlé), ktorá si zachováva pocit tepla.
farebné spektrum
Každý web má širokú škálu farieb, v ktorom primárne farby používané na vyplnenie väčší priestor. Ako sme povedali skôr, použitie týchto farieb má vplyv na myseľ a nálady väčšinou podvedome. Preto si ich starostlivo.
Napriek skutočnosti, že existuje mnoho spôsobov, ako kombinovať farby, sa zameriame na tri najúspešnejšie a bežne používané.
Triáda (trojitý harmónie trojuholník)
Triáda - hlavné a najviac vyvážený systém z troch farieb. Používa rezonancie a pridanie farieb, ale tam je zložitý kontrast, pretože to, čo trojica je najspoľahlivejšie rozsah.
Na farebné koliesko z 12 farieb, vybrať akýkoľvek tri, ktorá sa nachádza v 120 stupňov od seba navzájom: jedna farba pre hlavné pozadia a dve pre obsah a navigačnej lišty.
Double doplnkový systém
Táto rada je ťažko vykonateľné, ale to môže byť nákladovo efektívne riešenie. To používa štyri farby: dve kontrastné a dva ďalšie.
Pozrite sa, ako stránka vyzerá pozoruhodne Florida prekvitať, na základe takéhoto systému. Červená a zelená farba kontrast v rastlinách a bloky textu a modré pozadie a oranžovej desert účinne úplný obraz.
Analógy (sekvenčné systém)
Gama podobné farby používa predovšetkým doplnkové farby. To umožňuje najjasnejšie zdôrazniť niektoré vlastnosti a spôsobiť určité emócie.
Napríklad, kombinácia červenej, oranžovej a žltej zdôrazňujú silu a vitalitu. Použitie takéhoto rozsahu je veľmi jednoduchá, ale je ťažké si vybrať, akú farbu budú zahrnuté do kombinácie. Ich účinok bude prehnané, takže to nemôže byť zlé.
Napríklad, použitie modrej, tyrkysovej a zelenej farby v dizajne webu Blinksale To vytvorilo atmosféru pokoja a mieru. Všimnite si, ako žltá farba použitá pre zdôraznenie dôležitých bodov.
To je len základy teórie farby, ktoré môžu pomôcť vytvoriť pôsobivý vlastnej konštrukcie, a nie je tam žiadny limit na to, ako ďaleko môžete ísť, pokiaľ ide o farby na vašom webe.
Nástroje pomocným vyberte farbu
Našťastie existuje niekoľko nástrojov, ktoré prispieť teóriu farieb v praxi. Skúste tieto palety, aby nemuseli začínať od nuly pri tvorbe jeho:
- Adobe Color CC, Predtým známy ako Adobe Kuler. To je jeden z najspoľahlivejších nástrojov pri výbere farieb.
- Paletton. Ak potrebujete jednoduchý nástroj pre rýchly výber farieb, Paletton je perfektný.
- Flat UI Color Picker. Perfektný nástroj pre výber farby používateľského rozhrania.
A ak tieto nástroje nie sú vyhovovať, tu je ďalší 28 lokalít s paletami a rôzne nástroje pre výber farieb.
Priamy vzťah medzi farbou a emócií
Nezabudnite, že užívatelia veľmi zriedka oznámenia a oceniť farbu pozadia, navigačnej lišty, jednotlivých častí, ale to neznamená, že farba nie je ovplyvnená ne. Proste sa to stane podvedome.
Užívateľ zažiť žiadne emócie, je vzťah k miestu alebo značky, to robí určité akcie: nalistujte kliknúť na tlačidlá, ktoré výzvu k akcii, alebo naopak nie Všimnite si ich. A farba hrá v celej tejto obrovskej úlohe.
Ak máte radu na použitie farieb v návrhu internetových stránok, prosím podeľte v komentároch.