Спектр возможностей: руководство по цвету пользовательского интерфейса

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

Когда участникам недавнего исследования, посвященного брендам, было предложено нарисовать логотипы 10 знаковых корпораций, только 16% смогли вспомнить точные формы и особенности дизайна. Однако, когда нас попросили определить цветовую палитру бренда, количество правильных ответов подскочило до 80%.

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

В этом руководстве мы:

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

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

Ускоренный курс: теория цвета для дизайнеров пользовательского интерфейса

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

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

• Цвет относителен.
• Перегрузка по насыщенности убивает яркость цвета.
• У одновременного контраста есть плюсы и минусы.
• Лучше всего использовать базовые цветовые схемы.
• Оттенок всегда влияет на ценность.

Давайте копать.

Цвет относительный

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

• Свет сияет на цвет
• Другие цвета, окружающие цвет

Посмотрите на этот пример из природы:

A: Мозг и глаз работают вместе, чтобы помочь нам понять, что цветок в целом на самом деле ярко-красный.

B и C: Темно-коричневый цвет тени цветка (B) делает блик на краю лепестка (C) более ярким, чем тускло-бордовый цвет, которым он является на самом деле. По сути, свет, сияющий на гребне лепестка, и цвет тени работают в тандеме, обманывая взгляд и усиливая блик.

Вот еще один пример, показывающий, насколько обманчивым может быть цвет:

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

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

Перегрузка насыщенности убивает яркость цвета

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

Одновременный контраст имеет плюсы и минусы

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

Для дизайнеров пользовательского интерфейса одновременный контраст может иметь как положительные, так и отрицательные последствия, поэтому важно понимать, как контролировать эффективность этого визуального явления.

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

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

Основные цветовые схемы являются лучшими

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

Вот два надежных плана построения базовой цветовой схемы пользовательского интерфейса:

1. Аналогичные цветовые схемы пользовательского интерфейса

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

2. Дополнительные цветовые схемы пользовательского интерфейса

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

Оттенок всегда влияет на ценность

Это может показаться странным, но цвета имеют соответствующие оттенки серого. Вот доказательство:

На изображении выше у нас есть диапазон оттенков при 100% яркости и насыщенности, но посмотрите, что происходит, когда эти цвета преобразуются в оттенки серого:

Бум! Выявляется целый диапазон значений серого. Почему это важно для дизайнеров пользовательского интерфейса? Одно слово: контраст .

На мгновение переключите свой разум в оттенки серого. Если бы вы хотели создать контраст, вы бы использовали значение серого 40% поверх 50%? Конечно, нет, но это именно то, чем рискуют, когда оттенок не учитывается в уравнении цветового контраста.

Помните, оттенок всегда влияет на ценность.

4 основных принципа работы с цветом для цифровых интерфейсов

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

1. Связь между текстом и цветом имеет решающее значение.
2. Нельзя игнорировать доступность цвета.
3. Контраст важен, но это не панацея дизайна.
4. Цвет работает лучше всего, когда применяется пропорционально.

Связь между текстом и цветом имеет решающее значение

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

Поддерживайте здоровые отношения между текстом и цветом, следуя этим простым правилам:

• Всегда избегайте низкого контраста между текстом и фоном.
• Не используйте дополнительные цвета для текста и фона, особенно если цвета имеют одинаковую яркость и насыщенность (например, желтый текст на фиолетовом фоне).
• Даже на белом фоне не выделяйте основной текст яркими цветами. Черный и темно-серый — самые легкие для чтения.

Доступность цвета нельзя игнорировать

Цвет коммуникативен, но он не может быть единственным элементом дизайна, используемым для передачи информации в пользовательском интерфейсе. Почему бы нет? Потому что некоторые пользователи сети воспринимают цвет иначе (или вообще не воспринимают), чем большинство населения.

Например, человек, страдающий дальтонизмом, может не определить, когда значок продукта находится в «нажатом» состоянии, если единственным отличием значка является изменение цвета.

