中文版来了！新版Material Design 官方动效指南 - 巅云建站 - taishanly.com

编者按：前两天Google 刚宣布了新版Material Design 官方动效指南，明天@平行煎餅 就给大师带来了中文版！全文包含三个局部：为甚么说动效很主要？若何建造优异的Material Design动效及转场动画，动效的意思。新颖热辣收好不谢！

在Material design的天下中，动功效一种文雅、活动的体例来描写空间干系、功效、和动向。

为甚么说动效很主要？

动效力够向咱们揭示一个App 是若何组成和用处。

动效力够做到：

1. 差别视图之间的核心指导。
2. 当用户完成了一个手势后，提醒用户将会产生甚么
3. 大白元素之间的层级和空间干系
4. 当法式在背景运转时，分离用户的注重力（比方获得内容或载入下一个视图）
5. 润饰全部app：特性化、使人愉悦

若何建造资料设想的动效？

资料设想的活动吸收了一些实在天下的力学元素，比方重力和磨擦力。这些力反映的是，用户对屏幕操纵的影响，和这些元素是若何彼此反应的。

资料设想的活动具备以下几个特点：

1. 呼应式的

资料设想的动效是布满活气的。它能敏捷切确响利用户用户所触发的内容。

在挪动装备上的长动画约莫是300-400ms，短动画大要是150-200ms。太长的动画让人感受痴钝，太短的动画让人感受难以看大白。

用户触摸屏幕时，经由进程漪涟动画能利用户确认输出。卡片回升表现该卡片处于激活状况。

显现触发元件或举措和建立出的新的卡片之间的接洽。

2. 天然的

资料设想的动效经由进程仿照实在天下的力，而揭示了天然的活动进程。

在实在的天下中，一个物体能够被分量、外表磨擦力影响很快的加快或加速。一样的，资料设想的动效也是不会产生俄然遏制，或俄然启动，都是会有一个加快度或加速率。（白色没缓动，蓝色有缓动）

实在天下中的力，比方重力，能使一个元素沿曲线活动而非直线活动。

资料设想的动效转场是沿着一个弧线的。

3. 可发觉的

资料设想的动效是能够被四周情况发觉的，包含用户和四周其余的元素。它能够被物体吸收，并且得当的回利用户的企图。

作为过渡元素，他们和他们四周元素的活动是经心支配的，能够经由进程这个进程看出他们之间的干系。

卡片能够鞭策其余卡片，让他们给本身闪开路。

元素能够会吸收其余元素插手，当他们彼此靠近时合为一体。

4. 有指导动向的

资料设想的动效力使核心在对的时候聚焦在对的点。

转场动画有助于指导用户遏制下一步的交互。

活动能够通报差别的旌旗灯号，比方，一个操纵是不是不可用。

动画能利用户存眷特定东西。

若何设想一个好的转场动画？

好的动效设想应当顺从以下几点：

1. 动效是很快的

一个交互举措不应当让用户做不须要的期待。

准确：动画必然要快，用户不必期待动画完成。

毛病：良多元素磨磨蹭蹭很慢的活动，令动画时长耽误。

2. 动效是大白的

转场动画应当大白，简略，分歧。应当避免一次有太多的元素动效。

因为动图太大，上传到网盘，费事大师检查：http://pan.baidu.com/s/1pLGM0en

准确：坚持清楚的途径进入下一个视图，最好元件都编排成一个组。

因为动图太大已传，单击可见：http://taishanly.com

毛病：多个元素挪动到差别的标的目的或穿插途径，会形成转场动画的紊乱。

3. 动效是同一的

资料设想的动效是由速率、呼应性、和动向所同一的。在App 中的任何自界说动效休会都应当贯串整一个App。

即使这些app有着差别的功效，可是他们类似的动画休会让人感受他们是有接洽干系的。

动效的意思

动效的益处能够从以下两个例子中较着看出：此中一个app顺从这些形式，而另外一个不顺从。

准确：在转场的进程总，用户被指导到了下一个视图。表层的转场清楚的转达出层级干系。loading的进程在背景遏制，以削减提早时候。

毛病：转场的产生点不一个清楚的核心，以是看不出来新的页面和旧的页面之间的接洽。不感受到有任何层级的干系，loading用一个转圈的半圆表现太较着了，使人感应提早感。

「2016年设想趋向」

1. 设想篇：《再作印证！2016年网页设想范畴11个风行趋向展望》
2. 电商网站篇：《不学就后进咯！2016年电商设想的9个热点趋向（附案例）》
3. 插画设想：《画出个将来！帮你梳理2016年网页插画设想趋向》

原文地点：google.com
译者：@平行煎餅

【巅云建站 首创文章 投稿邮箱：2650232288@qq.com】

================对于巅云建站================
“巅云建站uisdc.com“是国际人气最高的网页设想师进修平台，专一分享网页设想、无线端设想和PS教程。
【特点保举】
设想师须要读的100本书：史上最全的设想师图书导航：http://www.taishanly.com//book/。
设想微博：具备粉丝量112万的人气微博@优异网页设想 ，接待存眷获得网页设想资本、下载顶尖设想素材。
设想导航：环球顶尖设想网站保举，设想师必备导航：http://www.taishanly.com/