Что такое материальный дизайн?

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

Что такое материальный дизайн

Материальный дизайн (material design) — это дизайн-язык и стиль компании Гугл, выпущенный 25 июня 2014 года. Изначально внутри компании его называли кодовым именем «квантовая бумага» (quantum paper). Основная метафора материального дизайна — плоская бумага, находящаяся в трехмерном пространстве.

Зачем нужен материальный дизайн

Он служит двум целям: унификации многочисленных продуктов компании и унификации интерфейсов приложений для Андроида. После засилья скеоморфизма веб и интерфейсы шатнулись в сторону радикального уплощения, но это оказалось просто ещё одной крайностью. В гугле решили, что чтобы быть понятными и интернациональными, объекты интерфейса должны иметь аналог, метафору в реальном мире. Такой метафорой стала бумага. Тонкая, плоская, но расположенная в трехмерном пространстве и имеющая тени, скорость движения, ускорение. Но бумага «квантовая», не настоящая. Она подчиняется физическим законам, но имеет и волшебные свойства. Это помогает показать пользователю принципы работы ПО, как происходит переход от одного к другому состоянию. Анимации тут не просто оживляют интерфейс, но показывают пользователю, что происходит.

Чем материальный дизайн отличается от плоского дизайна (flat design)

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

Официальные руководства материального дизайна

Официальное руководство — главный и лучший источник информации о материальном дизайне. Оно прекрасно структурировано и проиллюстрировано. Для каждого пункта подобраны очень наглядные примеры, как положительные так и негативные (dos and donts). Сайт, кстати, сделан с привлечением агентства Хьюдж. Вот некоторые примеры:

Для разработчиков Андроид-приложений есть отдельный сайт с официальными руководствами и уроками.

Для разработчиков на Angular.js есть официальный порт стилей.

Для полного понимания, конечно, нужно посмотреть шоурил, так как основная суть материального дизайна раскрывается в динамике:

Оригинал: https://awdee.ru/material-design-full-guide/

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

Yandex.Zen — https://zen.yandex.ru/media/id/5ac098dff031731b9711ba45

Instagram — https://www.instagram.com/dotdesignblog

VK — https://vk.com/dotdesignblog

Twitter — https://twitter.com/dotdesignblog

Facebook — https://www.facebook.com/dotdesignblog

Error

default userpic
When you submit the form an invisible reCAPTCHA check will be performed.
You must follow the Privacy Policy and Google Terms of use.