design-trends

设计趋势

截至 2026 年第 1／第 2 季度，当前获奖作品中的设计模式与新兴技术。本技能采用便于定期更新的结构——每个部分都可以独立更新。

范围

在以下情况下使用本技能：

• 开始新的网页设计项目，需要了解当前趋势
• 想评估现有设计是否符合当代审美
• 按照当前标准设计首屏、动画或布局
• 追求获奖水准的品质（Awwwards、CSSDA、Godly）

原则

1. 让动效传达意义

动画不是装饰。它传达层级、状态和叙事。获奖网站（CSSDA JPANEL 8.0+）一贯依赖滚动驱动和基于状态的动效。

2. 让排版成为主角

超大、富有表现力的排版主导首屏。文字本身就是布局，而非仅仅是布局中的内容。

3. 化繁为简，保留层次

极简主义依然盛行，但会通过细腻的阴影、模糊层和微纹理营造层次。扁平化设计已过时，极简主义仍在延续。

4. 默认采用深色界面

深色模式不是可选项，而是首选的设计方向。浅色版本则是衍生方案。

5. 以滚动讲述故事

纵向滚动是主要交互方式。每个滚动区段都是一个叙事节拍。

6. 将性能视为功能

60fps 的动画和快速加载时间是获奖的必要条件，而非额外加分项。

规则

动效与动画

• 要做：使用 IntersectionObserver 或 ScrollTimeline API 实现滚动触发的动画。
• 要做：通过 View Transitions API 或 FLIP 动画实现页面状态间的过渡。
• 要做：设计符合品牌特色的加载动画——不要使用通用旋转图标。
• 不要：使用没有目的的动画。每个动效都必须引导注意力、指示状态或明确层级。
• 不要：使用超过 400ms 的动画（叙事性滚动序列除外）。
• 不要：过度使用视差。细微的视差效果可行；图层位移过大则会让人迷失方向。

排版趋势

• 要做：使用可变字体，实现流畅的字重过渡和响应式排版。
• 要做：在首屏使用字号较大（80px+）、对比鲜明的展示字体。
• 要做：使用一种富有表现力的展示字体搭配一种中性的正文字体，最多使用 2 种字体系列。
• 不要：每个页面加载超过 3 种字重。
• 不要：在首屏使用系统字体——这会显得缺乏设计意图。

色彩与美学

• 要做：采用单色或高度精简的调色板，并点缀重点色（2-3 种颜色）。
• 要做：以高对比度的深色背景作为主要主题。
• 要做：让色彩发挥功能性指示作用——重点色用于主要操作。
• 不要：调色板中使用超过 4 种彩色。
• 不要：使用没有纹理或层次的纯白背景。优先选择米白色或细腻的渐变。

布局创新

• 要做：采用非对称网格布局——有意打破 12 列网格。
• 要做：使用 Bento 网格展示功能（Apple 风格）。
• 要做：交替使用全幅区段和内容宽度受限的区段，营造节奏感。
• 不要：使用缺乏视觉张力的僵化 Bootstrap 网格。
• 不要：将横向滚动用作主要导航方式（画廊场景除外）。

交互模式

• 要做：设计光标交互，包括自定义光标、悬停显示和磁吸按钮。
• 要做：为每个交互元素添加微交互（悬停／聚焦／激活状态）。
• 要做：使用 Lenis 或原生 CSS scroll-behavior 实现平滑滚动。
• 不要：在没有明确价值的情况下劫持自然滚动行为。
• 不要：将点击目标设得小于 44x44px。

设计模式

详细的设计模式说明：参见 references/patterns.md

设计模式	用途	参考
沉浸式首屏	落地页、作品集、品牌网站	SOM CSSDA 8.56，Detroit Paris 8.41
滚动叙事	产品发布、案例研究	由滚动位置驱动的动画
Bento Grid 仪表盘	功能概览、SaaS 落地页	Vercel Ship、Notion
深色画布	科技产品、开发者工具	从 #0a0a0a 到 #1a1a1a 的背景
动态排版	品牌网站、活动页面	Darknode CSSDA 8.38
AI 原生界面	集成 AI 的 SaaS、Agent 应用	将 Cmd+K 作为 AI 入口
微动画系统	每个专业的 Web 应用	动效 token 系统

反面模式

1. 动画过载 —— 当所有内容都动起来时，就没有什么能脱颖而出。优先级：首屏入场 > 滚动显现 > 悬停状态 > 装饰性动效。
2. 通用渐变背景 —— 紫蓝渐变已被过度使用。应采用符合品牌特色的配色处理，而不是照搬趋势。
3. 没有实际用途的伪 3D —— 缺乏实质价值的 WebGL 场景会浪费加载时间和电量。
4. 照搬 Awwwards 获奖作品 —— 应调整并应用趋势，而不是照搬。
5. 忽视无障碍访问 —— 没有键盘导航和屏幕阅读器兼容性，就称不上获奖作品。
6. 把移动端当作事后补充 —— 响应式设计是必须的。只在桌面端令人印象深刻的网站，无法通过 UX 评估。
7. 自动播放带声音的视频 —— 应使用静音背景视频，或由用户主动开始播放。
8. 过度劫持滚动 —— 完全覆盖自然滚动行为，会让用户失去方向感和控制权。

检查清单

• 首屏区域包含具有明确叙事目的的动画
• 排版：最多使用 2 种字体，其中包括 1 种富有表现力的展示字体
• 调色板：最多使用 4 种彩色，加上中性色
• 已实现深色模式，或有意将其选为主主题
• 滚动动画使用 IntersectionObserver 或 ScrollTimeline
• 所有交互元素都有悬停／聚焦／激活状态
• 动画遵循 prefers-reduced-motion 设置
• 有意打破网格布局，营造视觉张力
• 移动端版本经过独立设计，而非仅通过响应式布局缩小
• 首屏区域不使用图库照片
• 所有动画均以 60fps 运行（无布局抖动）
• 为异步加载状态提供骨架屏
• 在 3G 模拟环境下，加载时间低于 3 秒

交叉参考

• ui-patterns —— 实现这些趋势的具体 UI 模式
• visual-direction —— 调色板、字体搭配、构图细节
• component-patterns —— 技术组件结构（21st.dev SDK）
• agent-ui-design —— AI 界面趋势和 Agent 用户体验
• web-typography —— 排版系统和缩放比例
• color-theory —— 色彩系统基础和 token 结构
• accessibility —— 无障碍访问是获得奖项的先决条件
• responsive-design —— 移动端策略和断点系统