设计系统与案例
Moonb：12 个真实产品组件动效（含时长／缓动与减动偏好）
Moonb 用「真实产品＋可实现手段」把微交互规范写成可对照收藏的组件动效清单。
2026-10-10 Moonb 发布长文，按组件拆解 12 个来自 Google Material／Wear OS、Apple iOS 26、Stripe Elements、Atlassian 等已上线产品的界面动效：按钮形变、Liquid Glass 开关、Material 3 Expressive 加载、PullToRefresh、Notes 菜单生长、Stripe 浮动标签、SF Symbols Draw On、Skeleton shimmer、Sheet detent、Flag toast、Carousel mask、Pragmatic DnD 等。文内附各系统建议时长／缓动表，并强调 prefers-reduced-motion 与「高频交互控制在约 150ms 内」。
moonb.io/blog/ui-animation 标注 10 October 2026；引用 Atlassian「If someone will trigger this motion dozens of times a day, keep it under 150ms」。
为什么值得看
产品设计师做微交互规范时可直接对照真实产品与 CSS／Lottie／Rive 手段，比空概念动效片更可落地。