rTIM
|
7 минут на чтение
Дизайн-система, помогающая строить наши города
Я переработал цветовую систему rTIM: перенёс 300+ цветов из стилей в систему семантических токенов, разобрался с наследованием цветов и связал основную и кастомную темы.
В результате интерфейс можно перекрашивать между темами за несколько секунд, цвета веб- и десктоп-клиента стали единообразными с учётом технических отличий, а контекст применения цветов теперь зашит в названиях токенов.
О чём проект
rTIM — AI-САПР для проектирования городской застройки. Он помогает застройщикам, архитекторам и муниципальным властям быстро оценить перспективы или разработать с нуля проект территориальной застройки.
Я единственный UI/UX-дизайнер на проекте, ответственный за ведение дизайн-системы, составление user flow и совместную работу с продуктовой командой над новыми фичами.
Задача
Основная задача — оптимизация дизайн-процесса и поддержание консистентности десктопного и веб-клиента.
К моему приходу на проект дизайн-система нуждалась в переработке: между клиентами накопились расхождения в дизайне, а фичей стало настолько много, что поддерживать единообразие цветов, элементов и т.д. стало сложно.
Самая большая проблема — цвета. Их стало слишком много, а контекст их применения нигде не был закреплён.
Главные ограничения проекта:
- большая цветовая палитра из-за работы с картографией и кастомной цветовой темы для крупного заказчика;
- проект существует в виде веб — и десктоп-версии с разным функционалом в каждой;
- десктоп использует Unreal Engine, который не поддерживает многие вещи из веба.
Решение
Так как сервис активно работает с картографией, количество цветов в какой-то момент перевалило за 300. А ещё у проекта появился крупный заказчик, для которого была разработана отдельная цветовая тема. Удержать в голове контекст применения всех цветов стало невозможно, поэтому я начал внедрять систему семантических токенов.
Если раньше проект жил на «стилях» — сохранённых цветах без контекста, — то теперь все цвета и их пары из темы крупного заказчика были перенесены в токены. Этот процесс удалось ускорить за счёт плагина, который взял на себя рутину по переносу цветов из стилей в токены.
Уже на этом этапе за счёт образования пар основная тема / кастомная тема стало возможным перекрашивать интерфейс макетов на ходу, экономя время.
Следующим этапом после создания базового слоя токенов стало добавление семантического слоя. Этот слой использует базовые токены-цвета, но добавляет контекст их применения в названиях.
Для добавления семантического слоя нужно было понять, откуда и какие цвета наследуются. Для этого я провёл внутреннее исследование совместно с командами разработчиков и составил схему наследования тех зависимостей, которые не были отображены в дизайн-системе.
Часть цветов проекта в веб-клиенте рассчитывалась алгоритмом и не была занесена в дизайн-систему. При этом у десктопного клиента из-за ограничений такого алгоритма этого не было. Я навайбкодил плагин для Figma, который брал оригинальный цвет и преобразовывал его в тот же цвет, который получался на вебе, чтобы убрать расхождения с десктопом и ускорить процесс.
После переноса стилей в токены, образования цветовых пар и реверс-инжиниринга наследования цветов я построил семантическую систему цветов для проекта.
Результаты
- Полностью убраны все расхождения между оригинальной и кастомной темами.
- Полностью убраны все расхождения между оригинальной и кастомной темами.
- Достигнуто цветовое единообразие между веб — и десктоп-клиентами, несмотря на технические ограничения обеих платформ.
- Новым дизайнерам на проекте не придётся учить и запоминать контекст применения цветов: он зашит в настройки и названия токенов.
- Токены легко экспортируются в JSON, что, в свою очередь:
- упрощает работу команде разработки;
- упрощает мою работу с ИИ для автоматического подбора новых цветов картографии, согласованных с огромной палитрой.
Точки роста
Закопавшись в архитектуру цветовой системы и серьёзно её переработав, я забыл учесть то, как команды разработки взаимодействовали с дизайнером и системой раньше. За годы работы люди привыкли к названиям UI-цветов, например «Blue-100».
Вместо привычного «Blue-100» в макетах и компонентах они теперь видели незнакомый «Card/background blue» и не знали, какой цвет нужно выставить у себя. Силу привычки нельзя недооценивать, как и пренебрегать удобством не только конечных пользователей, но и коллег.
Поэтому я начал добавлять к семантическим токенам название базового токена, цвет которого они наследуют.
