聊聊那些令人愉悦动画效果.pdfVIP

聊聊那些令人愉悦的动画效果 由于静态图片传达信息的有限性 ，很多动态效果需要设 师通过添加设 说明并配合口述才能表达 。这样做的优点是节约时间 ，有助于实现快速迭代 ，成本较低 ；但这样做的缺点是不够直观 ，很多 细节存在于设 师自己的心中 ，仅通过静态图片和叙述没有办法完整地传达 ，冗长的设 说明让人 丧失耐心 ，设 师心中的画面 ，往往到了开发时被理解成了另外的样子。 设 师内心的动画 因此 ，在时间较为充裕的前提下 ，很多设 师开始尝试输出动态设 稿 ，以求将自己的设 理念用 更加直观且更吸引人的方式展现出来。 （网页动态设 稿案例 ） （移动应用动态设 稿案例 ） 在进行动画效果设 的过程中 ，会涉及到怎样的思考 ，应该如何做出妥善的决策呢 ，笔者收集了一 些案例 ，希望能和大家交流讨论。本文将会先从从流畅、适度、惊喜这三个角度展开。 一、 流畅 平滑清晰的动画总是受欢迎的 ，相反 ，一卡一顿的模糊动画使人感到烦闷。 V S 那么怎样才能输出流畅清晰又便于展示的动态设 稿呢 ？ 下面介绍一种dribbble设 师们常用的输出方法 ： ① 使用Af t er Ef f ect s编辑动态效果并渲染输出成Q uickT ime文件 ② 将Q uickt ime文件导入Phot osho p中 ，选择文件→保存为Web格 →GIF ，并调整输出设置 ，可 参考下图 ： ③ 点击保存 ，流畅又清晰的gif 就导出啦 ：） 本案例参考设 师D sh的Dribbble主页 ： ht t p://dribbble.co m/D sh 本文案例中的A E源文件模板请戳 ：ht t p://dribbble.co m/shot s/1089895- UI8- Present t io n-Templ t e 其他设 师A E源文件下载 ：ht t p://dribbble.co m/shot s/1187158-iO S-7- nim t io n- e-give w y 再分享一个移动端手势合集 ，可以帮助设 师在动画中直观的表达触发动画的交互方式 ：ht t p:// reusw de.co m/preco mposed-t o uch-gest ures/ 二、适度 中国有句古话 ，过犹不及。 动画固然高端洋气酷炫帅毙 ，但也不是越多越好 ，设 得越复杂越讨人 喜欢。动画效果的滥用也会让用户产生眩晕感 ，失去聚焦点 ，甚至产生厌烦和抵触的情绪。 ① 在不影响性能和响应度的前提下设计动画 如果动画影响到了性能和响应度 ，那就变成了累赘 ，不仅不能提升用户体验反而成了让人恼火的 存在。这时 ，要么想办法改进为轻量的动画 ，要么干脆不要。 ② 权衡开发成本 越独特的动画 ，往往开发成本也越大。设 动画效果之前 ，先明确自己这样设 的目的 ，可以反问 自己这样的目的是否一定需要使用动画的方式才能达成良好的效果 ， 若确实需要 ，又能否优先采用 开发容易实现的效果来达到同样的目的。建议和开发同事一起探讨设 思路 ，权衡成本。 ③ 重复多次出现的动画越短越简单越好 再美的东西 ，看多了也容易审美疲劳。使用非常频繁的操作 ，不建议使用过于绚丽的动画效果 ，如 果的确需要动画作为平滑过渡 ，推荐使用较为基本的干扰较小的动画。另外 ，当长时间的等待无法 避免时 ，可以考虑让等待时出现的内容具有一定的随机性。 ④ 若非特殊情况需要 ，动画效果应保持在舒适度范围内 ，避免眩晕和干扰 一些f l sh网站 ，设 得非常炫 ，初看让人印象深刻 ，但却难以留住用户。页面的动画元素太多 ，使 人眼花缭乱 ， 丧失焦点 ，不知所措 ，新鲜感一过 ，就再也不想看了。 在设 时 ，可以通过控制动画出现的时机 ，触发方式和影响范围来避免这类问题的发生。譬如在一 些网页的设 中 ，滚动到特定区域才会触发特定内容区域内的动画 ，动画效果显示完毕后 ，只会在 下次刷新并滚动到相应位置时 ，才会再次出现。 三、 惊喜 惊喜通常是意料之外 ，情理之中的。抓准时机 ，设 巧妙的动画够能提升产品体验 ，增加趣味性 ， 在给用户带来惊喜的同时为产品目标服务。如何激发用户探索的兴趣 ，让用户产生成就感 ，提供超 出用户预期的愉悦体验 ，是设 时需要思考的方向。 我们在使用微信的时候会留意到 ，当发送特定关键词时会触发微信背景某些绚丽特效。这些效果不 是固定的 ，特殊的日子会有新的彩蛋 ，经常能带给我们一些惊喜。 游戏中往往会设置不同关卡和成就 ，有小有大 ，当玩家一个个达成的时候 ，会获得一定的