动效与产品视频 —— 什么时候动、动多久，以及让 AI 来动

本课导读

"动效"这个词其实盖着两门不同的手艺：界面动效（按钮反馈、面板展开——交互设计的一部分）和营销动效（launch video、产品 Demo、Logo 动画——motion design，影视的近亲）。前者你需要掌握原则，因为每个产品都躲不开；后者过去需要 After Effects 和一位动效师，现在有了 AI 选项——本课后半段实操 Motion（motion.so），一个"描述一句话、产出一条片"的 AI Agent。两门手艺，一课打包。预计 45 分钟。

界面动效：三个正当理由，装饰不在其中

界面上任何一次"动"，都要能报出三个理由之一，报不出就删：

1. 反馈——告诉用户"我听见了"：按钮按下的微缩、开关拨动的滑行、下拉刷新的转圈。没有反馈的界面像坏掉的电梯按钮，用户会连按五次
2. 连续性——告诉用户"东西从哪来、到哪去"：面板从点击处展开而不是凭空出现，删除的条目滑出而不是闪消。空间关系连续，用户的心智地图就不断线
3. 引导注意——把眼睛引向刚变化的地方：新消息滑入、保存成功的轻微高亮。这是对比原则的时间维度版——动的东西天然赢得注意力，所以动是稀缺资源

"好看""有科技感""老板喜欢"不在清单上。装饰性动效不是不行，是要按噪音记账：它每次出现都在消耗用户的注意力预算。

参数速查：多快、什么曲线

参数	取值	备注
时长	150–300ms	小元素快（150）、大面板慢（300）；超过 400ms 用户就在"等动画"
进场缓动	ease-out	快进慢停，元素"落座"
出场缓动	ease-in	慢起快走，元素"告辞"
位移/形变	ease-in-out	两头圆滑
linear	只给持续动画	转圈、进度条——不该被注意的动才用匀速

两条铁律收尾：

• 频率与时长成反比。一天触发一百次的动效（键盘弹出、列表展开）必须最短最收敛；一辈子看一次的（首次成功庆祝）才配得上华丽
• 动效不许挡路。必须等动画播完才能进行下一步操作的设计是负资产；顺手补一条工程侧的礼貌：尊重系统的"减弱动态效果"设置（prefers-reduced-motion），晕动症用户不是极少数

换频道：营销动效是另一门手艺

产品发布视频、功能 Demo、社交广告里的动效不受上面规则管——它们不是交互，是叙事。目标从"不打扰使用"变成"三十秒讲清楚并且好看"，节奏、配乐、镜头语言全上。这门手艺过去的成本结构：一位懂 After Effects 的动效师 + 一到两周 + 不便宜的报价，所以中小团队的产品视频通常处于"没有"状态。

这就是 AI 进场的缝隙。

Motion（motion.so）：描述一句话，产出一条片

Motion 是 Mosaic AI Labs 做的动效设计 AI Agent，自称"frontier agent for motion design"。工作方式是 Agent 式的全流程接管：你用自然语言描述想要的视频，它负责调研、写脚本、设计、动画、配音、配乐、剪辑，几分钟出成片。对本课最有意思的三个特性：

• 读你的网站学品牌：给它产品 URL，它自动抓取真实的品牌色、字体、素材——你前四课学的"重复原则"（品牌一致性），它替你执行
• 元素级可编辑：产出不是一坨压平的视频，每一帧里的元素都能单独改——AI 出第一稿，人做定稿
• 接在工作流里：浏览器直接用，也能通过 MCP 接进 Claude、ChatGPT 等 Agent

定位要拎清：Motion 做的是营销动效（launch video、Demo、广告），不是界面动效——前半课的按钮反馈还是要靠设计系统和代码。

实操：给学径生成一条 Launch Video

分步操作

1. 写描述词——先想清楚，再打字

   打开 motion.so 之前先回答三个问题：给谁看（潜在学习者）？什么调性（安静的纸质百科气质，不是炫技科技风）？强调什么（一个真实卖点，比如"课程、笔记、间隔复习在同一个地方"）。把答案压成三五句话——你会发现这就是一份微型 PRD：把要什么写到无歧义，AI 才不用猜。

2. 喂给 Motion

   注册登录 motion.so，新建项目，贴上产品 URL（让它抓真实的配色与字体），粘贴你的描述词，指定时长（30 秒）和用途（产品介绍），生成。

3. 审片——用四原则当验片单

   第一稿出来，别急着满意或失望，按单元前四课过一遍：节奏有没有对比（重点画面是否停得更久）？品牌是否重复到位（配色字体和网站一致吗）？每一屏的信息是否对齐、分组清晰？逐条记下要改的。

4. 元素级修改到定稿

   进编辑器逐元素改：换措辞、调停留时长、替换抓错的素材。改不动的部分，退回第 1 步改描述词重生成——和改 PRD 再开发是同一个循环。

