Signal Overview
Demo Conversion 23%
核心指标卡结合低频动效刷新，避免跳动噪音。
BACK TO LIBRARY
SYSTEM CARD DECK
Modular Signal Dashboard
适合偏工程和产品方向的展示。这里强调的是状态切换的清晰度、指标卡的阅读顺序和微反馈一致性，不再用高饱和动效制造“系统感”。
Delivery Timeline
4 Iterations / 21 Days
迭代节奏通过状态条和阶段标签展示。
Quality Score
UX QA 92 / 100
用卡片聚焦关键质量指标和修复回路。
Ops Stability
Error Rate 0.4%
用统一 token 控制 hover、enter、state-change。
MOTION CONTRACTS
系统页常见的四种 state signal。
Card enter、metric update、card focus、state handoff。
Card Enter
When
仪表板首屏加载或模块首次进入视口时。
Then
卡片按阅读顺序稳定进入，让用户先抓到模块布局，再读数据内容。
Duration
240ms enter / 60ms stagger
Easing
cubic-bezier(0.22, 1, 0.36, 1)
Reduced Motion
取消位移，只保留透明度渐显。
Metric Update
When
关键指标值或状态文本发生变化时。
Then
数值和进度轻量过渡，明确“数据更新了”，但不制造跳动噪音。
Duration
180ms value settle
Easing
ease-out
Reduced Motion
直接替换内容，不做数值滚动。
Card Focus
When
鼠标悬停或键盘 focus 到某张指标卡时。
Then
当前卡片边框和图标强调，帮助用户确认自己正在操作哪块系统模块。
Duration
140ms border / icon tint
Easing
ease-out
Reduced Motion
去掉位移，只保留边框和颜色强调。
State Handoff
When
用户从一组模块切到另一组模块时。
Then
下一组模块在视觉上接手焦点，维持系统信息架构的稳定感。
Duration
200ms opacity / layout settle
Easing
cubic-bezier(0.2, 0, 0, 1)
Reduced Motion
直接切换模块状态，不做渐进过渡。
MOTION PROFILE
Preferred motions: state transition, subtle number update, card hover focus. Avoid aggressive parallax in data-heavy layouts.
APPLY CHECKLIST