33 оттенка зелёного. Как мы проектировали темизированные палитры для внутренних интерфейсов Х5

У нас было 24 компонента кнопок, 4 типа селектов, 10 стилей типографики, палитра Google Material и три запроса на темизацию интерфейсов от «Перекрёстка», «Пятёрочки» и Х5.

---

Меня зовут Георгий, работаю в Х5 с 2019 года. Проектировал UX/UI для B2B веб-сервисов с высокой насыщенностью данных: таблицы, карточки, формы, дашборды. А с 2021 года занимаюсь дизайн-менеджментом.

Расскажу, как мы создавали цветовые палитры и меняли внешний вид внутренних интерфейсов под запросы торговых сетей через темизацию, а именно:

• как генерировали и корректировали оттенки цветов;

• какими инструментами пользовались;

• как организовали работу;

• как проходило тестирование палитр и темизаций;

• с какими барьерами столкнулись и как их преодолели;

• какой итог работы и как палитры повлияли на рост дизайн-культуры в Х5.

Постановка задачи

В начале пути мы использовали палитры Google Material. Для акцентного цвета выбрали синий, чтобы создать нейтрально-информационный фон, который лучше воспринимается людьми с нарушением зрения.

Интерфейсы Х5 строятся на палитрах Colors [Base] и Colors [Additional]. Первая используется для компонентов и конструирования интерфейсов, а вторая для графиков и лейблов. Буду рассказывать о Colors [Base] — основной палитре, которая состоит из серых и синих оттенков:

В 2019 году в Х5 уже были наработки по компонентам, а интерфейсы продуктов собирали на базе внутренней дизайн-системы Join, когда дизайнеры начали получать запросы на темизацию.

«Почему интерфейсы синие, а цвета в брендбуке зелёные?»

«Перекрёсток»

Поэтому разрабатывать цветовые палитры для внутренних интерфейсов «Перекрёстка», «Пятёрочки» и Х5, нужно было с учётом следующих ограничений:

• брендбук с цветами и рекомендациями по их использованию;

• текущая функциональность Figma для работы с цветом и темами;

• существующие наработки палитры дизайн-системы.

На момент потребности темизации, четыре продукта уже были в процессе дизайна и ждали палитры «Пятёрочки» и X5. Ещё пять продуктов готовились к запуску работ с использованием палитр «Пятёрочки» и «Перекрёстка». Если не отработать запрос, то дизайнеры будут создавать локальные цветовые стили. Так как регламентов на работу с цветами во внутренних интерфейсах не было, мы бы столкнулись с рядом бессистемных решений, которые бы привели к:

• увеличению дизайн-долга на корпоративном уровне;

• отсутствию единообразия на смежных продуктах;

• барьерам во взаимодействии с интерфейсами, так как большинство пользователей кросс-продуктовые и выполняют работу в двух и более веб-сервисах.

Подготовка

Мы изучили брендбуки и сайты торговых сетей. Акцентные цвета — зелёный и красный, поэтому чёрный и серый рассматривать не стали. Красный цвет ассоциируется с ошибкой и не подходит в качестве акцента для B2B интерфейсов, в которых пользователи проводят многочасовые сессии.

Оставались зелёные цвета. Однако, смущало, что перекраска компонентов в зелёный цвет коррелирует с подтверждающим сообщением Success. Поэтому мы собрали референсы компаний, которые используют зелёные оттенки, посмотрели, как ведёт себя интерфейс, а также сделали тестовые прототипы на базе зелёного цвета, чтобы принять решение:

Подтверждения гипотезе не нашли. Сделали вывод, что пользователь в контексте интерфейса понимает предназначение элементов и не спутает информационный посыл об успешной загрузке файлов с зелёным состоянием Focused у Input при вводе значения.

Для понимания задачи выписали критерии, на которые ориентировались при проектировании цветов и тем:

• три самостоятельные палитры для каждого из брендов, чтобы закрыть потребности бизнесов;

• удобное переключение тем для дизайнеров;

• быстрое внедрение темизации для разработки.

Разработка палитр

Палитра Base

Истоки палитры Base уходят корнями в 2019 год, когда логотип Х5 был ещё оранжево-чёрным. Но решили не брать корпоративный оранжевый за акцентный цвет, а использовать синюю палитру Material, чтобы не повышать когнитивную нагрузку на пользователей. Систему наименований цветов переняли от Material Palette и адаптировали, где 10-ый — светлый оттенок, а 100-ый — тёмный.

Изначально нейтральные оттенки сделали серыми без других примесей цветов:

Понадобилось время, чтобы удостовериться, что в интерфейсах такое цветовое решение выглядит грязно. Поэтому тонировали нейтральные оттенки, взяв за основу значение Hue цвета Accent Base 90 (цвет Primary Button), чтобы интерфейсы выглядели чище и приятнее: 

Продуктов, которые используют базовую палитру, становилось больше, а интерфейсы сложнее. Из-за этого мы столкнулись с такими барьерами:

