大厂级APP UI交互动效设计AI指令

加载效果（Loading States）

骨架屏扫光（Skeleton Shimmer）

AI 指令：请实现一个高保真骨架屏扫光（Shimmer）动画：页面请求响应前，使用占位色块（圆角 8px，底色 #E2E8F0）替代文本与图片。色块上方覆盖一层由线性渐变组成的白色半透明高光层（旋转 20 度倾斜角），沿 X 轴从 -100% 匀速滑动至 200%。循环周期固定为 1500ms，缓动曲线采用 ease-in-out，模拟呼吸起伏感。真实数据就绪后，骨架屏以 200ms ease-out 原地淡出，真实内容同步透明度淡入，禁止高度坍塌与抖动。

02 图片模糊到清晰（Progressive Blur Reveal）

AI 提示词：请构建照片墙的渐进式加载效果：容器宽高比例固定，提前锁定布局避免 CLS（累积布局偏移）。初始状态下，展示提取自原图主色调的小缩略图，并叠加 20px 高斯模糊与 1.04 倍微缩放；当视口滚动至图片边缘上方 300px 时触发原生预加载；大图下载完毕后，模糊滤镜在 500ms 内平滑归零，缩放比同步回弹至 1.0 倍，使用 cubic-bezier(0.25, 1, 0.5, 1) 曲线。

03 滑到底加载更多（Infinite Scroll Stream）

AI 提示词：请实现一个无限滚动的瀑布流/商品列表：当距离屏幕底部剩余 1 屏视口高度时触发拉取；底部悬浮区出现 3 个直径 6px 的圆点，依次沿 Y 轴进行振幅 8px 的正弦弹跳（周期 600ms，相位差 120ms）；新数据返回后，列表以交错入场动画（Staggered Entry）呈现，每个卡片错开 50ms，从 Y+24px 处上浮并淡入，耗时 450ms，使用 ease-out。到底时停用监听，并展示“没有更多了”渐隐提示。

04 AI 问答打字机回复（Streaming Typewriter）

AI 提示词：请编写一个模仿大语言模型流式输出的聊天气泡组件：用户发送后，立即生成占位气泡，内部展示 3 颗呼吸微动圆点；流式输出开始时，文字以 2-4 字为一组块级平滑淡入，每组文字附带 4px 模糊到 0 的解冻动效，末端挂载闪烁光标（透明度 0-1 切换，周期 800ms）；气泡高度与外层滚动容器平滑跟随（auto-scroll），但需监听触控事件——若用户主动向上回滚则中断置底锁定，当手动滚回底部时恢复自动锁定。

页面切换（Transitions & Nav）

底部导航胶囊流体切换（Liquid Tab Bar）

AI 指令：请实现一个 4-Tab 底部导航栏切换动效：激活项下方带有一个圆角胶囊底色块。当切换 Tab 时，胶囊采用黏性流体（Fluid Capsule）逻辑转移：色块前端优先向前延伸，尾端延迟 80ms 启动，移动中途横向拉伸且高度压缩 10%，抵达目标项时通过物理弹簧曲线（Spring: damping=15, stiffness=120）恢复原始尺寸并产生微回弹；新 Icon 同步缩放（0.85x 到 1.0x），文本颜色完成线性插值过度，耗时 400ms。

iOS 风格卡片式底部抽屉（BottomSheet Pushback）

AI 提示词：请实现一个原生交互体验的 BottomSheet：点击触发后，抽屉从屏幕 Y 轴 100% 处上升，同时背部主页面以 0.92 倍缩放、增加 16px 圆角遮罩并加深 30% 黑色遮罩，营造景深退后感；抽屉支持实时拖拽，上拉时带橡皮筋阻尼（阻尼系数 0.4），下拉距离超过容器 35% 或释放时的下拉初速度阈值超标则直接滑出屏幕关闭，否则弹簧回弹归位；耗时约 400ms，使用带回弹的 spring 曲线。

视差吸顶大标题（Sticky Collapsing Header）

