Подборка ресурсов по Material Design. Что такое Google Material Design и как он изменит нашу жизнь

Что будет, если детство человека пройдёт под фильмы, где поумневшие компьютеры неминуемо убивают всё человечество, а чуть повзрослев, этот же самый человек будет читать о АНБ и прочих злодеях, которые круглосуточно читают его SMS и отправляют их в США? Он будет опасаться Google.

Не так давно Корпорация Добра показала миру своё видение пользовательских интерфейсов будущего. Material Design - единая концепция построения логики работы и внешнего вида сервисов и приложений, унифицирующая все продукты Google с целью их максимально лёгкого и интуитивного восприятия пользователями.

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

Чем станет Google?

Да, пока что Google - это просто куча сервисов. Однако с «материальным» дизайном компания фактически создаёт вторую реальность внутри наших компьютеров и мобильных устройств. Со своей логикой, со своими правилами и законами, со своей физикой.

Когда вы создаёте физические вещи, вы опираетесь на тысячелетний человеческий опыт. Но дизайн программного обеспечения только зарождается. Мы посмотрели на всё наше программное обеспечение и спросили себя, из чего оно сделано? Джон Вайли, главный по дизайну поиска Google

Чем сейчас являются сервисы Google для людей? Это строка поиска, которая живёт в браузере? Или это ваше мобильное Android-устройство?

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

Но в ближайшем будущем Google перестанет восприниматься просто как Chrome или Android.

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

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

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

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

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

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

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

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

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

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

При наличии достаточно чёткой системы правил становится возможным добавлять новые материалы. Бумага была очевидным выбором из-за простоты её отображения на экране. Без выраженной текстуры, практически без объёма. Но попробуйте представить себе, например, ткань или жидкости.

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

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

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

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

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

Нам интересно ваше мнение. Считаете ли вы подобную концепцию злом или воспринимаете такие инициативы как перспективный способ взаимодействия с информационной средой в будущем?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

Подробные гайдлайны от разработчика материального дизайна вы найдете здесь -

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

Популярность тренда объясняется огромным количеством ресурсов и инструментов для дизайнеров, кстати, как платных так и бесплатных. К примеру, сегодня предлагаю полезную подборочку наполненную 30 вдохновляющими бесплатными и платными ресурсами для дизайнеров в стиле материального дизайна. С каждым днем выходят всё новые приложения и проекты в стиле Material Design. Не отставайте. Узнайте полезности, которые помогают дизайнерам каждый день справляться с нелегкими задачами и добиваться успехов. Помогите будущему проекту блеснуть материальным дизайном.

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

Фоны:

1. 40+ Бесплатных фонов в стиле материального дизайна

Разве это не прекрасно найти целую коллекцию 40+ бесплатных фонов в стиле материального дизайна в одном месте? Выполнены в высоком расширении, они точно вдохновят на реализацию веб-проекта или другого печатного замысла. Большое количество различных форм и цветов привлечет внимание даже самого требовательного дизайнера.

2. 10 Бесплатных фонов

Не упустите шанс добавить в свою библиотеку инструментов коллекцию 10 высококачественных фонов в стиле материального дизайна. Представлены в двух стилях и пяти цветовых комбинациях, эти фоны имеют 300 Dpi и 10 .jpg файлов , а также разрешение в 5000x3000px . И все это можно получить бесплатно.

3. 30 фонов для проекта в стиле material

Еще одна отличная подборочка высококачественных фонов для проекта в стиле материального дизайна. Выбирайте из 30 различных дизайнов, наполненных дополнительными формами, такими как квадраты, треугольники и круги, и придайте своему проекту хендмэйд оттенок. Доступны бесплатно в .png и .ai форматах.

4. 12 Бесплатных промо фонов в стиле материального дизайна

Хочется чего-то новенького? Пожалуйста. Ознакомьтесь с коллекцией 12 новинок в стиле материального дизайна в высоком разрешении. Отличная новость — коллекцию можно использовать как для персональных так и для коммерческих целей, т.к. продукты лицензированы Creative Common Zero , а значит проверены и готовы к применению. Форма бриллианта в центре фона служит для привлечения внимания к продукту. Доступны для скачивания в .png и .jpg форматах.

5. Набор узорчатых фонов

