Дата: лето 2020

Цель: Добавить тёмную тему в приложение.

Пользователи: Индивидуальные предприниматели, бухгалтеры, малый и средний бизнес.

Почему: По большей части для PR-эффекта и общего тренда на тёмную тему в приложениях из-за обновления iOS/Android систем.

Моя роль: Курирующий проект дизайнер.

Команда: Agile. Работа в тесном сотрудничестве с небольшой командой: владелец продукта, IT и QA-инженеров, аналитик и дизайнер.

Результат: Первое бизнес приложение с тёмной темой среди конкурентов.
Глава 1
Изучение рынка
Лучшие практики

  • Участники рынка сами определяли какой именно оттенок тёмного будет в Тёмной теме.
  • Розница сделала подход, но он был долгий (около полугода) и скорее серый, чем Deep Dark.
Статьи, советы, рекомендации
  • Изучили всё, что предлагает Apple и Google для своих платформ.
  • Прочитали статьи на Medium про лучшие практики.
Глава 2
Определение проблемы
На момент старта …
  • Не было чёткой концепции дизайна.
  • Не было правил для разработки и внешних команд.
  • Не было понимания с чего начать.
Проблема №1: Оттенок
  • Сколько людей – столько и мнений.
  • Выбрать правильную палитру для тёмной темы оказалось очень сложно. Кто-то хотел чистый чёрный, кому-то нравился подход от Google и сделать Dark Gray.
“
В моей голове тёмная тема – это тотал блек как сердце моей бывшей
Чекмарёв Максим
Кластер Лид мобильного канала СберБизнес
Одну проблему решили
  • И так, мы определили, что тёмная тема у нас будет как чёрное сердце бывшей нашего босса!
  • Название стиля TotalBlack.
Проблема №2: Стили
  • Цветовые стили не имеют чёткой привязки к теме приложения.
  • Текстовые стили не включают в себя принадлежность и цветовой код.
Проблема №3: Пары цветов
  • Один и тот же цвет может иметь разную пару в светлой и тёмной теме.
  • Структура стилей не позволяет добавлять специальный префикс и плодить сущности.
Проблема №4: Графика
  • Много Legacy графики.
  • Большая часть иконок PDF версии 1.3, а нужна 1.7, чтобы можно было кодом перекрашивать.
  • Часть иконок неправильно собраны.

Было конвертировано порядка 500 иконок:
– из PNG в PDF
– из старой версии PDF в новую 1.7
Основные проблемы возникли на платформе iOS

Глава 3
Процесс проектирования
Произвольные пары цветов
  • @DynamicColorPair (Light: Colors.Graphite01, Dark: Colors.Asphalt05)
  • <color name="graphite_01_asphalt_05"> @color/graphite_01</color>
Figma Component Library
  • Созданы пары и примеры применения для всех мастер компонентов.
  • Добавлен суффикс _LM, _DM для быстрого переключения через Instance.

Всего компонентов: 864
Из них iOS/Android по 432
Уникальных порядка 210
Светлая и тёмная тема: по 105 компонентов

Подготовка макетов
  • Каждый уникальный макет готовится не только на две платформы, но и в светлой и тёмной теме.
  • Это позволяет минимизировать количество ошибок в процессе подготовки и позволяет QA специалистам и разработке быстро сориентироваться.
Анимация
  • Адаптирована вся анимация Lottie для тёмной темы – созданы дополнительные «пары» и условия.
Глава 4
Тестирование и анализ
Проблема с красным цветом :-(
  • Цветовая палитра красных оттенков представляла ограниченный набор. Мы использовали Primary color Ruby02 и на тёмной теме он «выгорал». Другие оттенки так же не подходили. Добавлять специальный оттенок красного для тёмной темы на первом этапе было уже поздно :(
Трансформация компонента Bottom Sheet
  • Неожиданная сложность для разработки была связана с поведением Bottom Sheet, который вытягивается в отдельную страницу и должен применять правила цветовых пар страницы.
Глава 5
Выводы
А если повторить?
  • Иначе структурировать библиотеку стилей в Figma - Colors & Fonts.
  • На основе этого иначе собирать компоненты и создавать структуру Instance.
  • Готовить иконки сразу грамотно без лишнего «мусора». Следить за белым цветом.