Руководство по проектированию темной темы для iOS-приложений

В этой статье я объясню пошаговый процесс создания темной темы для вашего iOS-приложения. Я сделаю редизайн приложения WhatsApp. В основу статьи легло руководство Human Interface Guidelines от Apple.

На конференции WWDC 2019 Apple анонсировала новые функции, которые появятся в iOS 13. Из всех классных функций больше всего меня поразил анонс темной темы. Те из вас, кто следит за мной в социальных сетях, знаете, что я фанат темной темы. Я просто обожаю ее!

Теперь с iOS 13 пользователи могут выбрать темный внешний вид всей системы. По сути, это означает, что при включении темной темы все приложения на iPhone будут выглядеть темными.

Следовательно, как дизайнерам, так и разработчикам, крайне важно добавить темную тему в свои приложения.

Apple добавила в свое руководство Human Interface Guidelines раздел по проектированию темной темы. Тем не менее, это очень короткие рекомендации, в отличие от руководства Material Design, выпущенного Google. Поэтому единственное место, где можно больше узнать о проектировании темной темы для iOS – это выступление Майка Стерна. Он работает в Apple на должности Design Evangelism Manager. Но я планирую сделать вашу жизнь намного проще, описав в этой статье пошаговый процесс создания темной темы.

Кроме того, я опубликовал в Instagram 2 поста, которые помогут быстро ознакомиться с основами темной темы.

А еще можете посмотреть мое полноценное видео-руководство на YouTube!

Я буду освещать только аспект проектирования, но не аспект разработки. Чтобы разобраться с аспектом разработки темной темы, можете посмотреть это видео от Apple.

Хорошо, если у вас уже есть готовая дизайн-система, давайте начнем!

Для наглядности, я возьму в качестве примера приложение WhatsApp. На момент написания этой статьи, темной темы для WhatsApp не существовало. Поэтому, думаю, оно отлично подойдет для объяснения рекомендаций по созданию темной темы для iOS.

Дисклеймер

Не существует жесткого правила, согласно которому вы должны следовать рекомендациям Apple. Это всего лишь рекомендации, поэтому вы можете создать для своего приложения собственную темную тему :call_me_hand:.

Возвышение

В отличие от Google, где возвышение (elevation) основано на разнице в цвете и тенях, Apple рассматривает возвышение только с точки зрения цвета.

В руководстве Apple указано 4 цвета, которые можно использовать для отображения возвышения. Они называются «системными цветами фона».

iOS 13 UI Kit доступен только для Adobe XD и Sketch. Однако, если вам нужен набор интерфейса для Figma, вы можете найти его на сайте Apply Pixels.

Системные цвета фона

Согласно рекомендациям, фон всегда имеет чистый черный цвет #000000. Google предпочитает темно-серый цвет со значением #121212.

Apple называет эту поверхность фона системным фоном. Существует 3 уровня системного фона, а именно первичный, вторичный и третичный. Каждый из них имеет свой цвет, который есть в iOS 13 UI Kit. Они применяются к элементам, которые либо дают ощущение более высокого уровня возвышения, либо к элементам, которые дифференцируют (или группируют) контент.

Стоит отметить, что цвета в темной теме не инвертируются из светлой темы. Отдельный набор цветов должен быть назначен для всех элементов.

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

Звучит неплохо! Кстати, есть какие-либо аспекты, которые мне нужно обсудить с разработчиками, работающими над темной темой для моего приложения. Что-нибудь, что я должен сообщить им заранее?

Конечно. Давайте поговорим о семантических цветах!

Семантические цвета (Semantic Colors)

Знаю. Знаю. Это звучит, как продвинутый термин. Но концепция семантических цветов очень проста.

Давайте рассмотрим пример элемента Base, о котором мы говорили ранее. В светлой теме он имеет чистый белый цвет #FFFFFF. Но в темной теме – чистый черный цвет #000000.

Сложный способ добиться этого – жесткое кодирование. Это означает, что вам нужно назначить 2 цвета для каждого элемента на экране. Каждого элемента! Это будет сущий кошмар.