Не упустите подборочку из ярких и качественных фонов выполненных в плиточном дизайне. Файл содержит в себе файлы .png , photoshop и формат illustrator vector , а это значит, что можно самостоятельно настраивать цветовую гамму согласно требованиям. Используйте бесплатно в любом размере и без потери качества.

6. Бесплатные баннеры

Здесь находится набор из 5 баннеров в стиле материального дизайна с разрешением в 1140x600px . Отлично подходят для акцентирования внимания хедеров, изображений или отдельных секций в любом веб-проекте.

Инструменты для мобильной разработки

7. Бесплатный набор инструментов для мобильного дизайна

Отличная подборка, которая не останется незамеченной для пользователей Photoshop и Sketch. Вниманию представлен набор различных компонентов для материального дизайна, которые смогут придать веб-проекту достаточно активную энергетику. Отличный вариант для создания музыкального приложения или мобильной версии сайта.

8. Edacious UI KIT

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

9. DO — объемный App UI Kit. Бесплатно

Do — это настоящая находка для всех, кто интересуется созданием различного рода приложений в материальном дизайне. Do — это 130 дизайнов, 10 уникальных тем и более 250 UI элементов для создания гибких и Retina ready дизайнов. Здесь точно можно найти простор для экспериментов. Сделайте свой выбор в пользу современного красочного дизайна.

10. Набор бесплатных UI элементов для создания музыкальных приложений

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

11. Набор бесплатных UI элементов в стиле материального дизайна

Для тех, кто все еще сомневается с выбором инструментов и ресурсов в стиле материального дизайна, советую остановить свое внимание на коллекции Material Design UI Kit. С помощью различных .psd элементов, которые кстати легко адаптировать под свои потребности в Photoshop, можно сэкономить время и усилия еще на этапе запуска проекта. Добавьте себе в коллекцию отличный материал для создания быстрых проектов и приложений по принципу материального дизайна.

Иконки

12. Коллекция иконок Google в стиле материального дизайна

Начните поиск подходящих иконок для веб-проекта или приложения с коллекции Google Material Icons. Набор содержит всевозможные варианты иконок для различных приложений как медиа ресурсов воспроизведения, коммуникации, редактирования контента, и т.д. Загрузите zip archive (~57MB) и наслаждайтесь отличным материалом, который нужен под рукой каждому дизайнеру.

13. Коллекция бесплатных иконок

Material Design Icons — это коллекция бесплатных иконок в стиле материального дизайна, которые можно загрузить в нужном формате, размере и цвете в зависимости от требований проекта. Перетаскивайте иконки в Иллюстратор, фотошоп или Visual Studio, смените цвет и ваша иконка готова.

14. Pack: Material Design Icons

Здесь можно скачать такие бесплатные элементы как иконки, тематические фоны или цветовые палитры быстро и удобно. Иконки доступны в .icns, .ico, .png форматах. Различные формы и стили иконок отлично подходят для рутинной работы в процессе создания дизайна.

15. Material Design Icon

Как на счет коллекции 1000 иконок разделенных на 20 категорий в 7 разрешениях? В результате, получается набор из более 7000 файлов, и всё это выходит за даром. Просто выберите свою категорию и необходимое разрешение, и вуаля — иконка готова. Самое время приступить к просмотру вариантов, что скажете?

Фреймворки

16. Materialize — Адаптивный фронтенд фреймворк на основах материального дизайна

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

17. Фреймворк Material Design Lite

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

18. Фреймворк Material-UI

Имеет опыт работы с React? Material-UI — еще один довольно популярный фреймворк, который состоит из набора компонентов для React. Обширные возможности настройки, поддержка стилей разделенных на отдельные файлы, а также соответствие рекомендациям материального дизайна.

19. Фреймворк LumX

LumX позиционирует себя как фронтэнд фреймворк, основанный одновременно на спецификациях AngularJS и принципах материального дизайна. Дополнительно необходимы jQuery, Velocity и Momentum. Включает в себя большое количество AngularJS компонентов.

20. Фреймворк Material Foundation на основах материального дизайна

Основанный на принципе Zurb Foundation, фреймворк Material Foundation заслуживает внимание как минимум потому, что является бесплатным и самодостаточным. Фреймворк предлагает большое поле возможностей в рамках кастомизации. Включает в себя компоненты React, которые соответствуют принципам материального дизайна.

