АссистентНовый вопросИсторияОбласти знаний
Партнёрские проектыМатериалы БРЭСпецпроектыСтать автором
Настроить видСменить язык
О РУВИКИ
Ответ на вопрос
ТехнологииАппаратное обеспечение и киберфизические системы3D, графика и motion-дизайнMaterial Design

Material Design

Pause

Экспертиза РАН

Logo-ran-black.png
Проведена экспертиза
Российской академией наук
Подробнее
Aprove.svg

Экспертиза РАН

Arrow-Right.png
Logo-ran.png
Проведена экспертиза
Российской академией наук
Подробнее

Material Design (кодовое имя — Quantum Paper[2]) — дизайн-система (визуальный язык), представляющая собой набор правил и рекомендаций для создания интерфейсов[3][4]. Система была разработана компанией Google под руководством вице-президента по дизайну Матиаса Дуарте[5] и представлена 25 июня 2014 года на конференции Google I/O. Её главная цель — унифицировать пользовательский опыт на различных платформах, таких как Android, iOS и веб-приложения, приведя продукты к единому и интуитивно понятному стилю[6][7].

Основной целью разработки было решение проблемы фрагментации дизайна в продуктах Google[5] и создание универсального языка проектирования, который адаптирует классические принципы к современным технологиям. Матиас Дуарте описывал концепцию как «умное расширение и переосмысление цифрового материализма за пределами физической бумаги». Material Design основывается на идеях скевоморфизма, метафоре бумаги и чернил, но распространяется на более широкий спектр применения[8][9][10].

В 2018 году с релизом Material Design 2 система была переработана, предложив разработчикам более широкие возможности настройки цветов, типографики и геометрии, а также создание собственных тем[11].

В 2021 году была выпущена крупная ревизия под названием Material 3 (Material You)[12]. В 2025 году вышло руководство «Material 3 Expressive» с рядом незначительных изменений[13]. Google продолжает развивать систему, внедряя более смелые визуальные решения[14][15][16].

Общие сведения
Material Design
Тип дизайн-система
Автор Матиас Дуарте
Разработчик Google
Написана на HTML, CSS, Sass (v4), JavaScript, AngularJS, Angular, Java, Objective-C, Swift, Dart
Движки Flutter, Angular Material, MUI
Операционная система кроссплатформенность
Языки интерфейса английский
Первый выпуск 25 июня 2014
Аппаратные платформы Android, iOS, Web, Chrome OS, Fuchsia
Последняя версия Material 3 Expressive (сентябрь 2025)
Кандидат в релизы
Репозиторий github.com/material-comp…
Состояние Активная разработка для Web; режим поддержки для iOS
Лицензия Android, iOS: Apache-2.0; Flutter: BSD-3-Clause; Web: MIT
Сайт m3.material.io

Внедрение

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

Платформы Google

  • Android: Material Design является нативной дизайн-системой для Android. Её реализация осуществляется через официальную библиотеку Material Components for Android[17].
  • Chrome OS: Операционная система для хромбуков активно использует принципы Material Design, включая персонализированную версию Material You, которая позволяет элементам интерфейса адаптировать цвета под обои рабочего стола[18].
  • Fuchsia: Пользовательский интерфейс экспериментальной операционной системы Fuchsia создаётся с помощью фреймворка Flutter, который тесно интегрирован с Material Design[19]. Графический движок Scenic, используемый в Fuchsia, также оптимизирован для отображения элементов Material Design, таких как объёмные тени[20].

Веб Для веб-платформы Google активно развивает библиотеку Material Web Components (MWC), основанную на стандартных веб-компонентах и совместимую с любыми фреймворками[21][22]. Существует также ряд популярных сторонних реализаций:

  • MUI (ранее Material-UI) — одна из наиболее популярных библиотек компонентов для React[23].
  • Angular Material — официальный набор компонентов для фреймворка Angular, поддерживаемый командой Google[24].
  • Vuetify — популярный фреймворк для Vue.js.