• группировка текстовых или функциональных блоков на белом фоне;

• обозначение строк второго уровня в таблицах;

• hover состояние карточек на фоне Grey 10.

Решили завести дополнительный уровень цвета — Grey 5 и Accent 5. Для этого пришлось сдвигать ступени 10, 15, 20, 30 и тестировать на интерфейсах.

В итоге получили палитру из серого и акцентного цвета, которая хорошо показывает себя в таблицах, карточках, формах, текстовых блоках и других интерфейсах с обилием интерактивных элементов:

Акцентные палитры и базовый цвет

Нам нужно было понять, какие цвета из брендбука использовать в качестве акцентных. В тёмных оттенках зелёного интерфейс Х5 выглядел мрачно, а в светлых интерфейс «Перекрёстка» — кислотно:

Выбрали средний зелёный, потому что:

• цвет из брендбука «Пятёрочки» по яркости похож на синий из палитры Base для кнопок Primary;

• средние зелёные цвета «Пятёрочки» и «Перекрёстка» похожи, а значит, можно переиспользовать наработки.

Вот как это выглядело:

Разложили каждый брендовый цвет от тёмного к светлому через плагин Material Palette: 

Отметили белыми кружками базовый уровень. Базовый уровень — цвет из брендбука, который используем для Primary Button, Checkbox, Tab, Link и других элементов, чтобы показать интерактивность или выделенное состояние:

Было видно, что палитра Х5 светлее палитр Base, «Перекрёстка» и «Пятёрочки». Подумали, что хорошо бы сделать единый базовый цвет для акцентных палитр на 80 уровне. Для этого мы:

• согласовали с представителями бренда Х5 и подняли базовый цвет в палитре Х5 на ступень выше, чтобы сделать его темнее;

• в палитре Base Accent опустили базовый цвет на одну ступень ниже, чтобы сделать его светлее.

После того, как мы определили базовый цвет, перешли к ручной корректировке палитр.

В эталонной палитре Base 11 оттенков, а плагин сгенерировал 10. Решили начать с палитры «Пятёрочки» и отредактировать светлые цвета, чтобы добавить оттенок 5. Сначала корректировали оттенки в цветовой модели HSB. Старались сохранять значение Hue для палитры и менять только Saturation и Brightness. Оттенки при этом менялись неравномерно, и искажалось восприятие тона относительно соседних цветов. Потом переключились на HSL, так как в ней можно указывать характеристики Hue, Saturation, Lightness независимо друг от друга и делать цвет ярче, темнее, более насыщенным или обесцвечивать:

Добавили в каждую акцентную палитру оттенок 5, промаркировали базовый цвет и повторили шаги для палитр «Перекрёстка» и Х5. Получилось хорошо:

Серая палитра для каждой темы

Grey из палитры Base визуально не подходил для темизированных интерфейсов, зелёные кнопки инородно смотрелись на сине-сером фоне. Поэтому для каждой из тем сделали свой серый цвет. Тон серой палитры генерировали через colorscheme.ru:

Что делали:

• брали код акцентного цвета, включали режим тетрада;

• искали цвет через регулирование дополнительного ползунка;

• выписали HEX код цвета, который получили, и взяли значение Hue;

• дублировали палитру Base Grey и применили на ней значение Hue, а Saturation и Lightness оставили без изменений;

• докрутили руками полученные цвета. 

Три серых палитры для «Пятёрочки», «Перекрёстка» и X5 готовы:

Темизация интерфейсов

До того, как Figma опубликовала обновления по Variables, темизация работала через Swap Library. Хотелось бы рассказать подробнее, как мы к этому пришли, чтобы прослеживалась причинно-следственная связь.

1. Так как дизайнеры работают в одной теме, решили разделить палитры на отдельные файлы в Figma, чтобы подключить только те, что пригодятся в работе. В итоге получились файлы Base, TSХ («Перекрёсток»), TS5 («Пятёрочка»), Х5. В каждом лежали акцентная и серая палитры:

   

2. Рассматривали варианты хранения компонентов дизайн-системы, например:

   • Разносить библиотеки по темам → один темизированный UI kit = одному файлу в Figma.

   • Добавлять темизированные компоненты в один Variants. Например: Variants с кнопками для темы Base состоит из 72 компонентов кнопок, к ним добавляются ещё 216 компонентов для «Перекрёстка», «Пятёрочки», Х5.

   • Разделять по типам: атомы, молекулы, организмы. В первом файле хранились бы компоненты, которые обслуживают основные элементы. Во втором файле хранились бы компоненты: Buttons, Selects, Dropdown List и другие. А в третьем сложносоставные организмы, типа коллектора фильтров, функциональность настройки таблиц и так далее.

   

   В итоге оставили UI kit в одном файле, так как альтернативные решения тянули за собой доработки и неудобство обслуживания компонентной базы:

