Простые догмы при работе с цветом в интерфейсах

Простые догмы при работе с цветом в интерфейсах

322
ПОДЕЛИТЬСЯ

Привет, username!

Вопросец дальтонизма в статье не освещается. К огорчению, грамотная работа с цветом находится даже не во всех продуктах больших компаний, потому данный текст имеет цель не лишь научить новичков, но и напомнить наиболее опытным дизайнерам обо всех тонкостях этого вопросца. Желал написать огромную статью про биологию восприятия цвета , но решил для начала ограничиться простыми правилами для начинающего/продолжающего дизайнера интерфейсов.

Цвет — это способ сотворения баланса частей
Во время продумывания сценария взаимодействия и восприятия интерфейса следует на каждом шаге держать в голове, что юзер лицезреет экран рабочими областями.

Типично, что последовательность восприятия, у большинства юзеров, будет несколько отлична от нумерации рабочих областей, а конкретно: workspace 2 → workspace 1 → workspace 3, при этом workspace 2 и 3, разумеется, будут восприниматься как основная и второстепенная часть 1-го сценария.

К примеру: Юзер стремится игнорировать элементы, находящиеся в иной рабочей области, во время работы с текущей — подсознательно он представляет, что где-то там находится ряд функций, которые ему могут пригодится, но сознательно он их «не видит». Отсюда можно сделать вывод, что элементы снутри областей должны находиться на одном уровне интенсивности относительно остальных областей.

Разумеется, что в первом варианте сбивается вначале данный баланс: элементы перечня справа конфликтуют с горизонтальной шапкой. Во втором варианте он сохранен: внимание в первую очередь направленно на заголовок Workspace 1

Повторим еще раз положительный сценарий восприятия юзером рабочих областей: сначала отыскать глобальный элемент, позже в нем отыскать определенную функцию

Применяй лишь сознательно подобранные цвета
Наиболее того, следует держать в голове, что большая часть современных экранов имеют очень ограниченные цветовые места, и диссонансы на их представляются еще наиболее грубыми, ежели, скажем, на холсте. Случайных цветов не бывает вообщем: человечий глаз способен улавливать мельчайшие отличия и подсознательно постоянно принимает цветовой диссонанс. Это основная ошибка чрезвычайно огромного количества дизайнеров. Нередко можно созидать пример, когда дизайнер берет элемент, основываясь на абстрактных представлениях о том, что «подтвердить» обязано быть зеленоватым, а «отменить» — красноватым. Кроме явной ограниченности такового подхода есть еще и неувязка того, что не все соображают, что, раз ты употреблял определенный зеленоватый цвет, ты можешь к нему применять лишь строго определенный красноватый.
Пара примеров и фиксов подобного дела:

Обрати внимание на то, что ни один компонент элемента, будь то цвет текста, цвет обводки инпута, цвет обводки клавиши, не оставлен без внимания — это делает цельность и гармоничность. Оттенок клавиши совсем необязательно должен быть зеленоватым, принципиально что раз это зеленоватый, то он не случаен.

Есть несколько ограничений, которые необходимо постоянно держать в голове:

Никогда не применяй темный и сероватый цвет текста на цветном фоне. Это делает чувство грязноватости. На белоснежном фоне, кстати, тоже далековато не во всех вариантах можно применять незапятнанный темный цвет.
Не применяй глухой сероватый для фонов. Раз на макете есть хотя бы один цветной элемент, постоянно следует окрашивать сероватые элементы в его оттенок.
Ниже отмечена применимая зона выбора точного цвета (но не бледноватых цветов): Не применяй правый последний угол колорпикера для главных цветов.

Кстати, интернет-цвета тоже настоятельно не рекомендуется применять, в особенности беря во внимание современное развитие браузеров. Интернет-цвета — это всего только оптимизация значений, они на удивление грубы и плохо соотносятся меж собой.

