材料设计Material Design
你可能会说
安卓手机那种风格，卡片有层次、按下去有涟漪。
Material Design 是 Google 推出的一套跨设备界面设计系统它用颜色、组件、表面层级和动效统一 Android 与其他平台上的界面体验。实际项目应参考当前版本和所用平台的组件，不必照搬早期纸张隐喻或固定配色。
左右滑动查看完整示例
演示状态配送任务路线与进度示例
示例ROUTE 08 · 杭州西签收进度示例到达时间待确认
!
待派发任务需要安排司机
即将出发查看全部
ROUTE 12 · 滨江司机已确认时间待确认
ROUTE 15 · 余杭等待派单时间待确认
ROUTE 19 · 钱江新城装车完成时间待确认
＋新建派单
设计原则 · Principles
- 用表面层级和阴影说明元素的前后关系
- 点击反馈要及时，让用户知道操作已经发生
- 每个区域只突出真正重要的主要动作
- 为主色、强调色和状态色分配清楚职责
- 动效用于解释元素从哪里来、将到哪里去
什么时候用
- Android 和跨端应用，需要成熟的组件体系可参考 Android 平台的组件与交互规范
- 表单较多的产品，需要一致的字段和状态规范邮箱
you@example.com浮动标签可明确字段名称与输入状态 - 卡片信息流，用表面层级组织内容AB
- 需要动态主题时，参考 Material You 的颜色体系→
什么时候不用
- 同时使用过多阴影层级，界面显得复杂
- 强调色覆盖所有元素，失去真正重点＋✎按钮链接
- 一屏出现多个同等重要的悬浮主按钮＋✎★
- 只复制颜色和涟漪效果，不理解组件体系紫色按钮玫红按钮
发展历程 · History
2014.06
Google I/O 发布
Google 发布 Material Design，以纸面隐喻、动效和组件规则为 Android 及其产品提供了统一的设计系统参考。
2015—2017
Google 产品陆续采用
Gmail、日历、地图等产品陆续更新，Material 的组件与实现资源也逐步完善，并被用于多种平台。
2018
Material Theming
开放品牌定制：形状、色板、字体都能换，回应「所有 App 长得一样」的批评。
2021
Material You
Android 12 引入动态取色，可基于壁纸生成系统配色。
组成结构 · Anatomy
内容层浮层
品牌主色示例
＋
按钮
间距尺度
用容器、位置和适度阴影说明谁覆盖谁；强度按组件关系调整
为品牌、状态和主要操作分配稳定的颜色职责，并在不同背景上测试可读性
悬浮按钮可用于高频发起动作；不是每个页面都必须出现
点按反馈可从触点向外扩散，用于提示操作已被接收
建立可复用的间距与尺寸关系，并允许内容、语言和无障碍需求带来例外
AI 提示词 · Prompt
做一个配送调度应用，用户能查看路线状态、处理待派发任务并新建派单。使用一致的组件、清楚的状态反馈和有意义的层级；颜色、阴影和悬浮操作按任务需要选择，不要套旧版固定样式。只接入项目现有的路线、任务和状态字段，缺少数据时显示明确空状态。
典型使用场景
Material 物流调度
左右滑动查看完整示例
待执行路线8 条
08
杭州西18 / 22 已签收
16:4012
滨江3 / 18 已签收
18:1015
余杭等待司机确认
待派发＋
Material 文章卡片页
左右滑动查看完整示例
Material 登录表单
左右滑动查看完整示例
Material 底部导航与 Snackbar
左右滑动查看完整示例
延伸阅读 · 权威出处