# 现代网页设计 ## 概述 2024-2025 年的现代网页设计强调性能、可访问性和有意义的交互。该技能提供了有关当前设计趋势、实施模式和最佳实践的全面指导，以创建引人入胜、可访问且高性能的 Web 体验。该元技能综合了该存储库中所有动画、交互和 3D 技能的知识，以提供整体设计指导。 ## 核心设计原则（2024-2025） ### 1\.性能第一的设计 **理念**：设计决策应优先考虑所有设备上的核心网络生命和用户体验。 **关键指标**： * 最大内容绘制 (LCP)：< 2.5s * 首次输入延迟 (FID)：< 100ms * 累积布局偏移 (CLS)：< 0.1 * 与下一次绘制的交互 (INP)：< 200ms **实施指南**： * 将非关键动画推迟到页面加载之后 * 使用 CSS 变换/不透明度进行动画（GPU 加速） * 实现图像、视频和 3D 内容的延迟加载 * 渐进增强：核心内容无需JavaScript **相关技能**：`gsap-scrolltrigger`、`motion-framer`、`lottie-animations` 用于优化动画 ### 2\.大胆的极简主义 **特点**： * 大而有影响力的排版（clamp()用于流体尺寸调整） * 充足的空白（负空间作为设计元素） * 有限的调色板（3-5 个原色） * 有意使用大胆的强调色 * 几何形状和简洁的线条 **版式比例**（现代流体系统）： /*使用clamp()进行流畅的排版*/ --font-size-xs: 夹子(0.75rem, 0.7rem + 0.25vw, 0.875rem); --font-size-sm: 夹子(0.875rem, 0.8rem + 0.375vw, 1rem); --font-size-base: 夹子(1rem, 0.9rem + 0.5vw, 1.25rem); --font-size-lg: 夹子(1.25rem, 1.1rem + 0.75vw, 1.75rem); --font-size-xl: 夹子(1.75rem, 1.5rem + 1.25vw, 2.5rem); --font-size-2xl: 夹子(2.5rem, 2rem + 2.5vw, 4rem); --font-size-3xl: 夹子(3.5rem, 2.5rem + 5vw, 6rem); **颜色系统**（辅助功能优先）： /* WCAG AAA 兼容颜色系统 */ --颜色主色：oklch(50% 0.2 250); /* 蓝色 */ --颜色强调：oklch(65% 0.25 30); /* 珊瑚 */ --color-neutral-50: oklch(98% 0 0); --color-neutral-900: oklch(20% 0 0); /* 对比度：文本最小7:1 */ **相关技能**：UI 组件的“动画组件库” ### 3\.微交互 **定义**：小型、有目的的动画，可提供反馈、指导用户并增强感知性能。 **类别**： **a) 悬停状态**（桌面）： * 比例变换 (1.05-1.1x) * 颜色过渡（200-300ms） * 阴影深度变化 * 光标变换 **b) 加载状态**： * 骨架屏幕（比旋转屏幕更好） * 渐进式图像加载（模糊技术） * 乐观的用户界面更新 * 交错内容揭示 **c) 互动反馈** : * 按钮按下状态（缩小 0.95 倍） * 具有弹簧物理原理的拨动开关 * 表单字段验证（即时、友善的反馈） * 带有动作的成功/错误状态 **实现示例**（成帧器运动）： // 具有微交互的按钮 <动作.按钮 whileHover={{ 尺度: 1.05, y: -2 }} whileTap={{ 比例: 0.95 }} 过渡={{类型：“弹簧”，刚度：400，阻尼：17}} > 点我 **相关技能**：用于微交互的`motion-framer`、`react-spring-physicals`、`animejs` ### 4\.滚动讲述 **定义**：叙事驱动的体验，其中内容随着用户滚动而显示和变换。 **模式**： **a) 滚动触发显示** : * 滚动条目淡入（带偏移） * 从两侧错开滑入 * 比例+不透明度过渡 * 剪辑路径显示 **b) 滚动链接动画** : * 视差层（不同的滚动速度） * 水平滚动部分 * 带有滑动动画的固定部分 * 3D 对象旋转与滚动相关 **c) 进度指标**： * 读取进度条 * 分步视觉指南 * 滚动后的动画 SVG 路径 **实现示例**（GSAP ScrollTrigger）： // 滚动链接 3D 旋转 gsap.to(".cube", { 滚动触发器：{ 触发器：“.section”，开始：“顶顶”，结束：“底部顶部”， scrap: 1, // 平滑擦洗 }, 旋转Y：360，轻松：“无” }); **相关技能**：用于 3D 滚动讲述的 `gsap-scrolltrigger`、`locomotive-scroll`、`scroll-reveal-libraries`、`react- Three-Fiber` ### 5\.光标用户体验 **进化**：自定义光标增强交互并提供上下文反馈。 **模式**： **a) 自定义光标形状** : * 圆/点追随者（缓动延迟） * 基于文本的光标（“查看”、“拖动”、“单击”） * 视觉趣味的混合模式 * 悬停时缩放/变形 **b) 上下文转换**： * 扩展链接/按钮 * 对互动元素的磁力吸引力 * 图像颜色反转 * 自定义操作图标（播放、缩放、展开） **c) 性能考虑因素**： * 仅使用 CSS 变换（无顶部/左侧） * JS 光标的 RequestAnimationFrame * 在移动/触摸设备上禁用 * 尊重“偏好减少运动” **实施示例**： // 简单的平滑光标跟随器 const 游标 = document.querySelector('.cursor'); 让鼠标X = 0，鼠标Y = 0；让光标X = 0，光标Y = 0； document.addEventListener('mousemove', (e) => { mouseX = e.clientX; 鼠标Y = e.clientY; }); 函数更新光标（）{ // 平滑缓动光标X += (鼠标X - 光标X) * 0.1; 光标Y += (鼠标Y - 光标Y) * 0.1; cursor.style.transform = `翻译(${cursorX}px, ${cursorY}px)`; 请求动画帧（更新光标）； } 更新游标（）； **相关技能**：`gsap-scrolltrigger`（用于缓动），`motion-framer`（用于 React 光标组件） ### 6\.玻璃晶质和深度 **特点**： * 磨砂玻璃效果（背景滤镜） * 具有深度层次结构的分层用户界面 * 微妙的阴影和边框 * 半透明背景 **现代玻璃晶质**（2024）： .glass-card { 背景：rgba(255, 255, 255, 0.1); 背景过滤器：模糊（10px）饱和（180％）；边框: 1px 实心 rgba(255, 255, 255, 0.2); 盒子阴影：0 8px 32px rgba(0, 0, 0, 0.1); 边框半径：16px； } **深度系统**（分层）： /* 海拔比例 */ --elevation-1: 0 1px 3px rgba(0,0,0,0.12); --elevation-2: 0 4px 8px rgba(0,0,0,0.15); --elevation-3: 0 8px 16px rgba(0,0,0,0.18); --elevation-4: 0 16px 32px rgba(0,0,0,0.2); **相关技能**：玻璃形态组件的“动画组件库” ### 7\.人工智能增强的个性化 **模式**： **a) 自适应内容**： * 基于用户行为的动态布局 * 个性化内容推荐 * 自适应配色方案（系统偏好+用户历史记录） * 基于上下文的智能默认值 **b) 智能交互** : * 具有即时结果的预测搜索 * 智能填写表格 * 上下文感知建议 * 根据使用情况逐步披露 **c) 性能 + 隐私** : * 客户端个性化（localStorage、IndexedDB） * 边缘计算实现快速个性化 * 隐私保护分析 * 透明的数据使用 **实施注意事项**： * 回退到默认体验 * 个性化布局不会发生变化 * 尊重“请勿追踪” * GDPR/CCPA 合规性 ## 常见设计模式 ### 模式 1：沉浸式英雄部分 **用例**：登陆页面、产品发布、产品组合网站 **特点**： * 全视口高度 * 微妙的 3D 背景或动画渐变 * 采用流畅排版的大标题 * 平滑滚动指示器 * 滚动退出时的视差 **实施**（组合方法）： **HTML 结构**： <节类=“英雄”>

