新版MATERIAL DESIGN 官方动效指南

两天前谷ogle 新版Materialia刚刚发布 Design的官方动效指南包括三个部分：为什么动效非常重要？如何制作优秀的Material Design动效和转场动画，动效的意义。新鲜热辣收好不谢！

在Material 在design的世界里，动态效果以优雅、流动的方式描述空间关系、功能和意图。

为什么动效很重要？

动态效果可以向我们展示应用程序 是如何构成和使用的。

动效可以做到:

引导不同视图之间的焦点。

当用户完成手势时，提示用户会发生什么

明确元素之间的层次和空间关系

当程序在后台运行时，分散用户的注意力(如获取内容或输入下一个视图)

润色整个app：个性化，愉悦

如何制作材料设计的动态效果？

材料设计的运动吸收了现实世界中的一些力学元素，如重力和摩擦。这些力反映了用户对屏幕操作的影响以及这些元素是如何相互反馈的。

材料设计运动具有以下特点：

1. 响应式的

材料设计的动态效果充满活力。它能快速准确地响应用户触发的内容。

移动设备上的长动画大概是300-400ms，短动画大概是150-200ms。太长的动画让人觉得迟钝，太短的动画让人觉得难以理解。

当用户触摸屏幕时，用户可以通过涟漪动画确认输入。卡片上升表示卡片处于激活状态。

显示触发元件或动作与创建的新卡之间的联系。

2.自然

通过模仿现实世界的力量，材料设计的动态效果展现了自然的运动过程。

在现实世界中，受重量和表面摩擦的影响，物体可以快速加速或减速。同样，材料设计的动态效果也不会突然停止或启动。会有加速或减速（红色没有缓慢，蓝色有缓慢）

现实世界中的力，如重力，可以使一个元素沿曲线而不是直线运动。

材料设计的动态转场沿弧线进行。

3.可察觉的

材料设计的动态效果可以被周围环境检测到，包括用户和周围的其他元素。它可以被物体吸引，并适当地回应用户的意图。

作为过渡元素，他们和周围元素的运动是精心安排的，通过这个过程可以看出他们之间的关系。

卡片可以推动其它卡片，让它们给自己让路。

当它们相互接近时，元素可能会吸引其他元素加入。

4. 有引导意向的

材料设计的动态效率使焦点在正确的时间集中在正确的点上。

转移动画有助于引导用户进行下一次交互。

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

动画可以让用户关注特定的对象。

如何设计一个好的转场动画？

良好的动效设计应遵循以下几点：

1. 动态效果很快

交互动作不应该让用户做不必要的等待。

正确:动画一定要快，用户不用等动画完成。

错误：许多元素运动缓慢，延长了动画的长度。

2.动效是明确的

转场动画要清晰、简单、一致。一次应避免过多的元素动效。

因为动图太大，上传到网盘，请查看:http://pan.baidu.com/s/1hso2peW

正确:保持清晰的路径进入下一个视图，最好将所有组件安排成一个组。

错误：将多个元素移动到不同的方向或交叉路径，会造成转场动画的混乱。

3.动效统一

材料设计的动态效果由速度、响应性和意图统一。在应用程序中 任何自定义动效体验都应贯穿整个app。

即使这些应用程序有不同的功能，它们类似的动画体验也会让人觉得它们是相关的。

动效的意义

动态效果的好处可以从以下两个例子中清楚地看出：一个应用程序遵循这些模式，另一个不遵循。

正确：在转移过程中，用户被引导到下一个视图。表面的转移清楚地传达了层次关系。为了减少延迟时间，在后台进行了loading过程。

上一篇：第十二届文博会广田分会场引领绿色智能城市装饰生活

下一篇：超实用的图库搜索引擎+可商用的短片素材站