]]> //www.laura-marie.com/56784.html/feed 0 //www.laura-marie.com/56240.html //www.laura-marie.com/56240.html#respond Wed, 03 Feb 2021 02:23:21 +0000

为什么叫流行趋势呢？不是我想这么叫，是大家都这么写这么叫。或者我们可以尝试用一种新的理解方式是对过去的总结和为未来的展望。

回归正题和往年一样我从追波中挑选了2019年中最流行的Shots，由于今年追波支持上传视频作品，今年挑选的600件设计作品中动效（包含GIF和MP4）246件作品，我算了下就光动效就占到总数的41%，差不多半壁江山了，或许2020年就是动效元年，动效本身就是一种设计趋势。

为什么我猜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化渐渐的流行起来。当品牌IP赋予了动效会更加真实形象，更好的传达寓意。

界面动效篇 

界面动效可以让界面更活泼生动，还可以更好传达用户与界面之间的交互情感，好的界面动效设计可以解决界面中的功能问题，让产品更容易被用户接受，能让你的应用更快、更流畅。

微交互动效

界面微交互动效会让用户体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。

图标动效

在短视频领域中图标动效运用更为广泛，在直播广场中涮礼物时有炫酷的图标动效会更加用户的炫耀感和愉悦感。当然我们在产品设计中也可以设计微动效来传达用户点击或触摸的行为动效，可以更加用户理解界面之间的转场和交互关系。

界面动效

界面动效没什么好说的，依然是动效占比最重的部分，对比初学者界面动效首先把握时间的长短，关于动效时间的学习可以学习Material design界面动效，里面都有严谨的时间规范。www.material.io/design/motion/speed.html#duration

难点在于缓动函数贝塞尔曲线Linear、Ease、Ease-in、Ease-out、Ease-in-out，转场时运用了大量的缓动函数效果都很棒。

Mg动画篇 

Mg动画

Mg动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。

行走动效

行走动效是Mg动效学习的必修课，大体分为动物人物的行走、奔跑、跳跃等形态，如果简单的行走动画只要参考动物或人的行走分步图插上关键帧就可以制作完成。

对于一些弹性的行走动画，我们那需要使用插件可以使用Puppet Tools插件利用图钉来制作骨架的工具，但因为图钉工具本身的缺陷，容易破图。DUIK插件现在普遍用在AE制作角色动画（角色动画比较硬），RubberHose插件角色动画比较软，相对更加自然。为了更好的做好人物角色动画还需要平时对人物形态更细致的观察。

Q弹动画

Q弹动画中的Q弹效果会让画面更加有趣，会让人重复欣赏不回感到腻。使用AE弹性表达式Bounce 和 Overshoot！利用这个两个表达式你可以轻而易举地实现各种弹性动画，也可以使用Ae脚本：物体弹簧弹性预设脚本 Aescripts Rubberize It，可以将你的物体图形层中的元素模拟成具有弹簧弹性效果，更符合力学！

循环动效

循环动效是为了更好的展示一个作品的自然收尾衔接，没有明显的停顿感会让欣赏者乐此不疲。所以我们在设计动效时应尽可能使用循环动效。

动效创意篇 

伪3D旋转动效

伪3D旋转动效渐渐的成为一种趋势，360度无死角旋转对角色造型有更高的要求。伪3D旋转动效也渐渐被更多的设计爱好者所喜欢，伪3D旋转动效主要使用了ae表达式进行制作对360不同旋转角度进行定型，这种动效比较新颖、很有意思百看不厌。

抖音风（魔性）

抖音风就是一种加上魔性的音乐，可以让用户无限循环进行观看。抖音风动效也是如此，光看动效画面就很魔性可以无限循环看很多篇，越看越有趣。

形变动效

形变动效的魅力就在于都是围绕主题进行展开，并且通过一定的趣味性来抓住用户的眼球，通过一些不规律的形变会让人思考它是如何实现的，是不是用了很高深的技术等，会给人留下深刻印象并尝试去思考。

跟随动效

