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

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

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

小结

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

黑马青年

版权声明：行行出状元网 ，转载请注明出处：https://www.v8q.cn/html/59c88299058.html