Material Design 是谷歌推出的一种跨平台和设备的综合性设计语言,以下为你提供一份较为详细的 Material Design 设计指南内容:
将物理世界的体验融入屏幕,去除现实杂质与随机性,保留原始纯净的形态、空间关系、变化与过渡,同时结合虚拟世界的灵活性,以达到简洁直观的效果,并且注重跨平台的一致体验。
- 材质特性:信息载体是 “魔法纸片”,它有现实中的厚度、惯性和反馈,也具备液体特性,可伸缩、变形、拼接、分裂等,但禁止互相穿透、弯折、产生透视,且一项操作不能同时触发两张纸片反馈,层叠纸片海报高度不能相同 。
- Z 轴概念:引入 Z 轴来表现元素层叠关系,元素厚度统一为 1dp ,Z 值越高,离界面底层越远,投影越重。元素默认有海拔高度,操作时会抬升,结束后回落,同种元素相同操作抬升高度一致 。
- 基础配色:一般选择一种主色、一种辅助色(非必需),并通过改变主色、辅助色的明度、饱和度构成配色方案。App bar 背景通常用主色,状态栏背景使用深一级的主色或 20% 透明度的纯黑,小面积高亮处用辅助色 。
- 透明度颜色:其余颜色通过纯黑与纯白的透明度变化来展现,如黑色有 87%(普通文字)、54%(减淡文字)、26%(禁用状态 / 提示文字)、12%(分隔线)等设定,白色也有对应透明度取值 。
- 主题色彩:支持明亮或深邃等主题色彩设定。
- 字体选择:英文字体推荐使用 Roboto ,中文字体可选用 Noto 。Roboto 有 Thin、Light、Regular、Medium、Bold 和 Black 这 6 种字重,Noto 则包含 Thin、Light、DemiLight、Regular、Medium、Bold 和 Black 共 7 种字重 。
- 样式尺寸:常见排版字号有 12sp 用于小字提示,14sp(桌面端 13sp)用于正文 / 按钮文字,16sp(桌面端 15sp)作为小标题,20sp 用于 App bar 文字等 。
- 桌面图标:尺寸为 48dp×48dp,建议模仿现实折纸效果,通过扁平色彩表现空间和光影,不可有彩色元素投影、层叠不超两层等 。
- 小图标:优先使用 Material Design 默认图标,尺寸是 24dp×24dp,图形限制在中央 20dp×20dp 区域内,线条、空隙尽量保持 2dp 宽,圆角半径 2dp ,颜色通过纯黑与纯白透明度调整 。
- 栅格系统:组件以 8dp×8dp 的基准网格对齐,排版则以 4dp×4dp 的基准网格对齐 。
- 触摸目标:最小触摸目标大小为 48dp×48dp 。
- 常见尺寸:顶部状态栏高度通常是 24dp ,App bar 最小高度 56dp ,底部导航栏高度 48dp ,悬浮按钮尺寸一般为 56dp×56dp 或 40dp×40dp ,用户头像尺寸常见 64dp×64dp 或 40dp×40dp 等 。
- 卡片设计:卡片是基于 Material Design 设计的常用方式,卡片间可能存在接缝,工具栏是专注当前页面功能操作的小卡片,而悬浮按钮是和工具栏分开的圆形卡片,它始终显示在内容和工具栏上层 。
- 动效意义:动画不只是装饰,它能表达元素、界面之间的关系,具备功能上的作用 。
- 缓和曲线:动画要贴近真实世界,需要重视 easing,也就是要有加速和减速过程,避免忽然开始、停止的匀速动画 。
- 转场动画:通过过渡动画表达界面空间与层级关系,从父界面进入子界面,子元素需抬升海拔高度并展开至全屏,反之亦然,且多个相似元素的动画要有先后次序和统一规律 。
- 细节动画:可以通过图标的变化和一些细节来达到令人愉悦的效果 。
- 持续时间:手机上典型转换时间通常是 300ms,大型复杂全屏转化需 375ms 以上,元素进入屏幕在 225ms 以上,离开屏幕在 195ms 以上,平板上的动画过渡时长比移动设备长 30%,可穿戴设备则比移动设备短 30%。