AI 提示词：请制作商品或个人主页的大标题吸顶与视差折叠动效：向下滑动列表时，顶部 Header 背景图按 0.5x 滚动速率产生视差滚动并叠加暗色遮罩；页面主标题随着上推同步线性缩小（Font-size 从 32px 缩减至 18px）并位移进 NavBar 中轴线；导航栏背景随滚动距离从完全透明渐变为 20px 模糊的高斯毛玻璃；下拉露出边界时，背景图保持中心对齐等比放大（Over-scroll Zoom）；松手时具备磁吸吸附逻辑，避免停留在折叠临界点。

毛毛虫分段标签（Caterpillar Tab Indicator）

AI 提示词： 请实现顶部内容分段标签（例如：关注/推荐/精选）与手势联动的下划线指示器：支持左右滑动页面切换。下划线具备“毛毛虫伸缩动效”——当手指向右滑动时，指示器右端先向右延伸，左端保持停滞；滑动比例过半后左端快速收缩靠拢，下划线总长度在切换中点处变长 1.5 倍；释放手指后，内容与下划线同步吸附到最近索引页，伴随 5% 的越界反弹动效。

手势交互（Gestures）

01 阻尼下拉刷新（Rubber-band Pull-to-Refresh）

AI 提示词：
       请编写一个非原生依赖的弹性下拉刷新组件：在列表处于顶端时监听触摸拖拽，引入非线性阻尼公式（下拉距离 = 手指位移 * 0.45）。顶部显现环形箭头与进度环，随拉拽角度旋转 0° 至 360°；当下拉越过 70px 临界阈值时触发触觉反馈（Haptic），文字变为“松手刷新”且箭头翻转 180°；松开后列表以弹性曲线回落至 60px 悬停，箭头变为旋转 Loading 状态；网络请求成功后弹性回缩至顶部，新项目首行高亮闪烁一次。

02 交互式左滑归档/删除（Swipe Action Drawer）

AI 提示词：
       请制作列表项左滑操作动效：列表行支持跟手向左滑动，右侧逐渐展露红色删除功能块。左滑位移在 0-80px 之间松手，弹簧复位到 0；位移在 80px-160px 松手，吸附停留在 80px 操作位；如果滑行超过总宽度的 50% 或以极快横向速度甩出，直接判定删除：整行卡片继续向左飞出视口（淡出），同时该容器高度从当前尺寸动画收缩至 0px（耗时 300ms ease-out），下方条目平顺上推填充空缺。

03 卡片滑动判定堆栈（Tinder Swipe Deck）

AI 提示词：
       请构建可拖拽堆叠卡片组件：最顶层卡片支持 360 度自由拖拽，卡片旋转角度与 X 轴位移挂钩（公式：旋转角度 = (deltaX / 视口宽) * 15deg）。向右拖拽时左上角浮现绿色“LIKE”徽标（透明度随距离增强），向左则右上方浮现红色“NOPE”；滑动超过 120px 阈值松手后，卡片沿惯性方向以 400ms ease-out 飞出屏幕，底下一层卡片从 scale(0.95) 顺畅放大到 scale(1.0) 顶替，若未过阈值则弹性回到中心。

04 列表长按拖拽重排（Drag to Reorder）

AI 提示词：
       请实现列表拖拽重排序动画：长按列表条目 300ms 触发选中反馈，当前卡片轻微放大至 1.05x，阴影扩大（box-shadow 提升两个层级），模拟从页面被悬空抓起的效果；拖拽移动期间，悬浮卡片绝对跟随指针，其他条目在接触到判定边缘时以 200ms ease-out 平滑下移或上移让位；松手释放后，卡片平滑嵌入目标占位空隙，阴影与缩放比例在 150ms 内复原。

按钮交互（Buttons & Toggles）

01 点赞粒子爆发（Like Particle Burst）

AI 提示词：
       请为点赞按钮制作粒子爆发微动效：点击触发后，中心 SVG 心形执行弹性变形（0ms 缩小至 0.8x，200ms 快速放大至 1.25x 并切换红色填充，400ms 回落至 1.0x）；在缩放到 1.25x 的峰值瞬间，心形周围向外圈径向射出 8 颗直径 4px 的多色微型粒子，粒子一边扩散至 32px 半径一边淡出；右侧点赞计数字符执行 Y 轴上滚出与新数字上滚入动画（Ticker Effect），总耗时 600ms。

