Цветовая схема приложения: выбор палитры для UI-дизайна

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

Закрепите цветовые роли в дизайн-системе: фон, текст, основное действие и состояния. Тогда палитра будет описывать не только красивые сочетания, но и понятное поведение интерфейса.

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

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

Ниже разберём основы выбора палитры, цветовые роли и шесть способов использовать цвет в приложении: от монохромной схемы до иллюстраций и градиентов.

Как выбрать цветовые схемы для вашего приложения 

Следуйте основным принципам цветовых схем

Познакомьтесь с терминологией цвета
 

Начните с терминов, которые помогают описать цвет в интерфейсе. Различайте цветовой тон, насыщенность, светлоту и контраст.

Цветовой тон (hue) обозначает сам цвет, например красный или синий. Добавление белого даёт осветлённый оттенок (tint), чёрного — затемнённый (shade), а серого — приглушённый (tone). Чтобы создать идеальную цветовую схему для вашего дизайна, ознакомьтесь с определениями других терминов и используйте их.

Используйте цвета для отображения иерархии компонентов

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

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

Создайте визуальный баланс

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

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

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

Используйте принципы психологии цвета

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

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

Знание всего, что нужно знать о цвете и о том, как он влияет на эмоции зрителей, невероятно расширяет возможности.

Используйте ограниченное количество цветов, чтобы привлечь больше внимания 
 

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

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

Контекстуальная согласованность

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

Поддерживайте согласованность, используя правило 60-30-10

Правило 60-30-10 можно использовать как ориентир для распределения цветов, а не как обязательное требование к любому интерфейсу. Согласно этому правилу, доминирующий цвет должен составлять 60% цветовой композиции, второстепенный - 30%, а акцентный - 10%.

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

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

Ознакомьтесь с цветами, относящимися к вашей отрасли

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

• Красный: Развлечения, Еда, Спорт, Розничная торговля
• Оранжевый: Развлечения, Еда, Здоровье, Транспорт
• Желтый: Еда, Спорт, Транспорт, Путешествия, Досуг
• Зеленый: Окружающая среда, Банковское дело, Недвижимость, Сельское хозяйство, Некоммерческие организации
• Синий: Технологии, Безопасность, Финансы, Здравоохранение, Бухгалтерский учет
• Фиолетовый: культура, психология, религия
• Розовый: например, косметика и кондитерские изделия
• Черно-белый: Все отрасли

Изучите цветовые предпочтения вашей целевой аудитории

Некоторые люди воспринимают цвета по-разному. Вот почему вам нужно знать предпочтения своей аудитории.

Вдохновляйтесь на создание цветовых схем

Если вам нужна помощь, чтобы понять, с чего начать, не паникуйте! Некоторые веб-сайты могут помочь вам найти вдохновение для создания цветовых схем. Например, Behance, Color Hunt, Pinterest, Dribbble и т.д.

Цветовые роли на экране оплаты

На одном экране оплаты проверьте обычное состояние, ошибку карты и успешное завершение. Основная кнопка сохраняет роль действия, а сообщение об ошибке получает собственный текст и значок. Зелёный фон без слов не объясняет, прошла ли оплата или поле просто заполнено правильно.

По WCAG 2.2, критерий 1.4.3, обычному тексту требуется контраст не менее 4,5:1, крупному — 3:1, с указанными в критерии исключениями. Измеряйте конкретную пару текста и фона, а не палитру целиком. Отдельно критерий 1.4.1 требует не полагаться только на цвет для передачи смысла.

В Pixso соберите эти три состояния рядом и примените одинаковые роли к одинаковым элементам. Для тёмной темы заново подберите пары фона и текста: простая инверсия всей палитры может изменить иерархию. Наглядное сравнение помогает обсудить решения, но не заменяет измерение контраста готового интерфейса.

Pixso - Ваше универсальное приложение для создания цветовых палитр 

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

В Pixso можно собрать макет и сравнить цветовые схемы на его элементах. Начните с такой последовательности.

• Выберите основной цвет.
• Определите свои цветовые сочетания.
• Выберите фон.
• Соберите макет.
• Поиграйте с различными цветовыми схемами.

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

Если вы хотите максимально эффективно использовать цветовую схему вашего приложения, просто попробуйте Pixso прямо сейчас!

Шесть способов использовать цвет в приложении

Аналоговая цветовая схема

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

Монохроматическая схема

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

Триадная схема

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

Красочные иллюстрации

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

Красочные градиенты

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

Чёрный, белый и серый

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