1. Обзор
На конференции Google I/O 2019 компания Material Design представила рекомендации по созданию темной темы, дополняющей существующую тему Material Design вашего продукта. Светлые темы отлично подходят для чтения длинных текстов и обеспечивают более четкий контраст, а пониженная яркость темной темы обеспечивает безопасность в темных помещениях и может минимизировать нагрузку на глаза.
В Material Design темные темы предназначены для использования в качестве дополнения к стандартной светлой теме, сохраняя уникальную индивидуальность вашего приложения (включая стили цвета, формы, шрифта и высоты) благодаря продуманному и удобному для ночного просмотра оформлению.
В этом практическом занятии мы шаг за шагом рассмотрим, как создать темную тему на основе существующей темы Material Design, используя один из наших дизайн-макетов Material Design.
Мы будем работать с Reply, почтовым приложением, разработанным для обеспечения ясности, читаемости, интуитивности и простоты использования. Мы изучим фирменный стиль Reply и примем взвешенные решения, чтобы сохранить узнаваемые элементы бренда в приложении, одновременно создавая тему, которая будет комфортна даже в условиях отсутствия фирменной символики.
Мы также будем развивать эту тему дальше и использовать пользовательские цветовые решения, выходящие за рамки базовой темной темы, чтобы еще раз подчеркнуть уникальную индивидуальность Reply.
Необходимые материалы:
2. Соберите необходимые файлы.
Прежде чем начать, вам нужно скачать наш стартовый файл Figma. В этом файле есть все необходимое для работы в дизайн-лаборатории.
- Скачать DarkTheme DesignLab Kit.fig (7,6 МБ)
3. Настройте свою среду.
Далее вам потребуется настроить среду проектирования.
Сначала войдите в Figma или создайте учетную запись .
После входа в систему импортируйте файл, загруженный на предыдущем шаге. Для этого найдите значок «импорт файла» в верхнем левом углу экрана файлов Figma и найдите файл в папке «Загрузки».
Пожалуйста, уделите немного времени, чтобы ознакомиться с файлом. Он содержит светлую тему оформления, готовую цветовую палитру, основанную на фирменном стиле приложения, и копию окончательной темной темы, которую мы будем создавать.
- В другой вкладке откройте « Руководство по Material Design для темных тем» . Мы будем обращаться к этим рекомендациям на протяжении всего дизайн-лаборатории.
4. Разберитесь в характеристиках продукта.
Прежде чем приступить к разработке темной темы для Reply, нам необходимо понять некоторые характеристики бренда Reply. Это поможет нам сделать осознанный выбор в отношении темы, чтобы идентичность и бренд Reply последовательно выражались как в светлой, так и в темной тематике.
Бренд Reply делает акцент на коммуникации. Приложение отдает приоритет функциональным качествам, отдавая предпочтение простоте использования перед элементами дизайна, не имеющими функционального назначения.
В рамках данного дизайн-лаборатории наиболее важными элементами фирменного стиля в Reply являются цвет, шрифт и форма.
Цвет
В цветовой гамме Reply используется основной темно-сине-серый цвет в сочетании с дополнительным оранжево-желтым цветом.
Поскольку дополнительный цвет используется редко, пользовательский интерфейс Reply часто бывает монохромным, используя вариации основного цвета. Эта ненавязчивая цветовая гамма позволяет легко читать контент без отвлечений и обеспечивает хорошую видимость фотографических аватаров.
Таким образом, дополнительный цвет Reply оказывает огромное влияние везде, где он используется, — подчеркивая важные действия и четко выделяя фирменные моменты во всем приложении.
Тип
Поскольку приложение Reply в значительной степени ориентировано на текстовый контент и эффективность, шрифты и типографика играют центральную роль в формировании его фирменного стиля. В приложении используется шрифт Work Sans , охватывающий все шесть вариантов толщины: Light, Regular, Medium, SemiBold и Bold.
Использование шрифта Work Sans для создания всей цветовой гаммы обеспечивает шрифту Reply последовательный и предсказуемый, но при этом органичный и разборчивый вид.
По словам дизайнера Work Sans Вэй Хуана, этот шрифт оптимизирован для использования на экране. Это делает его отличным инструментом для эффективного чтения фрагментов текста в электронных письмах или другом контенте. Его свободная основа, заимствованная из ранних шрифтов Grotesque, придает ему более дружелюбный и человечный вид, а более широкое межбуквенное расстояние обеспечивает более плавное чтение.
Форма
В Reply используется продуманная концепция форм, сочетающая круглые и острые элементы таким образом, чтобы подчеркнуть эффективность и функциональность списка рассылки, одновременно делая более плавными ключевые действия и более крупные компоненты.
- Мелкие компоненты
- Средние компоненты
- Крупные компоненты
Небольшие элементы, такие как кнопки и кнопка FAB, имеют полностью закругленные углы, в то время как элементы среднего размера, такие как карточки электронных писем и нижняя панель приложения, имеют полностью квадратную форму. Крупные элементы, такие как переключатель учетных записей и нижний экран, имеют слегка закругленные углы.
Эти фигуры в совокупности помогают пользователю лучше понять, где он находится в приложении, как устроен каждый компонент и как он связан с остальной частью интерфейса.
5. Работа с цветом
Зная, как цвет соотносится с выражением бренда Reply в его стандартной светлой теме, мы можем внести обоснованные корректировки в его палитру для создания удобной и выразительной темной темы.
В Material Design цветовые системы основаны на тональных палитрах — эти палитры используют фирменные цвета для создания набора гармоничных вариантов, которые объединяются в комплексную цветовую систему, применяемую во всем приложении, обеспечивая стиль и удобочитаемость.
В файле Figma вы можете увидеть основную и дополнительную тональные палитры Reply. Светлые стрелки над каждой палитрой указывают значения, используемые в светлой теме Reply, а темные стрелки указывают варианты, которые мы будем использовать в нашей темной теме.
При создании темной темы в Material Design выбираются более светлые варианты, чтобы цветовая гамма оставалась выразительной и сохраняла необходимый контраст, не вызывая напряжения глаз. Более насыщенные цвета, как правило, визуально «вибрируют» на темном фоне, что затрудняет их чтение. Более светлые тона также обеспечивают большую гибкость в изменении цвета рельефных поверхностей, о чем мы поговорим чуть позже.
6. Настройте цвета поверхности.
Теперь, когда мы разобрались с тональными палитрами Reply и цветами, которые будем использовать в нашей темной теме, пришло время начать корректировать значения цветов в нашем макете.
В темных темах Material Design самый нижний слой интерфейса обычно имеет темно-серый цвет с шестнадцатеричным значением #121212.
- В файле Figma найдите монтажную область под названием " Reply Starter " и выберите слой под названием " Background ".
- В панели инспектора справа в разделе « Заливка » установите значение цвета 121212 и нажмите Enter.
- Ваша монтажная область должна выглядеть так:
В монохромном режиме отображения входящих сообщений Reply карточки писем имеют немного более светлый цвет, чем фон, поэтому следует применить тот же подход к карточкам в темной теме, чтобы сохранить визуальную иерархию входящих сообщений.
- На той же монтажной области разверните группу под названием "Открытки по электронной почте" и выберите все слои с названием " Открытка по электронной почте".
- Как и прежде, выберите параметр «Заполнить» на панели инспектора. Установите значение 121212 и нажмите Enter.
- Теперь выберите только слой с названием « Наложение для электронных карточек». Эти слои позволят нам создать наложение, которое выделит электронные карточки на фоне окружающей среды.
- Заполните слой цветом « Заливка» и установите значение FFFFFF с прозрачностью 2% .
Теперь, когда карточки в электронных письмах затемнены, наш текст неразборчив. Далее мы займемся цветом текста.
7. Настройте цвет текста.
Чтобы понять, как работают цвета текста в темных темах, важно понимать, как цвет применяется к тексту в рамках всей системы Material Design.
Компоненты материала определяют понятие «встроенных» цветов, которые так называются потому, что это цвета, которые отображаются «поверх» компонентов и ключевых поверхностей, использующих основные, второстепенные, поверхностные, фоновые или цвета ошибок. «Встроенные» цвета в основном используются для текста, чтобы обеспечить его читаемость на этих поверхностях.
В Material по умолчанию используются следующие цвета: белый (#FFFFFF) и черный (#000000). Поскольку черный или темный цвет не подойдет для наших затемненных поверхностей, мы будем использовать белый.
Система установления иерархии текста с использованием этого «включенного» цвета проста. Текст с высокой степенью выделения имеет непрозрачность 87%, текст со средней степенью выделения — 60%, а текст без выделения — 38%.
Текст с высоким приоритетом не должен быть чисто белым, потому что, как обсуждалось в шаге 5, #FFFFFF — яркий цвет — будет визуально «вибрировать» на нашем темном фоне. Кроме того, чистый текст #FFFFFF на темном фоне может ухудшить читаемость, поскольку свет от этого текста будет казаться размытым или просачивающимся на темный фон.
Учитывая все это, давайте исправим цвета текста в нашей темной теме.
- Весь текст в нашем начальном макете сгруппирован для удобного доступа. Найдите группу под названием «Текст входящих сообщений» и разверните её, чтобы увидеть все составляющие её слои.
- Выберите все слои, перед которыми стоит " Hi-". Это все выделенные фрагменты текста в нашем макете.
- В панели инспектора установите заливку на FFFFFF с непрозрачностью 87%.
- В текстовой группе «Входящие» выберите все слои, перед которыми стоит префикс «Med -».
- В панели инспектора установите заливку на FFFFFF с непрозрачностью 60%.
8. Настройте цвета компонентов.
В темных темах, созданных с использованием Material Design, выступающие поверхности и компоненты окрашиваются с помощью наложений. Чем выше поверхность, тем насыщеннее и ярче становится наложение. Это способ передать ощущение возвышенности и иерархии, когда фон слишком темный, чтобы достоверно отобразить темные тени.
Нижняя панель приложений
Для нижней панели приложения Reply, которая расположена выше остального интерфейса входящих сообщений, мы применим едва заметное наложение.
- Найдите в списке слоев группу под названием «Нижняя панель приложения» и разверните ее, чтобы увидеть входящие в нее слои.
- Найдите слой с названием Surface внутри этой группы и установите для него значение Fill равным 121212.
- Найдите слой над ним, который называется Surface overlay , и задайте ему значение заливки FFFFFF с непрозрачностью 12% .
Плавающая кнопка действия
Далее мы применим новый цвет к FAB. Для этого вернитесь к тональным палитрам, которые мы рассматривали ранее, и возьмите значение 700 вторичного цвета Reply.
В качестве альтернативы, для небольших, но важных компонентов вашего приложения вы можете выбрать немного более насыщенный цвет, при условии, что он сохраняет необходимый контраст с основными цветами. Мы рассмотрим этот вариант на следующем этапе.
- Найдите в списке слоев группу под названием FAB и разверните ее, чтобы увидеть ее составные части.
- Найдите слой «Поверхность» и выберите его. Установите для его заливки значение FCC13B .
Выбранные карты
Вы можете заметить, что тот же эффектный оранжево-желтый цвет также присутствует в углу некоторых карточек электронных писем во входящих сообщениях Reply. Это еще один яркий элемент брендинга, но он не очень органично вписывается в общую концепцию, оформление или текст.
В подобных ситуациях лучше всего начать с нашего дополнительного варианта цвета (в данном случае #FFFBE6) и двигаться в обратном направлении, чтобы найти что-то достаточно выразительное, не отвлекающее от функциональной эстетики Reply. Для Reply мы можем остаться с нашим обычным дополнительным вариантом.
- Выберите слой с названием Earmark и установите для него заливку FFF5A0 .
9. Идем еще дальше: поверхности, изготовленные на заказ.
Как мы узнали ранее, плавающая кнопка действия (или FAB) в Reply — это очень заметный элемент, который также представляет собой важный элемент фирменного стиля приложения. По этой причине мы можем решить сохранить её цветовую гамму в тёмной теме Reply, используя оригинальный дополнительный цвет приложения.
- Найдите в списке слоев группу под названием FAB и разверните ее, чтобы увидеть ее составные части.
- Найдите слой «Поверхность» и выберите его. Верните цвет заливки к значению F9AA33 .
Возможно, нам также захочется вернуть основной цвет Reply в качестве пользовательского цвета для нижней панели приложения и карточек электронных писем. Для этого нам нужно будет просто изменить наложение, чтобы использовать темный основной цвет, указанный в тональной палитре, на которую мы ссылались.
- Найдите в списке слоев группу под названием «Нижняя панель приложения» и разверните ее, чтобы увидеть входящие в нее слои.
- Найдите слой с названием Surface overlay и задайте ему новое значение заливки 344955 с непрозрачностью 48% . Это позволит получить более насыщенный фирменный цвет, сохранив при этом достаточный контраст.
- Найдите в списке слоев слой под названием «Наложение карточки электронной почты» и выделите все слои.
- Установите для параметра Fill значение ADC0CB с прозрачностью 4% .
10. Заключение
В Material Design темные темы — это продуманное и целенаправленное продолжение уникальной идентичности вашего продукта, выраженной в светлой теме. С помощью простых корректировок цвета и способа передачи эффекта возвышения вы успешно создали свою первую темную тему Material Design. Поздравляем!
Рассматривайте этапы этой дизайн-лаборатории как основу для понимания и определения «темной» тематики вашего собственного продукта, и всегда помните о свойствах и целях вашего бренда и продукта.
Для получения более подробной информации о темных темах ознакомьтесь со спецификацией Material Design для темных тем .
Если у вас возникнут вопросы, не стесняйтесь задавать их нам в любое время, используя @MaterialDesign в Твиттере .
Следите за обновлениями и новыми обучающими материалами по дизайну на YouTube-канале Google Design .