Как подобрать цвета для дизайна интерфейса
Цвета могут быть любые, главное контраст. Именно работе с контрастом стоит посветить больше всего времени. А сами цвета выбирать исходя из отраслевых стандартов или с полотка. С потолка тоже можно, потому что математика, увы, в этом месте не работает.
Три главных предмета в фокусе внимания
-
Контраст
Единственное, что вообще важно в цветовом решении для интерфейса. Особенно контраст фона и текста.
-
Отраслевые ожидания
IT — синий, медицина — бирюзовый, профинтерфейс — черный. Это самый безопасный способ выбора цвета. Отраслевые ожидания меняются, но медленно.
-
Правило 60-30-10
60% пространства отдается базовому цвету (это может быть белый), 30% — акцентному, 10% — второстепенному для балансировки. Это отраслевая эвристика.
5 советов,
как делать хорошо
- Выберите инструмент для мониторинга контраста
И постоянно им пользуйтесь Увы, делают это редко.
- Сразу соберите палитру серого
Диапазон от белого до серого с шагом 1.
- Осторожнее с теорией
Вся теория 20 века — ерунда. Последние 20 лет есть подвижки. Проблема в том, что арифметически аккуратно подобранные цвета неаккуратны по восприятию.
- Возьмите два базовых цвета, и хватит
Взять можно с потолка. Остальное — это оттенки, синхронизированные с оттенками серого.
- Берите цвета с сатурацией не больше 80
Это не строгое правило, просто с цветами с сатурацией больше 80 сложнее работать.
Например
В изначально черно-белые прототипы добавили красный, желтый и зеленый для акцентом, а затем подмешали синий в черный, и получили окончательный дизайн.
Цвета работали для передачи информации. А базовый брендовый цвет мог быть любым.
Так делать не надо
Симпатичные цвета с низким контрастом — этим убито очень много интерфейсов. Дизайнеры видят и любят низкий контраст, а вот обычные люди воспринимают его значительно хуже.
Инструменты
Или другой плагин для получения оттенков.
Для проверки контрастности выбранных цветов.
Или другой плагин, выдающий ч/б палитру.
В разделе про цвета довольно внятно излагают схему, близкую к полезной.
Хорошая цветовая палитра для интерфейса — это такая, которая понятна пользователям. Люди могут назвать конкретные цвета и считать цветовое кодирование. Некоторая проблема в том, что понятность для пользователя — это грубоватость для дизайнера. То есть решения, которые похвалит другой дизайнер, могут оказаться слишком сложными для людей.
Евгений Романовский, руководитель проектного офиса «Собаки Павловой»
Другие шпаргалки
Ищете подрядчика или команду?
Давайте обсудим вашу задачу.
Хотите у нас научиться?
1000+ упражнений по дизайну интерфейсов.
eduhund.com
Собака Павлова
На сайте есть упоминания социальных сетей, признанных на территории РФ экстремистскими организациями
Кое-что показываем и рассказываем на весь интернет
, интересное в 
, полезное на 
Санкт-Петербург • Подгорица • Хайфа
Адрес для почтовых отправлений: 194291, Санкт-Петербург, ул Руднева, д. 9 к. 3 литера А, кв. 169