Добавление тем в приложение: подходы и анализ

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

Немасштабируемый подход

Первый подход подразумевает, что, взяв начальный интерфейс, мы создаем несколько экранов с референсами темной темы. Затем формируем новый UI kit и начинаем вручную изменять компоненты (кнопки, текст, разделители и прочее) на новую палитру. Несмотря на кажущееся обилие работы, это занимает 1-2 дня у джуниор или мидл фронтенд-разработчика. Однако этот метод приводит к множеству багов и не имеет возможности масштабирования. При добавлении новой палитры придётся вручную прописывать цвета для каждого элемента, что является неэффективным.

Масштабируемый подход с использованием дизайн токенов

Проблемы первого подхода решаются с помощью дизайн токенов. Простыми словами, токен — это цвет конкретного элемента в определенном месте и конкретной теме. Например, токен для главного текста в светлой теме будет называться light-text--primary. Внутри токена содержится определённый цвет.

Применяя это на все элементы (текст, иконки, элементы управления, границы и т.д.), мы можем создать таблицу, где заголовок строки — это название токена, а заголовок столбца — это тема. В ячейках такой таблицы будут результатом HEX-коды цветов.

Преимущества использования токенов

Что это нам даёт? Назначив токены на все компоненты в светлой теме, мы можем легко менять значение темы в названии токена, начиная брать новые значения из таблицы. Таким образом, потратив 1-3 дня на назначение всех токенов или используя их с самого начала, мы можем добавлять новые темы всего за 15 минут.

Процесс осуществляется следующим образом:

• Создается новый столбец, и в каждой строке напротив кейса использования добавляется новый цвет.
• Новая таблица выгружается как JSON файл сразу на GitHub.
• Разработчик добавляет новое поле для новой темы и всего лишь в пару кликов перекрашивает всё приложение.

Если всё сделано правильно, даже не потребуется перепроверять: все цвета окажутся на своих местах.

Популярность токенов в дизайне

Дизайн токены стали популярными не так давно. Ярким примером их использования является Material Design от Google. Документация доступна по ссылке: Metarial Design.

Экран настройки и смены темы

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

Одной из основных UI ценностей HOT на данный момент является следующее: если мы можем сделать что-то лучше минимально затрагивая процесс разработки и у нас есть возможность провести еще несколько итераций, мы это делаем. Такой подход позволяет повысить узнаваемость бренда и выделиться визуально среди конкурентов.

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

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

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