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

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

к Alina
Alina HackerNoon profile picture

Alina

@alinahand

Hi! im product designer. Im here to make your knowledge...

5 мин read2023/10/21
Read on Terminal Reader
Read this story in a terminal
Print this story

Слишком долго; Читать

Процесс выбора цвета интерфейса может быть сложным, особенно если учитывать различные состояния кнопок, шрифты и другие элементы пользовательского интерфейса.
featured image - Как выбирать цвета и определять оттенки для разных состояний: Наведение, Активность, Нажатие, Отключение
Alina HackerNoon profile picture
Alina

Alina

@alinahand

Hi! im product designer. Im here to make your knowledge about design design process more remarkable

0-item
1-item

STORY’S CREDIBILITY

Guide

Guide

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

On the Ground

On the Ground

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

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


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 выбранное состояние становится на один шаг темнее.

выбрано

выбрано


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

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


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


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

L O A D I N G
. . . comments & more!

About Author

Alina HackerNoon profile picture
Hi! im product designer. Im here to make your knowledge about design design process more remarkable

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В...

Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
X REMOVE AD