Кроме того, некоторым людям трудно увидеть важные компоненты пользовательского интерфейса, которые имеют низкий цветовой контраст по отношению к фону интерфейса. Такие сайты, как Colorable и Contrast Ratio, позволяют дизайнерам быстро протестировать ряд цветовых сочетаний на доступность контраста.

Контраст важен, но это не панацея дизайна

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

Нельзя игнорировать форму, пространство, размер и другие элементы дизайна. Цветовой контраст может сделать ужасный пользовательский интерфейс привлекательным, но он не исправит плохой пользовательский опыт.

Цвет работает лучше всего при пропорциональном применении

Представьте себе новостное приложение, в котором каждый экземпляр текста указан в заголовке, или веб-сайт электронной коммерции, созданный на сетке изображений 9x9. Оба были бы ужасны!

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

Цветовые ресурсы для дальнейшего прогресса

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

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

Ctrl+Рисовать

Если вы UI-дизайнер, стремящийся сразу же обрести уверенность в цвете, начните с ctrlpaint.com, веб-сайта, посвященного инструкциям по цифровому рисованию. Цифровая живопись? Действительно?

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

Начните с бесплатной видеотеки (раздел 11), а затем переходите к более интенсивным упражнениям из Color Starter Kit .

Йозеф Альберс и приложение «Взаимодействие цвета»

Современное понимание относительности цвета было тщательно изучено и развито благодаря подходу художника и педагога Йозефа Альберса « практика прежде теории».

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

В 1963 году Альберс написал «Взаимодействие цвета », учебник, который продолжает оказывать большое влияние на мировое образование в области искусства и дизайна. Чтобы отпраздновать 50-летие публикации книги, Йельский университет выпустил интерактивное приложение для iPad, которое содержит полный текст, но также позволяет пользователям играть и экспериментировать с цветными пластинами Альберса.

Для дизайнеров пользовательского интерфейса приложение « Взаимодействие цвета» предоставляет возможность испытать аналоговые цветовые упражнения в цифровой среде и воочию увидеть, как цветовая относительность влияет на пользовательские интерфейсы.

Эндрю Лумис

В первой половине 20-го века Эндрю Лумис был выдающимся иллюстратором и преподавателем Американской академии искусств в Чикаго, но его непреходящее наследие — это авторское наследие. Лумис написал шесть книг по коммерческому искусству и дизайну и затронул целый ряд тем, от рисования фигур до продакт-плейсмента.

В своих книгах « Творческая иллюстрация » и «Взгляд художника» (обе доступны на сайте archive.org) Лумис выделяет ряд устойчивых строк, которые остаются актуальными для современной области дизайна пользовательского интерфейса:

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

Любые два цвета будут гармоничными, если один или оба содержат часть другого.

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

Интерфейсы других дизайнеров

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

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

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

Цвет слишком важен, чтобы его игнорировать

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

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

Если вы дизайнер, который изо всех сил пытался умело использовать цвет, или вы когда-либо думали: «У меня нет таланта к цвету», не расстраивайтесь. Дизайн с использованием цвета — это не какая-то форма творческого волшебства или особого дара; это практическая дисциплина, основанная на простых техниках, которые можно повторять и улучшать.

Помните, что цвет — это главный ключ к четкой и убедительной дизайнерской коммуникации. Вне зависимости от того, реализовано ли это с осторожностью или безрассудно, это влияет на конверсию, узнаваемость бренда и пользовательский опыт. Для UI-дизайнера цвет — это мощный инструмент, который просто нельзя игнорировать.

• • •

Дальнейшее чтение в блоге Toptal Design:

1. Роль цвета в UX
2. Создание руководства по стилю пользовательского интерфейса для лучшего UX
3. UX и важность веб-доступности
4. Искусство против дизайна – вечная дискуссия
5. Проектирование интерактивных сред и умных пространств