21. MUI — Фреймворк основанный на рекомендациях Google по материальному дизайну

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

22. Фреймворк Angular Material — Набор UI элементов

Фреймворк Angular Material — один из самых популярных фреймворков, поддерживаемых Google. Предлагает работу с полноценным материальным дизайном совместно с различными компонентами, иконками и скриптами. Адаптирован к работе на мобильных, в браузерах и настольных приложениях.

23. Bootstrap Material Design — Набор инструментов для материального дизайна на Bootstrap

Как следует из названия, Bootstrap Material Design — это тема для Bootstrap наполненная полезными фишками из Bootstrap вперемешку с элементами из материального дизайна.

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

24.

Хотите, чтобы будущий проект отличался от сотен других подобных? С помощью премиум бандла, который содержит в себе 1100 текстур можно выделиться из толпы и создать уникальный дизайн легко и быстро. Предоставлены в различных цветовых гаммах, таких как мрамор, чернила, акриловые тона или акварели, текстуры подойдут по вкусу даже самым не искушенным дизайнерам. Уверен, здесь есть над чем экспериментировать.

25.

UTech — это премиум коллекция, которая состоит из различных экранов, макетов и стилей, и служит отличным решением для создания множества стартапов. В придачу, в комплект входит комплект различных экранов для профиля, новостной ленты или страницы-приветствия. Коллекция подходит для таких ниш как финансы, образование, еда, медиа портал или электронная коммерция.

26. Rainy Season – PSD элементы интерфейса для портфолио дизайнера, художника

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

27.

С помощью премиум коллекции Bootstrap элементов, можно создавать абсолютно адаптивные макеты в виде карточек. В результате, можно выбрать из 5 различных форм, цветовых гамм и привлекательных дизайнов. Все они сочетаются между собой. Кстати, icomoon icon-fonts также добавлены в набор.

28.

Отдельного внимания заслуживает премиум бандл элементов инфографики Tree Bundle. Можно использовать как в презентациях PowerPoint, так и в брошюрах, годовых отчетах, резюме или в целях бизнеса, рекламы, маркетинга, и др. Таким образом, в комплект входит 4 цветовых EPS и AI файла, с возможностью изменить размер внутри zip файла. Работают лучше с Adobe Illustrator CS5 или более новой версией.

29.

Отличная подборка всевозможных элементов инфографики в виде графиков, диаграмм, иконок и других кастомных форм для применения в будущих проектах. Элементы подходят для презентаций, годовых отчетов, рекламы, маркетинга или продвижения товаров с помощью email. Коллекция EPS и AI файлов работает предпочтительно с Adobe Illustrator CS5 или более новой версией.

30.

Для тех, кому все еще продолжает собирать свою библиотеку иконок, предлагаю обратить внимание на Tonicons. Как на счет 2000 иконок премиум качества, разбитых на 6 категорий? Согласен, стоит поинтересоваться. К тому же, можно легко редактировать каждую из них согласно своим требованиям, менять размер и другие необходимые детали.

Подводя итоги

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

Material Design представляет собой концепцию дизайна, созданную для унификации сервисов, интерфейсов и прочих продуктов. Концепция была разработана компанией Google и представлена ею для широкой аудитории 25.06.2014 года на конвенции Google I/O. В основе разработки цветовая схема, свойства и элементы объектов дизайна. Material Design регулярно дополняется и обновляется разработчиками. Говоря простым языком, основная идея заключается в дизайне в виде блоков, которые открываются и сворачиваются кубиками, подобно картам, с использованием эффекта тени. Сами карты должны плавным образом переключаться между собой.

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

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

- Джон Вайли, главный по дизайну поиска Google

Главные принципы

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

Тактильные поверхности. Интерфейс состоит из «цифровой бумаги». Слои этой «бумаги» размещаются один над другим, и отбрасывают тени. Благодаря этим теням, пользователи персональных компьютеров лучше понимают основы работы с интерфейсом.

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

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

Адаптивный дизайн. Одной из особенностей Материального дизайна является его универсальность, то есть возможность применения трех выше описанных составляющих на разных устройствах, таких как компьютер, телефон, планшет и т.д.

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

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

Поверхность

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

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

Глубина

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

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

Нижний слой глубины является «дном».

