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

Что такое material design?

Что такое material design?

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

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

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

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

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

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

Цитата Google: "Material design базируется на тактильной реальности, вдохновлен изучением бумаги и чернил, технологически продвинут и открыт для воображения и магии."

Материализм и его имитация в цифровой среде не нова. Компания Apple до недавнего времени использовала философию скевоморфизма в дизайне устройств и интерфейсов.

Скевоморфизм - это практика имитации и приближения восприятия виртуального объекта к его аналогу из материального мира. Хорошим примером в достижении такого сходства в современной практике скевоморфизма являются приложения "Notes" и "Newstand" для iPhone. Давайте более детально рассмотрим приложение Newsstand.

Скевоморфизм

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

Эволюция digital design

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

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

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

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

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

Flat-дизайн

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

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

Material кнопка

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

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

Примеры Material design.

Calendar

material анимация

Gmail Inbox



 

Android Wear



Newspaper


Google Play Interface



Events List



Flight Animation



Music Player



Phone Contacts



To Do List



 

 Читайте также "Примеры сайтов с использованием Material design"

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

Так, Google перестанет в скором времени восприниматься пользователями как поисковик или Android-смартфон, как браузер Chrome или отдельный сервис GMail. Единая концепция дизайна интерфейса и интеграция всех сервисов позволит создать полностью новый пользовательский опыт, который интуитивно понятен, легок в использовании, содержит в себе алгоритм взаимодействия по аналогии с объектами материального мира и, более того, стирает грань между реальным и виртуальным миром.

На сайте Google Design вы сможете найти огромное количество информации о технических аспектах, примеры взаимодействия в разной среде, 3D дизайн и анимацию. 

Тренируй мастерство: