设计 2024-2025 现代网站、交互体验与设计系统时…

适用于设计现代网站、交互体验、设计系统，并确保无障碍与性能优先的界面开发。

适用场景

解决思路

1. 性能优先设计：将 LCP 控制为 < 2.5s、FID 为 < 100ms、CLS 为 < 0.1、INP 为 < 200ms。
2. 性能优先设计：将非关键动画推迟到页面加载后执行。
3. 性能优先设计：动画只使用 CSS transforms/opacity 以利用 GPU 加速。
4. 性能优先设计：对图片、视频和 3D 内容实施懒加载。
5. 性能优先设计：采用渐进增强，确保核心内容不依赖 JavaScript。
6. 大胆极简：使用大号有冲击力的排版，并用 clamp() 实现流式字号。
7. 大胆极简：使用充足留白，把负空间作为设计元素。
8. 大胆极简：限制调色板为 3-5 个主色。
9. 大胆极简：有意使用醒目的强调色。
10. 大胆极简：使用几何形状与干净线条。
11. 大胆极简：使用流式字体变量 --font-size-xs 到 --font-size-3xl，基于 clamp()。
12. 大胆极简：使用无障碍优先的 OKLCH 颜色系统，文本对比度最低 7:1，满足 WCAG AAA。
13. 微交互：悬停状态使用 1.05-1.1x 缩放变换。
14. 微交互：悬停状态使用 200-300ms 颜色过渡。
15. 微交互：悬停状态改变阴影深度。
16. 微交互：悬停状态进行光标变换。
17. 微交互：加载状态使用骨架屏，优于旋转加载器。
18. 微交互：加载状态使用渐进式图片加载，采用 blur-up 技术。
19. 微交互：加载状态使用乐观 UI 更新。
20. 微交互：加载状态使用交错内容揭示。
21. 微交互：交互反馈中按钮按下状态缩小 0.95x。
22. 微交互：交互反馈中开关切换使用弹簧物理。
23. 微交互：交互反馈中表单字段验证立即且友好。
24. 微交互：交互反馈中成功/错误状态带动画。
25. 微交互：用 Framer Motion 实现按钮 whileHover={{ scale: 1.05, y: -2 }}、whileTap={{ scale: 0.95 }}、transition={{ type: 'spring', stiffness: 400, damping: 17 }}。
26. Scrollytelling：滚动触发揭示使用带偏移的淡入。
27. Scrollytelling：滚动触发揭示从两侧滑入并交错。
28. Scrollytelling：滚动触发揭示使用缩放 + 透明度过渡。
29. Scrollytelling：滚动触发揭示使用 clip-path 揭示。
30. Scrollytelling：滚动联动动画使用不同滚动速度的视差层。
31. Scrollytelling：滚动联动动画使用水平滚动区块。
32. Scrollytelling：滚动联动动画使用固定区块并配合滚动擦除动画。
33. Scrollytelling：滚动联动动画将 3D 对象旋转绑定到滚动。
34. Scrollytelling：进度指示器使用阅读进度条。
35. Scrollytelling：进度指示器使用分步视觉引导。
36. Scrollytelling：进度指示器使用随滚动推进的动画 SVG 路径。
37. Scrollytelling：用 GSAP ScrollTrigger 实现滚动联动 3D 旋转，设置 trigger、start: 'top top'、end: 'bottom top'、scrub: 1、rotationY: 360、ease: 'none'。
38. Cursor UX：自定义光标形状使用带延迟缓动的圆点/圆形跟随器。
39. Cursor UX：自定义光标形状使用文本光标，如 View、Drag、Click。
40. Cursor UX：自定义光标形状使用混合模式增强视觉趣味。
41. Cursor UX：自定义光标形状在悬停时缩放/变形。
42. Cursor UX：上下文变换在链接/按钮上扩展。
43. Cursor UX：上下文变换对交互元素产生磁性吸引。
44. Cursor UX：上下文变换在图片上反转颜色。
45. Cursor UX：上下文变换对播放、缩放、展开等操作使用自定义图标。
46. Cursor UX：性能上只使用 CSS transforms，不用 top/left。
47. Cursor UX：性能上 JS 光标使用 requestAnimationFrame。
48. Cursor UX：性能上在移动/触摸设备禁用自定义光标。
49. Cursor UX：性能上遵循 prefers-reduced-motion。
50. Cursor UX：用 JS 实现平滑光标跟随，cursorX += (mouseX - cursorX) * 0.1，并用 cursor.style.transform = translate(...) 更新。
51. Glassmorphism 与深度：使用 backdrop-filter 实现毛玻璃效果。
52. Glassmorphism 与深度：使用带深度层级的层叠 UI。
53. Glassmorphism 与深度：使用细微阴影和边框。
54. Glassmorphism 与深度：使用半透明背景。
55. Glassmorphism 与深度：玻璃卡片使用 background: rgba(255,255,255,0.1)、backdrop-filter: blur(10px) saturate(180%)、border: 1px solid rgba(255,255,255,0.2)、box-shadow: 0 8px 32px rgba(0,0,0,0.1)、border-radius: 16px。
56. Glassmorphism 与深度：使用 --elevation-1 到 --elevation-4 的阴影高度系统。
57. AI 增强个性化：自适应内容根据用户行为动态调整布局。
58. AI 增强个性化：自适应内容提供个性化内容推荐。
59. AI 增强个性化：自适应内容使用自适应配色方案，结合系统偏好和用户历史。
60. AI 增强个性化：自适应内容根据上下文提供智能默认值。
61. AI 增强个性化：智能交互使用带即时结果的预测搜索。
62. AI 增强个性化：智能交互使用智能表单补全。
63. AI 增强个性化：智能交互使用上下文感知建议。
64. AI 增强个性化：智能交互根据使用情况渐进式披露。
65. AI 增强个性化：性能与隐私使用客户端个性化，如 localStorage、IndexedDB。
66. AI 增强个性化：性能与隐私使用边缘计算实现快速个性化。
67. AI 增强个性化：性能与隐私使用隐私保护分析。
68. AI 增强个性化：性能与隐私透明说明数据使用。
69. AI 增强个性化：实现时回退到默认体验。
70. AI 增强个性化：个性化不造成布局偏移。
71. AI 增强个性化：尊重 Do Not Track。
72. AI 增强个性化：符合 GDPR/CCPA。
73. 沉浸式 Hero Section：使用全视口高度。
74. 沉浸式 Hero Section：使用微妙 3D 背景或动画渐变。
75. 沉浸式 Hero Section：使用大标题和流式排版。
76. 沉浸式 Hero Section：使用平滑滚动指示器。
77. 沉浸式 Hero Section：在滚动退出时使用视差。
78. 沉浸式 Hero Section：HTML 结构包含 #bg-canvas、.hero__content、.hero__title、.hero__subtitle、.hero__cta、.scroll-indicator。
79. 沉浸式 Hero Section：背景使用 Vanta.js WAVES。
80. 沉浸式 Hero Section：文本动画使用 GSAP SplitText 并设置 stagger。
81. 沉浸式 Hero Section：按钮使用 Framer Motion 悬停状态。
82. 沉浸式 Hero Section：滚动指示器使用 CSS 动画 + GSAP 在滚动时淡出。
83. 水平滚动画廊：使用 GSAP ScrollTrigger 将 .gallery__track 的 x 位移设为负的 scrollWidth 减 window.innerWidth。
84. 水平滚动画廊：设置 trigger: '.gallery'、pin: true、scrub: 1、end: '+=' + scrollWidth。
85. 水平滚动画廊：图片进入视口时懒加载。
86. 水平滚动画廊：卡片内部使用视差。
87. 水平滚动画廊：活动卡片使用缩放变换。
88. 水平滚动画廊：使用 Locomotive 实现平滑动量滚动。
89. 3D 产品查看器：使用 React Three Fiber 的 Canvas，camera position [0,0,5]、fov 50。
90. 3D 产品查看器：添加 ambientLight intensity 0.5 和 spotLight position [10,10,10]、angle 0.15。
91. 3D 产品查看器：使用 OrbitControls，enableZoom: false、autoRotate、autoRotateSpeed: 2。
92. 3D 产品查看器：添加材质变体，如颜色选择器。
93. 3D 产品查看器：添加带注释的热点。
94. 3D 产品查看器：在移动端提供 AR 模式。
95. 3D 产品查看器：提供截图/分享功能。
96. 动画数据可视化：滚动进入视口时使用数字递增动画。
97. 动画数据可视化：使用动画图表揭示，如进度条、饼图。
98. 动画数据可视化：使用交错网格动画。
99. 动画数据可视化：使用代表数据的粒子背景。
100. 动画数据可视化：用 Framer Motion + IntersectionObserver，使用 useInView(ref, { once: true }) 触发。
101. 动画数据可视化：计数动画设置 duration 2000、steps 60、increment = end / steps，并用 setInterval 更新。
102. 动画数据可视化：motion.div 使用 initial={{ opacity: 0, y: 20 }}、animate={isInView ? { opacity: 1, y: 0 } : {}}、transition={{ duration: 0.6 }}。
103. 页面切换：使用 Barba.js + GSAP 实现 leave 时 xPercent: -100、duration: 0.5，enter 时 xPercent: 100、duration: 0.5。
104. 页面切换：使用 View Transitions API（Chrome 111+）作为渐进增强。
105. 页面切换：React SPA 使用 Framer Motion 的 AnimatePresence。
106. 页面切换：使用共享元素过渡。
107. 交互式光标效果：使用带延迟的文本光标跟随。
108. 交互式光标效果：使用磁性按钮，光标被元素吸引。
109. 交互式光标效果：使用混合模式光标反转颜色。
110. 交互式光标效果：使用光标揭示内容。
111. 交互式光标效果：用 Vanilla JS + GSAP，在 links 的 mouseenter 时将 cursor scale 到 2、duration 0.3、ease: 'power2.out'；mouseleave 时 scale 到 1。
112. 交错内容揭示：使用 Framer Motion variants，container 设置 hidden: { opacity: 0 }、show: { opacity: 1, transition: { staggerChildren: 0.1 } }。
113. 交错内容揭示：item 设置 hidden: { opacity: 0, y: 20 }、show: { opacity: 1, y: 0 }。
114. 交错内容揭示：motion.div 使用 variants、initial='hidden'、whileInView='show'、viewport={{ once: true, amount: 0.3 }}。
115. 集成 GSAP ScrollTrigger：用于滚动驱动叙事、固定区块多步揭示、随滚动位置擦除动画，并批量动画以提升性能。
116. 集成 Framer Motion：用于 React 组件动画、AnimatePresence 页面切换、拖拽/悬停/点击手势、布局动画和共享元素过渡。
117. 集成 React Spring：用于物理动画、交互弹簧（拖拽、拉拽）、轨迹动画、让 UI 反馈更真实。
118. 集成 Anime.js：用于 SVG 路径动画（画线）、SVG 变形过渡、交错网格动画、基于时间线序列。
119. 集成 Lottie：用于复杂设计师动画、图标动画与微交互、加载状态、滚动驱动播放。
120. 集成 Three.js：用于自定义 3D 场景、着色器与后处理、WebGL 粒子系统、高级光照与材质。
121. 集成 React Three Fiber：用于 React 中的 3D、产品查看器与配置器、交互式 3D UI 组件、滚动驱动 3D 动画。
122. 集成 Babylon.js：用于物理 3D、VR/XR、游戏式交互、PBR 材质真实感。
123. 集成轻量 3D：用于 Vanta.js 背景、Zdog 插图、Vanilla-Tilt 倾斜效果、性能友好的 3D 点缀。
124. 集成动画组件库：使用 Magic UI 背景和文本效果、预构建交互组件、设计系统基础、快速原型。
125. 集成滚动揭示库：用于简单滚动淡入/滑入、AOS 集成、作为 ScrollTrigger 的轻量替代、快速基础揭示。
126. 无障碍：在 CSS 中使用 @media (prefers-reduced-motion: reduce) 将 animation-duration、transition-duration 等设为 0.01ms，iteration-count 设为 1，scroll-behavior 设为 auto。
127. 无障碍：用 window.matchMedia('(prefers-reduced-motion: reduce)').matches 检测，若偏好减少动态则禁用或简化动画，并跳过滚动动画改为即时揭示。
128. 无障碍：颜色对比满足 WCAG AAA，普通文本 7:1，大文本 18pt+ 为 4.5:1，并使用 OKLCH 获得感知均匀。
129. 无障碍：实现 getContrastRatio 检查对比度，计算相对亮度后返回 (lighter + 0.05) / (darker + 0.05)。
130. 无障碍：键盘导航要求所有交互元素可聚焦。
131. 无障碍：键盘导航显示可见焦点指示器，不要 outline: none。
132. 无障碍：键盘导航保持逻辑 Tab 顺序。
133. 无障碍：键盘导航为长导航提供跳过链接。
134. 无障碍：键盘导航中 Escape 键关闭模态框/覆盖层。
135. 无障碍：使用 :focus-visible 设置 outline: 3px solid var(--color-accent)、outline-offset: 2px、border-radius: 4px；鼠标用户使用 :focus:not(:focus-visible) 移除焦点环。
136. 无障碍：屏幕阅读器支持使用语义 HTML 和正确标题层级 h1-h6。
137. 无障碍：屏幕阅读器支持使用地标区域 header、nav、main、footer。
138. 无障碍：屏幕阅读器支持为图标按钮添加 aria-label。
139. 无障碍：屏幕阅读器支持为动态内容使用 aria-live 区域。
140. 无障碍：动画公告使用 role='status'、aria-live='polite'、aria-atomic='true'，例如宣布加载完成和条目数。
141. 无障碍：触摸目标最小 44x44px（iOS）、48x48px（Android）。
142. 无障碍：触摸目标之间至少间隔 8px。
143. 无障碍：按钮设置 min-height: 44px、min-width: 44px、padding: 12px 24px，点击目标包含 padding。
144. 性能：60 FPS 清单要求使用 CSS transforms（translateX/Y/Z、scale、rotate）和 opacity。
145. 性能：避免动画 top/left、width/height、margin、padding。
146. 性能：谨慎使用 will-change，考虑内存成本。
147. 性能：JS 动画使用 requestAnimationFrame。
148. 性能：GSAP 使用 gsap.set(element, { force3D: true }) 强制 GPU 加速。
149. 性能：GSAP 动画期间在 onStart 设置 element.style.willChange = 'transform'，onComplete 恢复 'auto'。
150. 性能：加载策略内联首屏关键 CSS。
151. 性能：延迟非关键 CSS。
152. 性能：异步加载 JavaScript。
153. 性能：预加载字体和首屏图片。
154. 性能：渐进增强，关键 CSS 内联，非关键样式用 link rel=preload as=style onload 加载，并用 noscript 回退。
155. 性能：图片使用 picture 和 source 提供 AVIF、WebP，img 设置 loading='lazy'。
156. 性能：响应式图片使用 srcset 与 sizes，例如 400w/800w/1200w 和媒体条件。
157. 性能：3D 内容加载时显示占位符。
158. 性能：3D 内容先加载低多边形模型。
159. 性能：3D 内容渐进增强到高多边形。
160. 性能：折叠下方 3D 场景懒加载。
161. 性能：3D 运行时使用对象池。
162. 性能：3D 运行时实现 LOD（Level of Detail）。
163. 性能：3D 运行时使用视锥剔除。
164. 性能：3D 运行时使用纹理压缩，如 Basis Universal。
165. 性能：JS 包体积使用代码分割，例如 lazy(() => import('./animations'))。
166. 性能：JS 包体积使用基于路由的分割，例如 lazy(() => import('./pages/Gallery'))。
167. 性能：JS 包体积 tree shaking，使用 ES6 imports 并只导入所需内容。
168. 性能：JS 包体积使用现代构建工具 Vite、esbuild。
169. 避免陷阱：过度动画时限制动画为有意义的交互，用动画引导注意力而非强行吸引，遵循 animation with purpose，用 Chrome DevTools Performance 测量，无法解释存在理由的动画就移除。
170. 避免陷阱：忽略移动性能时在真实设备测试，不只模拟器；移动端降低动画复杂度；低端设备禁用昂贵效果（视差、3D）；用 matchMedia 做设备特定体验。
171. 避免陷阱：低端设备检测可用 navigator.userAgent 与 navigator.hardwareConcurrency < 4，若命中则简化或禁用动画。
172. 避免陷阱：缺少回退时采用渐进增强，核心内容不依赖 JS，使用前做特性检测，对关键功能加 polyfill。
173. 避免陷阱：用 'IntersectionObserver' in window 做特性检测，支持则用滚动触发动画，不支持则立即显示内容。
174. 避免陷阱：无障碍疏漏时只用键盘测试、用屏幕阅读器 NVDA/VoiceOver 测试、始终检查 prefers-reduced-motion、使用语义 HTML、维护焦点管理。
175. 避免陷阱：无障碍检查清单包括所有交互元素键盘可访问、焦点指示可见、颜色对比满足 WCAG AAA、动态可禁用、屏幕阅读器公告合理。
176. 避免陷阱：忽略加载状态时使用骨架屏、平滑加载过渡、为动态内容预留空间、显示有意义的加载指示器。
177. 避免陷阱：骨架屏模式中 loading 时渲染 .skeleton__image、.skeleton__title、.skeleton__price，加载后渲染 ProductCardContent。
178. 避免陷阱：滚动劫持时保留浏览器原生滚动（动量、键盘），使用 ScrollTrigger/Locomotive 但不改变滚动物理，让用户按自己节奏滚动，绝不彻底禁用滚动，避免整页滚动劫持。
179. 设计系统架构：使用 CSS 自定义属性定义颜色 token，如 --color-primary: oklch(50% 0.2 250)、--color-accent: oklch(65% 0.25 30)。
180. 设计系统架构：间距 token 使用 --space-2xs 到 --space-2xl 的 clamp() 一致尺度。
181. 设计系统架构：字体 token 使用流式 --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem)。
182. 设计系统架构：动画 token 使用 --duration-fast: 150ms、--duration-normal: 250ms、--duration-slow: 400ms。
183. 设计系统架构：缓动 token 使用 --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)、--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)。
184. 设计系统架构：组件架构按 Atomic Design 分为 Atoms、Molecules、Organisms、Templates、Pages。
185. 参考资源：查看 references/ 下的 design_trends_2024.md、interaction_patterns.md、accessibility_guide.md、performance_checklist.md。
186. 工具：使用 scripts/pattern_generator.py 生成设计模式样板。
187. 工具：使用 scripts/design_audit.py 审计现有设计的合规性。
188. 资源：使用 assets/ 中的设计系统模板和起始文件，详见 assets/README.md。

适用边界 · 注意事项

• 不适用于纯后端/API 项目或没有前端界面、交互与视觉设计需求的任务。
• 不适用于必须完全避免 JavaScript、动画、第三方库或个性化，且无法做渐进增强的极端限制环境。
• 不适用于需要严格遵守无动画、无第三方脚本、无客户端存储的高安全/高合规场景（如部分政府、医疗、金融系统）时，应先做合规评估。