SuperAPI AI 工具集

motion-design

设计与创作

查看项目

更新于 10-16 09:23

技能介绍

用途

Motion Design Skill 用于在 UI 与界面动效设计中应用动效设计原则,创建情感驱动且技术上合理的动画与过渡。适用场景包括:创建 UI 动画(按钮、卡片、弹窗、页面过渡)、设计微交互与反馈动画、构建加载/成功/错误状态、为插画或装饰元素添加动画、规划滚动触发或基于进度的动画、建立品牌动效识别、编排多元素序列。

主要能力

技能围绕三大支柱展开:情感意图(观众应感受到什么)、视觉叙事(微故事:铺垫→动作→解决)、动效工艺(物理、次级运动、路径)。每个动画应包含三个运动层:主层(观众跟随的主要动作)、次级层(阴影、图标位移等支撑细节)、环境层(渐变、细微脉冲等背景生命感)。

技能提供四种动效人格原型,每个项目选择一种并保持一致:Playful(150-300ms,ease-out-back,10-20% 过冲)、Premium(350-600ms,cubic-bezier(0.4,0,0.2,1),0% 过冲)、Corporate(200-400ms,cubic-bezier(0.2,0,0,1),0-3% 过冲)、Energetic(100-250ms,ease-out-expo,15-30% 过冲)。默认 UI 用 Corporate,插画用 Playful。品牌动效识别需定义三个常量:签名缓动(80% 动画使用同一曲线)、时长调色板(快速/标准/缓慢三档)、入场模式(一致的进入风格)。

技能还提供属性选择表(入场/退场用 position,强调用 scale,状态变化用 opacity/color,方向/流动用 position,深度用 scale+shadow,加载用 rotation,成功用 scale,错误用 position 抖动)、时长表(提示 80-120ms、按钮 120-180ms、图标 150-250ms、卡片 200-350ms、弹窗 300-400ms、页面 400-600ms、戏剧性揭示 600-1200ms)、缓动选择规则(入场用减速 ease-out,退场用加速 ease-in,屏内用 ease-in-out,循环环境用正弦)以及行业标准曲线(Material Design 3、Apple HIG 等)。

使用方式

技能以决策树和 8 步检查清单引导使用:先判断动画是否服务于功能目的、是否表达品牌个性、是否讲述故事或引导注意力、是否为复杂多元素场景,再依次确定情感目标、动效人格、主要属性、时长、缓动族、主角元素、次级与环境层、1/3 规则。技能包含常见模式(按钮按压、卡片入场、成功状态、错误抖动)和编排要点(主角先行、空间一致、反向运动、1/3 规则、错峰预算)。

适用场景

适用于 UI 动效设计、微交互、状态反馈、插画动画、品牌动效体系建立、多元素序列编排等。技能还提供情绪到动效映射(喜悦、平静、紧迫、悲伤、惊讶、优雅、俏皮)和重量分级(重/中/轻)指导。

限制

技能文档未提供具体安装命令、代码示例或平台支持信息,暂未提供。质量规则强调:空间移动不可用线性缓动(仅旋转器、进度条可用)、重要状态变化不可仅用透明度、超过 1/3 屏幕需中间关键帧、始终使用三个运动层。