Примеры материального дизайна

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

Что такое материальный дизайн?

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

В чем его смысл?

• Интерфейс — абстрактное отражение окружающей действительности.

• Задача — не реалистичная копия объектов, а передача идей через знакомые ощущения.

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

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

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

Принципы материального дизайна

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

Тактильная поверхность

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

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

Главный инструмент этого принципа — тени. Дизайнер работает с ними, используя трехмерное пространство. Ось Z помогает определить:

• размер тени: чем выше объект от поверхности, тем больше тень;

• порядок прорисовки: чем выше слой, тем позже он появляется.

Работу этого правила легко можно увидеть в карточных макетах. Пример — каталог в интернет-магазине.

Второй инструмент — глубина. Она подсказывает, какие объекты «лежат» сверху. Можно найти много примеров, когда шапку сайта закрепляют при скролле, чтобы пользователь мог в любой момент нажать на кнопки. Создается ощущение, что этот слой всегда «под рукой».

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

Еще один способ показать глубину, который появился в третьей версии гайдлайна — оттенки: темные объекты оказываются выше по оси Z, а светлые — ниже.

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

Необязательно всю информацию помещать в блоки. Если текста слишком много, то лучше перенести его прямо на фон. Пролистывание внутри карточки выглядит неестественно.

Полиграфия

Второй принцип, на который опирается material design — свойства полиграфии. С этой точки зрения, материалом становится «цифровая» бумага, а для создания элементов UI используются «чернила», как при печати. В работе применяются правила графического дизайна. Главные инструменты здесь — цвет, графика, шрифты.

Цвет

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

У каждого цвета есть роль: акцентный, основной, нейтральный. Отталкиваясь от этого, вы можете определить, для каких задач его использовать — фон кнопки, шрифт, обводки, заливка блоков и т.д. С помощью контраста вы улучшаете юзабилити: посетители могут быстрее разобраться, как ориентироваться на сайте. Для этого есть точная система расчетов, которая опирается на приведенную выше тональную палитру. При коэффициенте 3:1 — расстояние между цветами должно быть не менее 40 шагов, при 4,5:1 — 50 шагов, а 7:1 — 70 шагов.

Типографика

Параметры, на которые нужно ориентироваться при выборе шрифтов, с точки зрения материального дизайна:

• Использовать переменные шрифты или большие группы, у которых легко можно менять вес, контрастность, стиль, размер и т.д.

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

• Использование пяти стилей для распределения ролей между объектами: headline, title, display, body, label.

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

Графика

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

Базовые правила:

• Избегайте детализированных иллюстраций: иконка должна быть простой.

• Используйте заметные плотные линии, иначе значок потеряется на странице.

• Не перемешивайте разные стили: если один символ с заливкой и округлыми формами, то и другие не должны быть рамочными и заостренными.

Осмысленный подход к анимации

В материальном дизайне много внимании уделяется анимации, поскольку в этом поле много ошибок. Движения в реальном мире не возникают из пустоты, у каждого есть какая-то задача. Цель анимации в UI — давать пользователям подсказки при взаимодействии с элементами. Самый распространенный тип движения — переходы, поэтому они должны быть приоритетом при разработке продукта.

Универсальные практики, на которые вы можете опираться при внедрении анимации:

• В физическом мире объекты не запускаются и не останавливаются мгновенно — им требуется время, чтобы ускориться и замедлиться. Прямые переходы выглядят жесткими и механическими, а смягчение делает их более естественными.

• Простые переключения экранов при нажатии на кнопку дезориентируют — используйте переходы.

• Вместо интенсивного движения со скольжением лучше использовать легкое затухание.

• Избегайте ярких анимационных эффектов типа parallax.

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

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

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

Адаптивность

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

Для этого используются следующие методы:

• Изменение количества информации для отображения, в зависимости от размера экрана: чем меньше экран, тем меньше данных должен видеть пользователь.

• Отступы: на десктопе и планшетах можно использовать отступы, чтобы упростить адаптацию под мобильные устройства.

• Блочная структура: изменение расположения блоков помогает быстро адаптировать UI, например, в интернет-магазине на компьютере карточки товаров выстраивают в горизонтальную линию, а на смартфоне используется вертикальная последовательность.

Если раньше у дизайнеров были сложности с адаптацией сайтов под мобильные устройства, то с подходом mobile first появились противоположные проблемы. Одно из решений — разделение пространства на большом экране. Удобный для понимания пример — мессенджер: на смартфоне вы попадаете в переписку через список чатов, а на компьютере можно разместить оба экрана на одном.

Резюме

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

Применяя описанные методы при разработке, вы сможете:

• улучшить юзабилити;

• проработать единый масштабируемый стиль, который одинаково хорошо смотрится на разных экранах;

• создавать доступные интерфейсы;

• помогать пользователям лучше ориентироваться на страницах.

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