Use the Kuler, Luke!
Во время разработки палитры интерфейса у тебя постоянно должен быть открыт Kuler (который Adobe, кстати, на днях переименовала просто в color) либо его аналог. Естественно, бывают люди с завышенной чувствительностью к цвету, которые могут навсидку создавать палитры из 4-5 контрастных цветов, но большая часть развивает в для себя схожее умение годами.
По сущности дела, опосля выбора основного цвета место для маневра сходу ограничивается вот этими правилами цветовых отношений:

Можно выделить несколько советов для работы с кулером:

Лучший 2-ой цвет к уже подобранному основному находится или по Complementary, или по правой стороне Triad
«Серые» цвета к основному цвету следует подбирать в Monochromatic, контрастный блеклый фон находится слева от основного цвета, хотя традиционно ему приходится или понижать opacity, или делать еще наиболее сероватым вручную (по умолчанию он очень активный)
Акценты находятся по левую сторону Triad
Сухой, черный оттенок для контрастного текста традиционно находится слева в Compound

Для того, чтоб хорошо подобрать фактически хоть какой цвет, как правило, приходится подвигать ползунок тона, т.к. незапятнанные относительные цвета традиционно недостаточно/чрезвычайно контрастны для собственных задач. Очевидно, все перечисленное выше следует принимать с разумом, а не в лоб.
Кстати, начинающему дизайнеру лучше совершенно не «изобретать цвета», а пользоваться гаммой, предложенной Google.

Делай контраст тоньше
Человеческое зрение чрезвычайно отлично умеет приспособиться к условиям различного контраста, к примеру, его статический контраст равен приблизительно 100:1, а динамический может достигать 1.000.000:1, потому не следует бояться его снижения снутри частей. В отличие от настоящего мира, компьютерный интерфейс имеет очень примитивную структуру контрастов, маленькое количество цветов и типов частей. При этом восприятие контрастности увеличивается с уменьшением циклов (грубо говоря, разноцветных частей). Неплохой пример хорошо выстроенного контраста — текущая версия Facebook:

Обрати внимание на то, что легкие контрасты меж областями тем не наименее отлично отделяют их друг от друга. Зрительно сохраняется даже наследственность (область комментариев очевидно принадлежит общей области поста), и это награда не лишь обводки.

Делай естественно
Это противоестественно, в природе такового не бывает. К примеру, не рекомендуется применять прохладное на теплом в качестве упора. Это достигается методом использования естественных контрастов, насыщенных цветом теней. Даже подобранные по цветовым отношениям голубий в красноватом смотрится ужаснее, чем красноватый в голубом: Неплохим показателем того, что гамма в интерфейсе удалась, раз он делает «на вкус» чувство одного освещения.

Один упор
Эта рекомендация пересекается так же с советами из общего маркетинга: следует давать юзеру ясный фокус на одном главном сценарии и делать другие сценариии очевидно второстепенными. Это значит что она обязана быть просто находима, но не кидаться в глаза первой. Это достигается, к примеру, при помощи броского, активного цвета в элементе маленького размера. Отсюда следует хрестоматийное call-to-action. Но следует осознавать, что в 90% случаев call-to-action является клавишей и предваряется какой-то информативной частью.

Call-to-action как часть сценария workspace 2

Call-to-action как часть сценария workspace 3

Его можно было, также, сделать схожего цвета с шапкой Call-to-action как отдельный сценарий.

Раз есть две идиентично ярчайших точки, тогда упора в картине нет вообщем и это быстрее всего пейзаж либо натюрморт. Но есть определенные хитрости, к примеру внедрение контрастных рабочих областей. Вообщем, в академической живописи, есть представление о том, что точка большей зрительной активности на картине может быть лишь одна.

Пример из настоящей жизни.

При желании хабраюзеров, в дальнейших публикациях могу разобрать наиболее определенные случаи. Это более общие советы, основываясь на которых можно сделать хорошую гамму интерфейса.

habrahabr.ru PS На нехороших мониторах и мониторах и с пониженной яркостью приведенные примеры могут смотреться неконтрастно.