02 提交变形加载按钮（Submit Morphing Spinner）

AI 提示词：
       请实现提交按钮状态转换动效：点击提交后，按钮文字淡出消失，原本 120px 宽的矩形按钮边框向中心收缩，在 300ms 内形变为直径 44px 的正圆胶囊并保持居中；随后圆形边框变更为旋转的无缝 Loading 圆环（转速 1000ms/圈）；请求成功时，Loading 环平滑转变为实心绿色背景，内部通过 SVG 描边动画（stroke-dashoffset）在 350ms 内画出一个白色对勾；驻留 1 秒后弹性恢复为初始按钮样式。

03 果冻开关（Jelly Elastic Switch）

AI 提示词：
       请实现拟物果冻开关 Toggle：切换开关时，滑块沿 X 轴向对侧位移，滑动期间滑块受到水平拉伸变形（scaleX 扩展至 1.35，scaleY 压扁至 0.85，形状呈药丸胶囊状）；撞击到目标边缘的瞬间快速收缩并产生震荡回弹，通过弹性阻尼（Spring）回归圆形；同时轨道背景色执行平滑的插值颜色渐变（#E2E8F0 到 #10B981），整体交互耗时控制在 350ms 内。

04 长按危险操作确认（Long-press Hold to Confirm）

AI 提示词：
       请构建防误触长按确认按钮：按钮外沿包含一个透明底的 SVG 圆环。手指按住按钮时，圆环从顶部 12 点钟方向起以线性方式顺时针填充（动画耗时 1500ms），按钮本体轻微压暗并伴随持续微颤；若在 1500ms 前释放手指，进度条沿反方向极速倒退归零；若进度填满，外圈产生瞬间缩放波纹动画，按钮文案切换为“已删除/已执行”，并执行 100ms 的左右微幅晃动（Haptic Shake）确认操作。

表单体验（Form Experience）

01 验证码方格联动输入（OTP Square Transition）

AI 提示词：
       请制作 6 位短信验证码输入方格组件：每个方格独立渲染，聚焦框带有脉冲高光。键盘键入字符时，数字以从底部 Y+8px 向上平滑弹入（180ms ease-out）并淡入，焦点自动向右推入下一格；支持粘贴监听，检测到 6 位字符时触发级联动画——6 个方格内容按 40ms 时间差依次跌落就位；最后一位输入完成后立即进入只读验证状态，6 个方格从左向右依次变换为绿色成功态，整体产生一次轻微 Scale(1.02) 脉冲反馈。

02 密码输入失败错误摇头（Input Error Shake）

AI 提示词：
       请实现输入校验失败的“拟人摇头”动效：提交校验不通过时，禁止直接弹出阻断性 alert 弹窗。输入框边框颜色立即过渡为警示红（#EF4444），容器以衰减振幅在水平方向进行 4 次往复振荡（位移序列：-12px → +10px → -6px → +3px → 0px，总时长 400ms）；输入框下方的错误文本从上向下微量推入并淡入；震动停止后自动高亮选中文本框已有字符，当用户键入新按键时红色状态立即淡出复原。

03 质感浮动标签（Material Floating Label）

AI 提示词：
       请编写 Material Design 风格的输入框浮动标签：未获焦点且值为空时，占位标签以 14px 字号居中停靠在输入框内；一旦 Input 触发 Focus 或存在有效输入值时，标签在 200ms 内向上平移浮动至边框线切割线上，文字缩小至 11px 并切换为主题主色（ease-out 缓动）；边框激活高亮色从底部中轴线向两侧展开绘制；当内容被清空且失去焦点时，标签平滑滑落回框内原始占位位置。

04 邮箱实时校验打勾（Inline Path Checkmark）

