专栏名称: IXDC

IxDC由广州美术学院设计学院、香港理工大学设计学院、网易、腾讯、华为、中国电信、中国移动、金山等单位联合发起。是全国第一个受政府认可和领导的交互设计专业委员会，致力于引领中国交互设计行业发展。

动效让这些设计更惊艳

IXDC · 公众号 · · 2024-11-01 08:30

正文

本文授权转自：黑马家族（ID：heimauiued）

正文

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

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

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

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

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

四、3D 空间感的 Banner 设计

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

六、微动效引导 VIP 续费

七、动态还原实时天气

八、动态 IP 引导按钮设计

九、微动效赋予品牌活力

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

小结

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

你在使用的 APP 中还见过哪些令人惊艳的动效设计呢？快来留言分享吧！

-END-

文章转载：黑马家族，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/vl_J4VLgWf3LJJMZVzhe4w

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

动效让这些设计更惊艳

正文

请到「今天看啥」查看全文