Обяснен дизайн на жаргон: 6 цветови схеми

Можете да комбинирате цветове по какъвто начин искате ... но това е и човекът на улицата, в който всички се взират, защото тоалетът му прилича на коледно дърво. Нашата гледна точка е, че някои цветови комбинации са по-добри от други и знаейки какви произведения няма да попречат на артистичния ви лиценз, а да го подобрят.

Снимката е предоставена от Tristan Bowersox, www.flickr.com/photos/9516941@N08/

Снимката е предоставена от Tristan Bowersox, www.flickr.com/photos/9516941@N08/

Както описахме в безплатната електронна книга Уеб дизайн за човешкото око , правилният избор на цвят насочва вниманието към основното съдържание на екрана, като същевременно балансира спрямо размера и пространствените връзки на елементите.



По-долу сме изброили някои от най-често срещаните и най-успешните цветови схеми, за да сме сигурни, че уебсайтът ви е облечен в най-доброто.

01. Едноцветен

Най-основната цветова схема обаче е ефективна.

Монохроматичната схема използва само един доминиращ цвят или различни нюанси от един и същи цвят, които се допълват добре. Едноцветните схеми изглеждат визуално приятни и засилват емоционалните реакции на съответния цвят, но може да има известни трудности при отделянето на определени елементи.

Едноцветните цветови схеми са доста често срещани в минималистичен дизайн тъй като те естествено подчертават съдържанието и правят дори най-простите шрифтове да изглеждат смели и драматични.

Всъщност минималните и едноцветни дизайни се хранят добре един с друг: и двамата подчертават един или два единични елемента, и двата по своята същност подсказват тема за елегантност, и двата създават лесен, по-малко разсейващ интерфейс.

Снимката е предоставена от Wake

Снимката е предоставена от Wake

Събуждам използва синя едноцветна схема с бели цветове. Техният доминиращ син фон - със среден нюанс, който е представител на свойствата както на светло, така и на тъмно синьо - подчертава връзката на цвета както с дружелюбност, така и с професионализъм, идеален избор за компания, която подпомага бизнес комуникациите и сътрудничеството.

Добавянето на друг съперничещ цвят само би разредило това съобщение, така че едноцветната схема подчертава централното впечатление, което те искат да оставят.

Забележете вариантите на синьото в горната лента за навигация и бутона „Възпроизвеждане на видео“, за да разделите тези елементи, без да се отклонявате от цветовата тема.

02. Аналогично

Аналогичните цветови схеми разчитат на цветовете един до друг в цветовата схема. Това създава по-атрактивен дизайн, който е лесен за очите.

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Аналогичните теми представляват по-голямо разнообразие от едноцветните теми, което улеснява разграничаването на елементите, въпреки че те не привличат толкова внимание, колкото сайтовете, които разчитат много на допълващи се цветове.

Вместо това сайтовете с аналогични цветови схеми се чувстват по-успокояващи и хармонични и не е изненадващо, че тази комбинация от цветове често се среща в природата.

Когато използват аналогична цветова схема за уеб дизайн, дизайнерите често избират един цвят, който да бъде най-доминиращият. Емоционалните връзки на този цвят ще бъдат най-мощни и ще засенчат останалите. Вторият цвят е точно това: вторичен. Използва се за разграничаване на определени елементи или за шрифт. Ако се използва трети цвят, той често е само за акцентиране.

Снимката е предоставена от http://doabackflip.com

Снимката е предоставена от http://doabackflip.com

В горния пример очевидно доминиращият цвят е леко тъмен нюанс на жълтото, който дава енергизиращ и приятелски тон. Вторичният цвят, червено-оранжевият хибрид, продължава тази тема, въпреки че е достатъчно отчетлива, за да могат потребителите да четат текста ясно.

Забележете как, ако червеното и жълтото бяха сменени, сайтът би приел далеч по-агресивен и стимулиращ тон, тъй като червеното ще доминира в емоционалната връзка.

