Подписаться на рассылку

Все тонкости и сложности Material Design

24.11.2016 1681 0
Время на чтение:6 мин. Нет времени читать?

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

 

Что такое Material Design

 

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

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

 

Какие цели преследует Material Design

 

При создании материального дизайна разработчики ставили перед собой 2 цели:

  1. Стандартизация многочисленных инструментов одной компании в единое целое.
  2. Стандартизация интерфейса в Android-приложениях.

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

Все тонкости и сложности Material Design | YOTTOS

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

Все тонкости и сложности Material Design | YOTTOS

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

 

Основные принципы Материального дизайна

 

  1. Принцип тактильных поверхностей

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

Все тонкости и сложности Material Design | YOTTOS

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

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

Все тонкости и сложности Material Design | YOTTOS

Material Design дает возможность пользователям понять всю анатомию интерфейса и принципы взаимодействия с ним.

 

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

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

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

Все тонкости и сложности Material Design | YOTTOS

 

  1. Анимация, несущая определенный смысл

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

Все тонкости и сложности Material Design | YOTTOS

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

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

Все тонкости и сложности Material Design | YOTTOS

 

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

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

Все тонкости и сложности Material Design | YOTTOS


 

Подведем итоги

В качестве итога отметим, Material Design — это действительно новое направление в стиле, новый дизайн, выделяющийся:

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

Комментарии