{"id":9185,"title":"\u0427\u0435\u0440\u043d\u0438\u043b\u0430 \u0438\u0437 \u0432\u044b\u0445\u043b\u043e\u043f\u043d\u044b\u0445 \u0433\u0430\u0437\u043e\u0432: \u043c\u0438\u0444 \u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c?","url":"\/redirect?component=advertising&id=9185&url=https:\/\/vc.ru\/promo\/316632-odezhda-kotoraya-rastet-vmeste-s-rebenkom-biotoplivo-i-bizhuteriya-iz-chaynogo-griba&placeBit=1&hash=a88533bf78285d41072084482619c82803fd6598d1bcc2e142642ff721574ad7","isPaidAndBannersEnabled":false}
Дизайн
red_mad_robot

Дизайнеру приложений: как создать и передать в разработку тёмную тему

В конце 2019 года зарелизили iOS 13 и Android 10 с поддержкой автопереключения на тёмную тему. Мы решили добавить её в приложение «Ростелеком Ключ» под iOS и Android, над которым работали в тот момент.

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

Зачем делать тёмную тему

Может показаться, что это всё на волне хайпа. Но не только.

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

Если мы выходим из тёмного помещения в светлое, то ненадолго «слепнем», но привыкаем к новым условиям уже через 4–6 минут. Когда же мы переходим из светлого места в тёмное, адаптация занимает больше времени: в среднем 30–45 минут.

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

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

В нашем случае приложение «РТ Ключ» — кросс-платформенный сервис для управления устройствами на территории дома: домофонами, шлагбаумами, камерами видеонаблюдения во дворе и в подъезде. Жители домов используют его как днём, так и ночью.

Справедливо заметить, что тёмная тема также помогает экономить заряд (для некоторых типов экранов: OLED/amoled — да, LCD — нет). А в долгосрочной перспективе она может замедлить развитие близорукости.

Как перейти на тёмную сторону: пошаговая инструкция

Если вы совсем ничего не знаете о тёмной теме, то можно начать знакомство со статей в Human Interface Guidelines для iOS и в Material Guide для Android. Там подробно разобрано, как цвета и слои взаимодействуют друг с другом в ночном режиме. Перейдём к нашим советам:

1. Приведите в порядок макеты и соберите UI kit

UI kit серьёзно ускоряет работу дизайнера и разработчиков. Обычно мы собираем его сразу после утверждения визуальной концепции на примере нескольких основных экранов приложения. В UI kit входят:

  • Цветовая палитра стилей для обычного состояния элементов, состояния при нажатии, цвета для неактивных элементов, инпутов в фокусе и так далее.
  • Текстовые стили.
  • Все элементы интерфейса (кнопки, поля ввода, элементы списков, блоки с заголовками и так далее) в различных состояниях и ситуациях в виде master components.
  • Сет иконок в черном цвете.
  • Иллюстрации.

UI kit нашего приложения можно рассмотреть в Figma.

Все последующие экраны собираем уже из готовых компонентов. Но при экспорте макетов из Sketch в Figma наш UI kit серьёзно пострадал: пришлось его обновить, заново назначить цветовой стиль для каждого элемента и пересобрать экраны из компонентов.

2. Договоритесь о названиях цветов

Чтобы дизайнерам, iOS и Android-разработчикам было проще общаться между собой, цвета мы решили назвать универсально для обеих платформ. В прошлой версии UI kit цветовые стили мы обозначили незатейливо — по номерам: C1, C2, C3… Это было не слишком удобно: при обсуждении все называли цвета не по цифрам, а по оттенкам: фиолетовый, оранжевый, чёрный и т. д.

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

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

  • Назначение цвета или элемент, на котором он используется.
  • Приоритетность использования (опционально).
  • Состояние элемента, если это применимо (опционально).
Слева наименования для цветов кнопки в обычном состоянии, при нажатии на iOS, цвет Ripple в Android и неактивная кнопка на обеих платформах. Справа имена для текстов на различных поверхностях

В общем, если в вашем проекте ещё нет UI kit, а вместо цветовых стилей назначены обычные цвета, пора «причесать» макеты.

3. Подберите цвета для тёмной темы

Чтобы не тратить драгоценное время, мы не прорабатывали все макеты в тёмной теме, а выбрали только несколько экранов с принципиально различающимися компонентами. С их помощью мы подбирали удачные цвета и добавляли их в палитру.

Затем разработчики обновляли цвета в коде приложения, готовили для нас тестовую сборку, а мы изучали, как тёмная тема смотрится «живьём». Если выявляли ошибки, правили макеты и палитру.

