Что такое Material Design и почему он так популярен

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

Material Design – это…

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

До внедрения этой концепции не то, чтобы в разных продуктах, а даже в разных версиях одного сервиса (в мобильной и десктопной) дизайн значительно отличался. Из-за этого пользователям было сложно ориентироваться при переходе между ними. Даже попытка разработать единый стиль для приложений Android Holo не решила проблему – люди все равно путались в интерфейсах. Лишь с переходом к принципу Material Design пользовательский опыт удалось улучшить.

Зачем он нужен

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

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

Основные принципы Material Design

В основе концепции Material Design лежат 4 принципа:

1. Тактильные поверхности. Основой формирования пространства служит «цифровая бумага». Отдельные ее листы располагаются на разной высоте и при этом отбрасывают тени друг на друга. Помимо прочего, они также могут растягиваться, менять форму и цвет, также соединяться друг с другом. За счет этого пользователи лучше понимают, как устроена система и какова ее иерархия.
2. Полиграфический дизайн. Это означает, что при создании интерфейса для цифровых устройств используются традиционные средства и подходы из графического дизайна. Скажем так, на «цифровой бумаге» элементы выводятся с помощью «цифровых чернил».
3. Осмысленная анимация. Здесь анимация не просто выскакивает из ниоткуда, а появляется в соответствии с логикой системы. То есть один объект, реагируя на действия пользователя, плавно переходит в другой.
4. Адаптивный дизайн. Тут все просто – интерфейс должен быть оптимизирован на всех устройствах и экранах вне зависимости от того, какой продукт мы берем в качестве примера. При этом выглядеть, работать и реагировать все должно везде одинаково.

Другие особенности

Они вытекают из основных принципов Material Design и заключаются в следующем:

• Наличие глубины теней. Оно придает объем обычному плоскому дизайну и тем самым задает некий функционал – обозначение структуры элементов. Например, чем выше подъем объекта, тем больше его тень.
• Контрастная типографика. Сам по себе типографика задает стиль бренда и создает структуру контента. Во втором случае это хорошо видно на примере заголовков – они выделяются более крупным и темным шрифтом. Это позволяет создать контраст между заголовками и наборным текстом, что и функционально, и красиво.
• Модульная сетка. Эта техника пришла из полиграфического дизайна. Детали располагаются в соответствии с ключевыми направляющими. Сетка создает отступы и лучше демонстрирует структурированность информации.
• Яркие цвета. В этой концепции существуют основные и акцентные цвета. Цель основного цвета – обозначить большие области. Акцентный же чуть более яркий, используется точечно и в небольшом количестве для выделения элементов управления, таких как кнопки, индикаторы и так далее. Тем самым он позволяет привлекать внимание пользователя к ключевым деталям.
• Реакция анимации. Любой объект должен реагировать исключительно на действия пользователя, будь то касание пальцем на мобильных устройства или наводка курсора на десктопных версиях.
• От общего к частному. Этот принцип заключается в уменьшении количества подаваемой информации с уменьшением размера экрана. Соответственно, на больших дисплеях можно показать сразу и списки, и более детальные сведения. А вот на маленьких экранах для этого можно сделать раскрывающийся список или даже перевести подробности на новый экран.

Польза Material Design

В Google при создании Material Design ориентировались на пользовательский опыт и функциональность деталей системы. В итоге интерфейс становится более простым и выразительным. Именно анимация является основным элементом системы, благодаря которому делаются следующие акценты:

1. Демонстрация взаимосвязей. Благодаря анимации становится простой и понятной иерархия, человек без труда сможет понять, что произойдет при нажатии на конкретную деталь.
2. Фокусировка внимания. Анимация ни в коем случае не отвлекает от основного действия, что соответствует третьему принципу – ее осознанности.
3. Выразительность. Каждый продукт компании имеет свой особый характер, стиль, и все это четко отражено в анимированных деталях.
4. Обучение. Люди без особого труда могут понять, как выполнять те или иные действия.
5. Привлекательность. Даже если исключить практическую составляющую, то вся анимация сама по себе выглядит достаточно интересно. В итоге пользователь проявляет интерес и хочет взаимодействовать с продуктом.

Material Design 3 для Android 12

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