AI 提示词：
       请实现实时防抖输入校验器：对输入框内容监听采用 400ms 防抖处理。当用户停顿输入后，右侧展示轻量旋转小转圈（Spin 200ms）；若正则匹配通过，转圈收拢并通过 SVG stroke-dasharray 和 stroke-dashoffset 路径动画，在 350ms 内一笔画出绿色勾选标记，边框同步平滑染绿；若未通过，错误文案高度从 0 展开淡入，边框过渡至淡红，全程不引起外层布局剧烈跳动。

05 动态密码强度分段进度条（Password Strength Meter）

AI 提示词：
       请实现注册密码强度评分组件：输入框底部配有 4 格水平分段进度条。按字符种类与长度实时计算强度（1-4 级）；每提高一级，对应分段从左侧以弹性（Spring）方式填满，单个格子填充耗时 250ms；填充颜色随级别执行全局渐变渲染：弱（#EF4444）、中（#F59E0B）、强（#10B981）、极佳（#059669）；下方对应的说明文字以平滑的翻滚替换（垂直轮播式）完成旧词出场与新词入场。

06 级联星级评分（Cascade Star Rating）

AI 提示词：
       请实现外卖评价五星评分动效：支持手指在星星阵列上滑动与点击点亮。手指滑动经过未激活的星星时，星星即时变色为亮黄色并执行缩放弹性跳跃（从 1.0x 瞬时放大到 1.25x 再归位，耗时 300ms）；多星连选时附带 40ms 的级联阶梯延迟（Stagger）；下方评分文案（“一般”至“无可挑剔”）伴随垂直平移淡入淡出；当获得满分 5 星时，全部 5 颗星星在 500ms 内执行自左向右的正弦波浪上下跳动一次。

图表可视化（Charts & Data Motion）

01 柱状图阶梯生长（Staggered Bar Reveal）

AI 提示词：
       请制作记账统计柱状图入场动效：页面呈现时，底部 X 轴与刻度虚线优先在 200ms 内透明度淡入；紧接着 6-7 根数据柱状条依次自底部生长，每根柱子比前一根延迟 80ms 启动；柱体高度生长到达设计值时冲过目标高度约 6%，随后阻尼回落（Bounce Back）；柱顶的数值文字与柱体同步自 0 滚动增长至实际值；最高项高亮为主色，点击柱体触发 0.95x 压缩回弹并浮现暗色详情气泡。

02 折线图绘制与十字光标（Line Draw & Scrubbing）

AI 提示词：
       请编写股票/基金走势折线图动画：初次加载时，折线通过 SVG path 描边动画自左向右像画笔一样一笔绘出（耗时 1200ms，ease-out 曲线），折线下方的半透明填充渐变随笔触同步展开遮罩；折线末端附带呼吸微动圆点；支持移动端 Touch 手势左右滑动探查（Scrubbing），触控时圆点吸附至折线上对应坐标，伴随一条垂直辅助线，顶部浮动卡片数值实时滚动更新且无闪烁，松手后浮动信息平滑收起。

03 环形比例图展开与分块弹出（Pie Slice Pop-out）

AI 提示词：
       请制作多分类环形占比图交互：初次加载时，所有扇区从顶部 12 点钟位置沿顺时针展开绘制（总耗时 1000ms，先快后慢），扇区之间带有 2px 的细微切割间隙；中心总额数值从 0 同步滚动递增；点击任一分类扇区，该扇区沿圆心法线方向向外平移 10px、厚度微增并产生弹性震荡，其余扇区透明度降至 40%；中心区域数字平滑切换为选中分类的占比与明细，支持二次点击复原。

04 维度切换平滑形变（Chart Morphing Transition）

AI 提示词：
       请实现数据图表在“周/月/年”维度切换时的插值变形动效：严禁销毁 Canvas/DOM 重新绘制。切换维度时，保留的柱体直接在当前位置基于旧坐标线性插值生长或收缩到新高度（耗时 500ms 弹簧微动）；新增柱体自底部 scaleY(0) 展开，移除柱体渐变缩小沉降并销毁；Y 轴刻度文字无缝过渡淡入淡出更新范围，顶部汇总大卡片数值通过数字翻滚动效平滑滚动至新统计值。