Цвят в уеб дизайн: как да предизвика желаният от ползвателя емоцията
Съвети / / December 19, 2019
През цялата човешка история, майстори-художници получиха широко признание се дължи на способността за работа с цвят. В днешния свят не получават по-малко при признаване, които са в състояние да се комбинират цветове в търговски и бизнес целите - в областта на рекламата и уеб дизайн.
Възможността за използване на цветове може да се изпомпва до безкрайност. Това е истинска дълбочина на възможностите за експозиция на човека.
Ние ще ви разкажа за основите на теорията на цветовете и цветова схема, след което се говори за емоционалното въздействие на определени цветове.
цвят на теория
цветова тема, можете да посвети цяла книга, така че ние няма да го вземе изцяло, както и да се ограничим до полезна информация, която може да се използва в разработването на интерфейс дизайн.
Тя може да бъде разделена на теорията на цветовете на три части:
За разлика
Всяка сянка е обратното, така да се каже, на своята "заклет враг", който е най-големият контраст с този цвят. За да намерите цвят, можете да използвате цветното колело. Просто изберете цвета на противоположната страна на кръга.
допълнение
Тези цветове не винаги са в конфликт помежду си. Допълващи се цветове подчертават помежду си, за разлика от контраста. В цветното колело, такива цветове са един до друг, като допълващи се цветове на лилаво - сини и розови.
резонанс
Всеки цвят е определено настроение. Bright топли цветове (червено, оранжево, жълто), изпълнен с човешка енергия, тя се събуди, студени тъмни цветове (зелено, синьо, лилаво), а напротив, да се отпуснат и успокояват.
Например, BBC News Използвайте червена лента за навигация, за да се събуди на читателя, да засили възбудено състояние. Предвид спецификата на обекта - сензационно новини - червеното е логично решение.
теория на цветовете в уеб дизайн - е повече от просто украса. Цвят може да се промени възприятието на сайта си и да играе решаваща роля в бизнеса си.
Емоционално възприемане на цветовете
Никой няма да отрече близкото взаимодействие между цвят и емоция. И, разбира се, всеки уеб дизайнер иска да използва този ефект за създаване на определена атмосфера за всеки сайт.
Въз основа на няколко проучвания - анализ, публикуван на интернет страницата Vandelay DesignИ Публикуваме за цветовете в Smash Magazine - обясняваме как цветовете влияят на емоциите и да подпомогне създаването UX дизайн.
Важно е да се помни, че различните култури по света имат различни възприятия на цвят. Ще опишем емоционални асоциации, които са уникални за западната култура.
червен
Емоциите и асоциации: за захранване, значението, младежта.
Най цвят стимулиращо, така енергично заредена, тя може дори да повиши кръвното налягане. Red представлява страст и енергия, то повече от други цветове привличат вниманието, така че често се използва за важни предупреждения и съобщения.
Например, червено е много подходящо място No Way НСАЧиято цел - да се предотврати предполагаемите заплахи.
Използвайте много червено в горната част на страницата - това е чудесно решение, защото тя обръща внимание на важната информация в съобщението. В същото време, хората са склонни бързо да напусне "опасната зона" на червено и превъртете надолу. Това, от своя страна, позволява на потребителя да покаже повече съдържание.
Но този цвят може да работи срещу вас, защото това може да доведе до агресия или свръх стимулация. Ако искате да се създаде по-спокойна атмосфера, се опитват да използват червено умерено и да изберете по-светли нюанси на червеното.
оранжев
Емоциите и асоциации: лекотата, енергетиката и уникалност.
Като най-тихите на топли тонове, оранжево може да доведе до целия спектър от различни емоции. Както основния цвят, може да бъде от интерес и скоба, и вторично - запазване на тези свойства, но в не-натрапчиви начин.
В допълнение, Orange помага за създаването на чувство за движение и енергия. Например, тя изглежда страхотно на сайта на комикс ФантаКое е по-показателен за младежта и движение. Цвят е свързана с творчество, като същевременно се поддържа чувството на познатата марка.
жълт
Емоциите и асоциации: щастие, ентусиазъм, архаизъм (тъмни цветове).
Това е една от най-разнообразни цветове и емоции, които го причиняват, са зависими от сянката на по-голяма степен.
Ярко жълт цвят, добавя енергия, но без тежестта и остротата, която присъства в червено. Средни нюанси на жълто цветове предизвикват чувство на комфорт, макар и все още енергични. Тъмните нюанси (включително злато) осигуряват чувство на древността, запълване на пространство безвремие, мъдростта и любопитство.
Така например, на главната страница на агенцията за уеб дизайн Flash Media по-тъмно жълт тон излъчват енергия, любопитство и авторитет. Този цвят е подходящ за фирми, които печелят консултациите си и те искат да се подчертае, техния професионализъм.
зелен
Емоциите и асоциации: растеж, стабилност, финансови теми, свързани с темата на околната среда.
Green - мост между топли и студени тонове, но се навежда повече на студ. Това означава, че зеления действа отпускащо син цвят, но също така има малко енергия от жълто.
В резултат на това, той създава много балансиран и стабилен атмосфера. По-тъмните нюанси на зелено създават впечатление за богатство и изобилие, както онлайн Ameritrade.
син
Емоциите и асоциации: спокойствие, сигурност, откритост (светли нюанси), надеждност (по-тъмни нюанси).
Както в случая на жълтия цвят, ефектът е силно зависима от синия цвят. Всички нюанси на синьото са гъвкави по отношение на спокойствие и сигурност, но цветовете ярки, свързани с лекотата и тъмно - с тъга.
Социалните мрежи като Twitter и Facebook се използват по-леки и средни нюанси на синьото и корпоративни сайтове предпочитат по-тъмни нюанси на здравина и надеждност.
Чудесен пример - събитие агенция дизайн Van Vliet и Трап. Използването син цвят като фон, те са визуално намекна своите знания и умения в флорален дизайн, но и създава усещане за надеждност и доверие.
Това е от голямо значение, тъй като те работят със събитията, което е важно за визуална част, например с сватби.
пурпурен
Емоциите и асоциации: луксозни, романтика (светли нюанси), мистика и мистерии (тъмни цветове).
Виолетовият цвят исторически е свързана с кралското величие, не подсказва лукс. Лилави нюанси отразяват на щедростта и богатството като цяло, което ги прави отличен избор за модни и луксозни стоки (дори шоколад, например, CadburyКой избра своя цвят марка).
По-леките нюанси като лавандула (лилаво розово с допълнение) предизвикват мисли за романтика, докато тъмните нюанси изглеждат по-елегантни и загадъчни.
черно
Емоциите и асоциации: сила, изтънченост, нервност.
Най-мощният от неутралните цветове - черен - се появява на почти всеки сайт. Това може да предизвика различни асоциации в зависимост от придружаващите цвета или доминират тях, ако се използва прекомерно.
Силата и неутралитета на черно го прави отличен избор за големи блокове от текст прави, но основният цвят тя може да се създаде усещане за нервност или дори да е свързано със злото.
За повечето сайтове черно се използва за създаване на чувство за елегантност. Комбинацията от черно и бяло минималистичен дизайн създава впечатление за елегантност и стил, както на място Мечта и Reach Фирма BOSE.
бял
Емоциите и асоциации: простота, чистота, доброта.
В Западна култура, бял е свързан с чистота, благост и невинност. Този цвят често се използва за фон на минималистични и прости сайтове.
Освен това, нито един от цветовете няма да позволи да се направи толкова много внимание на другите цветове като бяло. Например, в уебсайт победител Awwwards Kloina Тошев всичките му творби са изложени на бял фон, който се разпределят само илюстрации, и създава впечатление за елегантна галерия.
сив
Емоциите и асоциации: неутралност, формалност, меланхолия.
Въпреки факта, че в някои ситуации сивото може да създаде мрачен и меланхоличен атмосфера, тя все още често се използва от професионални дизайнери.
Работата в нюанси: ги редуват, можете да получите всички емоции, предизвикани от двете в черно и бяло. Като цяло, сиво - е мощен инструмент в правилните ръце.
Но в комбинация с по-ярки цветове в сив фон дизайн изглежда модерен, но не и мрачно, като например Awwwards.
бежов
Емоциите и асоциации: тя предава характера на другите цветове.
Сама по себе си, бежово-скоро скучна и безизразно, но той има забележителен имот: бежов придобива характера на цветове, които го заобикалят. Ето защо, ако го няма за цел да изрази сдържаност бежово служи като фон или втория цвят.
По-тъмните нюанси на бежово създават усещане за традиция и светски, дават чувство на текстурата на хартия и по-леки нюанси изглежда по-свежа и по-модерен.
Например, ресторант на място Dishoom светло бежов цвят около имената и по-тъмни краища създаде впечатление, че този ресторант - нов поглед върху традиционна кухня.
слонова кост
Емоциите и асоциации: комфорт, елегантност, простота.
Ivory и сметана произвеждат почти същите емоции като бялото. Въпреки слонова кост по-топло (или по-малко стерилни) от бяло, което създава по-голямо усещане за комфорт, като същевременно се поддържа минимализъм.
Можете да използвате слонова кост вместо бял, за да смекчи контраста между него и цветовете по-тъмни. Например, мястото Изкуство в кафето кафяво-оранжево елементи са поставени на слонова кост фон (което изглежда сиво), който запазва усещане за топлина.
цветова гама
Всеки сайт има гама от цветове, в които основните цветове, използвани за попълване на едно по-голямо пространство. Както казахме и преди, използването на тези цветове се отразява на ума и настроението най-вече подсъзнателно. Така ги избирайте внимателно.
Въпреки факта, че има много начини да се съчетават цветовете, ние ще се фокусира върху трите най-успешни и често се използва.
Triad (тройна хармония триъгълник)
Triad - основна и най-балансирана система от три цвята. Той използва резонанс и добавяне на цветове, но там е сложен разлика от тях, защото от това, което триадата е най-надеждният диапазон.
На цвят колело от 12 цвята, изберете всеки три, разположени в 120 градуса един от друг: един цвят за основния фон и две за съдържание и лента за навигация.
Двойна допълнителна система
Този диапазон е по-трудно за изпълнение, но тя може да бъде рентабилно решение. Той използва четири цвята: два контрастни и две допълнителни.
Вижте как изглежда страницата забележително Флорида процъфтява, въз основа на такава схема. Червен и зелен цвят за разлика от растенията и блокове от текст и син фон и оранжево пустиня ефективно допълват картината.
Аналози (последователно система)
Гама подобни цветове главно използва допълващи се цветове. Това дава възможност най-ясно се подчертае някои качества и да предизвика определени емоции.
Така например, комбинация от червено, оранжево и жълто акценти на енергия и жизненост. Използването на такъв мащаб е много проста, но е трудно да изберете цвят, ще бъдат включени в комбинацията. Техният ефект ще бъде преувеличена, така че не може да бъде погрешно.
Например, използването на синьо, тюркоаз и зелен цвят в дизайна на сайта Blinksale Тя е създадена атмосфера на мир и спокойствие. Забележете как жълтият цвят се използва да подчертае важните точки.
Това е само основите на теорията на цветовете, които могат да ви помогнат да се създаде впечатляващ дизайн на поръчителя, и няма ограничение за колко далеч можете да отидете по отношение на цветовете на вашия сайт.
Инструменти помощник за да изберете цвят
За щастие, има няколко инструмента, които да помогнат за цвят на теорията в практиката. Опитайте тези палитри да не трябва да се започне от нулата в създаването на неговия:
- Adobe Color CC, Някога известен като Adobe Kuler. Това е един от най-надеждните инструменти в избора на цветове.
- Paletton. Ако имате нужда от прост инструмент за бърз избор на цвят, Paletton е съвършен.
- Плосък UI Color Picker. Това е идеалният инструмент, за да изберете цветовете на потребителския интерфейс.
И ако тези инструменти не отговарят на вас, ето още една 28-сайтове с палитри и различни инструменти за избор на цвят.
Пряка връзка между цвят и емоции
Не забравяйте, че потребителите рядко предизвестие и оцените цвета на фона, навигационна лента, отделните части, но това не означава, че цветът не се влияе от тях. Точно това се случва подсъзнателно.
Потребителят изпитате никакви емоции, е връзката към сайта или марка, това прави определени действия: превъртете надолу, за да кликнете върху бутона, които бързи действия, или, обратно, не ги забележи. И цвят играе във всичко това огромна роля.
Ако имате съвети относно използването на цветовете в уеб дизайна, моля споделете в коментарите.