Процесс выбора цвета интерфейса может быть сложным, особенно если учитывать различные состояния кнопок, шрифты и другие элементы пользовательского интерфейса. В этой статье я поделюсь своими методами и принципами, которые помогут вам успешно выбрать цветовую схему для вашего проекта.  1. Определение основного цвета  При разработке сайта часто возникает необходимость выбрать цветовую схему. Иногда у клиента уже есть основной цвет бренда. В этом случае ваша задача — подобрать дополнительные цвета и оттенки, которые будут дополнять основной цвет. Помимо основного цвета, на сайте используются дополнительные цвета для различных целей, например, для обозначения состояний ошибок, ссылок, иллюстраций, значков или для использования в графиках и информационных панелях.  2. Использование цветовой гармонии  Чтобы цвета хорошо гармонировали, полезно использовать различные схемы цветовой гармонии, такие как монохроматическая, дополнительная, треугольная и другие. Они помогут создать гармоничную цветовую палитру, дополняющую основной цвет проекта. Сейчас мы живем в мире, где технологии стремительно развиваются, и существуют специальные сервисы, которые легко генерируют цветовую схему. Например, я использую  color.adobe.com.   Вот как я это делаю:    Выберите нужную схему из выпадающего списка.  один.    Введите необходимое значение цвета в поле, указанное как базовый цвет.  два.    Определите, какие цвета соответствуют моим потребностям. три.    Перенесите их в мое рабочее пространство, в моем случае с помощью Figma. четыре.  3. Выбор тонов  Далее нам необходимо определить оттенки для каждого из выбранных цветов. Для подбора оттенков выбранных цветов можно воспользоваться специальными сервисами, которые могут помочь в этом процессе. Есть два способа определить оттенки ваших цветов:  Первый метод предполагает более сложную формулу:  Выберите цвет заголовка (не обязательно черный).  Переключитесь в режим HLS.  Пропустите первую ячейку, уменьшите значение на 2 для второй ячейки и увеличьте его на 5 для третьей ячейки.   Второй способ — воспользоваться услугой (просто и быстро)   цвета.dopely.top    Введите значение нужного цвета.  один.    Выберите оттенки и количество ступеней (я использовала 5).  два.    Выбирайте оттенки и количество ступеней.  три.    . В итоге для одного цвета я создал следующую таблицу четыре    = Первичный, P    = это наш основной цвет, P 60    = это светлые тона, которые мы собрали в Tints, от P 10 до P 50    = это темные оттенки, которые мы собрали на панели «Оттенки».  от P 60 до P 100  Повторите тот же процесс для других цветов, текста и состояний ошибок!  4. Проверка доступности цвета  Важно обеспечить доступность выбранных цветов всем пользователям, в том числе людям с ограниченными возможностями. Существуют рекомендации, такие как Рекомендации по обеспечению доступности веб-контента (   ), которым можно следовать при создании интерфейса. Чтобы проверить доступность ваших цветов, вы можете использовать специальные инструменты, такие как плагины или веб-сервисы, которые проверят контрастность и доступность выбранных цветов. WCAG  Плагин Figma –  Контраст  Веб-сервис –    Coolors  5. Определение цветов для разных состояний интерфейса  На заключительном этапе разработки цветовой палитры вашего веб-проекта необходимо определить количество шагов, необходимых для конкретных состояний элемента. Обычно мы выделяем четыре ключевых состояния:  Включено (спокойное и нормальное состояние элемента)  Наведение (наведение курсора мыши)  Активный (нажатие на кнопку или другой элемент управления)  Отключено (заблокированный элемент)   Для определения количества шагов мы используем цветовую панель, где фиксируем наше основное значение цвета (простой). Затем мы подсчитываем количество шагов для наведения и активного состояния. После этого мы тестируем различные состояния на доступность, чтобы убедиться, что наши кнопки и текст внутри них легко читаются.  Например, в   описан следующий подход: состояние наведения находится в полутора шагах от исходного цвета, а активное состояние — в двух шагах от основного цвета. Аналогично, выбранное состояние будет на шаг дальше от основного цвета. Этот метод позволяет определить цветовую палитру и обеспечить ее доступность для широкой аудитории, включая пользователей с ограниченными возможностями. Тот же подход применяется к текстам, где идентифицируются состояния наведения и активности. рекомендациях IBM   Состояния при наведении  Если ваш основной цвет находится   – вам следует подняться на полшага к более светлым оттенкам.  между черным и 70  Если ваш основной цвет находится   и белым, вам следует спуститься на полшага к более темным тонам.  между 60   Пресса / Активные состояния  Для значений от   активное состояние становится на две полные ступени светлее. 100 до 70  Для значений от   активное состояние становится на две полные ступени темнее.  60 до 10   Выбранные штаты  Для значений от 100 до 70 выбранное состояние становится на шаг светлее.   Для значений от 60 до 10 выбранное состояние становится на один шаг темнее.   Также важно протестировать дизайн и тексты, чтобы убедиться, что они читаются и отображаются правильно. После завершения работы убедитесь, что различные состояния и тексты интерфейса выглядят и работают правильно.  Помните, что это советы, основанные на моем опыте, вы можете добавлять свои собственные шаги, менять последовательность, но не забудьте провести тестирование доступности, чтобы контраст вашего текста и разные состояния интерфейса могли хорошо читаться любым пользователем.  Правильный выбор цветовой схемы играет ключевую роль в создании удобного и привлекательного пользовательского интерфейса. Следуя этим простым шагам и используя доступные инструменты, вы сможете выбрать и оптимизировать цвета для своего проекта.  Надеюсь, вам понравилась моя статья. Если у вас есть какие-либо вопросы или вам нужна дополнительная информация, пожалуйста, оставьте комментарий.

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

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.

Read my Articles 

Read My Stories

Coveted Careers: Mastering the Art of Securing Top UI/UX Design Roles in 2024

Этот звук создан на языке оригинала истории!

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

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

КОММЕНТАРИИ

БИРКИ

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

Related Stories

Нажмите, чтобы заработать: Telegram может привлечь следующие 10 миллиардов пользователей криптовалюты до Соланы

От форумов до лент новостей: как алгоритмы социальных сетей формируют цифровое взаимодействие

Невидимые слои: почему интервью с пользователями являются незаменимым активом

Нажмите, чтобы заработать: Telegram может привлечь следующие 10 миллиардов пользователей криптовалюты до Соланы

От форумов до лент новостей: как алгоритмы социальных сетей формируют цифровое взаимодействие

Невидимые слои: почему интервью с пользователями являются незаменимым активом

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps