Comments 10
Подход всё же похож на брутфорс. Число цветов можно существенно сократить, если заметить несколько закономерностей:
Цвета линий, текста и пр сильно зависят от цвета фона. Я бы даже сказал, что цвет фона является для них определяющим. Соответственно, "семей" в проекте столько же, сколько есть вариантов фоновой закраски. В $mol мы называем такие семьи "цветовыми темами". Каждая тема включает в себя набор цветов в зависимости от своего назначения:
- back — собственно цвет фона.
- text — цвет текста, к нему есть требование разборчивости — он должен достаточно. контрастировать с фоновым цветом, может быть автоматически выведен по формуле как негатив от фонового с округлением яркости к ближайшей границе и уводом насыщенности в 0.
- accent — цвет особо важного текста, зачастую совпадает с обычным цветом текста, а важный текст выделяется полужирностью, но это не всегда так, по умолчанию можно вычислять как комплементарный к цвету бренда.
- shade — цвет приглушённого текста, обычно является обычным цветом текста с полупрозрачностью, достаточной для чтения этого текста.
- line — цвет тонких линий, они обычно не такие контрастные как текст, им достаточно обозначить границу и им не надо так контрастировать как даже приглушённому тексту,
- mark — цвет выделения текста, накладывается поверх фонового, поэтому может быть задан как базовый с полупрозрачностью.
- control — цвет текста для элементов, с которыми возможно взаимодействие (кнопки, ссылки и пр), обычно это цвет бренда.
- field — фоновый цвет полей ввода, обычно это обычный фоновый цвет с округлением яркости к одному из дух краёв (чёрный или блый в зависимости от освещённости).
- hover — цвет, добавляемый к фоновому при наведении на кликабельные элементы, обычно это белый/чёрный с полупрозрачностью.
Как можно заметить, для темы можно задать лишь фоновый цвет, а остальные цвета вычислить автоматически из него. При необходимости можно заменить вычисленный цвет на какой-то конкретный. Например, взять акцентный цвет из брендбука. Тут важно, что у вас всегда будет адекватный цвет для любой темы, даже если дизайнер не позаботился о предоставлении всех цветов.
Наиболее частые темы:
- base — нейтральная тема, использует близкий к белому/чёрному цвет фона.
- brand — брендированный блок, использует цвет бренда в качестве фона.
- good — блок с положительной коннотацией, обычно зелёный фон.
- bad — блок с отрицательной коннотацией, обычно красный фон.
- call — блок использующий акцентный цвет в качестве фона, обычно это не тот цвет, что цвет accent в base, используется для CTA кнопок и тп.
Цвета любой темы могут зависеть от освещённости (светлая/тёмная). Например, базовая тема всегда зависит. Остальные темы могут зависеть, а могут и нет, если яркость их фона близка к нейтральной. Так же цвета темы могут зависеть от родительской темы. Например, good внутри base и good внутри brand — это могут быть два разных набора цветов.
Делается это просто. Например, у нас могут быть такие блоки:
<div mol_theme="base">
...
<div mol_theme="good">
...Тогда темы могут быть описаны так (цвета не подбирал, чисто от балды):
@media (prefers-color-scheme: light) {
[mol_theme="base"] {
--mol_theme_back: snow;
}
[mol_theme="brand"] {
--mol_theme_back: green;
}
[mol_theme="good"] {
--mol_theme_back: lime;
}
[mol_theme="brand"] [mol_theme="good"] {
--mol_theme_back: yellow;
}
}Accent — Главный корпоративный цвет. К примеру, если смотреть на российские банки, то: Сбербанк — зелёный, ВТБ — синий, Тинькофф — жёлтый, Альфа — красный
Очень частая ошибка дизайнеров использовать "главный цвет" в качестве акцентного. И наоборот, использовать его для всего подряд (подкрашивание чекбоксов, например). Тут всё зависит от конкретного цвета. Если это кричащий, то ему место в акцентах. Если же нет, то это и есть "цвет бренда", то есть тот цвет, который даёт общий цветовой тон всей страницы и который можно безбоязненно использовать для подсветки чекбоксов, текущей вкладки и прочих мелких деталей, разбросанных по всей странице. А для акцента, которого на странице должно быть минимум, использовать какой-то иной цвет. Зачастую комплементарный к цвету бренда.
Вот посмотрим на главную Альфа-Банка: https://alfabank.ru/
Весь экран залит краснотой в результате чего, все акценты теряются. Глаз скачет то на логотип, то на мячик, куда попало в общем.
В противовес, глянем на "старый дизайн": https://alfabank.ru/get-money/
"Цвет бренда" тут синий, а вот акценты выделены как раз красным.
Хотя очень часто это именно так. Если пройтись по названным банкам, то в конкретных ситуациях цвет бренда совпадает с акцентным цветом (разве что у ВТБ это может быть спорным вопросом). Кто-то использует его много (Альфа и ВТБ), а кто-то умеренно (Тиньков и Сбербанк)
alfabank.ru
tinkoff.ru
sberbank.ru
vtb.ru
Весь экран залит краснотой в результате чего, все акценты теряются. Глаз скачет то на логотип, то на мячик, куда попало в общем.
Мы исходим из того, что дизайнер профессионал и мы не учим его работать. Как и дизайнеры не учат программистов писать код. Поэтому система не говорит дизайнеру что и как лучше делать. Она говорит программисту, как во всём этом разобраться
Под акцентом я понимаю скорее ответ на вопрос «какой цвет воспринимается, как главный в интерфейсе?».
Весь остальной мир под акцентом всё же понимают выделяющиеся части, которые должны сразу притягивать к себе внимание.
Мы исходим из того, что дизайнер профессионал и мы не учим его работать.
Весьма наивное предположение. Вы как профессионализм дизайнера оцениваете? По красивым картинкам в отрыве от задачи, пользователей и продукта?
Там есть текст на синей плашке, который субъективно воспринимается как Faint. А ещё есть кружки под иконками, которые я бы тоже определил в семью Faint.
Вот это большая ошибка использовать один цвет для совершенно разных вещей. Вот спросите себя, должны ли эти цвета всегда быть одинаковыми? Одинаковые ли для них предъявляются требования? В данном случае ответ — "Нет".
Текст должен быть достаточно контрастен с фоном, чтобы человек даже с плохим зрением мог его прочитать, иначе его можно и не выводить. В то же время фон для иконки не имеет этого требования, но имеет другое — контуры иконки должны достаточно с ним контрастировать, чтобы человек с плохим зрением мог её разобрать. То, что эти цвета на макете совпадают — это либо случайность, либо, что более вероятно, ошибка дизайнера, не умеющего в a18y.
Из-за того, что они похожи, они оба отнесены к Faint. А внутри Faint мы их уже разносим, один из них используется для текста, а второй для подложки. На макете они конечно тоже разные: #edf1f7 50% и #FFF 15% соответственно
Opium.Fill — стандартизация цветовой схемы глазами программиста