这些是纸片的魔法特性,真实纸片所不具备的能力:
-
纸片可以伸缩、改变形状
-
纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分
-
多张纸片可以拼接成一张
-
一张纸片可以分裂成多张
-
纸片可以在任何位置凭空出现
不过,魔法纸片有些效果是禁止的:
-
一项操作不能同时触发两张纸片的反馈
-
层叠的纸片,海报高度不能相同
-
纸片不能互相穿透
-
纸片不能弯折
-
纸片不能产生透视,必须平行于屏幕
-
空间
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区域内。
小图标