大厂出品！10个值得学习的动效案例设计

微动效在产品设计中的运用已经非常普及了，无论是个值在图标还是界面场景中，都运用得很普遍。案例通过动效的设计辅助不仅可以提升设计情感化，也能解决更为复杂的大厂得学动效交互场景 ，让设计更惊艳。出品

最近在体验一些产品的个值过程中 ，黑马哥也发现了几个借助动效表达的案例设计方案，效果十分的设计惊艳，分享出来和大家一起学习一下。大厂得学动效

一 、出品3D 动效呈现会员等级

会员中心通常会通过 3D 图标来助力会员等级设计，个值除了静态的案例表达也会通过动效和新颖的交互形式呈现 ，以此提高会员中心的设计视觉表现力。

最近在体验腾讯视频 APP 时 ，会员专区在表现用户会员等级的设计中，没有使用传统的徽章形式，而是以 3D 数字结合动效的形式表达 。3D 动效的设计使得会员等级区别于常规形式 ，更有吸引力。

二 、情感化 IP 提升搜索关注度

IP 形象是成就品牌的关键因素之一，被广泛运用到产品感官体验的设计中，带来的情感化共勉也是显而易见的 。

在使用悟空浏览器 APP 时，启动产品进入首页后搜索框上方出现悟空的 IP 形象，悟空呈现出左右环顾 、上下打量，最后看向搜索框的系列动作等表现。不仅提高了搜索功能的关注度，也使得产品设计更具情感化 。

三、结合场景的情感化动效

根据不同的业务场景进行设计表达，可以更好的服务目标用户，而情感化的设计提升，可以拉近产品与用户之间的亲和力。

为了降低用户等餐过程中出现的负面情绪，饿了么 APP 下单之后在详情页中根据点餐的不同设计了情感化的动效表达 。无论是快餐还是冷饮等
，都针对性地设计了微动效的元素，以此来表现当前状态 。

四、3D 空间感的 Banner 设计

通过突出设计
、交互、布局结构等的创意性
，可以使得 Banner 具备更强的差异化，以此来突出 Banner 的存在感 。

腾讯视频 APP 首页的 Banner 布局也会经常呈现出一些很有创意的方案
，比如之前体验到一个结合 3D 空间感营造的设计案例 ，就非常有吸引力。通过动态过度到立体空间，再恢复到默认形式，这个动态的过程演变就能让用户过目不忘 。

五、通过动效引导用户操作

针对一些使用频次不高或者过于隐藏的功能 ，为了提高用户的操作概率
，会通过一些特殊的设计表达来提升用户的关注度 ，引导用户进行相关操作。

比如麦当劳 APP 首页中，为了吸引用户下拉进入二层楼
，通过动效的形式设计了一个摇摆的铃铛 ，以此来吸引用户的注意力。用户看到像是随风飘动的铃铛，就会忍不住去拉动，这就达到了引导用户操作的目的
，提高了二层楼内容的曝光度。

六、微动效引导 VIP 续费

针对一些无法通过占比面积进行突出的元素 ，运用微动效的形式设计是常见的设计手法。

网易云音乐 APP “我的”板块中，为了突出 VIP 续费按钮 ，黑胶唱片以动效的形式在按钮中来回滚动 ，以此强化续费按钮的关注度。

七、动态还原实时天气

天气类产品从简单的静态预告升级为动态实时还原
，可以让用户更加直观的判断天气变化，也能提高界面设计的感官体验。

比如 iPhone 自带的天气 APP
，以动态还原实时天气作为界面背景 ，不仅便于用户识别天气，也使得产品设计更具情感化体验。

八、动态 IP 引导按钮设计

按钮设计样式可以发挥的空间很大 ，除了在造型 、配色 、空间感等方面突出设计以外，也能通过按钮微动效或者动态引导等形式强化。

比如智行火车票 APP “抢票”板块中
，为了突出“添加抢票”按钮的存在感
，以动效 IP 引导进行设计。不仅使得按钮更突出
，设计感也显得俏皮可爱 ，凸显亲和力。

九 、微动效赋予品牌活力

立足于品牌做设计是突出产品差异化的关键，这也是产品设计未来的演变趋势之一，如何提高品牌的曝光度和记忆度，成为设计师不断探索的方向  。

最近在使用夸克 APP 时 ，微动效赋予品牌 LOGO 的活力感让人印象深刻。在众多特殊节庆等时间段，夸克也会以动效的形式赋予品牌更多变化，不仅使得产品更具年轻化属性 ，也能更好的传递品牌基因
。

小结

动效使得产品具备更多的变化 
，也能辅助解决更多复杂功能的交互场景
，探索动效的场景运用可以提升设计灵感，希望本期的分享可以带给大家更多设计灵感  。本文描述属于个人体验总结，不足之处我们努力改进。

黑马青年