SuperAPI AI 工具集

motion-design

设计与创作

查看项目

更新于 10-21 16:36

技能介绍

Motion Design 是一个面向 UI 动效设计与实现的技能,属于 Application 技能,与 web-design 并列。它的定位是:web-design 交付带有轻量动效底层的界面,而真正的动效工艺——富有表现力的缓动、时间控制、编排——交给本技能完成。动效作用于已经构建好、结构稳固的产物,不负责发明界面;它消费系统的动效性格,不定义系统。

一、用途与前置判断 动效是最后一层。在添加任何过渡之前,需要确认两件事:产物结构稳固(标记正确、层级真实、布局可用、文案到位),以及视觉系统已确定且其动效性格已知(查看 .agents/design.md)。品牌有动效感觉,就像有颜色和字体感觉一样——活泼弹跳、沉稳高级或精确机械。这种感觉可追溯到情感目标与灵感来源(creative-direction)。如果系统仍在定义或重构,应回到 creative-direction,因为动效性格是身份的一部分,不是最后才发明的。

二、核心观点:动效即情感 同一个元素用两种方式动画,会传达两种完全不同的信息:快速弹跳过冲的按钮读起来有趣、放松;同一按钮缓慢放大并稳定下来则读起来高级、严肃。像素没变,变的是时间,感觉就翻转了。元素层面有两个主要杠杆:速度编码成本(快=干脆、随意、便宜;慢=刻意、奢华、昂贵),尺寸设定节奏(小东西动得快,大东西动得慢)。因此,在触碰缓动之前,先问:这应该是什么感觉?答案来自品牌,而非个人发明。

三、动效性格由品牌派生 动效的执行方式取决于正在构建的品牌。两个品牌即使正确应用本技能的所有原则,也可能得到完全不同的动效,且都正确。在动画任何东西之前,先设定系统级旋钮:缓动个性(曲线允许多奇怪)、幅度(动作多宏大)、频率与覆盖(多少表面会动、多久动一次)、什么值得动效(活泼品牌为愉悦本身花动效,严肃品牌几乎只用于功能)。两个校准极点:创意·有趣·古怪·活泼 对 严肃·高级·精确。前者缓动弹跳、弹性、过冲,幅度宏大,频率频繁,动机包含纯粹的愉悦;后者缓动平滑、受控、克制,幅度细微紧凑,频率节省,动效多为功能服务。结果分别是富有表现力、鲜活、有个性,与顺滑、安静、昂贵。“顺滑”不是通用目标;把活泼品牌渲染成克制高级的动效,是一种不恰当,如同为金库品牌设计活泼标志。

四、先分类动效:功能性还是叙事性 品牌性格并非均匀适用,取决于动效承担的任务。功能性/UI 动效有明确工作:按压反馈、状态变化时的方向感、展示因果、揭示来源。无论品牌多活泼,都应实用、快速、不打扰、可预测。叙事性/愉悦动效是叙事节拍、表现性英雄时刻、以感觉为目的的装饰,是品牌自由度所在。两个轴组合:功能性动效在所有品牌中都趋向实用;表现性动效因品牌而异。底层有一条永不因个性弯曲的底线:动效保持层级(绝不统一)、是决定而非默认、受可用性与可访问性约束(键盘触发的操作、高频工具交互、性能、prefers-reduced-motion)。AI 套路式动效的失败在于“未分化、未选择”,而非数量本身。

五、十二项动画原则在 UI 中的应用 源自迪士尼(Thomas & Johnston,《The Illusion of Life》,1981)。它们描述真实物理事物如何运动,而好的 UI 动效就是让扁平矩形遵守身体已知的物理。它们会叠加使用,具体代码配方见 references/twelve-principles.md。包括:挤压与拉伸(重量与弹性,个性杠杆)、预备动作(预告交互将做什么)、舞台调度(引导视线到唯一重要之物)、逐帧与关键帧(定义关键状态,浏览器补间)、跟随与重叠动作(最大的杠杆,元素一起进入但错峰延迟)、慢入慢出(线性是破绽)、弧线(自然运动不走直线)、次要动作(辅助动效强化主动效,展示因果)、时间(帧数决定速度,速度决定情绪)、夸张(超越字面真实)、扎实的描绘(尊重 3D 空间、体积与重量)、吸引力(魅力与愉悦,最难,因为它是好设计师的下游产物)。

六、UI 原生技法工具箱 十二原则是物理与情感,另有一套 UI 原生技法作为实际部署的动作集,完整目录见 references/ui-motion-techniques.md(来源:motion.zajno.com):缓动(基础)、偏移与延迟(错峰到达作为层级线索)、淡入淡出(绝不单独使用,总与位置或缩放变化配对)、变换与形变(共享元素过渡,用 FLIP / View Transitions 作用于 transform,而非 width/height)、遮罩(clip-path/mask 做方向性擦除)、维度(层间关系构建景深)、视差(克制是关键,reduced-motion 下关闭)、缩放(从正确的 transform-origin 缩放)。原则用于决定动效该有什么感觉、是否值得存在;技法用于构建它。

七、通用动效有上限,标志性动效需内容相关 十二原则、技法与生产默认值能带来通用动效:打磨过、功能化、符合品牌的基线,应用于标准 UI 模式。克制使用,这确实很好,对多数界面是正确目标。但通用动效有上限。让界面令人兴奋、难忘、 unmistakably 本产品的动效是内容相关的:来自内容本身与它讲述的故事,而非统一应用的原则。因此要校准简报并诚实面对上限:“让它感觉经过考虑/功能化” → 通用动效就是目标;“让它令人兴奋/难忘” → 通用动效是地板而非终点,需要内容相关、定制的想法,并需要真正的设计方向作为输入。没有该输入,就如实说明:通用应用的诚实上限是“好”,不是“令人兴奋”。

八、克制:并非一切平等地运动 业余本能(也是 AI 默认)是给一切相同地加动画。失败在于“相同”,而非数量;动多少是品牌设定的旋钮。动效服从与其他一切相同的层级:承载信息的元素获得经过考虑的、表现性的动效;支撑细节获得更少或没有。统一动效会像统一字重一样压平层级。最强的克制形式:有时最好的动画是没有动画(Emil Kowalski,references/practical-tips.md)。动效必须通过解释、反馈或愉悦来赢得位置;在频繁重复的交互上它适得其反。两条规则:绝不为键盘触发的操作加动画;从高频操作中剥离动画与无谓的悬停状态。

关于收费、价格、平台支持、具体安装命令等事实,资料中暂未提供。