<aside> 💻 Функциональность находится в бете. Это значит что эта статья может устареть и не соответствовать оригинальному источнику

</aside>

Material - что это?

Это дизайн-система, которая была создана Google, чтобы помочь всем, кто заинтересован создавать высококачественные интерфейсы для Android, iOS, Flutter и веба.

Принципы

[Источник: https://material.io/design/introduction#principles](https://miro.medium.com/max/1596/0*8VAMsSWKB061cp2-)

Источник: https://material.io/design/introduction#principles

Понятие «Материал» — это метафора

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

Смелый, графический, сознательный

[Источник: https://material.io/design/introduction#principles](https://miro.medium.com/max/1596/0*NEUN8Mnm07WaBI33)

Источник: https://material.io/design/introduction#principles

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

Анимации со смыслом

[Источник: https://material.io/design/introduction#principles](https://miro.medium.com/max/1596/0*n08iduTp8GaoIjUS)

Источник: https://material.io/design/introduction#principles

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

Компоненты

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

Компоненты — это интерактивные строительные блоки для создания пользовательского интерфейса. Они имеют встроенную (по умолчанию) систему состояний, чтобы пользователь понимал когда элемент в фокусе, выбран, активирован или когда произошла ошибка. Также, компоненты передают состояния наведения, нажатия, перетаскивания и отключения. Библиотеки компонентов доступны для Android, iOS, Flutter и интернета.