Material Design: новый подход Гугла к дизайну приложений

490

18-02-20

Время чтения: 3 мин

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

И вот разработчики корпорации Google создали некую золотую середину между трехмерной реалистичностью и плоским «бумажным» стилем. Новая концепция, получившая название Material Design, была представлена общественности летом 2014 года и очень быстро нашла своих поклонников. Но что такое материальный дизайн, каковы его особенности и главные достоинства? Почему эта концепция стала популярной и продолжает успешно применяться разработчиками приложений и сайтов?

Мобильные приложения и материальный дизайн

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

Разработчики Google с момента официального представления данной концепции внесли немало правок и новшеств, и документация с огромными базами готовых дизайнерских решений, фактически на все случаи жизни, находится в открытом доступе. Собственно, вся концепция material design от google совершенствуется, чтобы успеть за изменениями в сфере дизайна. И благодаря этому, материальный дизайн остается актуальным и с момента своего появления лишь обретает все новых и новых приверженцев.

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

Материальный дизайн делает картинку более реалистичной, но сохраняет в себе ключевые достоинства flat design с традиционной минималистической «плоскостью». В Material Design также проглядываются отголоски сквеморфизма от разработчиков Apple, которые сравнительно недавно также предпринимали попытки сделать все элементы приложений максимально похожими к своим «реальным» аналогам.

Рекомендации по использованию и внедрению Material Design

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

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

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

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

Web-компоненты в материальном дизайне

Одним из самых перспективных и актуальных на сегодняшний день направлений развития web-разработки являются веб-компоненты. С их помощью каждый разработчик может создавать свои тэги с готовыми шаблонами и инкапсулированными стилями и логикой. Кроме этого, существует немалая база уже готовых элементов, которые разработчик мобильных приложений сможет использовать.

И все это благодаря библиотеке Polymer, позволяющей создавать и использовать web-компоненты. Они представляют собой некие отдельные блоки с кусками HTML-кода с шаблонами, логикой и стилями. Использование данных компонент повышает структурированность кода и существенно упрощает его повторное применение, поскольку один компонент достаточно раз написать и можно его использовать в дальнейшем повсеместно.

В библиотеке Polymer содержится две коллекции элементов, а именно: Core-elements и Paper-elements. Последний набор все чаще используется разработчиками Google в контексте продвигаемой компанией концепции Material Design. Поэтому применение материального дизайна неразрывно связано с использованием Polymer Paper Elements. Многие браузеры уже поддерживают работу с Polymer, а для работы с остальными используется прослойка с API.

Учитывая повышенную заинтересованность разработчиков в материальном дизайне, можно прогнозировать, что и Polymer Paper не останется в стороне от общих тенденций. За последние несколько лет материальный дизайн доказал свою состоятельность и удобство, поэтому успешно используется при создании современного дизайна для приложений или сайтов.