Катя Рокитян
дизайнер Redmadrobot

3.1. Фоновый цвет

Начать перерисовку макета стоит с фонового цвета: он занимает большую часть экрана. В гайдах Material Design советуют брать за основу нейтральный тёмно-серый (#121212). Он, в отличие от черного, оставляет простор для построения «глубины» экрана.

Фоновый цвет должен хорошо сочетаться с цветом интерактивных элементов: кнопок, иконок и т. д. У нас в светлой палитре для интерактивных элементов использовался фирменный фиолетовый цвет «Ростелекома» — #7700ff. В дальнейшей работе отталкивались от него.

Основные цвета из брендбука «Ростелекома»

Нейтральный тёмно-серый плохо смотрелся с брендовым фиолетовым, поэтому мы последовали советам гайдлайнов Material Design. Ребята рекомендуют наложить поверх нейтрального фонового серого #121212 фирменный цвет с 8% непрозрачности.

Нейтральные и брендированные цвета фона в тёмной теме

Помимо основного фона у нас встречаются карточки с небольшим «подъемом» над поверхностью. В Material Design рекомендуют в тёмной теме создавать элевацию элементов за счёт осветления фона: чем ближе карточка к пользователю, тем светлее.

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

3.2. Создание базовой палитры

В Material Design рекомендуют при создании брендированной тёмной темы заменять цвета на менее насыщенные аналогичного оттенка. В качестве фирменного цвета для «РТ Ключ» мы использовали фиолетовый.

При попытке осветлить его по рецепту Material Design его оттенок стал розоватым. Оригинальный фирменный цвет выглядел «синее», поэтому мы вручную изменили его оттенок.

Оттенок, который мы получили с помощью наложения белого, был слишком розовый — сместили тон в сторону синего

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

Navbar и крупные кнопки в осветленной фиолетовой версии особенно сильно отвлекали внимание от контента, а если мы снижали яркость, линейные иконки терялись на тёмном фоне.

В исходной светлой теме насыщенный фиолетовый цвет одинаково хорошо смотрится на крупных блоках с белым текстом и на тонких линейных иконках на светлом фоне. А на тёмном фоне всё не так

Пришлось как в тёмной, так и в светлой теме заменить один исходный цвет на три: один для контурных иконок, второй для больших кнопок с фоном, третий для «уголка» на главном экране и navbar на остальных.

Заменили один фиолетовый на три — так намного лучше

Помимо фиолетового мы использовали оранжевый, желтый, бирюзовый и красный. Оранжевый — для call to action элементов, желтый — для уведомлений, бирюзовый — для подтверждения операции, красный — для ошибок.

Когда мы осветлили эти четыре цвета по совету Material Design, серьезно изменилась контрастность приложения по сравнению со светлой темой. Пришлось отступить от гайдов: оранжевый, бирюзовый и красный мы не осветлили, а затемнили. Жёлтый оставили неизменным, поскольку при затемнении он «грязнил».

3.3. Особенности палитры iOS

В iOS можно задать оттеночный цвет (он же tint), которым будут окрашены все интерактивные элементы: кнопки, иконки, переключатели и т. д. Например, в «настройках» iPhone используется синий цвет, а в приложении «часы» — оранжевый.

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

Оттеночный цвет (tint) в темной теме

В iOS заложена возможность менять цвет интерактивных элементов при нажатии. Это полезно, так пользователю сразу понятно, отреагировало приложение на его действие или нет.

По умолчанию цвет при нажатии становится полупрозрачным. Мы же подумали, что интереснее будет смотреться, если при нажатии кнопки будут «углубляться», то есть темнеть.

3.4. Особенности палитры Android

В Android при нажатии на интерактивный элемент от точки прикосновения к нему расходится волна. Этот эффект называет ripple. По умолчанию ripple немного затемняет исходный элемент, а мы хотели его, наоборот, осветлять.

Ripple в Android приложении

Также в Android есть особенности отрисовки status bar и navigation bar. Status bar — строка состояния, где отображаются уведомления, уровень сигнала, заряд батареи и время. Navigation bar — панель, где располагаются кнопки назад, домой и недавние приложения.

С появлением смартфонов с крупными дисплеями, доходящими до самого края устройства, «челками» и «дырками» под камеру, в Material Design представили концепцию edge to edge. Её суть в том, что служебные элементы не должны «съедать» полезную площадь, и как можно большее место на экране должен занимать полезный контент.

Для этого в Android доработали поддержку прозрачных status bar и navigation bar. Дело в том, что эти панельки не на всех телефонах имеют одинаковую высоту. И если до начала поддержки edge to edge мы назначали им прозрачный фон, на некоторых устройствах они некрасиво накладывались на контент экрана. Теперь в материальных компонентах появились системные отступы: разработчики могут определять размер status bar и navigation bar и задавать соответствующий отступ для контента. Поэтому раньше в Material Design рекомендовали выбирать непрозрачный фон для status bar и navigation bar, а теперь — наоборот.

Однако важно учитывать, что не во всех поддерживаемых версиях Android можно назначить цвет иконок в системных компонентах:

  • до 6.0 иконки в status bar и navigation bar всегда белые;
  • с версии 6.0 можно задать, белыми или черными будут иконки в status bar, но navigation bar будет вести себя так, как в предыдущих версиях.
  • с версии 8.1 можно выбрать цвет иконок как в status, так и в navigation bar.

Чтобы избежать странных наложений на контент в «Ключе», мы поступили так:

  • в старых версиях Android до 6.0 для обеих панелек задали черный фон с 50% прозрачности — на нем хорошо смотрятся белые иконки;
  • с 6.0 и до 8.1 navigation bar остается с полупрозрачным черным фоном, а status bar полностью прозрачный;
  • с версии 8.1 — фон обеих панелек полностью прозрачный.

Если вы по каким-то причинам не готовы к такой поддержке edge to edge, лучше сделать status bar и navigation bar универсальными. Поддержка edge to edge:

3.5. Проверьте контрастность элементов

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

Лучше всего проверять контрастность с помощью тестирования: открыть интерфейс на смартфоне, используя Figma Mirror или аналогичный софт, выйти на яркое солнце (тёмная тема предназначена для использования в темноте, но людям ничто не помешает использовать её на свету).

Также будет полезно попросить посмотреть на приложение людей с нарушениями зрения (близорукостью, дальнозоркостью, дальтонизмом). Но если такой возможности нет, контрастность можно проверить на сайте contrast-ratio или с помощью плагина в Figma.

3.6. Иллюстрации и анимации

Если в вашем приложении используются иллюстрации, для тёмной темы их придётся перекрашивать. Насыщенные цвета, которые отлично смотрятся на светлых поверхностях, на тёмных режут глаз и затрудняют восприятие. Используйте менее насыщенные тона.

Для тёмной темы приходится делать отдельные версии иллюстраций и анимаций в тёмных цветах

Как передавать в разработку

Мы работали в связке Figma + Zeplin. Это может показаться странным, но мы всей компанией перешли на Figma из Sketch в конце лета 2019, прямо перед началом работы нам тёмной темой. И чтобы сэкономить время на адаптацию разработчиков к новому инструменту, продолжили работать с Zeplin. И тут он преподнес нам несколько сюрпризов.

В палитре Zeplin нельзя создать цветовые стили с одинаковыми HEX. Поэтому нам пришлось незначительно, практически незаметно для глаза, менять HEX у фиолетового цвета в светлой теме.

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

Даниил Субботин
iOS-разработчик Redmadrobot

1. Особенности iOS dev

Следующий сюрприз, который нам преподнес Zeplin: из него можно экспортировать только одну палитру в Xcode-проект. Либо светлую, либо тёмную. При попытке экспортировать цвета тёмной палитры Zeplin просто заменял ими все светлые. Мы стали переносить цвета вручную, копируя HEX-значения. То же самое делали и с изображениями.

После долгих мучений я написал утилиту, которая выгружает обе цветовые палитры прямо в Xcode-проект, используя Zeplin API. Это сильно упростило жизнь. Дизайнер сообщает, что добавил новый цвет или изменил старый, я запускаю скрипт, и все изменения автоматически подтягиваются в проект

Даниил Субботин
iOS-разработчик Redmadrobot

2. Особенности Android dev

На Android тёмная тема доступна на всех версиях ОС (мы тестировали начиная с пятой). Но переключать её в системе можно только на 10-м Android, поэтому стоит добавить в приложение возможность переключать её вручную.

Мы добавили следующие варианты выбора темы: всегда светлая, всегда тёмная, выбирается в зависимости от режима энергосбережения (9-я версия андроида и ниже), переключается в зависимости от настроек системы (10-я версия андроида и выше).

Но важно учесть, что выбранная пользователем тема приложения в системе не сохраняется. Нужно запоминать её внутри и активировать при каждом запуске приложения

Владислав Шипугин
Android-разработчик Redmadrobot

В Android есть своя система цветов для материальных компонентов (кнопок, app bar, текстовых полей и т. д.). Гайдлайны Material Design о цвете.

Важно сопоставить вашу палитру с материальной с помощью описания темы приложения. Вот статья, которая поможет вашим Android-разработчикам разобраться, как это сделать. Но даже после этого может сохраниться проблема с неправильными цветами. Чтобы это исправить, можно описать стиль конкретного компонента.

Как поддерживать и развивать

С тех пор как мы проработали тёмную тему, у нас добавилось несколько новых функций, появились планшетные пользователи, а продуктовый офис в Ростелекоме задумался о том, чтобы выпустить приложение «РТ Ключ» в виде white label для застройщиков — в их фирменных цветах.

Мы поняли, что текущую версию дизайна, разработанную для запуска MVP, пора переосмыслить как структурно, так и визуально. Мы полностью переработали структуру приложения с учетом тех функций, которые должны появиться в ближайшие два года, добавили дашборд для быстрого доступа к самым популярным функциям, избавились от ярких фирменных элементов в оформлении (вроде уголка на главном экране и цветного nav bar).

А вот грамотная работа над цветовой системой позволила практически полностью сохранить её при тотальном редизайне приложения.

Оля Сартакова
арт-директор Redmadrobot

Вторая версия дизайна приложения в той же цветовой палитре:

К моменту запуска второй версии мы безболезненно переехали на Figma, я адаптировал утилиту, которую изначально написал для Zeplin, под Figma. Теперь мы обновляем цвета, иконки и картинки в Xcode и Android Studio в один клик

Даниил Субботин
iOS-разработчик Redmadrobot

Скачать нашу утилиту можно здесь.

В ближайшие пару месяцев мы передаем дизайн приложения в «Ростелеком Инфотех», и ребята как раз ищут дизайнера для работы над мобильными приложениями для iOS и Android.

Выводы: как у нас, только лучше

Если в вашем приложении нужна тёмная тема, её лучше всего заложить на старте, сразу после утверждения визуальной концепции. Это поможет избежать почти всех проблем, с которыми столкнулись мы. Как это делать:

  • Соберите UI kit.
  • Продумайте систему наименования цветов или воспользуйтесь нашей.
  • Подберите брендированный фоновый цвет.
  • Подберите оттенок для основного и второстепенных фирменных цветов.
  • Если ваше приложение кроссплатформенное, составьте список отличий цветовых схем iOS и Android. А также проверьте, не нужно ли добавить в приложение на Android ручную настройку тёмной темы.
  • Проверьте контрастность выбранных цветов.
  • Подготовьте иллюстрации и анимации для тёмной темы.
  • Обновите UI kit.
  • Воспользуйтесь нашей утилитой для передачи элементов в разработку.

Полезные материалы

Чтобы ещё глубже погрузится в тёмную тему:

И немного полезностей для разработчиков:

0
23 комментария
Популярные
По порядку
Написать комментарий...

Цепляющий заголовок)) Всегда любила тёмные темы в приложениях больше стандартных.