• Помните о логистике. Различные диалоговые окна, плавающие окна, тулбары имеют определенную высоту. Во избежание столкновений периодически им необходимо двигаться по оси Z.
• Не насилуйте кнопки. Применять плавающую кнопку нужно только в случае острой необходимости, так как ее использование сразу же привносит в дизайн эффект Material Design. Для подтверждения каких-либо действий и закрытия окон использовать ее не стоит.
• На карточке должно быть не все. Использовать карточку уместно только в случае, когда объект содержит в себе множество форм и большой объем контента. При других вариантах целесообразнее использовать традиционный текст или списки.
• Минимализм в диалоговых окнах. Использовать диалоговые окна следует исключительно для подтверждения действий пользователя при возникновении вопросов.

Полиграфический дизайн

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

Изящная типографика

Типографика имеет важное значение в полиграфическом дизайне. Она задает структуру контента и влияет на образование стиля определенного бренда.

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

Контрастная типографика

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

Модульная сетка и направляющие

Если в экранном дизайне применяются базовые сетки, то в полиграфическом дизайне - модульные сетки. Для Material Design используют сетку с шагом 8dp.

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

Геометрическая иконографика

Простейшие иконки давно использовались на базе работы системы Андроид. В Material Design они выглядят еще проще и визуально приятнее.

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

Скачать иконки по теме:

Цвет

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

Основным цветом окрашивают action bar, а status bar выделяют более насыщенным его тоном. Акцентный цвет применяется для полосок, индикаторов, плавающих кнопок. Он привлекает внимание к ключевым элементам правления.

Акценты расставляются точечно и в небольшом количестве. Для остальной части интерфейса цвета применяют в соответствии с правилом: большой объем текста (список писем почты) оставляют стандартного размера и добавляют цвет для обращения внимания пользователя ПК; малый объем текста (калькулятор, фото) увеличивают в 2-3 раза в размере и добавляют цветные плашки.

В системе Андроид можно раскрашивать интерфейс динамически, то есть выделять основные цвета из общей фотографии.

Красивые фото

В Material Design можно и даже нужно использовать различные фотографии и иллюстрации. Часто в картинках отсутствуют рамки. Сам status bar делается бесцветным, чтобы не отвлекать внимание от изображений. «Цифровые чернила» всегда используют не только для красоты, но обязательно для функциональности дизайна.

• Рекомендуется брендирование.
• Нельзя забывать об отступах и свободном пространстве (для базовой сетки 8dp, для отступов — 72 dp).
• Используйте яркие изображения.

Осмысленная анимация

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

Пример 1. Анимация показывает, что именно эта конкретная карточка после нажатия вышла на передний план, раскрылась, и стало видно больше информации.

Пример 2. При нажатии на дату в календаре всплывает событие, которое плавно отрывается слоем от общего календаря, превращается в отдельный блок и раскрывается в подробном отдельном блоке с описанием этого события.

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

Реакция

Еще одним ключевым моментом анимации в Материальном дизайне считается реакция на определенные действия пользователя ПК. Изменения в интерфейсе Андроид L происходят после касаний пальцев. Эти изменения отображаются волнообразным действием.

Микроанимации

Микроанимации крайне важны. Их используют в качестве ответных действий на все манипуляции пользователя. Это придает интерфейсу детальности и отзывчивости.

Четкость и резкость

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

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

Адаптивный дизайн

Заключительным ключевым аспектом Материального дизайна является концепция адаптивного дизайна. Это означает варианты применения других трех аспектов на различных экранах устройств (телефон, ПК, телевизор и т.д.).

От общего к частному

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

Отступы

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

Направляющие

Отступы задаются благодаря направляющим. Ширина отступов для смартфонов, планшетов, компьютеров и телевизоров будет абсолютно разной. Так, для планшета она составляет 80 dp, а для экрана смартфона - всего 72 dp.

Размеры

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

Блоки

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

Тулбар (Toolbar)

Action bar - один из главных составляющих интерфейса. В нем размещают кнопки действий и заголовки. В Андроид L экшен бар стал привлекательным и функциональным блоком управления. Этого удалось достичь благодаря тому, что в Тулбар можно поместить формы, плавающие кнопки, выдвижную навигацию с удобным управлением.

