Система дизайна — это совокупность многократно используемых проектных решений, выраженных в виде рекомендаций, компонентов и шаблонов. Систему можно разбить на мельчайшие примитивы проектирования: такие вещи, как цвет, тип или форма, которые складываются в более крупные сложные компоненты. Например, значок и текстовая метка составляют компонент кнопки, а несколько кнопок и поверхность составляют карточку. Системы проектирования также поставляются с набором рекомендаций, состоящих из существующих проектных решений, касающихся компонентов и шаблонов.
Material Design — это система дизайна с открытым исходным кодом, разработанная Google, чтобы помочь вам создавать красивые продукты, ориентированные на пользователя. Material 3 — это последняя версия Material Design.
Компоненты материального дизайна
Material Design предоставляет набор компонентов с кодовой поддержкой, которые являются интерактивными строительными блоками для создания пользовательского интерфейса. Эти компоненты можно разделить на пять категорий в зависимости от их назначения: действие, сдерживание, навигация, выбор и ввод текста.
Компоненты действия
Компоненты действия помогают людям достичь цели.
Материал имеет несколько типов кнопок , помогающих определить приоритет действий и взаимодействия в разных контекстах. От FAB или расширенных FAB для основных действий до поддержки кнопок со значками и выбора параметров с помощью сегментированных кнопок .
![](https://developer.android.com/static/images/design/ui/mobile/material-components-action-components.png?authuser=6&hl=ru)
Коммуникационные компоненты
Коммуникационные компоненты предоставляют полезную информацию, предупреждая пользователей с помощью значков , информируя о статусе с помощью индикаторов прогресса и предоставляя краткие сообщения процесса с помощью закусочных .
![](https://developer.android.com/static/images/design/ui/mobile/material-components-communication.png?authuser=6&hl=ru)
Компоненты защитной оболочки
Компоненты сдерживания содержат информацию и действия, включая другие компоненты, такие как кнопки, меню или чипы. Большинство компонентов Material используют явное включение, группируя связанный контент и действия с визуальными объектами: карточками , диалогами , нижними листами , боковыми листами , каруселями и подсказками . Списки могут предоставляться с неявным вложением или явным, показывая видимые разделители . Эти компоненты предоставляют общие шаблоны для отображения групп контента.
![](https://developer.android.com/static/images/design/ui/mobile/material-components-containment.png?authuser=6&hl=ru)
Компоненты навигации
Компоненты навигации помогают людям перемещаться по пользовательскому интерфейсу. На мобильных устройствах панель навигации или панель навигации содержат основные пункты назначения навигации. Вкладки , нижняя и верхняя панель приложения предоставляют различные способы навигации по вспомогательной информации и действиям. Узнайте больше о том, как работать с навигацией в макетах .
![](https://developer.android.com/static/images/design/ui/mobile/material-components-navigation.png?authuser=6&hl=ru)
Компоненты выбора
Компоненты выбора позволяют людям указывать выбор. Компоненты выбора позволяют пользователям контролировать и вводить свои решения независимо от того, создают ли они форму с флажками и переключателями , фильтруют с помощью чипов или переключают настройки с помощью переключателей и ползунков .
![](https://developer.android.com/static/images/design/ui/mobile/material-components-selection.png?authuser=6&hl=ru)
Компоненты ввода текста
Компоненты ввода текста позволяют людям вводить и редактировать текст. Текстовые поля позволяют пользователям вводить текст в пользовательский интерфейс.
![](https://developer.android.com/static/images/design/ui/mobile/material-components-text-input.png?authuser=6&hl=ru)
Системы дизайна для Compose
Прочтите «Системы дизайна в Compose», чтобы узнать, как использовать Compose для более плавной реализации системы дизайна и придания вашему приложению единообразного внешнего вида с помощью тем, компонентов и других аспектов системы дизайна.