10

Вот прям не дождусь, когда эта истерия с темными темами пройдет. 

–2

Надеюсь, не дождешься. Благодаря темной теме я все еще вижу и сплю хотя бы 2 часа

11

ну вот, все секреты рассказали😄 теперь придётся выдумывать новые 🙈

6

"После долгих мучений я написал утилиту, которая выгружает обе цветовые палитры прямо в Xcode-проект, используя Zeplin API"

Молодец! Спасибо, что выложили код! ред.

4

Ада, ❤️

1

Макеты симпатишные :) 

4

Спасибо за толковую статью и отдельное спасибо за исходники — люблю, когда можно не только почитать, но и поковырять макеты)

Удивлён, кстати, что в «Полезных материалах» нет упоминания замечательного плагина, упрощающего создание и тестирование тёмных / светлых тем: https://www.figma.com/community/plugin/760927481606931799/Appearance

P.S. Да, раз уж вы затрагиваете тему контрастности в интерфейсах, то, думаю, вам стоит пофиксить некоторые досадные недочёты >___< ред.

2

Да, вещь! Про плагин  Appearance как раз вчера рассказали  в дизайн джеме, кстати) https://t.me/design_jam/331

1

Да, пофиксим:) Спасибо!

1

Хорошая статья!) Не думаете что супер насыщенный фиолетовый и оранжевый в темной теме не состыковывается с целью темной темы? Вы проверяли как в темноте ощущаются эти цвета и т.д.?