Так каково решение?

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

Ммм … Что? Что ты несешь?

Я пытаюсь сказать, что, если вы назначите семантический цвет, например, «SystemBackground» или «LabelColor» или «FillColor» каждому из элементов, ОС будет знать, какой цвет автоматически отображать, в зависимости от темы.

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

Теперь я понял. Но погоди! Что, если я захочу выбрать свой цвет для элемента в темной теме?

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

И вуаля! Это все, что вам нужно знать для обсуждения с разработчиком темной темы.

Хорошо! Ну, а что дальше?

Цвета заливки и серые цвета

В руководстве приведены 4 цвета заливки (тоже серых) и 6 дополнительных серых цветов на выбор. Они идеально подходят для всех элементов интерфейса, таких как глифы (иконки), элементы управления интерфейса и многое другое.

Так в чем же разница между цветом заливки и серым цветом?

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

Позвольте мне привести небольшой пример того, как вы можете использовать их в своем интерфейсе.

На изображении выше вы можете видеть, что для цели касания иконок камеры и ручки я использовал серый цвет. А для панели поиска – цвет заливки.

Итак, нужно ли использовать эти цвета подобным образом?

Нет. Как я упоминал ранее, вы можете как угодно использовать все 10 цветов (4 заливки + 6 серых).

Цвета разделители

Руководство Apple предоставляет нам 2 варианта для разделительных линий. Один непрозрачный, а второй прозрачный.

Свободно используйте любой из них. Лучше использовать непрозрачный вариант. Но нет жесткого правила.

Цвета метки

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

Третичный цвет метки используется для текстовых плейсхолдеров, например, в строке поиска. Цвет четвертичной метки используется для отключенного текста.

Тем не менее, есть небольшое отклонение от этого правила. Если вы посмотрите на UI Kit, то плейсхолдер панели поиска использует цвет вторичной метки вместо цвета третичной метки :shushing_face:.

Цвета оттенков (Tint Colors)

Apple предлагает 9 различных оттенков цвета, которые можно использовать в приложении. Их можно использовать для текстов, иконок или фигур. Ниже представлена небольшая визуализация интерфейса WhatsApp, если бы он использовал цвета, отличные от синего.

Однако эти 9 цветов немного отличаются для светлой и темной тем. Если вы решите использовать эти системные оттенки, приложение автоматически изменит цвет оттенка светлой темы на цвет оттенка темной темы.

Разница практически не заметна, но Apple все же создала 2 варианта для каждого оттенка цвета.

Так я должен выбрать только из этих 9 цветов или могу выбрать собственные цвета?

Конечно можете. Я скажу об этом через минуту, но есть преимущество использования системных оттенков.

Какое?

Когда пользователь включает переключатель увеличения контраста (Increase Contrast) в разделе «Универсальный доступ» (Accessibility), цвета оттенков становятся немного ярче. Это приводит к увеличению контраста.

Следовательно, если вы будете использовать собственный оттенок, вам, возможно, придется самостоятельно настроить оттенок с повышенной контрастностью.

Выбор цвета оттенка

Совершенно очевидно, что вы можете выбирать собственные оттенки цветов. Но есть несколько моментов, на которые стоит обратить внимание, если вы решите это сделать.

  1. Попробуйте выбрать цвет, который хорошо работает как в светлой, так и в темной теме.
  2. Или вы можете выбрать 2 разных цвета, один для светлой темы и другой для темной.

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

Цвета должны соответствовать минимальному коэффициенту контрастности 4,5: 1

Вот 3 инструмента, которые вы можете использовать для быстрой проверки цветового контраста. Пишите в комментариях, если используете другие инструменты.

  1. Color Contrast Checker — WebAIM
  2. Sip App
  3. Contrast

Итак, позвольте мне для наглядности привести пример.

Как видите, используемые здесь цвета проходят тест на коэффициент контрастности 4,5: 1. Коэффициент контрастности этих двух цветов составляет 4,6: 1.

Давайте рассмотрим другой пример.

В этом примере коэффициент контрастности составляет 5,57: 1, что также проходит тест.

