Material Design 官方动效指南
MaterialDesign最近的一次更新,对动效设计有了更多详细的讲解。...
材料设计的灵感来源于真实世界的作用力，例如重力和摩擦力。在设计中，这些作用力是通过用户对屏幕上各元素的影响方式以及这些元素互相反馈的方式体现出来的。
材料设计的动效具有以下几个特征：
一、响应式的
材料设计的动效是充满活力的，它能迅速精确响应用户用户所触发的内容。
在移动设备上的长动画大约是300-400ms，短动画大概是150-200ms。过长的动画让人感觉迟钝，过短的动画又让人没时间看明白。
显示触发元件或动作与新建卡片之间的联系
当有多个卡片要同时出现,要沿着一个清晰的方向
二、自然的
材料动效通过模仿真实世界的力来展现自然的运动过程。
在真实的世界中，一个物体的加速或减速受到重量及表面摩擦力的影响。同样的，材料设计中的元素不会突然停止或者突然启动，也都会有一个加速或者减速的过程。
真实世界中的力，例如重力，会使一个元素沿着曲线运动而非直线运动
材料是沿着一条弧线过渡的
三、可察觉的
材料的动效是可以被用户和周围其他的元素察觉的，它可以被其他对象吸引，并且恰当的回应用户的意图。
元素出现在视野中时，通过阐述他们之间关系来编排运动的方式
可以推动其他卡片，获得更大空间
元素可以吸引其他元素加入，当他们相互接近时合为一体
四、有引导意图的
材料设计的动效能使焦点在对的时间出现在对的地方。
过渡动画有助于引导用户进行下一步的交互
指南提供的参数介绍
运动可以传递不同的信号，例如，一个操作是否不可用。
动画能使用户关注特定对象
而好的动效设计应该遵从以下几点：
一、运动是快速的
一个交互动作不应该让用户付出不必要的等待。
（正确）动画一定要快，用户无须等待动画完成。
（错误）很多元素的运动太慢，会导致动画太长。
二、动画是清晰的
转场动画应该清晰、简单、一致。避免一次出现太多的动画元素。
（正确）提供进入下一个视图的清晰路径，有时甚至可以编成一组。
（错误）
多个元素往不同的方向运动或者路径交叉的话会造成转场动画的混乱。
三、动效是统一的
材料设计的动效在速度、响应方式、设计意图上要保持一致。APP 中的自定义的动效体验应该贯穿始终。
即使这些 APP 有着不同的功能，但是他们相似的动画体验让人感觉他们是有关联的。
动效的意义
动效的好处可以从以下的例子中看出：其中一个 APP 遵从这些模式，而另一个没有。
（正确）在转场的过程总，用户被引导到了下一个视图。表层的转场清晰的传达出层级关系。加载过程在后台进行，以减少延迟时间。
（错误）转场缺少一个清晰的焦点，看不出新的页面和旧的页面之间的联系。没有感觉到任何层级的关系，加载动画也太明显了，会给人延迟的感觉。
更多内容请访问官方主页查看
https://www.google.com/design/spec/motion/material-motion.html#material-motion-how-does-material-move
推荐阅读
聊聊界面设计中的基础动效原理
聊聊「动效设计」
聊聊未来设计趋势的APP UI动效
关注 新锐设计
微信扫一扫关注公众号
