关于 media-publishing
一项将 Disney 的动画原则应用于阅读与出版体验的设计技能，侧重让动作辅助可读性和内容发现，同时避免分散读者对正文的注意力。
主要功能
- 01将 12 条动画原则用于出版场景
- 02提供阅读与导航动作指导
- 03给出时长和缓动建议
- 04涵盖文章、媒体与控件示例
适用场景
- 01设计文章与页面过渡
- 02规划图片加载和故事预览
- 03为收藏与分享操作添加克制的反馈
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/media-publishing确认已加载。
详细介绍
媒体与出版领域的动画原则
运用迪士尼的 12 项原则，打造沉浸式阅读体验，让动画增强内容，而不分散读者的注意力。
12 项原则的应用
1. 挤压与拉伸
- 极少使用：内容严肃，不应显得轻佻
- 书签图标：提供细微的按压反馈
- 分享按钮：带来轻微的触感反馈
2. 预备动作
- 文章加载：骨架屏预示内容结构
- 图片呈现：在显示完整画质前短暂预备
- 下一篇故事：预览即将呈现的内容
3. 演出布局
- 内容优先：文章文本始终是重点
- 媒体整合：图片和视频用于辅助，而非分散注意力
- 导航：保持精简，并在滚动时显示
4. 连续动作与关键姿势
- 阅读滚动：连续流畅地浏览（连续动作）
- 章节导航：跳转至指定章节（关键姿势）
- 幻灯片：清晰地切换画面
5. 跟随动作与重叠动作
- 视差图片：背景移动速度慢于文本
- 下拉刷新：内容跟随指示器移动
- 文章卡片：先加载图片，再显示标题
6. 慢入与慢出
- 页面过渡：流畅切换，阅读体验不突兀
- 模态框打开：以舒适的 300-350ms 完成
- 菜单显示：优雅地缓入缓出
7. 弧线
- 滚动进度：使用弧形指示路径
- 分享面板：选项沿弧线展开
- 滑动导航：采用自然的弧形手势
8. 次要动作
- 保存文章：提供细微的确认动画
- 图片加载：获取图片时显示闪烁效果
- 音频播放器：播放时显示波形
9. 时间控制
- 不打扰阅读：标准过渡时长为 200-300ms
- 阅读流畅度：绝不打断阅读
- 交互元素：以 150ms 快速提供反馈
10. 夸张
- 尽量避免：新闻和内容需要可信度
- 突发新闻：仅在适当时体现紧迫感
- 专题报道：以细微的方式戏剧化呈现
11. 扎实绘制
- 卓越排版：确保文本完美呈现
- 图像质量：各种尺寸下的媒体都应清晰
- 布局一致性：使用可靠的网格系统
12. 吸引力
- 优雅克制：营造高端出版物的质感
- 品牌风格：让动态效果契合编辑基调
- 注重可读性：动画应服务于内容
行业时间标准
| 操作 | 时长 | 缓动 |
|---|---|---|
| 页面过渡 | 300ms | ease-in-out |
| 图片加载 | 250ms | ease-out |
| 菜单打开 | 250ms | ease-out |
| 分享操作 | 200ms | ease-out |
| 滚动指示器 | 150ms | ease-out |
核心原则
内容至上。所有动画都应增强可读性并帮助读者发现内容，而非炫耀设计。阅读时，动态效果应当隐于无形。
评论
支持 Markdown