2006-04-20
2019年即将过去，我们将迎来崭新的2020年，下面我也将讲讲2020年或将流行的追波动效设计流行趋势。
为什么叫流行趋势呢？不是我想这么叫，是大家都这么写这么叫。或者我们可以尝试用一种新的理解方式是对过去的总结和为未来的展望。
回归正题和往年一样我从追波中挑选了2019年中最流行的Shots，由于今年追波支持上传视频作品，今年挑选的600件设计作品中动效（包含GIF和MP4）246件作品，我算了下就光动效就占到总数的41%，差不多半壁江山了，或许2020年就是动效元年，动效本身就是一种设计趋势。
首先追波平台今天率先支持了视频格式展示作品，包括国内的短视频平台的快速发展已经形成了N个巨头企业。
明年5G时代的到来，到时候我们的手机、电脑等硬件设备将迎来一个大的迭代，速度效率会更快，如果动效的制作成本降低，同样是设计一幅插画或制作一个短片来运营用户你会更喜欢那种形式呢，在更注重用户体验的今天短片会从视觉、听觉、触觉等多维度给用户带来极致体验。
在这样的大环境下我们也希望能有一款动效软件出现像Sketch、Figma颠覆Ps去颠覆Ae（这里只是从互联网行业协同实现层的颠覆，Adobe软件还是很强大的），从界面的简单易学和代码实现层面上去创新。现在我们来了解下追波平台的主流动效有哪些呢？
品牌动效Logo作为一种更新颖的展现方式，动态品牌图形会更容易让用户理解其寓意，当然也会具有更高的品牌辨识度。一个好的有趣的动态Logo能够让人体会到不同的情感。我们可以设计营造一个美好的故事情节，让用户更容易记住并体现我们品牌专业性。
UNFOLD是追波一个很老牌的设计团队了，他们来自美国佛罗里达州的萨拉索塔，他们将自己的设计作品做出动效作为自己的品牌来宣传，更好的体现了他们设计的专业、用心和前卫。
Firefox新品牌VI升级设计，在新的品牌架构中，Firefox浏览器与Firefox Send，Firefox Monitor和Firefox Lockwise产品相当。
新创建的产品系列由伞品牌Firefox领导。作为伞形商标的商标，Firefox的功能是基于浏览器的徽标螺旋图形。你可以将徽章标志想象为浏览器的图标，因为作为应用程序图标和菜单图标，狐狸和地球仪只剩下橙蓝色黄球。漩涡是动态的，开放的并且在视觉上吸引人。
品牌IP化是移动互联网变革下产生的，品牌IP就是品牌的“人格化”，目的是为了迎合品牌的主流人群用的一种营销手段。品牌IP主体可以是一个拟物的形象，可以表达用户情感在精神层面与用户达成共鸣。
品牌IP可以缓解品牌的周期性衰落问题，给品牌重新赋予生命力，所以品牌IP化渐渐的流行起来。当品牌IP赋予了动效会更加真实形象，更好的传达寓意。
界面动效可以让界面更活泼生动，还可以更好传达用户与界面之间的交互情感，好的界面动效设计可以解决界面中的功能问题，让产品更容易被用户接受，能让你的应用更快、更流畅。
界面微交互动效会让用户体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。
在短视频领域中图标动效运用更为广泛，在直播广场中涮礼物时有炫酷的图标动效会更加用户的炫耀感和愉悦感。当然我们在产品设计中也可以设计微动效来传达用户点击或触摸的行为动效，可以更加用户理解界面之间的转场和交互关系。
界面动效没什么好说的，依然是动效占比最重的部分，对比初学者界面动效首先把握时间的长短，关于动效时间的学习可以学习Material design界面动效，里面都有严谨的时间规范。www.material.io/design/motion/speed.html#duration
难点在于缓动函数贝塞尔曲线Linear、Ease、Ease-in、Ease-out、Ease-in-out，转场时运用了大量的缓动函数效果都很棒。
Mg动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。
行走动效是Mg动效学习的必修课，大体分为动物人物的行走、奔跑、跳跃等形态，如果简单的行走动画只要参考动物或人的行走分步图插上关键帧就可以制作完成。
对于一些弹性的行走动画，我们那需要使用插件可以使用Puppet Tools插件利用图钉来制作骨架的工具，但因为图钉工具本身的缺陷，容易破图。DUIK插件现在普遍用在AE制作角色动画（角色动画比较硬），RubberHose插件角色动画比较软，相对更加自然。为了更好的做好人物角色动画还需要平时对人物形态更细致的观察。
Q弹动画中的Q弹效果会让画面更加有趣，会让人重复欣赏不回感到腻。使用AE弹性表达式Bounce 和 Overshoot！利用这个两个表达式你可以轻而易举地实现各种弹性动画，也可以使用Ae脚本：物体弹簧弹性预设脚本 Aescripts Rubberize It，可以将你的物体图形层中的元素模拟成具有弹簧弹性效果，更符合力学！
循环动效是为了更好的展示一个作品的自然收尾衔接，没有明显的停顿感会让欣赏者乐此不疲。所以我们在设计动效时应尽可能使用循环动效。
伪3D旋转动效渐渐的成为一种趋势，360度无死角旋转对角色造型有更高的要求。伪3D旋转动效也渐渐被更多的设计爱好者所喜欢，伪3D旋转动效主要使用了ae表达式进行制作对360不同旋转角度进行定型，这种动效比较新颖、很有意思百看不厌。
抖音风就是一种加上魔性的音乐，可以让用户无限循环进行观看。抖音风动效也是如此，光看动效画面就很魔性可以无限循环看很多篇，越看越有趣。
形变动效的魅力就在于都是围绕主题进行展开，并且通过一定的趣味性来抓住用户的眼球，通过一些不规律的形变会让人思考它是如何实现的，是不是用了很高深的技术等，会给人留下深刻印象并尝试去思考。
早期的跟随动画多为网站上的鼠标跟随形变动效，现在跟随动画可以加入三维动画或使用插件Joysticks ’n Sliders可以在一个小的框框内实时反应画面的动态。
AE Trapcode插件最常用的是particular和form了，这两款粒子插件可以制作出很多酷炫的动态效果，随着科技进步上面的动态炫酷风格可适用于多媒体大屏展示或用于公司企业官网，通过粒子插件来突出企业科技感，多用户互联网公司。
c4d三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式会模拟真实感，未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。
小米MIUI 11推出了“动态字体系统”，可以无级调节字体粗细，每个人都能找到自己感觉舒适的阅读字重，同时系统会根据内容不同，给予不同程度的加粗，交互细节也得到了全面提升。字体也慢慢加入动效的行业里来了。
2019年11月7日，我们将在阿姆斯特丹中央车站接管通常用于24小时广告的所有80个屏幕，以展示来自世界各地的设计师的动画设计。该网站旨在引起公众参观展览的兴趣，并鼓励设计师，工作室和艺术院校提交他们的作品。
技术本身在很大程度上依赖于我们使用Processing和After Effects创建的动画。我们使用了p5.js的Javascript来设定网站上的交互元素。可以通过鼠标输入，也可以使用手机中的陀螺仪。
插画绘制一般都具有艺术感，插画传达的信息是否明确就显得格外重要。适当添加简单的动效，会增加插画的场景性给用户带入感。插画和动效结合起来更容易引导用户，吸引人的眼球。插画动画可以帮助用户更好的了解内容，会让用户在界面插画中寻找可交互的体验乐趣。
Ipad插画之所以能流行还是因为苹果公司出的ApplePencil ，用过的都说好。ApplePencil 能帮你尽情表达创意。无论你是在画水彩，进行室内设计，还是润色照片，ApplePencil 总能帮你把创想变成现实。
追波大佬Gal Shir上传的作品都是录制自己使用 Ipad插画的整个过程，从构图起形加光阴加材质，最后形成一幅美丽的插画。想学习 Ipad插画技巧更多请到Gal Shir的追波主页观看。https://dribbble.com/galshir
游戏动效可以很好的引导玩家操作，帮助新手引导，让玩家了解游戏规则和操作使用，好的游戏动效可以增加用户粘性。游戏动态、场景特效、角色动画对动画运动规律都有很高的要求，游戏动态demo也可以节约研发人员的时间成本和沟通效率。
Principle是一款做原型的软件。很多公司也用Principle做高保真原型，这样就可以作为最小可行性产品（mvp）,在正式开发前就进行用户调查、可用性测试。
阿里大佬Dimest的作品最具有代表性，视觉冲击力强有美感，加上创意的微交互让Priciple高保真作品独具一格。更多的高保真动效作品可以去Dimest追波主页欣赏。www.dribbble.com/Dimest
GitHub是一个面向开源及私有软件项目的托管平台，GitHub是基于代码已经实现了可用的代码动效，如果工作中有类似的动效效果可用直接使用，对于设计或者产品来说公司中有这样的前端此乃大幸。愿意实现更好的用户体验中的微交互微动效花时间花精力。
最后还是要感谢程序员帮我们守住产品实现的最后一道防线，可能我们设计时会出现思考不周的情况或者理想与实践之间的冲突问题等等，程序员会用更理性的思考方式帮我们找到产品界面中的漏洞，及时调整确保产品的合理上线。
原文地址： 水手哥学设计（公众号）
作者：水手哥