现代设计

性能与美观的结合

滚动

**技术**： * 背景：Vanta.js WAVES 效果（`lightweight-3d-effects`） * 文本动画：带交错的 GSAP SplitText (`gsap-scrolltrigger`) * 按钮：Framer Motion 悬停状态（`motion-framer`） * 滚动指示器：CSS 动画 + GSAP 滚动时淡出 **相关技能**：`lightweight-3d-effects`、`gsap-scrolltrigger`、`motion-framer` ### 模式2：横向卷轴画廊 **用例**：作品集工作、产品展示、案例研究 **实现**（GSAP ScrollTrigger）： gsap.to(".gallery__track", { x: () => -(document.querySelector(".gallery__track").scrollWidth - window.innerWidth), 轻松：“无”，滚动触发器：{ 触发器：“.gallery”，引脚：真实，磨砂膏：1、结束： () => "+=" + document.querySelector(".gallery__track").scrollWidth } }); **增强**： * 当图像滚动到视图中时延迟加载图像 * 卡片内的视差 * 活动卡上的比例变换 * 使用 Locomotive 实现平滑的动量滚动 **相关技能** : `gsap-scrolltrigger`, `locomotive-scroll` ### 模式 3：3D 产品查看器 **用例**：电子商务、产品营销、展示 **实施**（反应三纤维）：从“@react-三/纤维”导入{画布} 从 '@react-two/drei' 导入 { OrbitControls, useGLTF } 函数 ProductViewer() { 返回（ <画布相机={{位置:[0,0,5],fov:50}}> <环境光强度={0.5} /> <聚光灯位置={[10,10,10]}角度={0.15}/> <产品/> <轨道控制启用缩放={假} 自动旋转自动旋转速度={2} /> ） } **增强**： * 材质变体（颜色选择器） * 带注释的热点 * 移动端AR模式 * 截图/分享功能 **相关技能**：`react- Three-Fiber`、` Threejs-WebGl`、`Model-Viewer-Component` ### 模式 4：动画数据可视化 **用例**：仪表板、分析、信息图表 **模式**： * 滚动到视图时的计数动画 * 动画图表显示（进度条、饼图） * 交错网格动画 * 代表数据的粒子背景 **实现**（成帧器运动+ IntersectionObserver）：函数 AnimatedStat({ 结束, 标签 }) { const [count, setCount] = useState(0); const ref = useRef(); const isInView = useInView(ref, { Once: true }); 使用效果（（）=> { 如果（正在查看）{ // 计数动画常量持续时间= 2000；常量步数 = 60； const 增量 = 结束 / 步骤；令电流=0；常量计时器 = setInterval(() => { 当前+=增量；如果（当前>=结束）{ 设置计数（结束）；清除间隔（计时器）； } 否则{ setCount(Math.floor(当前)); } }，持续时间/步骤）； } }, [isInView, 结束]); 返回（ <运动.div 参考={参考} 初始={{ 不透明度: 0, y: 20 }} 动画={isInView？ { 不透明度: 1, y: 0 } : {}} 过渡={{持续时间:0.6}} >