早期的跟随动画多为网站上的鼠标跟随形变动效，现在跟随动画可以加入三维动画或使用插件Joysticks ’n Sliders可以在一个小的框框内实时反应画面的动态。

酷炫科技风

AE Trapcode插件最常用的是particular和form了，这两款粒子插件可以制作出很多酷炫的动态效果，随着科技进步上面的动态炫酷风格可适用于多媒体大屏展示或用于公司企业官网，通过粒子插件来突出企业科技感，多用户互联网公司。

三维动效（C4D）

c4d三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式会模拟真实感，未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。

动效应用篇 

字体篇

小米MIUI 11推出了“动态字体系统”，可以无级调节字体粗细，每个人都能找到自己感觉舒适的阅读字重，同时系统会根据内容不同，给予不同程度的加粗，交互细节也得到了全面提升。字体也慢慢加入动效的行业里来了。

2019年11月7日，我们将在阿姆斯特丹中央车站接管通常用于24小时广告的所有80个屏幕，以展示来自世界各地的设计师的动画设计。该网站旨在引起公众参观展览的兴趣，并鼓励设计师，工作室和艺术院校提交他们的作品。

技术本身在很大程度上依赖于我们使用Processing和After Effects创建的动画。我们使用了p5.js的Javascript来设定网站上的交互元素。可以通过鼠标输入，也可以使用手机中的陀螺仪。

插画动效

插画绘制一般都具有艺术感，插画传达的信息是否明确就显得格外重要。适当添加简单的动效，会增加插画的场景性给用户带入感。插画和动效结合起来更容易引导用户，吸引人的眼球。插画动画可以帮助用户更好的了解内容，会让用户在界面插画中寻找可交互的体验乐趣。

Ipad插画动效

 Ipad插画之所以能流行还是因为苹果公司出的ApplePencil ，用过的都说好。ApplePencil 能帮你尽情表达创意。无论你是在画水彩，进行室内设计，还是润色照片，ApplePencil 总能帮你把创想变成现实。

追波大佬Gal Shir上传的作品都是录制自己使用 Ipad插画的整个过程，从构图起形加光阴加材质，最后形成一幅美丽的插画。想学习 Ipad插画技巧更多请到Gal Shir的追波主页观看。https://dribbble.com/galshir

游戏动效

游戏动效可以很好的引导玩家操作，帮助新手引导，让玩家了解游戏规则和操作使用，好的游戏动效可以增加用户粘性。游戏动态、场景特效、角色动画对动画运动规律都有很高的要求，游戏动态demo也可以节约研发人员的时间成本和沟通效率。

Priciple高保真

Principle是一款做原型的软件。很多公司也用Principle做高保真原型，这样就可以作为最小可行性产品（mvp）,在正式开发前就进行用户调查、可用性测试。

阿里大佬Dimest的作品最具有代表性，视觉冲击力强有美感，加上创意的微交互让Priciple高保真作品独具一格。更多的高保真动效作品可以去Dimest追波主页欣赏。www.dribbble.com/Dimest

代码动效篇

GitHub是一个面向开源及私有软件项目的托管平台，GitHub是基于代码已经实现了可用的代码动效，如果工作中有类似的动效效果可用直接使用，对于设计或者产品来说公司中有这样的前端此乃大幸。愿意实现更好的用户体验中的微交互微动效花时间花精力。

最后还是要感谢程序员帮我们守住产品实现的最后一道防线，可能我们设计时会出现思考不周的情况或者理想与实践之间的冲突问题等等，程序员会用更理性的思考方式帮我们找到产品界面中的漏洞，及时调整确保产品的合理上线。

原文地址： 水手哥学设计（公众号）

作者：水手哥

 1、新闻列表互动类 

https://dribbble.com/shots/4757077-Newslist-Interactions 

这个新闻列表的互动非常顺滑，用良好的原型设计工具来创建这个应用程序原型，使其更加真实。 

2、阅读类

https://dribbble.com/shots/5284950-Reading-App-Design-Project-Interactive-2 

这是一个阅读应用程序设计，具有流畅的动画和精致的UI设计，使这个应用程序更加真实。最令人惊讶的部分是添加到购物车的微交互。超酷。 

