Android UI 设计规范_ui设计规范手册

这些是纸片的魔法特性，真实纸片所不具备的能力：

• 纸片可以伸缩、改变形状

• 纸片变形时可以裁剪内容，比如纸片缩小时，内容大小不变，而是隐藏超出部分

• 多张纸片可以拼接成一张

• 一张纸片可以分裂成多张

• 纸片可以在任何位置凭空出现

不过，魔法纸片有些效果是禁止的：

• 一项操作不能同时触发两张纸片的反馈

• 层叠的纸片，海报高度不能相同

• 纸片不能互相穿透

• 纸片不能弯折

• 纸片不能产生透视，必须平行于屏幕

• 空间

Material Design引入了z轴的概念，z轴垂直于屏幕，用来表现元素的层叠关系。z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。这里有一个前提，所有的元素的厚度都是1dp。

所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。

注意：这不止是设计中的概念，开发人员确实可以通过一个值来控制元素的海拔高度和投影。

2.3 动画

Material Design 重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。

• ** easing **

动画要贴近真实世界，就要重视 easing。物理世界中的运动和变化都是有加速和减速过程的，忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing，要先考虑它在现实世界中的运动规律。

• ** 水波反馈 **

所有可点击的元素，都应该有这样的反馈效果。通过这个动画，将点击的位置与所操作的元素关联起来，体现了 Material Design 动画的功能性。

• ** 转场效果 **

通过过渡动画，表达界面之间的空间与层级关系，并且跨界面传递信息。

从父界面进入子界面，需要抬升子元素的海拔高度，并展开至整个屏幕，反之亦然。

多个相似元素，动画的设计要有先后次序，起到引导视线的作用。

相似元素的运动，要符合统一的规律。

• ** 细节动画 **

通过图标的变化和一些细节来达到令人愉悦的效果

2.4 颜色

颜色不宜过多。选取一种主色、一种辅助色（非必需），在此基础上进行明度、饱和度变化，构成配色方案。

Appbar 背景使用主色，状态栏背景使用深一级的主色或20%透明度的纯黑

小面积需要高亮显示的地方使用辅助色。

其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。

黑色：[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线]

白色：[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]

2.5 图标

• ** 桌面图标 **

桌面图标建议模仿现实中的折纸效果，通过扁平色彩表现空间和光影。注意避免以下问题：

• 不要给彩色元素加投影

• 层叠不要超过两层

• 折角不要放在左上角

• 带投影的元素要完整展现，不能被图标边缘裁剪

• 如果有折痕，放在图片中央，并且最多只有一条

• 带折叠效果的图标，表面不要有图案

• 不能透视、弯曲

• ** 小图标 **

优先使用material design默认图标。设计小图标时，使用最简练的图形来表达，图形不要带空间感。

活动区域

修饰区域

小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。

小图标同样有栅格系统。线条、空隙尽量保持2dp宽，圆角半径2dp。特殊情况相应调整。