Material Design核心思想
就是把物理世界的体验带到屏幕,去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化和过度,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。
环境
Material 环境是一个三维的空间,这意味着每个对象都有 x , y , z 三维坐标属性,z 轴垂直于显示平
面,并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。 在网页
上,z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。
光影关系(Light and shadow) 在 material 环境中,虚拟的光线照射使场景中的对象投射出阴影,主光源投射
出一个定向的阴影,而环境光从各个角度投射出连贯又柔和的阴影。
material 环境中的所有阴影都是由这两种光投射产生的,阴影是光线照射不到的地方,因为各个元素在z轴上占据
了不同大小的位置遮挡住了这些光线。
物理特性
材料具有变化的长宽尺寸 变化的长宽尺寸(以 dp 为计)和均匀的厚度 均匀的厚度(1dp)
高度和阴影
Material design中的对象与现实生活中的对象具有相似的性质。在现实生活中,不用对象可以被堆积或粘贴起来,但是不能彼此交叉。对象自身塑造了自己的阴影并返回自己的光影。
依据这些性质所构造出来的空间模型对于用户来说是非常熟悉的,这一模型也可以被长期应用于移动应用当中。支撑这一空间模型的正是“高度”(Elevation)和“光影”(Shadows)这两个概念。
图标
注意:
不要给彩色元素加投影,层叠不超过两层
折角不要放在左上角,带投影的元素要完整展现
文字
12sp 小字提示
14sp (桌面端13sp) 正文/按钮文字
16sp (桌面端15sp) 小标题
20sp Appbar文字
24sp 大标题
34sp/45sp/56sp/112sp 超大号文字
布局
最小点击区域尺寸:48dp*48dp
栅格最小单位:8dp.一切距离大小是8dp倍数
顶部状态高度:24dp
Appbar最小高度:56dp
底部导航栏高度:48dp
悬浮按钮尺寸:56*56dp/40*40dp
用户头像尺寸:64*64dp/40*40dp
小图标点击区域:48*48dp
屏幕左右对齐基线:16dp
文字左侧对齐基线:72dp
组件
悬浮按钮有两种尺寸:56dp*56dp/40*40dp
卡片统一由2dp的圆角
Dialog中取消类操作放在左边,引起变化的操作项放在右边
菜单的当前选项始终与当前选项水平对齐
靠近屏幕边缘时,位置可适当错开
菜单过长时,需要显示滚动条
菜单从当前选项固定位置展开,不要随点击位置变化
菜单到上下留出8dp距离
tab只用来展示不同类型的内容,tab至少2项,至多6项,超出6项需要变为滚动式,左右翻页
tab文字要显示完整,字号保持一致,不能折合,文字和图标不能混用,tab选中项的下划线高度是2dp
动画
感知一个物体有形的部分可以帮助我们理解如何去控制它。观察一个物理的运动可以告诉我们它轻还是重,柔性
还是刚性,小还是大。在 material design 设计规范中,动作不止是呈现着它美丽的一面,它还意味着在空间
中的关系、功能以及在整个系统中的趋势。
动画可以做到:
不同视图之间的焦点引导。
当用户完成了一个手势后,提示用户将会发生什么
明确元素之间的层级和空间关系
当程序在后台运行时,分散用户的注意力(例如获取内容或载入下一个视图)
润色整个app:个性化、令人愉悦
重视动画效果,考虑它在现实世界中的运动规律
动画的设计要有先后顺序,起引导视线的作用
相似元素的运动,要符合统一的规律
材料设计的运动吸取了一些真实世界的力学元素,例如重力和摩擦力。这些力反应的是,用户对屏幕操作的影响,以及这些元素是如何相互反馈的。
材料设计的运动具有以下几个特征:
1. 响应式的

材料设计的动效是充满活力的。它能迅速精确响应用户用户所触发的内容。

在移动设备上的长动画大约是300-400ms,短动画大概是150-200ms。过长的动画让人感觉迟钝,过短的动画让人觉得难以看明白。
用户触摸屏幕时,通过漪涟动画能使用户确认输入。卡片上升表示该卡片处于激活状态。

2. 自然的

材料设计的动效通过模仿真实世界的力,而展现了自然的运动过程。
在真实的世界中,一个物体可以被重量、表面摩擦力影响很快的加速或减速。同样的,材料设计的动效也是不会发生突然停止,或者突然启动,都是会有一个加速度或者减速度。(红色没缓动,蓝色有缓动)

真实世界中的力,例如重力,能使一个元素沿曲线运动而非直线运动。

材料设计的动效转场是沿着一个弧线的。
3. 可察觉的

材料设计的动效是可以被周围环境察觉的,包括用户和周围其他的元素。它可以被物体吸引,并且恰当的回应用户的意图。

作为过渡元素,他们和他们周围元素的运动是精心安排的,可以通过这个过程看出他们之间的关系。
卡片可以推动其他卡片,让他们给自己让开路。

元素可能会吸引其他元素加入,当他们相互接近时合为一体。
4. 有引导意向的
材料设计的动效能使焦点在对的时间聚焦在对的点。

场动画有助于引导用户进行下一步的交互。

运动可以传递不同的信号,例如,一个操作是否不可用。

动画能使用户关注特定对象。
如何设计一个好的转场动画?
好的动效设计应该遵从以下几点:
1. 动效是很快的
一个交互动作不应该让用户做不必要的等待。


2. 动效是明确的
转场动画应该明确,简单,一致。应该避免一次有太多的元素动效。
3. 动效是统一的

材料设计的动效是由速度、响应性、和意向所统一的。在App 中的任何自定义动效体验都应该贯穿整一个App。
即使这些app有着不同的功能,但是他们相似的动画体验让人感觉他们是有关联的。
动效的意义


网友评论