Дизайн и прототипирование

Всё о материальном дизайне: объяснение, руководства, иконки и исходники

Тонкая, плоская, но расположенная в трехмерном пространстве и имеющая тень, скорость движения, ускорение. Но бумага «квантовая», не настоящая.

Опубликовано

10 лет назад

20.01.2015

Автор:

AppTractor

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

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

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

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

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

icons

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

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

Исходники из официального гида по материальному дизайну

Ниже представлены прямые ссылки на скачивание исходников из официального гида:

Цветовые палитры (.ai)
Наборы элементов для смартфонов (.ai)
Наборы элементов для планшетов (.ai)
Наборы элементов для настольных устройств (.ai)
Вайтфреймы (.ai)
Шрифт Робото (обновленный) (буклет с образцами применения шрифта)
Для языков, которые не поддерживает Робото, нужно использовать шрифт Ното Санс
Комплект элементов (стикер шит): PSD, AI, Sketch
Иконки: иконки на гитхабе (более 800 штук) + архив этих иконок в различных форматах и разрешениях

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

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