SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场motion-and-storytelling

motion-and-storytelling

设计与创作

查看项目

更新于 10-15 16:37

技能介绍

用途

该技能面向 UI 动效设计，把迪士尼动画十二原则、电影语言和漫画叙事惯例应用到界面动效中。其核心主张是：动画与动效不是装饰，而是沟通。当以与排版、色彩同等的纪律来运用时，动效能告诉用户正在发生什么、该看向哪里，以及产品用起来是什么感觉。关键词是微妙——在 UI 中，动效应当被感知，而不是被观看。

迪士尼十二原则在 UI 中的应用

  1. 挤压与拉伸：物体在撞击时压缩、在加速时伸展。UI 中，按钮按下时略微缩小并弹回，传达物理感与响应感。示例代码：
button:active { transform: scale(0.96); }
button { transition: transform 80ms ease-out; }

应谨慎使用，仅保留给主要 CTA 和令人满意的确认反馈。

  1. 预备动作：主要动作前的小幅准备动作。UI 中，菜单项在打开前轻微位移，或加载指示器在过渡开始前出现，让用户对即将发生的事有所准备。

  2. 舞台调度：一次清晰地呈现一个想法。UI 中，入场动画应把注意力引向新内容，而不是与已有内容竞争。模态框打开时页面其余部分变暗，这就是舞台调度。

  3. 逐帧法与关键帧法：关键帧法——定义起始与结束状态、由系统插值——正是 CSS/JS 的做法。定义清晰的初始与最终状态，让 transition 或弹簧物理库处理中间过程。

  4. 跟随与重叠动作：元素不会同时停止。UI 中，列表项错峰入场（每项比前一项晚 40–60ms）比所有项同时出现更自然。示例代码：

.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }

  1. 缓入缓出：自然界中没有东西会瞬间开始或停止。应使用缓动曲线，而非线性过渡。缓动选择参考：ease-out（快起慢停）用于进入屏幕的元素，感觉像自然到达；ease-in（慢起快停）用于离开屏幕的元素，感觉像有意退出；ease-in-out 用于在屏幕内位置之间移动的元素；弹簧物理用于响应触摸/拖拽的交互元素。UI 动效绝不要使用 linear，它读起来机械且未完成。

  2. 弧线：自然运动沿弧线而非直线。从原点缩放出现的工具提示和弹出层（而非均匀淡入）遵循此原则，transform-origin 很重要。

  3. 次要动作：强化主要动作的辅助运动。UI 中，按钮内图标在按钮按下时轻微位移；表单提交后对勾自行绘制。这些细节奖励注意力而不强求注意力。

  4. 时间节奏：时长即含义。快 = 响应、有活力；慢 = 有分量、重要。时长参考：80–120ms 用于微交互（按钮按下、悬停）；150–250ms 用于组件过渡（下拉打开、工具提示）；250–400ms 用于页面级过渡、模态框入场；400–600ms 用于主视觉动画、引导序列；超过 600ms 几乎总是太长——用户在等待。

  5. 夸张：小幅、刻意的夸大让动作感觉满足。UI 中，成功对勾略微过冲再稳定，或通知徽章弹出时略大于最终尺寸。夸张幅度是 10–15%，而非戏剧化。

  6. 扎实设计：尊重界面的深度与层次。元素应以与其感知层级一致的方式移动——底部面板从下方滑入，因为它位于内容之下，而不是从侧面；工具提示出现在触发器附近，而不是屏幕另一端。

  7. 吸引力：整体动效应符合品牌。活泼的消费类应用可用更弹跳、更有弹性的动效；金融工具使用精确、可控的过渡。吸引力不是装饰，而是通过时间表达的品牌个性。

电影化技巧

揭示与入场：进入视口的内容在“到达”时比单纯“存在”更有冲击力。滚动触发的入场动画——区块在用户滚动进入时淡入上移——借鉴了电影化的揭示。关键：内容从有意义的方向进入（从下方，因为用户正从下方滚动而来）。示例代码：

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

视差：背景元素比前景元素移动更慢，营造深度。网页中，主视觉背景图以 50% 滚动速度移动、内容以 100% 移动，产生层次感。应微妙使用——激进的视差会导致晕动症。

硬切与溶解：硬切（瞬间状态变化）快速、果断、高效，用于页面间导航、关闭模态框。溶解/交叉淡入渐进、深思熟虑、有连接感，用于两个状态相关时——标签切换、图片画廊过渡。

场景设定：区块的第一帧在细节出现前设定场景。主视觉配强图像和大字号，随后支撑细节在短暂延迟后出现，这是电影化的开场。用户的视线在阅读开始前被引向主体。

漫画叙事惯例

分镜序列：漫画通过一系列静态画面暗示其间的运动来讲述故事。UI 中，步骤指示器、引导轮播和进度流程使用相同逻辑——每个“分镜”是序列中的一个瞬间，用户视线在其间移动。

速度线与能量：强调线、径向渐变和方向性模糊在不实际动画的情况下暗示运动与能量。带微妙方向性渐变的按钮暗示它指向某处；带拖尾透明度的加载指示器暗示方向。

字体作为语气：漫画中，字体的尺寸、粗细和风格传达情绪——喊叫用大号粗体大写，低语用细体小号斜体。UI 中，主视觉的超大展示字体承载能量；小而柔和的说明文字后退。这是作为情绪语域的微排版，而不仅是层级。

间隙：漫画中，读者的想象填补画格之间的空间。UI 中，过渡就是间隙——状态之间发生的事。平滑过渡让用户大脑构建连贯的心智模型；突兀跳跃迫使他们重新定位。

实践规则

始终尊重 prefers-reduced-motion。有前庭障碍或运动敏感的用户必须能在无动画的情况下使用产品。示例代码：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

动效应服务用户，而非娱乐他们。每个动画都应回答：它是否帮助用户理解发生了什么、某物来自哪里，或接下来该看哪里？

几乎所有动效时长都应低于 400ms。如果动画耗时更长，它就在拖慢用户。

绝不要动画布局属性（width、height、padding、top、left）——它们会触发重排。只动画 transform 和 opacity——它们在 GPU 上运行。

每个区域同一时间只保留一个动效。同时竞争的动画会造成视觉噪音，应错峰安排。

审查清单

  • prefers-reduced-motion 是否禁用或减弱了所有动画？
  • 所有过渡是否使用 ease-out（进入）、ease-in（退出）或 ease-in-out（重新定位）？
  • 是否避免了 linear 缓动？
  • 组件级过渡的时长是否低于 400ms？
  • 是否只动画 transform 和 opacity（而非布局属性）？
  • 入场动画是否从有意义的方向移动（滚动揭示从下方，缩放从原点）？
  • 动效是否匹配品牌语气（活泼用弹跳，企业用精确）？
  • 列表项是否使用错峰入场而非同时出现？

适用场景与限制

适用场景：设计过渡动画、滚动动画或引导流程动效时使用。

限制：资料未提供该技能的安装方式、平台支持、收费模式或具体工具集成信息，暂未提供。