Материальный дизайн – новый способ взаимодействия или очередной тренд?

материальный дизайн material design

25 июня 2014 года компания Google представила общественности свое новое видение на дизайн интерфейсов будущего – целый комплекс правил и условий, по которым впредь будут строиться интерфейсы всех продуктов корпорации. Зачем все это понадобилось? Еще пять лет назад все продукты Google сильно отличались друг от друга, в том числе различные версии одного приложения на разных устройствах. Разработчики задумались о создании специальных правил построения и унификации всех разрабатываемых приложений и сервисов, которые позже объединились под общим названием «Проект Кеннеди». Именно этот проект позже развился в Material Design (материальный дизайн).

Философия материала

Благодаря проекту Кеннеди все крупные сервисы и службы Google получили общие черты дизайна и построения интерфейса. Это позволило унифицировать подходы в создании веб-интерфейсов, а позже и интерфейсов мобильных приложений.

Одной из черт унифицированного дизайна стали карточки с информацией, которые могли размещаться в любой части рабочей области. Исследуя их в приложении Google Now, разработчики задали себе вопрос: «А что находится под этими карточками?». По словам вице-президента по дизайну Google Матиаса Дуарте (Matias Duarte), этот «невинный вопрос зажег мощную искру».

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

После тотального засилья скевоморфизма (точная имитация реальных объектов физического мира в дизайне) все резко двинулись в противоположную сторону – плоский flat дизайн. Именно его взяла за основу Google, изобретая «материал». При этом сделав небольшой шаг назад к реалистичности.

Квантовая бумага (Quantum paper)

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

квантовая бумага material design

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

квантовая бумага material design

материальный дизайн material design

Цифровые чернила (Digital Ink)

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

Материальный дизайн использует все наработки полиграфии в дизайне интерфейсов. Но и здесь есть фирменные особенности Google. Например, основной шрифт для использования в материальном дизайне – это Roboto. Однако ничего не мешает компаниям использовать свой фирменный шрифт для поддержания айдентики. В гайдлайнах по использованию материального дизайна представлены примеры для использования различных начертаний и размеров шрифта в интерфейсах.

шрифты в материальном дизайне

Но самое главное в графике материального дизайна – это цвет. Цвет является основным выразительным средством на квантовой бумаге и потому играет очень важную роль. Обычно для материального дизайна характерно использовать основной и акцентирующий цвета. А также несколько их оттенков для различных ситуаций.

основной и акцентирующий цвета material design

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

цвета в материальном дизайне

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

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

Значимость анимации

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

Активное движение привлекает внимание пользователя, поэтому для достижения эффекта реализма необходимо использовать некоторые правила:

  • Асимметрия
    Обычно размеры объектов ограничены шириной устройства, поэтому для создания реалистичности изменения размера квантовой бумаги необходимо асимметрично независимо изменять ширину и высоту объекта, таким образом можно избежать иллюзии увеличения или уменьшения объекта.
  • Ответ
    На любое действие пользователя должен быть соответствующий ответ. В качестве примера Google предлагает эффект волнового изменения объектов интерфейса с эпицентром в точке взаимодействия
  • Естественные аутентичные движения
    В природе объекты при движении не могут моментально набрать скорость или остановиться, поэтому для придания реалистичности все анимации должны быть не линейными, а с замедлениями и ускорениями.

Заключение

responsive material design

Материальный дизайн – это абсолютно новый способ взаимодействия и построения интерфейсов, который все еще находится в стадии разработки и может быть дополнен в любой момент. Однако уже сейчас можно предугадать его перспективность. Как минимум в разработке приложений для Android он будет доминировать, так как унификация всех интерфейсов положительно скажется на удобстве пользования.

В самом Google разработку материального дизайна ставят в один ряд с такими значительными событиями как разработка оконного интерфейса и управление курсором (Xerox PARC) и создание сенсорных экранов (Apple). Что ж, посмотрим, что из этого получится.

Google material logo
Новый логотип и айдентика Google продвигают идеи материального дизайна

Подробные гайдлайны от разработчика материального дизайна вы найдете здесь - http://www.google.com/design/spec/material-design/introduction.html