iOS Официальная библиотека Material Components for iOS (MDC-iOS) с 15 июля 2021 года находится в режиме поддержки (maintenance mode). Это означает, что Google больше не добавляет в неё новые функции, выпуская только исправления критических ошибок[25]. Разработчикам рекомендуется использовать нативные компоненты Apple (UIKit или SwiftUI) и самостоятельно применять к ним стили Material Design либо использовать кроссплатформенный фреймворк Flutter[25]. Несмотря на это, Google продолжает внедрять Material 3 в собственных iOS-приложениях (например, в Gmail) для достижения кроссплатформенной визуальной согласованности[26].

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

Сторонние реализации Благодаря открытости Linux, для популярных окружений рабочего стола, таких как GNOME и KDE, существуют многочисленные темы, созданные сообществом и имитирующие внешний вид Material Design[27].

Dynamic color

Dynamic color — программный механизм Material Design, который автоматически формирует палитру цветов по изображению фона устройства. Поддержка этой функции появилась в Android 12 и требует использования Material 3. Приложения, поддерживающие Dynamic color, используют 27-цветные цветовые каталоги, автоматически формируемые операционной системой с учётом фонового изображения; при изменении обоев цвета приложений подстраиваются автоматически[28].

Функция получила дальнейшее развитие в Android 13, где в дополнение к стандартной палитре появились новые стили, такие как Vibrant и Expressive, предлагающие более насыщенные цветовые сочетания[29]. На конференции Google I/O в 2023 году была представлена концепция Content-based Dynamic Color, позволяющая цветовой схеме приложения адаптироваться не только к обоям, но и к отображаемому внутри приложения контенту[30][31]. Также были анонсированы улучшенные схемы контрастности и монохромный режим[31].

В качестве пасхального яйца в Android 12 была реализована функция «Paint chips», иллюстрирующая эти возможности.

Документация и ресурсы

Официальная документация и гайдлайны Material Design публикуются компанией Google на английском языке[32]. Основной ресурс material.io не предоставляет встроенных средств для перевода всего содержимого. Для получения наиболее актуальной и точной информации рекомендуется использовать англоязычную версию сайта.

При этом сами гайдлайны содержат разделы, посвящённые правилам проектирования интерфейсов для различных языков, включая языки с письмом справа налево (например, арабский и иврит). Эти рекомендации касаются адаптации типографики, макетов и иконок, но не являются переводом самой документации[33].

Существуют неофициальные переводы гайдлайнов на другие языки, включая русский, выполненные сообществом разработчиков и дизайнеров. Однако такие переводы могут не всегда своевременно обновляться и не являются официальными[34]. Документация некоторых сторонних библиотек, реализующих Material Design (например, MUI), может быть переведена на несколько языков, но она относится к конкретной библиотеке, а не к официальной дизайн-системе Google[35].

Версии

Material Design 2 (2018)
Material Design 3 (2021)

Material Design 1

Первая версия была представлена 25 июня 2014 года на конференции Google I/O. Основной целью её создания было решение проблемы фрагментации дизайна в продуктах Google[36]. До этого веб-сервисы, мобильные приложения и разные версии Android не имели единого визуального стиля, что усложняло пользовательский опыт. Material Design был призван создать единый, целостный и адаптивный язык дизайна, который бы одинаково хорошо работал на устройствах с любым размером экрана[36].

Концепция первой версии базировалась на нескольких ключевых принципах:

  • Материал как метафора. Центральный принцип, согласно которому все элементы интерфейса представляются как слои «цифровой бумаги», расположенные на разной высоте. Они отбрасывают тени, что помогает пользователям понять иерархию элементов и интуитивно ориентироваться в интерфейсе.
  • Полиграфический дизайн. Подход использует классические принципы печатного дизайна: типографику, сетки, масштабирование и цвет для создания визуальной иерархии и структурирования контента[37]. Для первой версии были характерны яркие и контрастные цветовые палитры[38].
  • Осознанная анимация. Анимация используется не для украшения, а для придания смысла. Она фокусирует внимание пользователя, подсказывает, как работает интерфейс, и обеспечивает плавные переходы между состояниями.

Material Design 2

Впервые применена в Android 9 в 2018 году и выпущена вместе с новым руководством и API[39]. После релиза Google начал редизайнировать свои приложения, полностью переводя их на Material 2[40]. Отличия от первой версии: расширенные возможности кастомизации, поддержка тёмной темы, закруглённые углы, изменённые отступы между элементами, яркие цвета и нижняя навигационная панель. Вместе с Material 2 была представлена фирменная гарнитура Google — «Product Sans», переименованная и доработанная как «Google Sans»[41].