2

Спасибо 🤗

Если посмотреть картинку с 3 фиолетовыми, то там видно, что мы его приглушили значительно. Плюс, возможно, мокапы в статье так отображаются — мы всё-таки проверяли макеты непосредственно в приложении на телефоне.

Но на последних изображениях видно, что мы отказались от такого количества фиолетового в интерфейсе. В темноте, кстати, проверяли, но только на себе)

1

огромное спасибо!
как раз делаю темную тему!

2

Комментарий удален по просьбе пользователя

1

Хороший вопрос. Но мы для ripple назначили два непрозрачных цвета в каждой теме. Один для фиолетовых кнопок, один для «невидимых» на белом или сером фоне. Если попадется такой инструмент — поделимся.

1

Я тестирую еще темную палитру обязательно вечером, когда зачастую включен Night Shift

1

Угу, тоже полезно!

1

Ребята, а вот вы по примеру материала серый фон подкрашиваете, а как вы относитесь к серому фону в светлой теме? Если ли резон его немного "брендировать"? Не так, чтобы он стал цветным, но стал ближе к гамме палитры?

1

Положительно относимся:) У нас в светлой теме фоновый серый тоже немного синеватый.

0

Статья супер! Действительно полезная и хорошо структурированная работа 👍🏽

1

Очень актуально - темные палитры весьма актуальны и обязательно должны присутствовать для выбора заказчиком. Обсудим и поэкспериментируем при создании приложений для iOS https://www.app2lab.ru/services1.php ред.

