С каждым днем виртуальный мир становится все более реалистичным. Это в первую очередь происходит за счет прогрессивного роста технологий, которые позволяют воспринимать виртуальное пространство, как реальность. Одним из способов увеличения подобного восприятие является Material Design.
Что такое Material Design
Material Design — это дизайн-система, которая использует целый комплекс методов для создания интерактивных динамических элементов для программного обеспечения и приложений ОС Android. Предложен данный дизайн-стиль был в 2014 году.
Основная цель материального дизайна заключается в сочетании плоских элементов стилистики, размещающихся на нескольких уровнях восприятия. Изначально данный дизайн среди разработчиков назывался, как «квантовая бумага», потому как в основу стиля лег принцип поведения листа бумаги в трехмерном пространстве.
Какие цели преследует Material Design
При создании материального дизайна разработчики ставили перед собой 2 цели:
- Стандартизация многочисленных инструментов одной компании в единое целое.
- Стандартизация интерфейса в Android-приложениях.
Для того чтобы интерфейс стал более понятным и интересным необходимо было найти аналог в реальном мире, который можно было бы взять, как основополагающий. Здесь и появилась идея использовать бумагу, ведь по сути — это плоский предмет, как и большинство современных экранов. Бумага была представлена в трехмерном пространстве с применением теней, скорости динамики и ускорения, для реализации оставалось только ввести третью ось Z.
Такой вариант представления помог пользователям понять принципы работы программного обеспечения, то есть разобраться, каким образом один процесс переходит в другой, например, на следующей анимации видно, как именно при выборе даты в календаре, она начинает увеличиваться, расширяться на весь экран, перемещаясь на более верхний уровень восприятия. Таким образом, интерфейс становится более оживленным, а пользователь сразу понимает, что произошло.
Дизайн-система Material Design позволяет получить совместимый дизайн для всех экранов, как на десктопных версиях, так и на телефонах, планшетах, телевизорах и прочих гаджет-устройствах. Предложенный дизайн позволяет понять, как выглядят процессы, происходящие непосредственно после взаимодействия пользователя с экраном монитора.
Основные принципы Материального дизайна
-
Принцип тактильных поверхностей
Данный принцип основан на использовании сразу нескольких уровней поверхности, расположенных на различной высоте, что позволяет получать и отбрасывать тени с одного слоя на другой. Тактильные поверхности обладают свойством расширения, соединения, изменения, но при этом в большинстве случаев они ведут себя согласно физическим законам.
Material Design предпочитает использовать исключительно белую гладкую поверхность без рельефностей и текстур. Так как каждый слой располагается на своей высоте, верхние поверхности отбрасывают тень на нижние и создают реалистичное изображение.
Также следует обратить внимание на глубину, позволяющую изящно сконцентрировать внимание пользователей на нужном элементе. У глубины есть «дно», ограниченное толщиной мобильного устройства, условно это 1 см. Таким образом, изображения, которые невозможно повернуть в плоскости телефона будут сгибаться или сворачиваться, как в действительности это происходит с обычным листом бумаги.
Material Design дает возможность пользователям понять всю анатомию интерфейса и принципы взаимодействия с ним.
-
Полиграфический дизайн
Здесь дизайн базируется на принципах печатной версии: типографика, сетки, увеличение, цвет, все это позволяет создать структуру, значение и фокус. Пользователи легко погружаются в графический интерфейс, наполненный яркими и насыщенными картинками, различными шрифтами, тенью, большими и малыми элементами, конкретно прорисованными краями.
Контраст — это еще один элемент материального дизайна, позволяющий выделить главное, то что пользователю будет интересно и необходимо в первую очередь. Например, на следующем изображении присутствует явный контраст между размерами шрифтов и цветовой палитрой элементов.
-
Анимация, несущая определенный смысл
Ни для кого не секрет, что в реальном мире ничего не может появляться из ниоткуда и исчезать в никуда. В связи с этим Material Design демонстрирует пользователям все движения и процессы, которые не приведут в недоумение людей, а ясно и четко дадут понять, что произошло после воздействия на экран монитора.
На анимации видно, как при пролистывании один логотип платежной системы сменяется на другой при помощи выталкивания и дальнейшего перемещения в верхнюю часть дисплея.
Также в Material Design используются мини-анимации, присутствующие в иконках стандартных приложений. На первый взгляд, столь неприметные маленькие иконки позволяют отобразить смысл самого приложения и тем самым увеличить отзывчивость на действия пользователей. Но здесь следует помнить, что слишком много анимации — это не всегда хорошо, анимация должна быть продуманной до мельчайших деталей и если вы не понимаете смысл, тогда не стоит ее использовать.
-
Адаптивный дизайн
Данный принцип является в Material Design не менее важным, ведь он позволяет просмотреть результаты использования всех трех принципов описанных ранее на устройствах с разным размером и формой экрана. Часто случается так что информация, представленная на десктопных версиях не помещается на мобильные версии сайтов. В таком случае необходимо сохранить основные элементы веб-ресурса, блоки, навигацию, а также обязательно использовать те же шрифты, логотипы и изображения. Задача состоит в том, чтобы пользователь, перейдя на сайт с компьютера, планшета или мобильного телефона, всегда мог понять, что это за сайт и как им пользоваться.
Подведем итоги
В качестве итога отметим, Material Design — это действительно новое направление в стиле, новый дизайн, выделяющийся:
- яркими и реалистичными картинками;
- белыми и гладкими поверхностями;
- сверхспособностями в плане растягиваний, соединений и изменений своих форм;
- концепцией трехмерного пространства;
- осмысленными тенями;
- глубиной;
- изящной типографикой;
- набором шрифтов разного размера;
- контрастной типографикой;
- модульной сеткой и направляющими;
- осмысленными анимированными иконками;
- красивыми фото;
- анимацией со смыслом;
- реакцией на действия пользователя;
- адаптивным дизайном.
Комментарии