7. ✨ 微交互 Interactions ★★★★☆

🌏 Web 网页规范

  • 动效技术: CSS Transition / Keyframes / Web Animations API
  • 触发机制: 鼠标指针 Hover 指向、Scroll 滚动视差
  • 时间曲线: Cubic-bezier 贝塞尔缓动、JS 定时器过渡
  • 手势动效: 极少跟手，多为一触即发的确定性动效

📱 App 移动端规范

  • 动效技术: 物理弹簧阻力引擎 (Spring / Damping)
  • 触发机制: 手势跟手物理位移 (Pan / Swipe)
  • 时间曲线: 基于弹簧张力常数与质量阻尼的实时物理计算
  • 手势动效: 全程手势跟手，强调手指交互的连贯与物理回弹

Web 鼠标悬停动效与贝塞尔曲线缓动

Web Hover States, Cursor Effects & Cubic Bezier

Web 页面依赖丰富的 鼠标悬浮 (Hover) 缩放与发光状态、点击涟漪，以及 CSS cubic-bezier 的扫光渐变骨架屏加载过渡。

App 手势交互、物理弹簧阻尼与触觉反馈

App Gestures, Spring Physics & Haptic Feedback

App 端专注于 触控手势（滑动、捏合、长按），交互动效应引入具有弹跳质感的 弹簧阻尼物理动画 (Spring Physics)，并调用系统马达提供细腻的 物理触觉反馈 (Haptics)。

LIVE PLAYGROUND: Bezier 缓动弹性体验与骨架屏状态切换 鼠标移入/点击下方卡片感受回弹；点击按钮切换骨架扫光
https://web.meta-ui.edu/micro-interactions
09:41
📶 🔋
✓ 物理缓动 (Cubic Bezier)
弹性过渡卡片 (悬停测试)
✗ 硬跳过渡 (Linear Jump)
无缓动死板变形

Toggle 开关动效

关闭

点赞弹跳动效 (Like Bounce)

骨架屏扫光 (Shimmer Loading)

悬浮抬升卡片 (Hover Lift)

卡片 A
悬浮我试试
卡片 B
弹性抬升效果

按钮按压反馈 (Press Feedback)

加载动效 (Loading Spinners)

旋转
弹跳点
滑动条

输入框聚焦发光 (Focus Glow)

悬浮提示气泡 (Tooltip)

悬停延迟 200ms 出现，避免误触；离开 100ms 后消失，避免抖动。

这是一个提示
? 点击查看帮助文档

Toast 通知 (Toast Notification)

非阻塞反馈，3秒后自动消失，配合滑入/滑出动画。

数字滚动动效 (Count Up)

数据加载完成后，数字从0平滑增长到目标值，常用于仪表盘与统计页。

0
用户数
0
订单数
0%
完成率

下拉刷新动效 (Pull to Refresh)

移动端经典手势：下拉到阈值后松手触发刷新，常配旋转图标。

👇 在此处按下并向下拖拽试试

微交互四要素 (Four Elements)

① 触发
用户操作/系统事件
② 规则
决定交互逻辑
③ 反馈
视觉/听觉/触觉
④ 循环/模式
限制与重复规则

常用微交互演示 (Microinteraction States)

按钮状态交互

Hover时上浮阴影，点击时有轻微缩小物理缩放动画。

表单输入即时反馈

失去焦点时对输入框进行即时校验（不可为空）。

滚动加载交互

向下滚动以加载更多内容...

滚动到底部触发加载动画

📋 大模型统一 Prompt (LLM Prompt)