关于 e-commerce-retail
一项将 Disney 的 12 条动画原则用于电商与零售体验的设计技能，提供购物流程的界面示例与时长参考，并强调动效不应拖慢购买流程。
主要功能
- 01将 12 条原则用于购物界面
- 02涵盖商品、购物车与结账示例
- 03讲解层级、反馈与信任提示
- 04提供动画时长参考
适用场景
- 01设计加入购物车和购物车更新动效
- 02制作商品浏览与快速预览动画
- 03创建清晰的结账步骤过渡
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/e-commerce-retail确认已加载。
详细介绍
电子商务与零售动画原则
运用 Disney 的 12 条原则，打造高端、可信且能促进转化的购物体验。
12 条原则的应用
1. 挤压与拉伸
- 加入购物车：按钮点击时压缩，商品缩略图挤向购物车图标
- 数量徽标：快速增加数量时，数字会拉伸
- 促销标签：轻微拉伸并脉动，以吸引注意
2. 预备动作
- 购买按钮：确认购买前轻微上移
- 图片缩放：商品图片展开前短暂停顿
- 结账步骤：进度指示器预示下一个环节
3. 演出布局
- 商品主视觉：居中展示商品，同时调暗背景
- 价格展示：突出显示价格动画，折扣信息次要呈现
- CTA 层级：优先吸引视线关注主要操作
4. 连续动作与关键姿势
- 浏览流程：浏览商品目录时平滑滚动（连续动作）
- 结账：以明确步骤和清晰过渡呈现（关键姿势）
- 搜索结果：商品网格依次显现
5. 跟随动作与重叠动作
- 商品卡片：图片先稳定，价格文本随后出现
- 购物车抽屉：商品滑入后，再更新总价
- 筛选器：标签先播放动画，再刷新结果
6. 慢入与慢出
- 模态框打开：商品快速预览采用缓出效果
- 图片轮播：幻灯片切换时平滑减速
- 结账过渡：采用 300-400ms 的缓入缓出效果
7. 弧线运动
- 加入购物车：商品缩略图沿弧线移向购物车图标
- 愿望清单：心形图标沿弧线移向已保存区域
- 拖动以比较：商品沿自然的弧线路径移动
8. 次要动作
- 购买成功：加载确认信息时播放彩纸动画
- 评论星级：保存评分时播放闪烁动画
- 已应用折扣：旧价格划线的同时显示新价格
9. 节奏
- 快速添加：采用 150-200ms，让加入购物车的操作灵敏迅速
- 结账步骤：采用 300-400ms，让过渡更从容可信
- 加载状态：使用骨架屏提升感知速度
10. 夸张手法
- 限时抢购：紧迫感十足的倒计时搭配醒目的脉动效果
- 库存不足：警告徽标搭配引人注目的抖动效果
- 大幅折扣：划掉原价，并以戏剧性的方式显示新价格
11. 扎实绘制
- 商品图片：缩放时保持宽高比
- 3D 视图：保持光照和透视一致
- 图标：购物车、搜索和菜单图标保持一致的笔画粗细
12. 吸引力
- 微妙惊喜：操作成功时轻轻弹跳
- 品牌个性：高端 = 流畅，活泼 = 弹跳
- 信任标志：安全徽标采用柔和的动画
行业时长标准
| 操作 | 时长 | 缓动 |
|---|---|---|
| 加入购物车 | 200ms | ease-out |
| 快速预览 | 250ms | ease-in-out |
| 结账步骤 | 350ms | ease-in-out |
| 更新购物车 | 150ms | ease-out |
| 图片缩放 | 300ms | ease-out |
核心原则
绝不能让动画拖慢购买流程。每个动效都应高效流畅，并增强购买信心。
评论
支持 Markdown