设计系统是可重复使用设计决策的集合,以指南、组件和模式的形式表达。该系统可以细分为最小的设计基元:例如颜色、类型或形状,它们构建成更大的复杂组件。例如,图标和文本标签构成一个按钮组件,而多个按钮和一个表面构成一个卡片。设计系统还附带一组指南,这些指南由围绕组件和模式的现有设计决策组成。
Material Design 是由 Google 开发的开源设计系统,可帮助您构建精美且以用户为中心的產品。Material 3 是 Material Design 的最新版本。
Material Design 组件
Material Design 提供了一系列代码支持的 组件,它们是创建用户界面的交互式构建块。这些组件可以根据其目的分为五类:操作、包含、导航、选择和文本输入。
操作组件
操作组件帮助人们实现目标。
Material 有多种类型的 按钮,可帮助在不同情况下定义操作和交互的优先级。从 FAB 或 扩展 FAB 用于主要操作,到支持 图标按钮 用于选择选项,以及 分段按钮 用于选择选项。
通信组件
通信组件通过 徽章 警示用户、通过 进度指示器 通知状态,以及使用 Snackbar 提供简短的处理消息,来提供有用的信息。
包含组件
包含组件包含信息和操作,包括其他组件,如按钮、菜单或芯片。大多数 Material 组件使用显式包含,使用视觉对象将相关内容和操作分组在一起:卡片、对话框、底部菜单、侧边菜单、走马灯 和 工具提示。列表 可以通过显示可见的 分隔符 来提供隐式包含或显式包含。这些组件提供用于显示内容组的常见模式。
导航组件
导航组件帮助人们在 UI 中移动。对于移动设备,导航栏 或 导航抽屉 包含您的主要导航目标。标签、底部应用栏 和 顶部应用栏 提供了不同的方式来导航支持信息和操作。详细了解如何在 布局 中使用导航。
选择组件
选择组件让人们指定选择。无论是使用 复选框 和 单选按钮 构建表单,使用 芯片 进行过滤,还是使用 开关 和 滑块 切换设置,选择组件都允许用户控制和输入他们的决策。
文本输入组件
文本输入组件让人们输入和编辑文本。文本字段 允许用户在 UI 中输入文本。
Compose 的设计系统
阅读 Compose 中的设计系统,了解如何使用 Compose 更平滑地实施设计系统,并使用主题、组件和设计系统的其他方面为您的应用提供一致的外观和感觉。