Как выбрать цвета для интерфейса: шесть основных правил

Ассоциация

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

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

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

Гармония

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

Красный и синий цвета на сайте Rolling Stones — пример гармоничного сочетания.

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

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

Контраст

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

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

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

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

Гамма

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

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

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

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

Пропорциональность

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

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

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

Взаимодействие

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

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

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

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

Источник.