用途
本技能用于为购物应用、商品目录、结账流程或零售体验设计动画。它把迪士尼的十二动画原则应用于电商界面,目的是让购物体验显得高级、可信,并鼓励转化。
主要能力:十二原则在电商中的具体应用
-
挤压与拉伸:加入购物车时按钮在点击时压缩,商品缩略图挤入购物车图标;数量徽章在快速递增时数字拉伸;促销标签以轻微拉伸的脉冲吸引注意。
-
预备:购买按钮在确认购买前轻微抬起;图片缩放前先短暂停顿;结账步骤的进度指示暗示下一部分。
-
舞台化:商品主图居中并让背景变暗;价格动画突出、折扣次要;CTA 层级让主要操作先吸引视线。
-
直接法与姿势对应法:浏览流程用平滑滚动(直接法);结账用明确步骤与清晰过渡(姿势对应法);搜索结果对商品网格做交错显现。
-
跟随与重叠动作:商品卡片的图片先落定,价格文字随后;购物车抽屉中商品先滑入,总价随后更新;筛选标签先动画,结果再刷新。
-
缓入与缓出:商品快速查看的弹窗用 ease-out;图片轮播在幻灯片之间平滑减速;结账过渡用 300-400ms 的 ease-in-out。
-
弧线:加入购物车时商品缩略图沿弧线飞向购物车图标;心愿单的心形图标沿弧线飞向收藏区;拖拽对比时物品沿自然曲线路径移动。
-
次要动作:购买成功时在确认页加载期间放彩带;评价星级在评分保存时闪烁;折扣应用时价格划掉的同时新价格出现。
-
时间节奏:快速加入购物车用 150-200ms 以求干脆;结账步骤用 300-400ms 以求自信的过渡;加载状态用骨架屏提升感知速度。
-
夸张:闪购用带强烈脉冲的紧迫倒计时;低库存用引人注意的抖动警告徽章;大折扣用戏剧性揭示的划线效果。
-
扎实造型:商品图片在缩放时保持宽高比;3D 视图保持一致的灯光与透视;购物车、搜索、菜单图标保持统一线重。
-
吸引力:成功操作后的细微弹跳营造小惊喜;品牌个性上,高端等于平滑,俏皮等于有弹性;安全徽章等信任信号用轻柔动画。
行业时间标准
资料给出的动作、时长与缓动参考:加入购物车 200ms、ease-out;快速查看 250ms、ease-in-out;结账步骤 350ms、ease-in-out;购物车更新 150ms、ease-out;图片缩放 300ms、ease-out。
核心原则
永远不要让动画拖慢通往购买路径。每个动作都应感觉高效,并建立购买信心。
适用场景
适合购物应用、商品目录、结账流程、零售体验等面向转化的界面动画设计。资料未提供具体代码、安装命令或平台限制信息。
限制
资料未提供该技能在具体框架中的实现方式、依赖要求、收费或价格信息,也未提供官方文档链接,这些内容暂未提供。