没有真实发布需求也照做：这个练习真正训练的不是按钮在哪，是把模糊的"要个视频"翻译成清晰意图的能力。

AI 时代的分工：工具越强，品味越贵

Motion 这类工具改变的是成本结构（一周变几分钟），没改变的是判断结构：什么算"好"，仍然由你说了算。审片时你用的是四原则，定调性时你用的是品牌理解，改描述词时你用的是 PRD 功——这个单元前五课学的东西，一样都没白学，只是执行层被 AI 接管了。设计工具进入"描述即产出"的时代，说清楚要什么成了新的核心技能——巧的是，这正是这条 Track 从第一单元就在练的事。

✍️ 练习

练习 1：动效审计

选一个动效丰富的 App（iOS 系统界面、微信、支付宝皆可），找出三个动效，逐个回答：它的正当理由是三者中的哪个（或者是装饰）？时长和缓动大致合理吗？有没有"挡路"的？

✅ 参考答案

开放题，自查要点：① 每个动效是否被归进 反馈/连续性/引导注意/装饰 四格之一（例：iOS App 打开时从图标位置放大 = 连续性教科书案例；下拉刷新转圈 = 反馈 + linear 持续动画的正确用法）；② 是否找到了至少一个"删掉反而清爽"的装饰案例；③ 挡路检查：有没有必须等动画播完才能操作的时刻——开屏动画是重灾区。

练习 2：写一份 Motion 描述词

不打开工具，先为你工作里的产品（或学径）写一份 30 秒 launch video 的描述词：给谁看、什么调性、强调哪一个卖点、结尾行动号召是什么，控制在五句话内。写完自查：把这五句话给一个不了解产品的人看，他能想象出这条视频的样子吗？

✅ 参考答案

合格样例（学径版）："给想系统转行 AI 的自学者看。调性安静克制，像一本会动的纸质百科，衬线标题、米白纸面，不要科技感粒子特效。核心信息一条：课程、笔记、间隔复习在同一个地方，学过的东西不会丢。画面顺序：翻开课程页 → 划线做笔记 → 复习卡片翻面 → 收在站名和网址上。旁白平静，配乐极简钢琴。"自查标准：五句话里有受众、调性（含反向排除）、单一卖点、画面序列、收尾——AI 拿到后没有大的开放问题要猜，就算无歧义。

📝 随堂测验

随堂测验0 / 5 题正确

1. 界面动效的三个正当理由是？

A好看、有科技感、领导满意B反馈（我听见了）、连续性（东西从哪来到哪去）、引导注意（对比原则的时间维度版）——报不出就删C增加停留时长、提升转化、品牌曝光D开屏、转场、加载三大场景

2. '一天触发一百次的动效必须最短，一辈子一次的才配华丽'，背后的原则是？

A频率与时长成反比——高频动效按噪音记账，消耗的是注意力预算；这是'克制'在时间维度的执行B高频动效耗电C华丽动画开发成本高，要省着用D低频动效用户看不到，做了也白做

3. 进场用 ease-out、出场用 ease-in 的直觉解释是？

A字母顺序的行业惯例B两者性能开销不同C进场快进慢停像'落座'，出场慢起快走像'告辞'；linear 只留给转圈进度条这类不该被注意的持续动画Dease-out 只能用于移动端

4. Motion（motion.so）的正确定位是？

A一个 CSS 动画代码生成器BFigma 的动效插件C界面动效的自动化测试工具D营销动效的 AI Agent：描述一句话，它接管调研/脚本/设计/动画/配音/剪辑出成片，可读网站取品牌、逐元素编辑——界面动效不归它管

5. '工具越强，品味越贵'在本课的具体含义是？

AAI 工具订阅费会越来越贵BAI 改变了成本结构（一周变几分钟）但没改变判断结构——审片用四原则、定调性靠品牌理解、改描述词是 PRD 功，'说清楚要什么'成了新核心技能C以后只有大师能做设计D品味无法学习，是天赋

本课小结

• 动效两门手艺：界面动效（交互的一部分）与营销动效（叙事，影视近亲）
• 界面动效三个正当理由：反馈、连续性、引导注意；终极测试是"删掉会少什么吗"
• 参数速查：150–300ms；进 ease-out、出 ease-in、移 ease-in-out、持续动画才 linear
• 频率与时长成反比；不挡路；尊重 reduced-motion
• Motion（motion.so）：营销动效 AI Agent——描述→成片、读站取品牌、元素级可改
• 描述词 = 微型 PRD：给谁看、什么调性、强调什么；工具接管执行，品味和表达仍是你的

下一课收官项目：拿学径的真实页面开刀——四原则诊断、立 token、Figma 重画，学有余力再用 Motion 配一条宣传片。整个单元的工具在同一张桌上摆开。