3、液体下拉动画

https://dribbble.com/shots/2590603-Liquid-Pull-Down-UI-Animation 

这是Dribbble应用程序项目的重新设计，带有液体下拉动画，使设计更加有趣和生动。 

4、nelio食品插画

https://dribbble.com/shots/4023198-Nelio-Food-Illustrations 

5、nike+聊天界面

https://dribbble.com/shots/6289684-Nike-Chat-dark-concept 

这是Nike +聊天应用程序的聊天概念，具有深色背景和流畅的交互，使这个应用程序项目达到一个全新的水平。 

6、交互式标签栏

https://dribbble.com/shots/5982908-Interactive-animation-Tab-bar 

7、视频应用动画

https://dribbble.com/shots/6248258-Video-App-Animation 

这个视频应用交互是惊人的。整个设计流程超顺畅，色彩搭配得非常好。我肯定会使用这个应用程序。 

8、点餐动画 

https://dribbble.com/shots/5567998-interactive-animation-0144 

如果您想以有趣的方式订购一杯可口可乐，这个应用程序概念非常有趣。美丽的色彩和流畅的设计流程使得整体非常干净。 

9、Rally网页 

https://rallyinteractive.com/ 

Rally是一个小型的数字产品工作室，交互和动画非常酷，具有干净的界面和精致的色彩搭配。点击箭头以获取更多信息功能是本网站上最时尚的设计元素之一。 

10、Globekit 

https://globekit.co/ 

GlobeKit是一个可视化平台，可以将地理数据转化为令人惊叹的交互式体验。巨大的移动地球仪令人惊叹，并通过使用动画获得了很多关注。 

11、电子商务类 

https://dribbble.com/shots/6314115-Products-Page-Animation 

电子商务网站始终保持安全，特别是在其产品页面上。如果您想增加转化率和收入，此产品页面就是一个很好的例子，使用流畅的互动来展示他们的产品。 

12、开发者网站 

https://dribbble.com/shots/5999213-Developer-Website-Contacts-Page 

我不敢相信这是一个联系页面！如果我是网络开发者，我肯定会通过电子邮件发送给这个网站设西瓜非常可爱，互动使整个页面在视觉上很有趣。 

13、Apple Music 

https://dribbble.com/shots/5523931-Apple-Music 

这是Apple Music的非官方重新设计。通过在黑暗模式下绘制具有漂亮的色彩渐变和艺术家卡片的功能卡，在播放音乐时看起来更有趣。 

14、Hello World Agency Portfolio 

https://dribbble.com/shots/6339620-Hello-World-Agency-Portfolio-Website 

15、Almea解决方案 

https://dribbble.com/shots/6036333- 

这个项目太棒了，布局干净，用户界面精致，互动性强，颜色很棒。 

16、马里布兰界面

Tab bar设计中，有一个很重要但却常常会被设计师们遗漏的关键点——tab切换时的 “图标动画设计” 。

Tab Bars图标动画的作用

精彩的图标动画，对整体的设计具有画龙点睛的作用，降低tab切换时的枯燥感，提升操作的愉悦度和期待感。甚至可以通过tab的动画设计给用户传达出整个APP设计的品牌及理念。

动静对比

动态的设计丰富了图标更多可能性的表达，结合不同的动态效果表达出不同的情绪或情感。而除了情感的表达之外，最基础的作用在于动态比静态更加吸引眼球、增加视觉关注度，因此在切换tab时具有更强的视觉冲击力。

柔和与生硬

缓动的动效过度，相比于无动效的设计，在tab切换时整体的视觉感受会更加柔和、轻量。过度直接的反馈，容易造成过度生硬而不具美感。

趣味的表达

由于动效的加入，我们在设计tab切换时会变得更加多元化，而不是单纯的只是设计一个动作的反馈。在过度的时间差中，可以进行很多趣味的表达。

情绪代入

图标结合表情的设计，运用动效的设计，让整体的情绪感受更加直观。如下图案例，默认态与选中态通过前后的差异对比，点击后出现的表情惊喜，具有不一样的情绪变化。

Tab Bar 图标动画的基础类型