{计数}+

{标签}

）； } **相关技能**：`motion-framer`、`pixijs-2d` 用于基于画布的可视化 ### 模式 5：页面转换 **用例**：多页面应用程序、作品集网站、讲故事的体验 **实现**（Barba.js + GSAP）：巴巴.init({ 转换：[{ 名称：'幻灯片'，离开（数据）{ 返回 gsap.to(data.current.container, { x百分比：-100，持续时间：0.5 }); }, 输入（数据）{ 返回 gsap.from(data.next.container, { x百分比：100，持续时间：0.5 }); } }] }); **现代替代品**： * View Transitions API（Chrome 111+，渐进增强） * Framer Motion 的 React SPA 的 AnimatePresence * 共享元素转换 **相关技能**：`barba-js`、`gsap-scrolltrigger`、`motion-framer` ### 模式 6：交互式光标效果 **用例**：创意机构、作品集、互动体验 **模式**： * 文本光标延迟跟随 * 磁性按钮（光标吸引到元素上） *混合模式光标（反转颜色） * 显示内容的光标 **实现**（Vanilla JS + GSAP）： const links = document.querySelectorAll('a'); const 游标 = document.querySelector('.cursor'); links.forEach(链接=> { link.addEventListener('mouseenter', () => { gsap.to(光标, { 规模：2，持续时间：0.3，轻松：“power2.out” }); }); link.addEventListener('mouseleave', () => { gsap.to(光标, { 规模：1，持续时间：0.3，轻松：“power2.out” }); }); }); **相关技能**：`gsap-scrolltrigger`、`motion-framer` ### 模式 7：交错内容展示 **用例**：功能部分、推荐、团队网格 **实现**（成帧器运动变体）：常量容器= { 隐藏：{ 不透明度：0 }，显示：{ 不透明度：1，过渡：{ 交错儿童：0.1 } } }; 常量项 = { 隐藏：{ 不透明度：0，y：20 }，显示：{ 不透明度：1，y：0 } }; 功能特征网格（）{ 返回（ <运动.div 变体={容器} 初始=“隐藏” whileInView =“显示” viewport={{ 一次: true, 金额: 0.3 }} 类名=“网格” > {features.map((feature, i) => ( {功能} ))} ）； } **相关技能**：`motion-framer`、`gsap-scrolltrigger`、`scroll-reveal-libraries` ## 与其他技能的整合 ### 动画技能整合 **GSAP ScrollTrigger** (`gsap-scrolltrigger`)： * 用于滚动驱动的故事讲述 * 用于多步显示的引脚部分 * 与滚动位置相关的滑动动画 * 批量动画以提高性能 **成帧器运动**（`运动成帧器`）： * React组件动画 * 使用 AnimatePresence 进行页面转换 * 基于手势的交互（拖动、悬停、点击） * 布局动画（共享元素过渡） **React Spring**（`react-spring-physical`）： * 基于物理的动画（更自然的感觉） * 交互式弹簧（拖、拉） * 轨迹动画（连续显示） * 用于感觉“真实”的 UI 反馈 **Anime.js** (`animejs`)： * SVG路径动画（画线） * SVG 变形过渡 * 交错网格动画 * 基于时间轴的序列 **洛蒂**（`洛蒂动画`）： * 复杂的设计师创建的动画 * 图标动画和微交互 * 加载状态 * 滚动驱动播放 ### 3D 技能整合 **Three.js** (` Threejs-webgl`)： * 定制3D场景和体验 * 着色器效果和后处理 * 基于WebGL的粒子系统 * 先进的照明和材料 **反应三纤维**（`反应三纤维`）： * React 应用程序中的 3D * 产品查看器和配置器 * 交互式3D UI组件 * 滚动驱动的 3D 动画 **Babylon.js**（`babylonjs-engine`）： * 基于物理的 3D 体验 * VR/XR应用 * 游戏般的互动 * 逼真的PBR材质 **轻量级 3D**（“轻量级 3D 效果”）： * 背景效果（Vanta.js） * 微妙的 3D 插图 (Zdog) * 倾斜效果（Vanilla-Tilt） * 性能友好的 3D 装饰 ### 组件库 **动画组件**（`动画组件库`）： * 神奇的 UI 组件（背景、文字效果） * 预置交互组件 * 设计系统基础 * 快速原型制作 **滚动显示**（`滚动显示库`）： * 滚动时简单的淡入淡出/滑动 * AOS库集成 * ScrollTrigger 的轻量级替代方案 * 快速实现基本揭示 ## 辅助功能最佳实践 ### 1\.动作与动画 **尊重用户偏好**： @media（首选减少运动：减少）{ *, *::之前， *::之后{ 动画持续时间：0.01ms！重要；动画迭代计数：1！重要；转换持续时间：0.01ms！重要；滚动行为：自动！重要； } } **JavaScript 检测**： const PreferredsReducedMotion = window.matchMedia('(prefers-reduced-motion：reduce)').matches; 如果（首选ReducedMotion）{ // 禁用或简化动画 gsap.config({ nullTargetWarn: false }); // 跳过滚动动画，使用即时显示 } ### 2\.色彩对比 **WCAG AAA 标准**： * 普通文本：7:1 对比度 * 大文本 (18pt+)：4.5:1 对比度 * 使用 OKLCH 色彩空间实现感知均匀性 **测试**： // 检查对比度函数 getContrastRatio(颜色1, 颜色2) { const l1 = getLuminance(color1); const l2 = getLuminance(color2); const 打火机 = Math.max(l1, l2); const darker = Math.min(l1, l2); 返回（较亮 + 0.05）/（较暗 + 0.05）； } ### 3\.键盘导航 **要求**： * 所有交互元素均可聚焦 * 可见焦点指示器（无轮廓：无） * 逻辑 Tab 键顺序 * 跳过长导航链接 * Escape 键关闭模态/叠加层 **焦点风格**（现代）： :焦点可见 { 轮廓：3px 实心 var(--color-accent); 轮廓偏移：2px；边框半径：4px； } /* 移除鼠标用户的聚焦环 */ :焦点:不(:焦点可见) { 概要：无； } ### 4\.屏幕阅读器支持 **语义 HTML** ： * 使用正确的标题层次结构 (h1-h6) * 标志性区域（页眉、导航、主要、页脚） * 图标按钮的咏叹调标签 * 用于动态内容的 aria-live 区域 **动画公告**：

