Source素材站

我们期望,一旦你来到这个网站,就可以迅速找到所需的素材,然后离开,去做自己想做的事情.

新版 Material Design 官方动效指南

by matoi
标签:

Material Motion

在material design的世界中,动效用一种优雅、流动的方式来描述空间关系、功能、和意向。

 

为什么说动效很重要?

动效可以向我们展示一个app是如何构成和用途。

 

动效可以做到:

  1. 不同视图之间的焦点引导。
  2. 当用户完成了一个手势后,提示用户将会发生什么
  3. 明确元素之间的层级和空间关系
  4. 当程序在后台运行时,分散用户的注意力(例如获取内容或载入下一个视图)
  5. 润色整个app:个性化、令人愉悦

 

如何制作材料设计的动效?

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

 

材料设计的运动具有以下几个特征:

 

  1. 响应式的

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

1464151291-8850-93cc573326386ac7252631e5b7a2

在移动设备上的长动画大约是300-400ms,短动画大概是150-200ms。过长的动画让人感觉迟钝,过短的动画让人觉得难以看明白。

 

1464151291-5348-fe22573326876ac72526314f0c35

用户触摸屏幕时,通过漪涟动画能使用户确认输入。卡片上升表示该卡片处于激活状态。

 

 

1464151291-1452-b06a5733268a6ac7252631145653

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

 

 

2. 自然的

材料设计的动效通过模仿真实世界的力,而展现了自然的运动过程。

 

1464151291-8083-f0f357333c1a6ac72526310dd2c6

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

 

1464151291-1099-a80557333c2d6ac7252631debff4

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

 

1464151291-3782-d41257333c3c6ac7252631fbcdbd

材料设计的动效转场是沿着一个弧线的。

 

3. 可察觉的

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

 

1464151291-2770-3d2157333c4f6ac725263102d58e

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

 

1464151291-3342-05de57333c8b6ac7252631f106e2

卡片可以推动其他卡片,让他们给自己让开路。

 

 

 

1464151291-6149-75ca57333c9b6ac7252631cfe4b0

元素可能会吸引其他元素加入,当他们相互接近时合为一体。

 

4.有引导意向的

材料设计的动效能使焦点在对的时间聚焦在对的点。

 

1464151291-7022-a5f457333cb16ac7252631a44b52

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

 

1464151291-3371-a54f57333cbf6ac72526314f0426

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

 

1464151292-6269-aba257333cd46ac7252631fac561

动画能使用户关注特定对象。

 

 

 

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

 

好的动效设计应该遵从以下几点:

 

  1. 动效是很快的

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

 

1464151292-7655-7524573328b86ac725263122be82

正确:动画一定要快,用户无须等待动画完成。

 

1464151293-2609-5ba557333cee6ac7252631e3bc5e

错误:很多元素磨磨蹭蹭很慢的运动,另动画时长延长。

 

2. 动效是明确的

转场动画应该明确,简单,一致。应该避免一次又太多的元素动效。

 

1464151292-6310-637f57333d0c6ac72526312fb1ed

正确:保持清晰的路径进入下一个视图,最好元件都编排成一个组。

 

1464151292-9497-1398573329076ac7252631e3c75c

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

 

3. 动效是统一的

材料设计的动效是由速度、响应性、和意向所统一的。在app中的任何自定义动效体验都应该贯穿整一个app。

 

1464151292-6767-27615733290b6ac7252631538dec

即使这些app有着不同的功能,但是他们相似的动画体验让人感觉他们是有关联的。

 

 

 

动效的意义

动效的好处可以从以下两个例子中明显看出:其中一个app遵从这些模式,而另一个没有遵从。

 

1464151293-9613-166e57333d2f6ac7252631b59fd4

正确:在转场的过程总,用户被引导到了下一个视图。表层的转场清晰的传达出层级关系。loading的过程在后台进行,以减少延迟时间。

 

1464151293-4179-c50557333d406ac7252631652d84

错误:转场的发生点没有一个清晰的焦点,所以看不出来新的页面和旧的页面之间的联系。没有感觉到有任何层级的关系,loading用一个转圈的半圆表现太明显了,令人感到延迟感。

 

 

本站的素材全部来源于设计师提供和站长自己的搜集,如果其中有“不可商用”的问题请及时向站长联络。另外本站尊重素材的提供者,如果您是本素材的原作者,请联系本站,我会在第一时间署上您的姓名。Source素材筹集QQ群:527250994。

发表评论

电子邮件地址不会被公开。

DESIGN
COURSE