最全最好用的动效落地方法（上）

最全最好用的动效落地方法（上）

• 来源:站长之家
• 更新日期:2018-07-17

摘要：用户体验设计的发展日趋完善，优秀的动效是完善用户体验中不可或缺的一环，优秀的界面动态设计可以让产品的用户体验锦上添花……一般情况下，在沟通界面动效的过程中，工程师会希望设计师使用更具体的表达方式。这里所谓「具体」的意思是：接近代码。

　　用户体验设计的发展日趋完善，优秀的动效是完善用户体验中不可或缺的一环，优秀的界面动态设计可以让产品的用户体验锦上添花……

　　你会说，这些道理我都懂，但是动效做起来真的很麻烦啊。直接切入到大家常见的问题吧：

　　一般情况下，在沟通界面动效的过程中，工程师会希望设计师使用更具体的表达方式。这里所谓「具体」的意思是：接近代码。然而同样的一套动效，在设计工具上和Web端上实现逻辑可能完全不一样。

　　没有了精确的参数描述。设计师很难跟开发解释清楚要做一个什么样的动效。而只有简单的口头描述的话、开发做起来也很痛苦，导致最终开发效率低下。以至于知乎上出现了这样的问题：在APP的开发过程中，作为设计师，如何说服程序去实现动效?

　　看到这里也许你会很抓狂。好消息是随着却越来越多优秀开源库的诞生，动效的实现也变得越来越简单。甚至以后设计师都不用说服工程师了，自己可以直接上手在端上实现动画了。举个例子San：https://baidu.github.io/san/

　　这个例子中卡片Hover动效的设计和开发都是我做的。

　　好的动效要控制在0.3~0.5秒，本例中，菜单出现几乎花费了一秒。频繁打开菜单很容易引起人的疲倦，可以说是画蛇添足了。

　　小结

　　上篇就讲到这里，本篇里面我们了解了界面动效的价值：

　　满足用户心理预期

　　引导用户注意力

　　情感化设计

　　也接触到一下优秀的界面动效实例：

　　通过动效暗示二维界面暗含的三维层级关系，及其暗含的操作逻辑。

　　引导用户的注意力向界面重点元素。

　　通过动态设计让情感化设计变得更生动。

　　动效的视觉效果统一，控制数量，不滥用。

　　在下篇中我会讲讲有哪些便捷的方式去实现这些优秀动效。其实我们平时看到的那些天花乱坠的效果，背后涉及到的设计参数非常简单，只有三个。敬请期待吧。