这就叫专业！5个让用户“哇塞”的神仙动效设计细节

Hi大家好，智行的轻分享专栏来啦～

我们将在这里分享近期一些值得学习的线上案例，快来和我们一起发现隐藏在身边的动人设计，get新灵感！

往期案例：

一、Airbnb：邀请函动效，共筑旅行的桥梁

基于旅行场景的情感连接诉求，Airbnb 重构邀请奖励体系：通过信封动效构建纸质仪式感唤醒人际信任。

1. 信封动效强化邀请仪式感：

运用实物映射信封拆封动效重构数字交互体验，将功能操作升维为人际馈赠仪式，通过情感化设计提升用户分享意愿。

2. 价值透传的视觉策略

用特大字号建立分享给好友自己得$70 的自我收益认知，压缩用户决策时间。

二、Zomato：丝滑动效强化优惠感知

Zomato 线下买单输入支付金额后，如有优惠会动态展示优惠后金额及庆祝丝带，前后页面通过支付金额丝滑承接，极大强化了省钱感知 。

1. 丝滑过渡动画强化省钱感知

通过用户输入的支付金额巧妙过渡到下一页面，同时将原价以划线动效的形式缩小弱化，优惠后价格顺势凸显，一连串丝滑的过渡动画极大的强化了用户对于本单优惠的感知。

2. 礼花加强惊喜感

过渡动画后喷洒礼花动画以及上方庆祝 emoji 微动画，吸引用户对金额关注的同时，也再次加强了用户对于省钱的惊喜感。

三、TrainPal：领取优惠也要有仪式感

TrainPal 是一款专注英欧火车订票的 APP。TrainPal 首页的优惠码发放弹窗巧妙结合刮涂层动效，让用户领取优惠也充满仪式感！

1. 创造期待感

刮码动效类似于刮刮乐的体验，用户在刮开涂层时会产生一种期待感和兴奋感，类似于揭开礼物的瞬间，这种期待感和兴奋感增强了领取优惠的仪式感。

2. 轻量化交互

自动刮开的涂层既没有增加操作负担影响用户获取信息，也能更好的引导用户的视线聚焦关键信息。

四、Ixigo：教学动画构建旅行保障感知

ixigo 通过在首页卡片中加入教学动画，全流程视觉表达一致，推广产品的同时清晰直白地告知了用户旅行保障产品的使用流程。

1. 教学动画增强权益感知

首页动画增加曝光，大面积动画吸引了用户的注意力。通过用户体验视角将操作流程和产品营销结合，清晰地介绍了产品的卖点，让用户感知到切实权益。

2. 视觉元素贯穿体验流程

旅行保障产品的视觉元素在用户的全体验流程中持续出现，在颜色、符号、造型等多方面保持一致性，带给用户流畅一致的体验。

五、Grab：视觉符号强化省钱感知

Grab “免运费 Unlimited Saving” 视觉符号设计以无穷大符号（∞）为核心创意，精准传达“无限省钱”的品牌承诺，强化服务的长期价值，增强用户对优惠力度的信任与期待。

1. 强动态视觉符号

无穷大符号通过流畅且富有节奏感的动效，赋予静态图形生命力，直观表达“无限省钱”的核心理念。动效设计提升视觉吸引力，增强用户的情感共鸣和参与感。

2. 页面创意串联

符号在不同页面间巧妙延展，形成统一且连贯的视觉语言，强化品牌整体形象。通过符号的重复与变形，提升用户对品牌服务连续性和一致性的认知，增强整体体验的连贯性。

最后要说的话

本期的设计分享就到这里啦。

文章中的案例与思考来自于智行 UED 同学的日常分享。

后续我们将持续深度体验产品，挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到智行 APP 后续的产品设计中。

愿我们的努力为你带来更好的体验。下次见。

欢迎关注作者微信公众号：「智行ZXD设计中心」