origami学习碎碎念 #0

# 逐帧切分

学做动效的过程中,学习理论和掌握基本的工具使用方法只是一个起点。对于我而言,更多的时间花在观察各种现有的ui动画并且思考如何模仿以及如何与已有理论联接到一起。在此基础上对于相似动画效果有针对性的观察与思考后,自行设计动效以及优化参数都有更好的起点。

建议把看中的动效(通常都是gif或视频)通过工具(有在线的)逐帧切分,手动一张张图播放观察效果。在观察过程中,逐渐把看似抽象的动画分解为layer的缩放位移形变等等诸多参数化的变量以及这些变化之间的时间和逻辑关系。在此过程中,越是自己欣赏的动画效果,就有越是有必要还原到各种理论上思考自己喜欢这种动效的原因——是因为充分传达了信息之间的关系?还是因为拟物带来的真实?一些小细节给人带来趣味感?

虽然对于动效学习而言多动手多看教程有好处,可是如果不能不断思考反复审视自己设计的原因,可能陷入亦步亦趋的困境中。


#分析角度小结

——情感  这个动画是否有某种趣味性?这个动效的给人一种怎么样的感受?

——功能性  这个动画效果有什么实质上的功能?是信息传达,还是界面过渡抑或是状态展示或还是其他什么功能。大多数动效都存在不同层次上的功能,同一个功能表面看来只是拓展空间或者面板出现的方式,实质上却存在着对于信息层次和从属的隐喻。

——为什么这个动画必须如此?模拟真实的效果?分镜头技巧(感觉很多动画之所以流畅是因为使用了某种镜头运动技巧而不仅仅强调逻辑)?是对于什么事物运行状态模拟(可以是真实的也可以是“material”)?

——我的视线如何变化与追踪?动效是否太过于跳脱? 动画持循时间是否太长?是否在此过程中有过多不可预期感以及变化过多。更偏向于交互与人机界面的动画必定更为偏向于使用而非单纯的展示,因此恰到好处的传递信息尤为重要。

——场景  尤其对于一些常用功能,某些较为华丽的动画效果反而会造成时间与认知负担... 以及,这个效果如果有一些依赖条件——那么这些依赖条件是否能够满足。假如同一个app中有很多动效需要设计,能否适当拆分归类后统一进行设计。


#调试,调试,再调试

我不知道其他人如何制作动效,至少我在每次做动效都要需要花费不少时间持续调节参数并且观察变化是否能达到预期。可能是因为经验不足,更可能是因为动效本身的特性。非常建议在使用origami这类工具时最好想办法把变量专门用各种podcast以及splitter进行处理...更重要的是,最好找个简单的小工具(无论是纸笔还是什么)记录下已经尝试过的变量.... 因为有时候调试动画真的就是在做排列组合反复尝试。(多保存几个版本也是一个方法......


#草图,切图,完成稿

为了避免在实际的动效制作过程中发现自己的想法过于不可靠,最好实现画上几个草图把动效变化的几个阶段和基本的变化逻辑都理清。在理清这些要素以后才能开始切图以及规划如何实现出这些效果.... 有针对性的规划和切图能提高动效制作效率..毕竟动效本身不是实际的程序不需要过于纠结。




评论

此博客中的热门博文

关于产品设计 #这是个巨大的坑

书单 披着用户研究的皮却有着一颗好奇心(更新20140919

设计工具吐槽 之 protopie