Material Design

Material Design
Логотип программы Material Design
Скриншот программы Material Design
Material You (3) на Android 12
Тип Язык дизайна
Разработчик Google
Написана на Dart, Objective-C, Swift, Java и TypeScript
Операционная система кроссплатформенность
Дата выпуска 25 июня 2014
Аппаратные платформы Android, iOS и браузер
Последняя версия
Кандидат в релизы
Репозиторий
Лицензия лицензия MIT, модифицированная лицензия BSD и Apache License 2.0
Сайт

Последняя версия

Архивные версии

Логотип Викисклада Медиафайлы на Викискладе

Material Design (рус. Материальный дизайн) — дизайн-система для создания интерфейсов программного обеспечения и приложений, разработанная компанией Google. Впервые представлен на конференции Google I/O 25 июня 2014 года. Стиль расширяет идею «карточек», появившуюся в Google Now, более широким применением строгих макетов, вариантов анимаций переходов, отступов и эффектов глубины (света и тени). По идее графических дизайнеров Google, у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно[6].

История

Material Design, анонсированный в 2014 году, использовался в операционных системах Android с версии Lollipop и до Android 11.

Material Theme (Material Design 2)

В 2018 году Google улучшила приложения, внедрив собственные темы Material Theme (Material Design 2[7])[8]. Он подчеркивает пустое пространство, закругленные углы, красочные значки, нижние панели навигации и использует специальную оптимизированную по размеру версию фирменного шрифта Google Product Sans под названием Google Sans[англ.].

Material You (Material Design 3)

Основные компоненты Material Design

В мае 2021 года, вместе с Android 12, Google представила новый интерфейс «Material You» (он же «Material Design 3»)[9][10][11]. Особое внимание уделяется усиленной анимации[прояснить], более крупным кнопкам и возможности настраиваемого пользовательского интерфейса. Темы, которые будут созданы из обоев пользователя. В последующие месяцы «Material You» постепенно внедрялся в различные приложения Google на старых версиях Android, и ему было уделено основное внимание в серии смартфонов Pixel 6 и Pixel 6 Pro.

M3 Expressive (Material Design 3 Expressive)

В мае 2025 года появилось доработка Material You. Она включает в себя обновление элементов и новые функции[12][13]:

  • Панель приложений (App bars)
  • Панель навигации (Navigation bar)
  • Боковая панель навигации (Navigation rail) разной ширины — позволяет пользователю переключаться между видами пользовательского интерфейса на устройствах среднего размера.
  • «Карусель» (Carousel) — показывает коллекцию элементов, которые можно прокручивать на экране и за его пределами
  • Кнопки общего назначения (Common buttons)
  • Иконки кнопок (Icon buttons)
  • Плавающие кнопки (floating action button, FAB)
  • Extended FAB
  • FAB menu (new)
  • Индикаторы прогресса (Progress indicators)
  • Button groups (new)
  • Индикаторы загрузки (Loading indicator) (new)
  • Скленные кнопки (Split button) (new)
  • Панель инструментов (Toolbars) (new)

Методические рекомендации

Методические рекомендации по исполнению и внедрению Material Design были опубликованы Google на официальном сайте проекта в разделе «Guidelines». Раздел включает в себя рекомендации по использованию цветов, шрифтов, кнопок, иконок, анимации, переходов и других элементов приложений и сайтов. Помимо этого, платформа предоставляет собственный инструмент для внедрения Material Design — плагин Material Theme Editor для Sketch.

Polymer Paper

Каноническое исполнение Material Design для веб-приложений называется Polymer Paper Elements. Оно содержит библиотеку Polymer, прослойку с API к веб-компонентам для браузеров, не поддерживающих стандарт Polymer, а также коллекцию Paper Elements[14].

См. также

Ссылки

Примечания

  1. ↑ Release 124.2.0 — 2021.
  2. ↑ Release 14.0.0 — 2022.
  3. ↑ npmjs
  4. ↑ Release 1.12.0 — 2024.
  5. ↑ https://github.com/material-components/material-components-android/releases/tag/1.8.0-rc01
  6. ↑ Google's new 'Material Design' UI coming to Android, Chrome OS and the web. Engadget. Дата обращения: 26 июня 2014. Архивировано 27 июня 2014 года.
  7. ↑ Hall, Stephen. What exactly is this so-called 'Material Design 2,' and what will it look like? (англ.). 9to5Google (26 апреля 2018). Дата обращения: 6 сентября 2020. Архивировано 10 августа 2020 года.
  8. ↑ Material Design (англ.). Material Design. Дата обращения: 6 сентября 2020. Архивировано 16 января 2021 года.
  9. ↑ Dieter Bohn. Android 12 preview: first look at Google’s radical new design (англ.). The Verge (18 мая 2021). Дата обращения: 16 ноября 2021. Архивировано 22 мая 2021 года.
  10. ↑ Android 12's new Material You UI is partly live in the first beta (англ.). Android Police (18 мая 2021). Дата обращения: 16 ноября 2021. Архивировано 20 мая 2021 года.
  11. ↑ Константин Иванов. Material You: что такое, с чем едят и как он поменяет облик ОС Android. Mobile-Review.com (22 мая 2021). Дата обращения: 12 октября 2023. Архивировано 22 сентября 2023 года.
  12. ↑ M3 Expressive: Engaging UX Design (англ.). Material Design. Дата обращения: 14 мая 2025.
  13. ↑ Всё можно найти в этой статье: Start building with Material 3 Expressive - What’s in the update?
  14. ↑ Material design with Polymer. Google. Архивировано из оригинала 20 августа 2014 года.
В другом языковом разделе есть более полная статья Material Design (англ.).
Вы можете помочь проекту, расширив текущую статью с помощью перевода

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.