Как подобрать цвета для дизайна интерфейса
Цвета могут быть любые, главное контраст. Именно работе с контрастом стоит посветить больше всего времени. А сами цвета выбирать исходя из отраслевых стандартов или с полотка. С потолка тоже можно, потому что математика, увы, в этом месте не работает.
#дизайн интерфейсов
#цвета
#работа с контрастами
Три главных предмета в фокусе внимания
1
Контраст
Единственное, что вообще важно в цветовом решении для интерфейса. Особенно контраст фона и текста.
2
Отраслевые ожидания
IT — синий, медицина — бирюзовый, профинтерфейс — черный. Это самый безопасный способ выбора цвета. Отраслевые ожидания меняются, но медленно.
3
Правило 60-30-10
60% пространства отдается базовому цвету (это может быть белый), 30% — акцентному, 10% — второстепенному для балансировки. Это отраслевая эвристика.
Например
Так делать не надо
Симпатичные цвета с низким контрастом — этим убито очень много интерфейсов. Дизайнеры видят и любят низкий контраст, а вот обычные люди воспринимают его значительно хуже.
Инструменты
Tints and Shades
Или другой плагин для получения оттенков.
Colorable
Для проверки контрастности выбранных цветов.
Chroma Colors
Или другой плагин, выдающий ч/б палитру.
Material Design
В разделе про цвета довольно внятно излагают схему, близкую к полезной.
Хорошая цветовая палитра для интерфейса — это такая, которая понятна пользователям. Люди могут назвать конкретные цвета и считать цветовое кодирование. Некоторая проблема в том, что понятность для пользователя — это грубоватость для дизайнера. То есть решения, которые похвалит другой дизайнер, могут оказаться слишком сложными для людей.
Евгений Романовский, руководитель проектного офиса «Собаки Павловой»
5 советов,
как делать
хорошо
1
Выберите инструмент для мониторинга контраста
И постоянно им пользуйтесь Увы, делают это редко.
2
Сразу соберите палитру серого
Диапазон от белого до серого с шагом 1.
3
Осторожнее с теорией
Вся теория 20 века — ерунда. Последние 20 лет есть подвижки. Проблема в том, что арифметически аккуратно подобранные цвета неаккуратны по восприятию.
4
Возьмите два базовых цвета, и хватит
Взять можно с потолка. Остальное — это оттенки, синхронизированные с оттенками серого.
5
Берите цвета с сатурацией не больше 80
Это не строгое правило, просто с цветами с сатурацией больше 80 сложнее работать.