Как выбирать цвета и определять оттенки для разных состояний: Наведение, Активность, Нажатие, Отключение

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

1. Определение основного цвета

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

2. Использование цветовой гармонии

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

Вот как я это делаю:

один. Выберите нужную схему из выпадающего списка.

два. Введите необходимое значение цвета в поле, указанное как базовый цвет.

три. Определите, какие цвета соответствуют моим потребностям.

четыре. Перенесите их в мое рабочее пространство, в моем случае с помощью Figma.

3. Выбор тонов

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

Первый метод предполагает более сложную формулу:

1. Выберите цвет заголовка (не обязательно черный).
2. Переключитесь в режим HLS.
3. Пропустите первую ячейку, уменьшите значение на 2 для второй ячейки и увеличьте его на 5 для третьей ячейки.

Второй способ — воспользоваться услугой (просто и быстро)

цвета.dopely.top

один. Введите значение нужного цвета.

два. Выберите оттенки и количество ступеней (я использовала 5).

три. Выбирайте оттенки и количество ступеней.

четыре . В итоге для одного цвета я создал следующую таблицу

P = Первичный,

P 60 = это наш основной цвет,

от P 10 до P 50 = это светлые тона, которые мы собрали в Tints,

от P 60 до P 100 = это темные оттенки, которые мы собрали на панели «Оттенки».

4. Проверка доступности цвета

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

Плагин Figma – Контраст

Веб-сервис – Coolors

5. Определение цветов для разных состояний интерфейса

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

• Включено (спокойное и нормальное состояние элемента)
• Наведение (наведение курсора мыши)
• Активный (нажатие на кнопку или другой элемент управления)
• Отключено (заблокированный элемент)

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

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

Состояния при наведении

Если ваш основной цвет находится между черным и 70 – вам следует подняться на полшага к более светлым оттенкам.

Если ваш основной цвет находится между 60 и белым, вам следует спуститься на полшага к более темным тонам.

Пресса / Активные состояния

Для значений от 100 до 70 активное состояние становится на две полные ступени светлее.

Для значений от 60 до 10 активное состояние становится на две полные ступени темнее.

Выбранные штаты

Для значений от 100 до 70 выбранное состояние становится на шаг светлее.

Для значений от 60 до 10 выбранное состояние становится на один шаг темнее.

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

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

Надеюсь, вам понравилась моя статья. Если у вас есть какие-либо вопросы или вам нужна дополнительная информация, пожалуйста, оставьте комментарий.