Material Design 3

На конференции Google I/O в мае 2021 года был представлен Material You (Material 3), который пришёл вместе с поддержкой Android 12[42]. Среди изменений есть следующие: больше анимаций, крупные кнопки, функция Dynamic color, позволяющая подстраивать цветовую схему под обои устройства. В течение следующих месяцев Material You стал доступен в рядах Google-приложений для более ранних версий Android. В серии смартфонов Pixel 6 новый стиль стал одним из ключевых фокусов[43][44].[45]

В 2022 году система получила значительное развитие. В октябре вышла первая стабильная версия библиотеки Compose Material 3, что позволило разработчикам уверенно использовать компоненты M3[46]. С выходом Android 13 была расширена поддержка тематических иконок для сторонних приложений[47], а также появились новые стили динамических цветов, такие как «Vibrant» и «Expressive». Внедрение M3 также началось в оболочках сторонних производителей, например, в One UI 5 от Samsung[48].

На конференции Google I/O в 2023 году были представлены дальнейшие улучшения: новые компоненты (например, средства выбора даты и времени), развитие концепции Dynamic color за счёт адаптации к контенту внутри приложения (Content-based Dynamic Color) и особый акцент на адаптивности для устройств с большими экранами, таких как планшеты и складные смартфоны.

Material 3 Expressive

Material 3 Expressive — это эволюция Material You, анонсированная на конференции Google I/O в мае 2025 года[49]. Новая итерация дизайн-системы сместила акцент на создание более эмоциональных, персонализированных и динамичных пользовательских интерфейсов за счёт выразительной анимации, насыщенных цветов и гибких компонентов[50][51].

Ключевые нововведения M3 Expressive включают:

  • Новая физика анимаций (Motion Physics). Вместо прежней системы, основанной на длительности и кривых замедления, была представлена физика анимаций, использующая пружинные эффекты (springs) для создания более плавных и естественных движений объектов[52].
  • Новые компоненты. Библиотеки пополнились такими компонентами, как гибкие панели инструментов (Toolbars), разделённые кнопки (Split Button) и группы кнопок (Button Groups)[53].
  • Морфинг форм. Была добавлена библиотека из 35 новых форм для декоративных элементов (например, аватаров) со встроенной анимацией морфинга, позволяющей плавно переходить от одной фигуры к другой[53].
  • Улучшенная типографика. Заголовки и ключевые действия стали легче идентифицировать благодаря увеличенным размерам, большей насыщенности и улучшенной иерархии[54].

Развёртывание M3 Expressive началось в сентябре 2025 года с выходом обновления Android 16 QPR1 для устройств Pixel (начиная с Pixel 6)[55]. В октябре-ноябре того же года Google провела масштабное обновление собственных приложений для Android и Wear OS, приуроченное к запуску смартфонов Pixel 10[56]. Обновления затронули большинство сервисов, включая Chrome[57], Google Meet, Phone by Google, Google Messages и Google Wallet[56]. На Wear OS 6 редизайн получил, в частности, YouTube Music[58].

Несмотря на положительные оценки дизайнеров, отметивших улучшенную доступность и читаемость за счёт увеличенных элементов управления, некоторые пользователи выразили недовольство[59]. Основные претензии касались снижения информационной плотности интерфейса, что приводило к необходимости чаще прокручивать экран[59].

