Цвета в интерфейсе. Цветовые схемы
База про цвет
Вопрос не в том, какой цвет выбрать, а как его использовать, чтобы донести свои идеи до пользователя?
Вопрос не в том, какой цвет выбрать, а как его использовать, чтобы донести свои идеи до пользователя?
Мозг воспринимает один и тот же цвет по-разному в зависимости от:
- цветовых контрастов
- нелинейного восприятия света
- уровня освещенности
- хроматической адаптации
- возможности различать оттенки определенного цвета
- возраста
- культурного бэкграунда
Более контрастные объекты считываются быстрее, а значит пользователь лучше видит действие, к которому мы хотим привлечь внимание
Приятен, дает ощущение завершенности
Когда рядом стоят недополнительные цвета, мозг вытается дополнить цвет подходящим дополнительным, потому что в реальности у предметов есть тени дополнителнього цвета.
Использование подобных контрастов вызывает раздражение и тревогу из-за "противоестественности", а также снижает читаемость текста из-за "дребезжания" в глазах, поэтому нужно стремится избегать их в интерфейсах.
Иногда такие контрасты используют специально, в виде своего рода "скримера".
Использование подобных контрастов вызывает раздражение и тревогу из-за "противоестественности", а также снижает читаемость текста из-за "дребезжания" в глазах, поэтому нужно стремится избегать их в интерфейсах.
Иногда такие контрасты используют специально, в виде своего рода "скримера".
Некоторые люди видят не все цвета, а с возрастом глаз воспринимает мир более тускло, поэтому это стоит учитывать по возможности в своих продуктах.
Так же в зависимости от региона цвета ассоциируются с разными вещами, поэтому важно это тоже учитывать. Например, в некоторых странах падение курса будет обозначено зеленым, а рост – красным, потому что последний ассоциируется с удачей
Так же в зависимости от региона цвета ассоциируются с разными вещами, поэтому важно это тоже учитывать. Например, в некоторых странах падение курса будет обозначено зеленым, а рост – красным, потому что последний ассоциируется с удачей
- С помощью контраста управляем вниманием пользователя
- Используем цвета, понимая особенности аудитории и то, как она воспринимает цвет
Цвет в интерфейсе
Прежде чем приступать к работе на выбором цветовой палитрой:
- Определите главный и второстепенный контент
- Выделите информацию, что должна привлекать взгляд в первую очередь
- Через контраст размера объекта и количество цветов
- Через контраст параметров цвета (оттенки, насыщенность, яркость)
- Через гамму из теплых и холодных цветов и дополнительный контраст
- Тон – положение цвета в спектре относительно других цветов
- Интенсивность – положение цвета по интенсивности, глубине и чистоте
- Яркость – положение цвета по шкале светлоты и способности отражать свет
- Теплая гамма ассоциируется с положительным эмоциями, задором, радостью
- Холодная гамма задает отстранненость, серьезность, собранность
- Яркие цвета придают изображению живости
- Приглушенные цвета успокаивают и примиряют
- Нейтральные цвета помогают усилить впечатления от других цветов засчет своей невзрачности
Шаги работы:
- Подумайте и зафиксируйте ассоциации с продуктом (какие люди им пользуются? какие эмоции они получают? почему выбирают его?)
- Приоритезируйте, что приходит в голову в первую очередь, что может выделять ваш продукт на фоне остальных, что вам важно донести
- Собирите изображения на основе проделанной работы и проанализируйте их (как работают цвета на этих изображениях? какие контрасты? что в фокусе, а что на фоне?)
- Выберите цвета с изображений, составьте несколько наборов цветов, сравните сочетания, посмотрите как это смотрится на макетах/тренажерах (например, realmecolors.com или material theme builder)
- Сделайте выбор
Как правило, помимо акцентов в интерфейсе есть нейтральная гамма из оттенков серого, которая делает фон для фокусирующего цвета.
В цветовую схему интерфейса обычно входят 3-4 гаммы:
В цветовую схему интерфейса обычно входят 3-4 гаммы:
- Нейтральная
- Акцентная
- Гамма состояний
- Гамма дополнительных цветов
- Показывает выбор между равнозначно важными функциями
- Создает фон для целового действия и успокаивает мозг, который думает над ним
- Выделяет целевое действие или супер-важный объект/сообщение
Показывает состояния :) Например:
- успех/неуспех
- неудача/ошибка
- процесс/ожидание
- недоступно
Когда вы более-менее определились с цветами, добавьте их в стили или перменные, чтобы быстро обращаться к ним и править сразу во всем макете
Ссылка на Яндекс.Практикум с объяснением про добавление стилей и первые шаги в фигме
Ссылка на Яндекс.Практикум с объяснением про добавление стилей и первые шаги в фигме
В итоге у вас должно получится что-то такое
Другое
Видео:
Книги:
Книги:
- Йоханес Иттен "Искусство цвета"
- Шон Адамс, Терри Ли Стоун "Дизайн и цвет. Практикум"
- Color compass – выдает квадратики любого цвета с ровным шагом по светлоте или насыщенности
- Automate Color Styles – превращает в стили все цвета на странице
- Foundation: Color Generator – покажет вариативность растяжки цвета по нескольким алгоритмам и читабельность символов на цвете
КАК ТЕБЕ КОНСПЕКТ?
Расскажи, чего не хватило. От похлавы мы тоже не откажемся))