• Не стоит использовать navigation drawer для простых инструментов. Применять навигацию рекомендуется только для многочисленных задач в приложении.
• Будьте смелее с тулбарами.
• Размещайте плавающую кнопку в наиболее оптимальном месте. Не делайте привязку строго к нижнему углу.
• Отрабатывайте элементы интерфейса как под вертикальный, так и под горизонтальный экран устройства.

Material как метафора

Разработчикам компании Google удалось соединить хороший привлекательный дизайн с инновациями современных технологий и науки.

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

Хорошим его примером является приложение «Newsstand». Здесь визуализировались привычные нам объекты: газеты, журналы, которые стоят на полках. Перелистывая эти журналы мы имитируем реальное перелистывание обычной книги из повседневной жизни. Таким образом, в «цифру» продублирована традиционная реальная жизнь.

Развитие цифрового дизайна

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

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

Наглядность как фундаментальная основа

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

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

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

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

Осмысленная динамика

Главное внимание фокусируется на поведении (действиях) пользователя. Его взаимодействие с дизайном происходит на базе накопленного пользовательского опыта, и никак не иначе.

Примеры сайтов в стиле Material Design

Как только в интернете появился релиз концепции, в сети появилось множество представителей Материального дизайна.

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

Видеоролики

Material Design заинтересовал собой огромную аудиторию. Он демонстрирует как правильно создавать UI, чтобы он был абсолютно понятен и ясен пользователю ровно также, как и привычный объект из реального мира, который можно потрогать руками.

Roman Nurik, один из дизайнеров команды Google, рассказал, как изменилось приложение I/O 2014 в процессе разработки, чтобы соответствовать принципам Material Design. Специально для вас мы перевели его видео.

Видео от канала «Google Design».

Сегодня все большее количество корпоративных заказчиков указывают в графе “Пожелание по дизайну” в брифе на создание сайта - “Material Design”. При этом даже не столько визуальная составляющая привлекает внимание корпоративного сегмента, как то, что стиль в тренде и на слуху.

Прежде, чем перейти к примерам, давайте уясним одну простую истину:

Material Design - это корпоративный стиль корпорации Google. Подражать ему так же глупо, как, например, производителю лапши быстрого приготовления пытаться подрожать бренду “Ferrari”.

Гайдлайн Material Design, кроме самого Google, также распространяется на продукты компаний-партнеров, в основном, на приложения для платформы Android. У всех остальных, кто не имеет отношение к корпорации Google и платформе Android, интерес к Material Design должен быть сугубо познавательным.

Корпоративный веб-сайт требует более осмысленный подход, чем просто сказать “хочу вот так”. Если сайт - это лицо бренда в сети, то оно должно иметь индивидуальные черты и визуально соответствовать общему образу компании.

Material Design еще не достиг пика своего развития и на сегодняшних день существует не так много сайтов, которые не только выполнены в полном соответствии с предписаниями брендбука от Google, но и гармонично интегрированы в собственный визуальный брендинг. Тем не менее нам удалось найти несколько удачных примеров сайтов в стиле Material Design.

Примеры сайтов в стиле Material Design

Сайт Kiosk Browser не только выполнен в стиле Material Design, но и неплохо оптимизирован для мобильных устройств.

Очень удачное решение, в котором гармонично сочетаются детали и конструкции из гайдлайна Material Design (тени, кнопки, flat design, цвета и JS эффекты) и корпоративный стиль группы международных школ ISoE.

Платформа lifeaweso выполнена в соответствии с фундаментальными принципами Material Design: простота, ясность, понятность. Сайт еще находится в стадии разработки, но интеграция визуальной составляющей в стиле Material Design выглядит довольно неплохо.

Известная компания-разработчик цифровых решений и онлайн-сервисов Futurice просто не могла сделать плохой сайт. Цветовая гамма в пастельных тонах, плавная навигация и функциональные элементы вместе создают отличный пользовательский опыт.

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

Здесь мы видим ключевой элемент Material Design - карточки. Сайт очень легкий и простой: здесь нет нагромождения лишних элементов, а ключевая информация отображается в отдельных блоках.

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

Ну и, конечно, не будем забывать о первоисточнике. Интерфейс сервиса Google Alerts недавно обновился до Material Design, что существенно улучшило его визуальные характеристики и usability.