Примечания

  1. ↑ https://github.com/material-components/material-components-android/releases/tag/1.8.0-rc01
  2. ↑ Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple (англ.). Techcrunch (11 июня 2014). Дата обращения: 11 июня 2024. Архивировано 23 ноября 2018 года.
  3. ↑ Что такое Material Design. Нетология. Дата обращения: 4 ноября 2025.
  4. ↑ Что такое Material Design. Contented. Дата обращения: 4 ноября 2025.
  5. ↑ 1 2 Google designers explain Material Design goals, Android Wear and more in new interview. 9to5Google (27 июня 2014). Дата обращения: 4 ноября 2025.
  6. ↑ Что такое Material Design и почему он так популярен. Timeweb Community. Дата обращения: 4 ноября 2025.
  7. ↑ «Меняйте всё так, как нужно именно вашему продукту»: как сами дизайнеры Google применяют гайдлайны Material Design. vc.ru (16 января 2018). Дата обращения: 4 ноября 2025.
  8. ↑ Google's new 'Material Design' UI coming to Android, Chrome OS and the web (англ.). Engadget (25 июня 2014). Дата обращения: 26 июня 2014. Архивировано 16 августа 2016 года.
  9. ↑ Google's New, Improved Android Will Deliver A Unified Design Language (англ.). Co.Design (25 июня 2014). Дата обращения: 26 июня 2014. Архивировано 29 июля 2014 года.
  10. ↑ Google Reveals Details About Android L at Google IO (англ.). Anandtech. Дата обращения: 26 июня 2014. Архивировано 28 июня 2014 года.
  11. ↑ Material Design (англ.). Material Design. Дата обращения: 3 июня 2025. Архивировано 2 июня 2025 года.
  12. ↑ Bohn, Dieter Android 12 preview: first look at Google's radical new design (англ.). The Verge (18 мая 2021). Дата обращения: 19 мая 2021. Архивировано 22 мая 2021 года.
  13. ↑ Material Design (англ.). Material Design. Дата обращения: 3 июня 2025. Архивировано 3 июня 2025 года.
  14. ↑ Material 3 Expressive Archives, 9to5Google. Дата обращения: 23 марта 2026.
  15. ↑ Li, Abner. Google Phone’s M3 Expressive update redesigns bottom bar with Home, Keypad tabs, 9to5Google (24 июня 2025). Дата обращения: 23 марта 2026.
  16. ↑ Старые Pixel получили новый интерфейс Material 3 Expressive и свежие ИИ-функции Google, 3DNews - Daily Digital Digest. Дата обращения: 23 марта 2026.
  17. ↑ material-components-android (англ.). GitHub. Дата обращения: 4 ноября 2025.
  18. ↑ How to Enable Material You Design on Your Chromebook (англ.). Beebom. Дата обращения: 4 ноября 2025.
  19. ↑ Fuchsia Friday: A hands-on with Google’s new open source OS (англ.). 9to5Google (10 мая 2017). Дата обращения: 4 ноября 2025.
  20. ↑ Scenic (англ.). Fuchsia. Дата обращения: 4 ноября 2025.
  21. ↑ Develop for web (англ.). Material Design. Дата обращения: 4 ноября 2025.
  22. ↑ Roadmap (англ.). Material Web. Дата обращения: 4 ноября 2025.
  23. ↑ Material UI: The React component library you always wanted (англ.). MUI. Дата обращения: 4 ноября 2025.
  24. ↑ 5 фреймворков для «материального» дизайна, о которых вы должны знать. freelance.today. Дата обращения: 4 ноября 2025.
  25. ↑ 1 2 Material Components for iOS (англ.). GitHub. Дата обращения: 4 ноября 2025.
  26. ↑ Gmail for iPhone getting Material You redesign (англ.). 9to5Google (25 апреля 2025). Дата обращения: 4 ноября 2025.
  27. ↑ Quantum OS — Material Design дистрибутив Linux. Habr. Дата обращения: 4 ноября 2025.
  28. ↑ Dynamic Color on Android from a UI/UX designer point of view – FiveDotTwelve – Full-cycle Flutter app development company. fivedottwelve.com. Дата обращения: 15 августа 2025. Архивировано 19 июня 2023 года.
  29. ↑ Android 13 adds new ‘Vibrant’ and ‘Expressive’ Material You styles (англ.). 9to5Google (17 марта 2022). Дата обращения: 4 ноября 2025.
  30. ↑ What’s new in Material Design at Google I/O 2023 (англ.). Material Design (10 мая 2023). Дата обращения: 4 ноября 2025.
  31. ↑ 1 2 Exciting New Features in Google's Material Design: Google I/O Keynote 2023 (англ.). Women Who Code (11 мая 2023). Дата обращения: 4 ноября 2025.
  32. ↑ Guidelines overview (англ.). Material Design. Дата обращения: 4 ноября 2025.
  33. ↑ Language support (англ.). Material Design. Дата обращения: 4 ноября 2025.
  34. ↑ Материальный дизайн. Спецификации Google. gruzdevv.ru. Дата обращения: 4 ноября 2025.
  35. ↑ Languages (англ.). MUI. Дата обращения: 4 ноября 2025.
  36. ↑ 1 2 Google VP of Design Matias Duarte talks origin of Material Design and more in interview. 9to5Google (27 июня 2014). Дата обращения: 4 ноября 2025.
  37. ↑ Что такое Material Design. Компьютерная Академия TOP. Дата обращения: 4 ноября 2025.
  38. ↑ Material Design — актуальная концепция дизайна для вашего сайта. Icon. Дата обращения: 4 ноября 2025.
  39. ↑ Hall, Stephen What exactly is this so-called 'Material Design 2,' and what will it look like? (англ.). 9to5Google (26 апреля 2018). Дата обращения: 6 сентября 2020. Архивировано 10 августа 2020 года.
  40. ↑ Material Design (англ.). Material Design. Дата обращения: 6 сентября 2020. Архивировано 16 января 2021 года.
  41. ↑ Hall, Stephen Now we know: Google Sans is actually a size-optimized version of Product Sans (англ.). 9to5Google (9 мая 2018). Дата обращения: 6 сентября 2020. Архивировано 14 мая 2018 года.
  42. ↑ Material Design. The latest in Material Design is NOW available. With Material Design 3, our next generation of the system, we're introducing Material You — a new set of features that help make your apps more personalized. Give it a try → goo.gle/m3-material-io #AndroidDevSummit (27 октября 2021). Дата обращения: 27 октября 2021. Архивировано 4 мая 2024 года.
  43. ↑ Warren, Tom Google's Material You design is coming to Gmail, Calendar, and Docs on Android. The Verge (10 сентября 2021). Дата обращения: 19 сентября 2021. Архивировано 17 сентября 2021 года.
  44. ↑ Li, Abner Google Photos rolling out Material You redesign, but without Dynamic Color. 9to5Google (15 сентября 2021). Дата обращения: 19 сентября 2021. Архивировано 19 сентября 2021 года.
  45. ↑ Google Contacts is already getting its Material You UI makeover. Android Police (29 июля 2021). Дата обращения: 19 сентября 2021. Архивировано 20 сентября 2021 года.
  46. ↑ Material Design 3 стал стабильным. AppTractor (6 октября 2022). Дата обращения: 4 ноября 2025.
  47. ↑ Google I/O 2022: Here's everything Google just announced (англ.). ZDNet (11 мая 2022). Дата обращения: 4 ноября 2025.
  48. ↑ Как изменился дизайн Android за год и в чем его основная проблема. AndroidInsider.ru (20 ноября 2022). Дата обращения: 4 ноября 2025.
  49. ↑ Android and Wear OS are getting a big refresh (англ.). Google (13 мая 2025). Дата обращения: 4 ноября 2025.
  50. ↑ Google представила масштабный редизайн для Android. Design Glory. Дата обращения: 4 ноября 2025.
  51. ↑ Building with M3 Expressive (англ.). Material Design. Дата обращения: 4 ноября 2025.
  52. ↑ Material 3 Expressive: The Future of Digital Design (англ.). Supercharge. Дата обращения: 4 ноября 2025.
  53. ↑ 1 2 Material Design (англ.). Material Design. Дата обращения: 4 ноября 2025.
  54. ↑ Material 3 Expressive: Features, changes, availability, and supported devices (англ.). Android Authority. Дата обращения: 4 ноября 2025.
  55. ↑ When will Material 3 Expressive and desktop mode roll out? (англ.). Android Authority. Дата обращения: 4 ноября 2025.
  56. ↑ 1 2 This is Google’s Material 3 ‘Expressive’ redesign [Gallery] (англ.). 9to5Google (30 октября 2025). Дата обращения: 4 ноября 2025.
  57. ↑ Chrome 141 for Android rolling out Material 3 ‘Expressive’ redesign (англ.). 9to5Google (26 октября 2025). Дата обращения: 4 ноября 2025.
  58. ↑ Wear OS 6 gives YouTube Music a cleaner, bolder look on Galaxy and Pixel watches (англ.). Livemint. Дата обращения: 4 ноября 2025.
  59. ↑ 1 2 Material 3 Expressive Faces User Backlash (англ.). Findarticles. Дата обращения: 4 ноября 2025.

Ссылки

Категории

Pause