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

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

一、出品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 的活力感让人印象深刻。在众多特殊节庆等时间段，夸克也会以动效的形式赋予品牌更多变化 ，不仅使得产品更具年轻化属性，也能更好的传递品牌基因
。

小结

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

黑马青年