Pull to refresh
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

Весь экран залит краснотой в результате чего, все акценты теряются. Глаз скачет то на логотип, то на мячик, куда попало в общем.

Мы исходим из того, что дизайнер профессионал и мы не учим его работать. Как и дизайнеры не учат программистов писать код. Поэтому система не говорит дизайнеру что и как лучше делать. Она говорит программисту, как во всём этом разобраться
Под акцентом я понимаю скорее ответ на вопрос «какой цвет воспринимается, как главный в интерфейсе?».

Весь остальной мир под акцентом всё же понимают выделяющиеся части, которые должны сразу притягивать к себе внимание.


Мы исходим из того, что дизайнер профессионал и мы не учим его работать.

Весьма наивное предположение. Вы как профессионализм дизайнера оцениваете? По красивым картинкам в отрыве от задачи, пользователей и продукта?

Дизайн приложения конечно оценивается на его соответствие Stakeholder Requirements. Эти проверки (в т.ч. ранние Usability тесты) обязательно происходят в современных крупных продуктах и непрофессионал их просто провалит. Опираться тут на мнение одного отдельно взятого эксперта — очень шаткая позиция

Там есть текст на синей плашке, который субъективно воспринимается как Faint. А ещё есть кружки под иконками, которые я бы тоже определил в семью Faint.

Вот это большая ошибка использовать один цвет для совершенно разных вещей. Вот спросите себя, должны ли эти цвета всегда быть одинаковыми? Одинаковые ли для них предъявляются требования? В данном случае ответ — "Нет".


Текст должен быть достаточно контрастен с фоном, чтобы человек даже с плохим зрением мог его прочитать, иначе его можно и не выводить. В то же время фон для иконки не имеет этого требования, но имеет другое — контуры иконки должны достаточно с ним контрастировать, чтобы человек с плохим зрением мог её разобрать. То, что эти цвета на макете совпадают — это либо случайность, либо, что более вероятно, ошибка дизайнера, не умеющего в a18y.

Полностью согласен, в этой ситуации у этих цветов разные назначения. Но цвета при этом воспринимаются, как похожие.

Из-за того, что они похожи, они оба отнесены к Faint. А внутри Faint мы их уже разносим, один из них используется для текста, а второй для подложки. На макете они конечно тоже разные: #edf1f7 50% и #FFF 15% соответственно
Вместо использования классов вроде .back и .text, можно их вынести в отдельное data свойство, например data-color-mode. Так меньше шансов налепить взаимоисключающих стилей в один компонент.
Спасибо за дельный комментарий. Добавил пример с data-атрибутами в статью
Only those users with full accounts are able to leave comments. Log in, please.