Теперь давайте возьмем пример, где у нас есть 2 разных цвета для одного и того же элемента.

Как вы можете видеть на изображении выше, один и тот же текст имеет 2 разных цвета для светлой и темной темы.

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

Хорошо, это все или есть еще рекомендации? Кстати, как насчет размытого фона, который мы видим по всей iOS? Я забыл, как он называется. Что делать с ним?

Да. Он называется материал (Material). Давайте рассмотрим его подробнее.

Материал

Любой элемент, размывающий контент под ним, называется материал.

Что это значит на языке дизайна?

Это просто!

Если к какому-либо элементу применяются оба эффекта – прозрачность и эффект «размытия фона», он становится материалом.

Где и как мы это используем?

Руководство Apple предоставляет нам на выбор 4 материала. Тем не менее, есть секретный 5-й материал, который руководство Apple не рассматривает, как материал, но технически это он.

Давайте посмотрим на них в действии.

Давайте начнем с верхней панели навигации и нижней панели вкладок. Хотя руководство Apple не рассматривает их как материалы, они явно ведут себя, как материалы.

Убедитесь, что вы используете для этих двух панелей те же самые компоненты из UI Kit. К этим компонентам применяется значение размытия фона.

Вы можете не увидеть размытия контента за панелями, поскольку значение прозрачности очень высокое (94%). Но это дает едва заметный эффект.

Эти панели должны быть материалами? Могу ли я сделать их полностью непрозрачными?

Да. Конечно. Позвольте показать вам следующий пример.

К обоим панелям навигации применено размытие фона. Тот, что слева, не полностью непрозрачен. Но, как видите, разницы практически нет. Кроме того, контент ниже не размыт.

Теперь давайте посмотрим на это с соответствующими материалами.

Как видите, есть 4 варианта. Вы можете выбрать какой захотите. Но помните, что рекомендуется использовать точные компоненты из UI kit, поскольку в них определены все значения размытия и непрозрачности.

Давайте посмотрим на материалы в нижней панели вкладок.

Они выглядят красиво :star_struck:. Не так ли?

Кстати, материалы также используются для таких компонентов, как уведомления и модальные окна. Вот пример материалов, используемых в модальных окнах.

Мы почти закончили! Осталась еще одна вещь.

Элементы управления

Для таких элементов, как сегментированные элементы управления (вкладки), слайдеры, панели поиска, переключатели, попробуйте использовать компоненты из UI kit.

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

Всегда помните, что чем больше работы для вас – тем больше работы для разработчика.

Вот и все!

Итак, это почти все, что вам нужно знать о проектировании темной темы для вашего iOS-приложения. Не стесняйтесь обращаться ко мне в любое время, если вам нужны разъяснения или, если вы где-нибудь застряли. Вы можете отправить мне сообщение на любой социальной платформе. Я буду рад вам помочь :grin:.

Ресурсы

  1. Выступление Майка Стерна об iOS 13 и темной теме.
  2. Презентация темной темы в iOS.
  3. Официальный iOS 13 UI kit для Sketch и Adobe XD.
  4. iOS 13 UI kit для Figma от Apply Pixels.

Спасибо за прочтение!

Перевод статьи: Designing a Dark Mode for your iOS app — The Ultimate Guide!

6 симпатий

@hesher отличная статья. Спасибо!
Хотелось бы немного больше понимания семантических цветов и как с ними работать.

К примеру, я рисую приложение в фигме. Как я должен задать 2 цвета для darkmode и lightmode, чтобы потом мне и разработчику было легко с этим разобраться?

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

  1. То есть будет достаточно сделать цветовую-систему с названиями типа “color1/dark” - “color1/light”. Правильно понимаю? Или может есть пример как это выглядит в фигме?

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

Чтобы в фигме переключать темы с помощью плагинов я добавляю к названию цвета light/color 1 или dark/color 1. У меня нет примера под рукой, к сожалению. Плагинов много разных, у каждого свой синтаксис.

Цвета можно использовать любые, по крайней мере, я так делаю)

1 симпатия

Спасибо!