Привет, Хабр! Меня зовут Антон, я UX дизайнер. Сейчас работаю в линстартапе. Основное требование к нашему продукту (приложению) — его быстрое получение пользователем.
Преамбула
Продукт не должен проседать на фоне конкурентов, даже несмотря на наследие и ограниченные ресурсы.
Сейчас я расскажу, как моя команда, имея слабую компонентную базу, умудрилась завести и завезти тёмную тему для айос и андроид.
Задача стояла нехитрая: сделать тёмную тему для приложений на обеих платформах.
При этом в «дано» у нас было:
библиотека цветов в Фигме;
библиотека цветов на платформах (с кучей цветов наследия);
только базовые компоненты в Фигме и ещё меньше — в коде;
иконочный сет и сет иллюстраций.
Да, мы знали, как правильно, но на это у нас не было ни времени, ни рук.
Далее по шагам опишу наш путь.
1 шаг — Рефакторинг
Заскринили экраны приложений для обеих платформ (iOS, Android), сравнили с макетами.
Ремарка: приложения у нас в большинстве своём схожи.
2 шаг — Цвета
Наши цвета — это стандартный набор основных цветов и их оттенки в светлую и тёмную стороны: фоновый белый, триггерный синий, чёрный и серый для шрифтов и частные случаи использования оттенков применяемых в дизайне.
Немного о принципах: при управлении вниманием пользователя в первую очередь мы опираемся на когнитивные свойства восприятия. На фокус сильно влияют картинки и контрастные элементы. Потому мы распределили цвета и оттенки по контрасту, создав цветовые пары, где парой цвету приходится фон.
Думали сделать уникальные цвета с идентичным контрастом для обеих тем. Но решили не упарываться и для светлой темы почти ничего в цветах не меняли, а для тёмной реверсировали глубину цвета. Так мы получили 2 набора динамичных (переключающихся) цветов.
Контрасты цветов мы замерили по шкале доступности контента применяемой к контрасту. Получили в большинстве случаев близкие показатели.
3 шаг — Цветовые токены
Ранее мы именовали цвета исходя из глубины цвета. Теперь мы взяли за основу контраст в светлой и тёмной темах. Цвета именуются одинаково, содержат префикс оттенка и число контраста. То есть, светлый синий на светлой теме и тёмный синий на тёмной имеют одинаковый b_100. Чем контрастнее, тем больше число.
4 шаг — Отрисовка
Скорее не отрисовка, а назначение тёмной цветовой схемы светлой.
5 шаг — Уникальные цвета
Как я выше писал, у нас есть частные случаи, которые нельзя переключить в рамках заложенной логики. Потому мы добавили небольшие сеты уникальных цветов, которые переключаются уникальным образом.
Также нам понадобился набор статичных (непереключающихся) цветовых оттенков.
6 шаг — Автоматизация
Мы должны проверять свой дизайн, а делать для этого макеты в 2-х темах совершенно не наш подход. Запустили плагин Appearance для Фигмы, настроили, протестили.
7 шаг — Разработка
Выгружаем наши цвета в нужном разработчикам формате и/или добавляем их в песочницу сами. Просим разработчиков выгрузить библиотеку цветов из кода. Рефакторим цвета, присваивая цветам наследия новые цвета.
Просим сборку у разрабов на новых цветах и наслаждаемся результатом переключения цветов. Конечно же, было ещё немало работы по вычищению ошибок по цветам. Но не долго.
Итог
Таким подходом, технически, мы завезли тёмную тему буквально за пару недель. Да, на изучение различных подходов, перебор массы дизайн-систем, перекраску цветов (раз 8) ушло месяца 3, но глядя на результат, мы с командой понимаем, что всё было не зря.
Тонкостей по пути было много. Если будут вопросы, я с радостью отвечу на них в Телеграме — @Kilunin.
Рад, если было полезно!
