超赞！高大上的动效设计方法及流程总结

http://www.uisdc.com/v8-project-summary-animation    原文 

 

 

 

 

 

Tdstone：在设计开发的过程当中，当设计师作好了一套静态页面并且设想出N种有趣的交互动画，再交付重构还原页面的时候，因为没法提供精确的动态参数，致使沟通和制做的成本增长，并且最终的测试demo也差强人意。所以，咱们经过研究当下的动态设计趋势以及PC端的交互特征，在QQ空间V8新版中作了动态创新探索，同时总结概括出一套适于设计师表达设计概念的设计方法和流程。

这是QQ空间团队开发V8新版后总结的文章，对动态设计的总结详实且条理性强，配图也很形象，是一篇可贵的好文，相信设计师们阅读完会至关受益  : ）
同时，也推荐你们阅读： 《IOS7视觉/交互设计测试讲解》

1、流动的趋势

众所周知，早些年流行的flash主页因其酷炫的效果风靡一时。现在随着html5和css3的发展，在配合高端浏览器的使用环境下，用户能够体验到更流畅顺滑的动画效果。
同时，手机端的动态设计效果也提高了用户感知度、提升了产品的易用性;考虑到体验设计的一致性，动态设计还应兼顾跨平台和终端的拓展效果。

动态表现对传达产品功能、拓展用户的感官体验等方面起着举足轻重的做用。如：进程类演示类动画，内容再也不是从0到1的跳转，加入了动画过渡，让复杂的程序语言转化为动态视觉语言“我正在处理你的内容，请稍等”。一方面能够带给用户安全感，另外也缓解了因等待而产生的焦躁感。

2、动态设计探索

动画不仅是依赖于沉重的flash效果，或是装备精良的终端设备，咱们经过探索浏览器性能和用户对PC的使用习惯去探索动画的可拓展性，让用户体验更加顺畅。 首先咱们对鼠标不一样行为状态进行分解，以拓展在网页中可能产生的交互行为。

经过对比分析咱们发现，在PC端用户经过鼠标的通过、单击、拖动等交互方式来触发事件，与目标对象产生互动。移动端自身的硬件能够支持包括手势操做、重力、光线、距离感应器等功能，人机互动的形式也变得更加有趣，拓展了用户的操做维度。

咱们将交互过程拆分为：交互对象+交互行为+交互反馈。在结合PC端的自身特色的基础上，对QQ空间作了以下动态创新探索：

 A、可视化你的操做
将操做行为与页面反馈结合在一块儿，以加强用户对操做行为的感知度。以feed中点“赞”的操做为例。

 

同时，咱们将动画内容作了数据转化，用于解释不一样属性在对应时间内的参数变化。便于重构和开发理解动画内容，以保证动画效果能够完美还原。

点“赞”速度变化：启动时有必定的初始速度，陡升曲线代表迅速到达最高峰，在到达结束点的过程当中，速度逐渐放缓。不透明度变化：初始时为0，目标不可见，随着速度到达顶峰时变为100，此时目标完整可见。 恰到好处的动态效果能够给用户带来更平滑、柔和的体验。咱们应洞察用户心理的细微变化，让切换效果更符合用户预期。

B、访客与主人间的动态互动方式
访客登录好友主页后，一般只能经过留言或回复好友动态的形式互动。简单的文字或表情类的交流过于乏味，缺乏贴近生活化的肢体性的互动方式。咱们的设计方案旨在丰富用户间的交流方式，促使用户产生更生活化的话题。

B-1 访客与主人的趣味互动“捏耳朵”
当用户进入主人页面时，能够看到头像上有一个耳朵形态的帽子，用户能够将鼠标滑到帽子上进行拉伸耳朵的操做。

主人会看到一条信息：XXX捏了个人耳朵。

此设计内容包括并不限于能够拉伸、转动等操做，具备很强的拓展性。互动内容包括并不限于捏耳朵，咱们还拓展了波流苏、转动足球等的互动方式。与帽子互动后可生成信息，如XXX捏了你的耳朵，XXX转动了你的足球等，互动后以动态或通知类的信息反馈给用户。

B-2 亲子类图片的趣味互动
当用户打开亲子类图片时，识别出儿童的脸部位置或以前用户标识出的脸部位置。

当鼠标hovering到儿童脸部时，鼠标变成手形或者心形，用户能够对儿童的脸作互动操做，如手形的话，能够抚摸和捏儿童的脸部；若是是嘴形的话，能够亲儿童的脸部；以上操做行为结束后，也会生成一条评论，如：某用户捏了一下孩子的脸，某用户亲了一下孩子的脸。

3、如何实现你的创意

这些概念设计在初期须要经过“动态转化”生成可预览文件便于后期程序开发。接下来为你们介绍一款提高动态设计表达能力的软件Adobe After Effects，能够把它理解为动态的PS，它是一个表达你“流动”概念的设计工具。它不须要编程，能够自由设置尺寸，操做界面直观通用。
在这里，咱们如下面动画为例，从素材准备、逻辑整理、动态设计及优化、发布设置来说解关键的制做流程。

0一、 准备阶段：在PS中分好图层,将须要作动画的图层进行分解，梳理好图层间的先后关系。

0二、逻辑整理阶段：在开始着手制做前，这一步相当重要！它能够帮你梳理动画间的流动层 次,估算制做的难度成本，是否须要插件来辅助完成等。

0三、动态设计阶段：使用基本工具实现动态效果。对于这个动画案例，咱们需用到AE中最基础的 功能：position、scale、opacity（下图左），具体的制做步骤这里不作赘述。你们能够去百度一下相关的AE基础教程。

0四、 体验优化阶段：为达到最优化的体验效果，动态体验设计须要不断打磨推敲。必要时须要重 新回归到PS中，对素材进行调整，以便更好的配合动态设计。在AE中为了使动画更顺滑、有 层次感，软件提供了参数化的控制工具，在这里能够对动画速率和加速度等进行调整。（上图右）

0五、 发布阶段，这里为你们介绍两种输出方案。

A: 在file – export中输出swf格式。首先在composition settings中设置输出文件大小，帧率建议保持在15-20帧，这样的文件相对较小且保证了画面流畅度。而后在swf settings中设置jpg品质，图像品质决定了你的文件大小，这里建议设为5。在下方的options勾loop continuously，可让你的swf文件一直循环播放。最后点击OK输出便可。

B: 输出gif图片。首先在composition – make movie中输出avi格式。而后在PS中的文件-导入视频帧到图层，最后在PS中输出gif图。

gif与swf的区别在于前者文件较小，可是画面会有不少噪点；后者文件较大，画面基本没有损失。所以你们能够根据画面内容选择输出的格式，如：灰度图作动态演示时能够输出gif格式；若是画面色彩比较丰富，建议输出swf格式，而后经过swf品质设置，调整swf品质设计以达到最优效果。

4、小结

咱们彷佛已经习惯了“动态的世界”，动画以其独特的魅力愉悦了咱们的感官体验。可是目前尚未相对科学完整的动态设计规范；所以，在保持“流动”思惟的同时，要思考为何须要它、什么时候须要出现它，如何保证它的一致性与可拓展性等。动画是为了解决某种功能需求而存在的，最重要的是它必定要服从用户体验。

原文地址：isux.tencent做者：Tdstone