加载完成。显示 12 项。

### 5\.触摸目标 **最小尺寸**：44x44 像素 (iOS)、48x48 像素 (Android) **间距**：触摸目标之间的最小距离为 8 像素 **实施**： .按钮{ 最小高度：44px；最小宽度：44px；内边距：12 像素 24 像素； /* 点击目标包括填充 */ } ## 性能优化 ### 1\.动画表演 **60 FPS 检查表**： * 使用 CSS 变换（translateX/Y/Z、缩放、旋转）- GPU 加速 * 使用不透明度进行淡入淡出 - GPU 加速 * 避免：顶部/左侧、宽度/高度、边距、填充动画 * 谨慎使用“will-change”（内存成本） * JS动画的RequestAnimationFrame **GSAP 性能**： // 强制GPU加速 gsap.set(element, {force3D: true }); // 仅在动画期间使用 will-change gsap.to(元素, { x：100， onStart: () => element.style.willChange = '变换', onComplete: () => element.style.willChange = 'auto' }); ### 2\.加载策略 **关键路径**： * 内联关键CSS（首屏） * 推迟非关键CSS * 异步 JavaScript 加载 * 预加载字体和英雄图像 **逐步增强**： <风格> /* 关键 CSS 内联 */ ### 3\.图像优化 **现代格式**： <图片>