动画的设计是多样化的，Tab bar 图标动画的类型实际上并没有明确的划分，这里主要列举的是自己在日常浏览设计网站时的收集，以及个人认为比较常见的一些类型。我们可以基于这些常见类型的设计，对我们的设计进行再升华，从而提高整体设计的质感和趣味。

缩放动画

点击后通过一定的比例的 “缩放” 反馈，突出tab之前的变化，从而强化了tab操作的感知，提升对于操作区域的视觉聚焦。结合不同的缩放效果，可以呈现出不同的视觉感知，缩放动画大致分为线性和弹性两种类型。

线性缩放

图标在放大或缩小的过程中，使用了匀速的动画效果，整体动画一步到位、干净利落。整体视觉感知较为柔和。

弹性缩放

带有弹性缩放的tab反馈，让整体的设计更加具有趣味性，相比线性缩放也更有视觉冲击力。图标的运动规则：先从0放大到最大（数值根据实际情况设定），然後再回弹至正常大小。

透明度自然过度

让tab切换之间的过度更加自然、柔和。相比于纯静态切换只多了一层透明度变化，但却具有完全不一样的操作视觉感受。

位移

位移出现的图标会产生一定的速度感，但需要控制位移的速度，过快容易忽略中间的运动轨迹，而影响自然过度的效果。

抖动

通过图标的左右、上下快速位移或旋转形成，整体的动画效果节奏较快，具有一定的速度感。情绪表达上较为俏皮。

左右抖动

点击后，图标反馈进行上下快速位移。建议来回位移次数不太太多，控制在1-2次左右，次数太多容易显得拖沓。

跳动的图标

点击切换后，图标从底部弹起再回到初始位置，整体视觉感受具有跳动的韵律感。

晃动的图标

旋转抖动的图标比上下或左右会更加具有趣味感。设定图标的中心点或角点为旋转轴，通过来回晃动而形成的效果。

填充

切换时，默认tab由线形向面形的转变。填充类型的动画效果整体简单、直接，直观的表达出图标切换前后的对应关系。关键点在于处理好线形与面形的图标的细节转换。

中心填充

使用某种几何图形（可以是圆形或其他）通过发散放大的设计方式，结合一定的节奏韵律扩展至填满整个图标。

扫描填充

动画效果从图标的一侧，通过划动变化至填满。

画线 – 线形轨迹

以线性图标或线面图标中的线运动为主，在设计整套图标是，在运动轨迹的上需要保持统一（线的初始与结束的位置/方向等）。轨迹不一致，容易导致图标的一致性被破坏。

局部细节画线

选择图标的关键细节或图标的特征进行画设计，增强图标的特征细节，提高图标的记忆点。

整体画线

与局部细节画线基本一致，差别的点在于表达了不同的视觉感受。整体画线从视觉感受上会相对更加饱满。但需要根据图标的复杂程度而定，图标过度复杂，可能容易造成拖沓的动画效果。

结合容器

结合不同的几何形作为选中图标的当前态的背景，在背景上设计出现的动画效果。既强化了选中当前态，整体的tab切换的一致性也较高。

元素介质

设计上结合某种图形元素作为当前选中态，在切换时通过元素的位移、跳动等方式来达到tab切换的动画效果。

Tab 图标动画的组合形

除了以上单种类型的动画方式外，还可以尝试多种方式结合。通过不同的方式结合可以产生出更多的可能性，让你的设计更加具有创意和打破常规的设计。

填充 画线

填充 抖动

弹性缩放 填充

元素介质 抖动

位移 透明度

更多案例（来自dribbble）

总结

tabbar的图标动画最大的作用在于解决切换时的枯燥与单调，我们在设计时除了单纯追求动画的变化及多样性之外，更多需要思考的是什么样的动画更符合我们的设计。

本文的主旨主要是分享自己日常看到的一些动画效果，以及对收集的内容进行一个分享。实际的动画样式或者效果肯定远远不只这些，我们可以通过基础的方法再结合自己的创意发挥出更多满足自我设计的表达方式。

作者：IDfor (公众号:IDfor_all)