1

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

"Вывод: лучше знать что мы будем делать тёмную тему на старте" да вы чтооо... А если знать заранее что проект не взлетит можно вообще нихрена не делать. ред.

–6
Читать все 23 комментария
Продавец eBay из Кургана стала победителем в финале Всероссийского конкурса «Молодой предприниматель России 2021»

27 ноября в Москве состоялся финал ежегодного конкурса «Молодой предприниматель России 2021». В нём приняли участие предприниматели и самозанятые в возрасте до 35 лет. Всего было подано более 300 заявок из 43 регионов страны.

Маленький стартап против гигантов: Kytch может починить ломающиеся машины для мороженого McDonald's — сети это не нужно Статьи редакции

Джереми О’Салливан и Мелисса Нельсон придумали устройство, которое предотвращает поломку автоматов для мороженого — проблемы с ними есть в 10% ресторанов McDonald’s. Несмотря на убытки франчайзи, сеть его запретила и почти уничтожила Kytch.

Wired
Лучшие стартапы «Трибуны» – Ноябрь 2021 года

Подборка пяти лучших проектов от канала @vchunt.

И сотрудников тоже касается: кибербуллинг на рабочем месте
Design vector created by pikisuperstar - www.freepik.com
Дайджест новостей Сбера: сайт Digital Пётр, сценарии для умного дома и платина от Forbes

Прошлый дайджест мы целиком посвятили 180-летию Сбера, поэтому новостей накопилось много. Среди них — запуск сайта по распознаванию рукописей Петра I, большое обновление на платформе умного дома Sber и другие. Рассказываем всё самое интересное.

Картинка, сгенерированная ruDALL-E по запросу «рыжий котик»
Откуда берут взрослые деревья для парков и улиц

А также сколько они стоят и почему выращивать их — неплохой бизнес.

IPO HashiCorp и Nu Holdings

На бирже пролив уже вторую неделю подряд. Обычно компании переносят IPO в такие моменты до начала роста. Но две компании не побоялись выйти на биржу в нисходящем тренде, давайте их разберём.

SkillFactory раздает подарки: повышенная ставка и новогодний марафон для вебмастеров

В преддверии Нового года мы решили порадовать своих настоящих и будущих партнеров — участников партнерской программы школ Skillfactory, Contented и Product LIVE. Это возможность получить денежный бонус и заодно увеличить прибыль от продажи наших курсов.

Яндекс.Маркет не выплачивает деньги за заказы

В нашем случае история началась 16 ноября, когда нам по магазинам ID 1112344, 1366786, 1246337, 1366785 (договора №1947529/21 от 20 мая 2021 и №2282294/21 от 18 авг. 2021) когда не пришли по плану средства за заказы по всем указанным магазинам (примерная сумма выплаты 4,5 миллиона рублей)

Как мы отправили 2000 распечатанных фото вашим мамам за 1 неделю после запуска

Как это получилось и сколько заработали. Без фейлов не обошлось.

Это моя сестра - Таня. Пришла на помощь, пока срочно искали еще одного менеджера
Мне стало стыдно не знать столицу Сенегала и я создал бота, который помог мне выучить все столицы мира

Теперь я знаю и флаги стран, и их столицы. Хотя с географией всегда было не очень.

null