**响应式图像**： <图片 srcset =“image-400.jpg 400w，图像-800.jpg 800w, 图片-1200.jpg 1200w" 尺寸=“（最大宽度：640px）100vw，（最大宽度：1024px）50vw， 33大众” src =“图像-800.jpg” alt=“描述” 加载=“懒惰” > ### 4\. 3D内容优化 **加载策略**： * 加载时显示占位符 * 首先加载低多边形模型 * 逐步增强高多边形 * 延迟加载折叠下方的 3D 场景 **运行时性能**： * 使用对象池 * 实施LOD（细节级别） * 视锥体剔除 * 纹理压缩（基础通用） **相关技能** : `twojs-webgl`, `react- Three-Fiber`, `babylonjs-engine` ### 5\. JavaScript 包大小 **代码分割**： // 动态导入 const AnimationModule = lazy(() => import('./animations')); // 基于路由的分割 const Gallery = 惰性(() => import('./pages/Gallery')); **摇树**： * 使用 ES6 导入 * 仅导入您需要的内容 * 使用现代构建工具（Vite、esbuild） ## 常见陷阱 ### 陷阱 1：过度动画 **问题**：太多的动画会分散内容的注意力并损害性能。 **解决方案**： * 将动画限制为有意义的交互 * 使用动画来引导注意力，而不是强加注意力 * 遵循原则：“有目的的动画” * 衡量性能影响（Chrome DevTools 性能选项卡） **经验法则**：如果您无法解释动画存在的原因，请将其删除。 ### 陷阱 2：忽略移动性能 **问题**：动画在桌面上正常工作，但在移动设备上滞后。 **解决方案**： * 在真实设备上测试（不仅仅是模拟器） * 降低移动设备上的动画复杂度 * 在低端设备上禁用昂贵的效果（视差、3D） * 使用“matchMedia”获得特定于设备的体验 const isLowEndDevice = () => { 返回 /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) && 导航器.hardwareConcurrency < 4; }; 如果（isLowEndDevice（））{ // 简化或禁用动画 } ### 陷阱 3：缺少后备措施 **问题**：没有 JavaScript 或在较旧的浏览器上体验会中断。 **解决方案**： * 渐进增强心态 * 核心内容无需JS即可访问 * 使用现代 API 之前进行特征检测 * 用于关键功能的 Polyfill // 特征检测 if ('IntersectionObserver' in window) { // 使用滚动触发的动画 } 否则{ // 立即显示内容 } ### 陷阱 4：可访问性监督 **问题**：忘记键盘用户、屏幕阅读器或动作敏感用户。 **解决方案** ： * 仅使用键盘进行测试 * 使用屏幕阅读器（NVDA、VoiceOver）进行测试 * 始终检查`prefers-reduced-motion` * 使用语义 HTML * 保持适当的焦点管理 **清单**： * 所有交互元素均可通过键盘访问 * 焦点指示器可见 * 颜色对比度符合 WCAG AAA * 可以禁用运动 * 屏幕阅读器公告很有意义 ### 陷阱 5：忽略加载状态 **问题**：内容加载期间出现空白屏幕或布局发生变化。 **解决方案**： * 骨架屏幕可预测布局 * 平滑的加载过渡 * 为动态内容预留空间 * 显示有意义的加载指标 // 骨架屏图案函数 ProductCard({ 加载, 数据 }) { 如果（加载）{ 返回（