3. Чтобы снизить риски и ускорить проектирование, решили не использовать собственную разработку и плагины. Остановились на встроенной функциональности Figma — Swap Library:

   

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

   ---

   Красим компоненты 1 к 1, через Swap Library. То есть акцентные и серые цвета палитры Base меняем на акцентные и серые того же уровня зелёной темы.

   ---

   

   

Variables

21 июня 2023 года Figma опубликовала Variables. Мы изучили и протестировали функциональность, затем составили план переезда на Variables. Решили делать так:

1. В файле Colors [Base] завели переменные через плагин Styles to Variables Converter.

2. Вручную занесли дополнительные колонки с цветами для тем: ТСХ («Перекрёсток»), ТС5 («Пятёрочка»), X5. Опубликовали изменения:

   

3. Для файла c UI kit применили плагин Destroyer, чтобы удалить цветовые стили.

Видео работы с плагинами можно посмотреть на канале Figma.

Как это работает

Для дизайнеров, которые собирают макеты на синей теме Base, переезд на Variables, произошёл в фоновом режиме.

А для дизайнеров, которые работают с зелёными темами «Перекрёстка», «Пятёрочки» и X5 предусмотрели два сценария:

1. Создавать новые макеты на Variables, а старые переводить по мере необходимости, через панель Selection Colors.

2. Перевести старые макеты через Swap Library на тему Base, удалить стили через плагин Destroyer для локальных компонентов, а затем переключиться на одну из зелёных тем с помощью Variables.

В зависимости от объёма макетов дизайнер принимает решение, какой сценарий использовать.

Тестирование

При тестировании ориентировались не на плашки с цветами, выровненными по тону, а на боевые макеты интерфейсов. Добивались, чтобы прослеживалась цветовая иерархия и считывались элементы управления в состояниях: Default / Hover / Selected / Disabled.

Для этого перекрашивали макеты других дизайнеров через панель Selection Colors, чтобы учесть сценарии использования. Вот что удалось выяснить во время тестирования:

• В панели Libraries палитры Base, «Перекрёстка», «Пятёрочки», Х5 поставили первыми, так как при конструировании локальных компонентов они используются чаще, чем дополнительные цвета:

• 7 из 10 интерфейсов проектируются на палитре Base, поэтому решили установить синюю тему по умолчанию. Темы ТСХ («Перекрёсток»), ТС5 («Пятёрочка») и X5 дизайнер подключает самостоятельно:

Синяя ссылка в ячейке Selected с зелёным фоном оказалась холиварной темой. Рассудили, что синие ссылки — классика веба и привычнее для пользователя. Однако, не соответствуют принципу темизации «Перекраска 1 к 1». Изучили референсы и пришли к тому, что дизайнер красит ссылки в зелёный или синий на своё усмотрение:

Организация работы

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

После завершения проекта я собрал для себя заметки по организации работы, которые могут быть полезны и вам:

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

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

• Пробовали вести Канбан-доску, оставляли комментарии в Figma, но рабочим подходом стал «План/Факт». В графе «Факт» писали протокол проведённой встречи, а под заголовком «План» — шаги, с которых начинали следующий созвон. Рабочие записи можно использовать для восстановления договорённостей, аргументации принятого решения или написания статьи.

• Чем больше рабочая группа, тем больше времени нужно, чтобы договориться. Работали над палитрой втроём в постоянном составе, но иногда приглашали заинтересованных дизайнеров, чтобы узнать мнение со стороны.

• Порой сталкивались с задачами, которые ставили нас в тупик, поэтому брали их на самостоятельную проработку, чтобы изучить матчасть и вернуться с новыми идеями.

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

• Составляйте верхнеуровневый план работ и устанавливайте дедлайны. Конкретные сроки снижают прокрастинацию, избавляют от лишней детализации и нацеливают на результат. Однако, экстремальный цейтнот лишает адекватности.

Результаты

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

С каждым годом количество продуктов, на которых применены палитры Base, «Перекрёстка», «Пятёрочки» и Х5 растёт — сейчас их 45.

Мы создали палитры, улучшили опыт взаимодействия пользователя с интерфейсами и подняли уровень дизайн-культуры в Х5:

• Теперь у каждого бренда своя интерфейсная тема для внутренних продуктов, которая наследует корпоративные цвета. На веб-сервисах одной торговой сети палитра не меняется, поэтому сохраняется преемственность бренду и единообразие интерфейсов.

• Определили базовый уровень цвета для всех акцентных палитр, поэтому визуальная иерархия на продуктах считывается одинаково. Людям не придётся привыкать к локальным паттернам на продуктах, что улучшает пользовательский опыт.

• Тестировали палитры на интерфейсах, которые присылали дизайнеры, находили спорные решения и предлагали улучшения по ним. Обсуждение результатов с UX/UI специалистами помогло раскрыть нюансы создания палитр и работы темизации. В итоге темизированные палитры расширили инструментарий дизайнера и сделали работу удобнее и быстрее.