elite-inspiration

精选灵感

精选自 Awwwards、FWA 和 CSS Design Awards 的参考案例。

快速参考

模式	参考文件
横向滚动	horizontal-scroll-sites.md
Bento 网格	bento-grid-sites.md
文字动画	text-animation-sites.md
视差滚动	parallax-sites.md
产品配置器	product-configurators.md
代理机构作品集	agency-portfolios.md
微交互	micro-interactions.md
原型案例研究	archetype-case-studies.md

---

如何研究灵感

不要照搬，要理解

研究获奖网站时：

1. 识别技术 - 使用了什么动画/布局？
2. 理解目的 - 为什么使用这种技术？它传达了什么？
3. 分析时序 - 记录缓动、时长和交错模式
4. 规划实现方式 - 你会如何构建？
5. 结合实际情境 - 它如何适用于你的项目？

可以提出的问题

• 是什么让它显得高端？
• 动画如何为内容提供支持？
• 动效的层级如何安排？
• 它如何适配移动设备？
• 有哪些无障碍方面的考量？

---

奖项平台

Awwwards

URL: https://www.awwwards.com

最适合：前沿技术、设计趋势、代理机构作品

主要版块：

• 每日精选网站
• 荣誉提名
• 开发者奖项

FWA（Favourite Website Awards）

URL: https://thefwa.com

最适合：实验性作品、交互体验、WebGL

主要版块：

• 每日精选网站
• 每日精选移动网站

CSS Design Awards

URL: https://www.cssdesignawards.com

最适合：专注 CSS 的设计、简洁的实现

Godly

URL: https://godly.website

最适合：精选落地页、SaaS 设计灵感

Landbook

URL: https://land-book.com

最适合：落地页模式、以转化为导向的设计

SaaS Landing Page

URL: https://saaslandingpage.com

最适合：B2B SaaS 设计模式

---

模式类别

横向滚动

适用于：作品集、案例研究、叙事

主要技术：

• GSAP ScrollTrigger 固定
• CSS scroll-snap
• 进度指示器
• 移动端回退为纵向滚动

研究这些案例 → 参见 horizontal-scroll-sites.md

---

Bento 网格

适用于：功能展示、产品页面、仪表板

主要技术：

• 使用跨度的 CSS Grid
• 响应式重排
• 卡片悬停效果
• 用于筛选的 FLIP 动画

研究这些案例 → 参见 bento-grid-sites.md

---

文字动画

适用于：首屏区域、标题、叙事

主要技术：

• SplitText 字符/单词动画
• 遮罩显现
• 交错模式
• 与滚动联动的显现效果

研究这些案例 → 参见 text-animation-sites.md

---

视差效果

适用于：纵深感、沉浸感、叙事

主要技术：

• 多层纵深
• 基于滚动的变换
• 粘性版块
• CSS perspective

研究这些案例 → 参见 parallax-sites.md

---

产品配置器

适用于：电商、SaaS、定制

关键技术：

• 3D 模型集成
• 颜色／选项切换
• 实时预览
• FLIP 过渡效果

研究这些 → 查看 product-configurators.md

---

创意机构作品集

适用于：创意工作室、自由职业者

关键技术：

• 案例研究导航
• 项目悬停预览
• 自定义光标
• 页面过渡效果

研究这些 → 查看 agency-portfolios.md

---

微交互

适用于：按钮、表单、导航、反馈

关键技术：

• 状态过渡
• 加载状态
• 悬停反馈
• 成功／错误状态

研究这些 → 查看 micro-interactions.md

---

领先工作室

这些工作室持续产出屡获殊荣的作品：

侧重开发

工作室	知名领域	地点
Active Theory	WebGL、交互体验	LA, USA
Build in Amsterdam	流畅动画	Amsterdam
Locomotive	滚动体验	Montreal
Resn	实验性设计	Wellington
Studio Freight	动态设计	Brooklyn
Basement Studio	尖端技术	Buenos Aires

侧重设计

工作室	知名领域	地点
Basic/Dept	简洁、极简	San Diego
Huge	企业级规模	Brooklyn
Fantasy	产品设计	SF
Ueno	品牌体验	Reykjavik
Rally	初创企业	SF

---

技术模式

GSAP 的使用

大多数获奖网站都使用 GSAP 来实现：

• 滚动驱动动画（ScrollTrigger）
• 文本显现效果（SplitText）
• 布局变化（Flip）
• 时间线编排

WebGL／Three.js

常见用途：

• 3D 产品展示
• 交互式背景
• 粒子效果
• 基于着色器的视觉效果

框架

常见技术栈：

• Next.js - React SSR、性能
• Nuxt - Vue SSR
• SvelteKit - Svelte SSR
• Astro - 静态优先、部分水合

---

评估标准

奖项如何评判网站：

Awwwards 评判标准

类别	权重	评判内容
设计	40%	视觉冲击力、创意、趋势
易用性	30%	导航、无障碍性、移动端体验
创意	15%	创新、独特性
内容	15%	质量、相关性

什么样的网站能成为「SOTD」（每日最佳网站）

1. 卓越的视觉效果 - 令人印象深刻的第一印象
2. 技术创新 - 新颖的技术
3. 有目的的动效 - 动画为内容提供支持
4. 跨设备适配 - 在移动设备上正常运行
5. 性能 - 加载快速、滚动流畅
6. 注重细节 - 微交互、精致打磨

---

研究工作流

启动项目时

1. 确定模式 - 网站属于哪种类型？（作品集、SaaS、电商）
2. 搜索 Awwwards - 按类别、颜色、技术筛选
3. 收集 5-10 个参考案例 - 截取关键时刻的画面
4. 分析技术 - 记录每个案例的特别之处
5. 找出共同点 - 优秀案例有哪些共同之处？
6. 结合项目调整 - 如何借鉴这些案例来指导你的方案？

收藏系统

按以下方式整理灵感：

• 模式类型（横向滚动、便当盒式布局等）
• 技术（滚动动画、3D、文字效果）
• 行业（SaaS、时尚、创意机构）
• 复杂度（简单、中等、高级）

---

保持关注

关注

• Twitter/X 上的 @awwwards
• Twitter/X 上的 @thefwa
• Reddit 上的 r/web_design
• GSAP 论坛和作品展示

Events

• Awwwards Conferences
• OFFF Festival
• Beyond Tellerrand

Newsletters

• Awwwards weekly digest
• Codrops Collective
• Web Design Weekly