）； } 返回 ; } ### 陷阱 6：滚动劫持 **问题**：覆盖本机滚动行为会让用户感到沮丧。 **解决方案**： * 保留浏览器的原生滚动（动量、键盘） * 使用 ScrollTrigger/Locomotive 而不改变滚动物理 * 允许用户按照自己的节奏滚动 * 切勿完全禁用滚动 * 避免整页部分的滚动劫持 **良好实践**：增强滚动，不要替换它。 ## 设计系统架构 ### 代币结构 **现代设计令牌**（CSS 自定义属性）：：根{ /* 颜色 - OKLCH 用于感知均匀性 */ --颜色主色：oklch(50% 0.2 250); --颜色强调：oklch(65% 0.25 30); /* 间距 - 一致的比例 */ --space-2xs: 钳位(0.25rem, 0.2rem + 0.25vw, 0.375rem); --space-xs: 钳位(0.5rem, 0.4rem + 0.5vw, 0.75rem); --space-sm: 钳位(0.75rem, 0.6rem + 0.75vw, 1.125rem); --space-md: 钳位(1rem, 0.8rem + 1vw, 1.5rem); --space-lg: 钳位(1.5rem, 1.2rem + 1.5vw, 2.25rem); --space-xl: 钳位(2rem, 1.6rem + 2vw, 3rem); --space-2xl: 钳位(3rem, 2.4rem + 3vw, 4.5rem); /* 版式 - 流体比例 */ --font-size-base: 夹子(1rem, 0.9rem + 0.5vw, 1.25rem); /* 动画 - 一致的时序 */ --持续时间快：150ms； --正常持续时间：250ms； --持续时间慢：400ms； /* 缓动 - 自然运动 */ --缓入缓出：三次贝塞尔曲线(0.4, 0, 0.2, 1); --ease-spring: 三次贝塞尔曲线(0.34, 1.56, 0.64, 1); } ### 组件架构 **原子设计**（布拉德·弗罗斯特）： 1. **原子**：按钮、输入、标签 2. **分子**：表单字段、卡片 3. **有机体**：导航、英雄部分 4. **模板**：页面布局 5. **Pages**：具体实例 **相关技能**：组件模式的“动画组件库” ## 资源该技能参考以下技能来实现： ### 动画与交互 * `gsap-scrolltrigger` \- 滚动驱动的动画、固定、擦洗 * `motion-framer` \- 反应动画、手势、布局动画 * `react-spring-physicals` \- 基于物理的动画 * `animejs` \- SVG 动画，交错效果 * `lottie-animations` \- 设计师创建的动画 * `scroll-reveal-libraries` \- 简单滚动显示 (AOS) ### 3D 和 WebGL * `twojs-webgl` \- 自定义 3D 场景和效果 * `react-三纤维` \- React 应用程序中的 3D * `babylonjs-engine` \- 基于物理的 3D、VR/XR * `lightweight-3d-effects` \- Vanta.js 背景，Zdog 插图 ### 页面转换和滚动 * `barba-js` \- 页面转换 * `locomotive-scroll` \- 平滑滚动 ### 组件库 * `动画组件库` \- Magic UI，React Bits * `pixijs-2d` \- 基于画布的 2D 图形 ### 详细参考资料请参阅“references/”目录以获取深入的文档： * `design_trends_2024.md` \- 当前网页设计趋势和预测 * `interaction_patterns.md` \- 综合微交互目录 * `accessibility_guide.md` \- WCAG 合规模式和测试 * `performance_checklist.md` \- 优化策略和指标 ### 脚本 `scripts/` 目录包含用于实现设计模式的工具： * `pattern_generator.py` \- 生成设计模式样板 * `design_audit.py` \- 审核现有设计的合规性 ### 资产 “assets/”目录包含设计系统模板和启动文件。有关详细信息，请参阅“assets/README.md”。

现代网页设计

包含技能