电商动画设计原则：应用迪士尼12条动画法则提升用户体验与转化率
e-commerce-retail by dylantarre/animation-principles
安装命令
npx skills add https://github.com/dylantarre/animation-principles --skill e-commerce-retail🇨🇳中文介绍
电商与零售动画原则
应用迪士尼的 12 条动画原则，打造高端、可信赖并能促进转化的购物体验。
12 条原则的应用
1. 挤压与拉伸
- 加入购物车：按钮点击时压缩，产品缩略图挤入购物车图标
- 数量徽章：快速增加时数字拉伸
- 促销标签：轻微拉伸的脉动效果以吸引注意
2. 预备动作
- 购买按钮：在确认购买前轻微抬起
- 图片缩放：展开产品图片前短暂停顿
- 结账步骤：进度指示器暗示下一部分
3. 演出布局
- 产品主图：产品居中，背景变暗
- 价格显示：突出显示价格动画，折扣信息次之
- 行动号召层级：主要操作首先吸引眼球
4. 连续动作与姿态对应
- 浏览流程：目录浏览时平滑滚动（连续动作）
- 结账：定义清晰的步骤和过渡（姿态对应）
- 搜索结果：产品网格错开显示
5. 跟随动作与重叠动作
- 产品卡片：图片先稳定，然后是价格文字
- 购物车抽屉：商品滑入，总计随后更新
- 筛选器：标签先动画，然后结果刷新
6. 慢入与慢出
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
