关于 social-media
这是一项将 Disney 的 12 条动画原则应用于社交媒体互动与体验的设计技能，提供动效示例和时长建议，以支持互动与情感连接。
主要功能
- 01将动画原则用于社交互动
- 02提供点赞、快拍、发帖和分享示例
- 03为常见操作提供时长与缓动建议
- 04提供反应和通知的动效模式
- 05规范头像、图标和网格的一致性
适用场景
- 01设计点赞或表情回应动画
- 02规划快拍和信息流转场
- 03为发帖和分享流程添加动效
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/social-media确认已加载。
详细介绍
社交媒体动画原则
应用迪士尼的 12 条原则，打造引人入胜、富有表现力的体验，促进互动与情感连接。
应用 12 条原则
1. 挤压与拉伸
- 点赞按钮：点击时爱心被挤压，然后弹回原状
- 表情回应：选择时俏皮地拉伸
- 发送按钮：消息飞出前先收缩
2. 预备动作
- 发布按钮：发布前短暂蓄势
- 快拍：长按时显示环形进度
- 滑动操作：预览提示接下来会发生什么
3. 演出布局
- 内容优先：用户内容始终是主角
- 回应栏：清晰醒目，但不喧宾夺主
- 通知：醒目但可关闭
4. 连续动作与关键姿势
- 信息流滚动：连续流畅（连续动作）
- 发布流程：分步骤创建（关键姿势）
- 快拍序列：逐帧推进
5. 跟随动作与重叠动作
- 点赞动画：图标弹跳后，计数随之更新
- 评论串：先显示头像，再显示文本
- 分享菜单：选项依次展开
6. 慢入与慢出
- 下拉刷新：平滑减速
- 卡片过渡：使用缓入缓出，呈现精致效果
- 模态面板：采用舒适的 300ms 时长
7. 弧线运动
- 回应浮动：表情符号从按钮处沿弧线上升
- 快拍手势：滑动沿自然弧线移动
- 内容分享：帖子沿弧线移动至分享目标
8. 次要动作
- 双击点赞：爱心绽放的同时逐渐淡出
- 输入指示器：思考时圆点弹跳
- 上传进度：处理时显示闪光效果
9. 节奏
- 交互：采用利落的 100-200ms 时长，提升参与感
- 过渡：采用迅捷的 250-300ms 时长，保持流畅
- 庆祝效果：情感时刻采用 500-800ms 时长
10. 夸张
- 回应：强化情感表达
- 里程碑：为关注者数量和点赞数等庆祝
- 直播功能：动态醒目，吸引注意力
11. 扎实绘制
- 头像一致性：统一尺寸与样式
- 图标语言：采用连贯的视觉表达体系
- 网格布局：确保对齐与间距恰当
12. 魅力
- 凸显个性：展现平台特质
- 多巴胺设计：通过微交互带来愉悦感
- 易于分享：动画值得录制
行业时长标准
| 操作 | 时长 | 缓动 |
|---|---|---|
| 点赞/回应 | 200ms | spring |
| 下拉刷新 | 300ms | ease-out |
| 快拍过渡 | 250ms | ease-in-out |
| 模态框打开 | 300ms | ease-out |
| 发送消息 | 150ms | ease-out |
核心原则
社交媒体依赖情感表达。动画应增强连接感，让交互更有回报感，并鼓励用户持续参与，同时避免让人觉得受到操控。
评论
支持 Markdown