03. Допълващо

Допълнителна цветова схема се възползва от противоположните цветове, създавайки динамична и емоционално стимулираща страница. Предимството на тази схема е, че елементите са ясно разграничени един от друг, създавайки незабавно разбираемо оформление. Въпреки това, неговият интензивен характер може да работи срещу вас, ако се стремите към по-спокойна атмосфера.

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Точно както при аналогичните цветови схеми, един цвят е доминиращ, докато друг вторичен, като доминиращият цвят задава по-голямата част от тона. Когато използвате добавки, избягвайте ненаситените цветове, тъй като те ще отслабят потентността.

Снимката е предоставена от Ondo

Снимката е предоставена от Ondo

Добре играе силно на контраста за техния сайт. Червено-оранжевият фон доминира, задавайки закачлив и енергичен тон, докато синьо-зеленият вторичен цвят маркира опциите за навигация, марка и графичен процъфтяващ клик.

Както е обяснено в Уеб дизайн за човешкото око , окото в крайна сметка танцува около екрана, от елемент на елемент, като никога не урежда едно място за дълго.

Този ефект се засилва от движещите се изображения, които се плъзгат нагоре по екрана отдолу нагоре, създавайки още повече бонбони за очи. Забележете как границата превключва цвета, когато изображението преминава през нея.

04. Триадичен

Триадиката е най-безопасната от цветовите схеми, изпълнявайки три идеално балансирани цвята, съединени от равностранен триъгълник на колелото.

Въпреки че е по-разнообразна от едно- или двуцветните теми, триадичната схема все още е най-основната от цветовите схеми с три или повече цвята. Триадичните схеми не поемат рискове при създаването на визуално сигурен външен вид на сайта, но не предлагат изключителна награда, освен сигурност и известно разнообразие.

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Много дизайнери смятат, че това е най-добрата цветова схема, въпреки че наистина зависи от проекта. Триадичната схема е отличен избор за сайтове, привлекателни за широк кръг потребители: нейната безопасност я прави „удоволствие за тълпата“, но с достатъчно разнообразие и креативност, за да не изглежда скучна.

Липсата на преки противоположности обаче затруднява привличането на вниманието към един единствен елемент над други (като подканваща фраза), а също така стабилността означава, че е трудно да се направи „остър“, стил, който се поддава на модни сайтове , музика и др.

Снимката е предоставена от DocReady

Снимката е предоставена от DocReady

Като сайт, който помага за успокояване на хората преди посещенията на лекар, сигурността и стабилността на една триадична схема работи перфектно DocReady . Използването на пастели също доразвива тази тема за безопасността.

Изборът на червено, жълто и тюркоаз е често срещан в триадичната схема, въпреки че на тази страница тюркоазът е доминиращ, насърчавайки по-спокойно настроение от по-стимулиращото червено или жълто.

Забележете използването на червено за бутона „За нас“, което сигнализира за кликване в сравнение с белите офорти около него.

05. Разделяне-допълване

Разделената допълнителна цветова схема притежава силата на привличане на вниманието на основната допълнителна схема, но с добавеното разнообразие на допълнителен цвят.

Това създава по-обоснован сайт, отколкото ако използвате интензивно допълнение, като същевременно позволявате по-креативно използване на цвета. Гъвкавостта на третия цвят също отваря много нови възможности за дизайн.

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Разглеждайки мрежата в днешно време, виждате много от разделящата се допълваща тема. Най-често срещаният е сайт, в който се използват доминиращи черни и бели, с пръскане на трети цвят, използван пестеливо, за да се подчертае отделен елемент (обикновено привличащ вниманието червен или зелен).

Това работи добре, но обикновено е опростено. За по-стилизиран външен вид, три основни цвята могат да добавят повече дълбочина както визуално, така и емоционално, въпреки че са по-трудни за прилагане.

