材料设计Material Design
设计风格用层级、色彩和动效建立一致的界面规则
Material Design 是 Google 推出的设计系统，通过表面层级、颜色、组件和动效组织跨设备界面。实际项目应根据当前版本和平台组件使用，不必机械照搬早期纸张隐喻或固定配色。
LIVE OPERATIONS今日配送12 条路线正在执行
92%ROUTE 08 · 杭州西18 / 22 已签收预计 16:40 抵达
!
2 件待派发需要安排司机
即将出发查看全部
ROUTE 12 · 滨江司机已确认17:10
ROUTE 15 · 余杭等待派单18:00
ROUTE 19 · 钱江新城装车完成18:25
＋新建派单
设计原则 · Principles
- 用表面层级和阴影说明元素的前后关系2dp8dp16dp
- 点击反馈要及时，让用户知道操作已经发生确定
- 每个区域只突出真正重要的主要动作✎
- 为主色、强调色和状态色分配清楚职责主色定调＋强调色点睛
- 动效用于解释元素从哪里来、将到哪里去新建→
什么时候用
- Android 和跨端应用，需要成熟的组件体系安卓原生语言，组件库开箱即用
- 表单较多的产品，需要一致的字段和状态规范邮箱
you@example.com浮动标签：它的经典发明 - 卡片信息流，用表面层级组织内容AB
- 需要动态主题时，参考 Material You 的颜色体系→
什么时候不用
- 同时使用过多阴影层级，界面显得复杂
- 强调色覆盖所有元素，失去真正重点＋✎按钮链接
- 一屏出现多个同等重要的悬浮主按钮＋✎★
- 只复制颜色和涟漪效果，不理解组件体系紫色按钮玫红按钮
发展历程 · History
2014.06
Google I/O 发布
纸墨隐喻 + 涟漪 + FAB，Android 第一次有了统一的设计语言，终结了「每个 App 各长各样」。
2015—2017
铺满 Google 全家桶
Gmail、日历、地图全面翻新，Material 成为跨端默认，组件库生态成熟。
2018
Material Theming
开放品牌定制：形状、色板、字体都能换，回应「所有 App 长得一样」的批评。
2021
Material You
Android 12 动态取色：界面颜色跟着壁纸走，一套系统千人千色。
组成结构 · Anatomy
2dp16dp
主色 Indigo 500
＋
按钮
8dp 网格
1海拔阴影Elevationz 轴高度决定阴影深浅：卡 2dp、FAB 6dp、对话框 24dp
2大胆主色Primary ColorApp Bar 与品牌面大面积铺主色，经典值 Indigo 500
3强调色 FABAccent & FAB一枚对比色悬浮按钮，每屏只做最重要的一件事
4墨水涟漪Ink Ripple点按反馈从触点荡开，是 Material 的招牌微交互
58dp 网格8dp Grid所有间距与尺寸对齐 8 的倍数，版式自带秩序
AI 提示词 · Prompt
Material Design 界面，indigo 主色 + 粉色强调色，卡片海拔阴影，FAB 悬浮按钮，涟漪反馈，material design, elevation shadows, floating action button, ink ripple, bold primary color with accent典型使用场景
Material 物流调度
待执行路线8 条
08
杭州西18 / 22 已签收
16:4012
滨江3 / 18 已签收
18:1015
余杭等待司机确认
待派发＋
Material 文章卡片页
Material 登录表单
Material 底部导航与 Snackbar