Снимката е предоставена от Shopify (Доклад за търговията за 2014 г.)

Снимката е предоставена от Shopify (Доклад за търговията за 2014 г.)

На пръв поглед, Отчет за търговията на Shopify за 2014 г. може да не изглежда цветно - което е знак за неговото умно нанасяне на цвят. Текстът и графиките са наистина тъмносини, но изглеждат почти черни благодарение на допълнителния жълтеникав крем на заден план.

(Жълтият фон прави тъмносиньото да изглежда още по-тъмно - и тъй като вече е доста тъмно, няма къде другаде да отидем в нашето възприятие, освен по-близо до черното.)

За да се раздели това, което би било иначе дуалистична сцена, зеленото в основното заглавие действа като визуален централен елемент, свързвайки двата взаимно допълващи се цвята и създавайки единно изображение.

Това илюстрира разликата между разделящо допълващо и основно допълващо - допълнителен елемент, който изважда част от „жилото“ и стабилизира целия екран.

06. Правоъгълен тетрадик (допълнително съединение)

Една от най-сложните цветови схеми, правоъгълната тетрадична схема е възнаграждаваща, ако се направи правилно.

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Снимката е предоставена от Ray Trygstad: http://commons.wikimedia.org/wiki/File:BYR_color_wheel.svg

Състои се от две допълващи се двойки цветове, позволяващи стимулиращите визуализации от противоположностите, като същевременно се наслаждавате на разнообразието на четири основни цвята. Дизайнът изглежда обоснован и стабилен, но с определени области по-примамливи от други - сложността е причината тази схема също да бъде малко трудна за прилагане добре.

При избора на цветове трябва да се внимава допълнително. Като общо правило се опитайте да балансирате използването на топли цветове (червено, оранжево и жълто) и студени цветове (синьо и лилаво).

Снимката е предоставена от любезното съдействие на Formlets

Снимката е предоставена от любезното съдействие на Formlets

Началната страница за Форлети има истинска дъга от цветове - два нюанса за червено, жълто, зелено, синьо и черно, плюс тежка доза бяло - макар че чрез правилно приложение изглежда доста просто.

Въпреки че тук се играе много цветове на експертно ниво, засега просто ще посочим цветовете на лицата вдясно: червено, жълто, зелено, синьо и черно. Този избор на цветове не е случаен, но играе както червено-зеленото, така и жълто-синьото естествено допълнение.

Самото разпространение се извършва умело - има само по две от червените и черните лица, тъй като тези два цвята са по-мощни от останалите и биха доминирали на сцената, ако бяха повече.

Заключение

Цветовите схеми изпълняват гамата от прости до сложни, така че можете свободно да изберете тази, която ви е най-удобна за изграждане, или която отговаря на вашия сайт. Ако експериментирате с плосък дизайн, едно- или двуцветните схеми могат да работят много добре, като едноцветни, аналогични или допълващи се.

Снимката е предоставена от http://hell-o-baby.com/promo

Снимката е предоставена от http://hell-o-baby.com/promo

Но ако имате много елементи, които искате да разграничите, опитайте четири, пет или повече цвята: това ще ви позволи да свържете един цвят с всеки отделен елемент, установявайки модел, който ще окаже голямо влияние върху усвояемостта на потребителя.

Изтеглете тази безплатна книга днес

Изтеглете тази безплатна книга днес

За да научите повече за това как да овладеете теорията на цветовете (и други дисциплини), за да направите най-силно първо впечатление на потребителите, разгледайте нашата безплатна електронна книга от 85 страници Уеб дизайн на потребителския интерфейс за човешкото око . Анализират се примери от 33 компании, включително Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom и Bose.

Думи : Джери Цао

Джери Као е стратегически контент в UXPin - приложението за каркасно проектиране и прототипиране - където той разработва съдържание в приложението и онлайн за платформата за каркасно проектиране и прототипиране.

Като този? Прочетете тези!