elite-design-core

精英设计核心

打造高端、屡获殊荣的 Web 体验的基础。

快速参考

主题	参考文件
视觉层级	visual-hierarchy.md
间距系统	spacing-systems.md
字体排印	typography.md
色彩理论	color-theory.md
设计令牌	design-tokens.md
数据可视化	data-visualization.md

相关技能

• elite-gsap - 复杂动画、ScrollTrigger、SplitText
• elite-css-animations - CSS 原生滚动驱动动画
• elite-layouts - Bento 网格、横向滚动、粘性区块
• elite-performance - 构建设置、60fps 优化
• elite-accessibility - prefers-reduced-motion、WCAG 合规
• elite-inspiration - 精选 Awwwards/FWA 参考案例
• elite-brand-design - 品牌识别、个性、视觉系统

现实世界原型

五种生产级原型展示了设计决策如何对应不同行业和受众：

原型	字体搭配	配色	美学风格
数字工作室	Space Grotesk + Inter	炭灰色 + 珊瑚色/酸橙绿	现代、大胆、几何
奢华香氛电商	Cormorant Garamond + Poppins	墨色 + 阿拉伯金	精致、编辑风、感官体验
心理健康诊所	Fraunces + Inter	奶油色上的李子色/鼠尾草绿/薰衣草色	温暖、包容、柔和
刑事辩护事务所	Gelasio + Inter	海军蓝/午夜蓝 + 金色	权威、鲜明、编辑风
社区药房	DM Serif Display + DM Sans	专业色调	可靠、亲切

这些原型作为生产案例贯穿各参考文件。详细实现请参阅 typography.md、color-theory.md 和 design-tokens.md。

---

什么造就了“精英”设计

精英级 Web 设计的特点包括：

1. 克制胜于堆砌

每个元素都有存在的理由。不断删减，直到设计无法正常运作，再加回一个元素。

2. 有目的的动态效果

动画用于引导注意力并传达状态，而非装饰。每个动画都应回答：“这能帮助用户理解什么？”

3. 自信地留白

空白也是设计元素。高端品牌会使用更多留白。留白传递品质感，也让内容得以舒展。

4. 字体排印即结构

在色彩或图像之前，字体就已构建视觉层级。标题吸引注意力，正文退居其次，由此形成清晰的信息架构。

5. 系统化思维

设计决策遵循一套系统（间距比例、字体比例、颜色令牌）。一致性不断累积，最终转化为感知品质。

6. 性能即功能特性

60fps 动画、快速加载时间和平滑交互都是设计要求，而非事后才考虑的技术细节。

7. 默认具备无障碍性

减少动态效果的替代方案、适当的对比度、键盘导航——无障碍设计做到位时，便不会引人注意。

---

设计流程

阶段 1：愿景探索

编写代码前，先了解愿景：

Questions to ask:
- What feeling should this site evoke? (Bold? Calm? Playful? Premium?)
- Who is the target audience? (Age, tech-savviness, context of use)
- What references or inspiration exist? (Competitor sites, mood boards)
- What is the content structure? (How much content, what types)
- What actions should users take? (Primary CTA, secondary actions)

阶段 2：搭建设计系统

开始构建前，先确立设计令牌：

/* Spacing Scale (8px base) */
--space-1: 0.25rem; /* 4px - tight */
--space-2: 0.5rem; /* 8px - default small */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px - default medium */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px - default large */
--space-12: 3rem; /* 48px - section padding small */
--space-16: 4rem; /* 64px - section padding medium */
--space-24: 6rem; /* 96px - section padding large */
--space-32: 8rem; /* 128px - hero spacing */

/* Type Scale (1.25 ratio) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 49px */
--text-5xl: 3.815rem; /* 61px */

/* Color Tokens - Define semantic colors */
--color-text-primary: ...;
--color-text-secondary: ...;
--color-text-muted: ...;
--color-bg-primary: ...;
--color-bg-secondary: ...;
--color-accent: ...;

详细指南请参阅 spacing-systems.md 和 typography.md。

阶段 3：布局架构

根据项目类型选择布局模式：

项目类型	推荐布局
营销/落地页	Bento 网格、粘性揭示、全宽主视觉
作品集/创意项目	横向滚动、全屏页面区块、不对称布局
产品/电商	网格系统、粘性产品视图、平滑筛选
代理机构/工作室	实验性布局、页面过渡、醒目字体

请参阅 elite-layouts 技能，了解实现模式。

阶段 4：动画策略

确定动画方案：

在以下情况下使用 CSS 滚动驱动动画：

• 简单的视差或揭示效果
• 进度指示器
• 性能至关重要
• 不需要支持 Safari（或可接受使用 polyfill）

在以下情况下使用 GSAP ScrollTrigger：

• 复杂的多元素序列
• 固定/粘性行为
• 横向滚动
• 跨浏览器一致性至关重要
• 需要精细控制

请参阅 elite-gsap 或 elite-css-animations 技能。

阶段 5：实现

为获得最佳效果，按以下顺序构建：

1. 先搭建结构 - 使用语义化 HTML，不添加样式
2. 排版 - 应用字体比例和层级
3. 间距 - 一致地应用间距比例
4. 颜色 - 添加颜色令牌
5. 布局 - 设置网格结构和响应式行为
6. 动画 - 静态设计完成后再添加动效
7. 润色 - 添加微交互和悬停状态

阶段 6：润色与优化

最终检查清单：

• 整个项目中的设计系统令牌保持一致
• 各视口下的视觉层级清晰
• 动画目的明确（引导注意力、展示状态）
• 已处理 prefers-reduced-motion
• 颜色对比度符合 WCAG AA（文本为 4.5:1）
• 已验证动画达到 60fps
• Core Web Vitals 符合预算

---

决策框架

如何选择动画方案

Is it a simple reveal or parallax effect?
├── Yes → Can you use CSS-only?
│         ├── Yes → Use CSS Scroll-Driven Animations
│         └── No (Safari support needed) → Use GSAP ScrollTrigger
└── No → Is it a complex sequence or pinned section?
         ├── Yes → Use GSAP ScrollTrigger
         └── No → Is it a state change or micro-interaction?
                  ├── Yes → Use CSS transitions
                  └── No → Use GSAP for orchestration

如何选择布局模式

What's the content density?
├── High (many items to show) → Bento grid or masonry
├── Medium (curated selection) → Asymmetric grid or cards
└── Low (focused narrative) → Full-page sections or horizontal scroll

What's the user journey?
├── Exploratory (browse, discover) → Grid layouts, filters
├── Linear (story, presentation) → Horizontal scroll, sticky reveals
└── Task-oriented (convert, purchase) → Clear hierarchy, prominent CTAs

---

不同项目类型的快速入门

营销/落地页

关键模式：

• 全宽主视觉，配合滚动触发的揭示效果
• 使用 Bento 网格展示功能
• 使用粘性区块展示产品
• 使用交错出现的卡片展示社会认同

要加载的技能： elite-layouts、elite-gsap、elite-accessibility

设计重点：

• 清晰的视觉层级（一个明确的 CTA）
• 留白，让产品充分展现
• 通过动效引导用户完成转化

作品集/创意项目

关键模式：

• 横向滚动画廊
• 全屏项目区块
• 文本动画（SplitText 揭示效果）
• 项目之间的页面过渡

要加载的技能： elite-gsap、elite-layouts、elite-inspiration

设计重点：

• 让作品自己说话（尽量减少 UI）
• 独特的导航模式
• 令人印象深刻的交互

产品配置器

关键模式：

• 粘性产品视图
• 平滑的状态过渡（Flip 插件）
• 用于展示选项的交互式 Bento 布局
• 实时视觉反馈

要加载的技能： elite-gsap（Flip 插件）、elite-layouts

设计重点：

• 清晰展示各选项的状态
• 对所有输入都能及时响应
• 确保交互过程中的性能

代理机构/工作室网站

关键模式：

• 实验性导航
• 页面过渡（使用 Barba.js）
• 醒目的字体动画
• 混合横向与纵向滚动

要加载的技能： elite-gsap、elite-layouts、elite-inspiration

设计重点：

• 展示工艺与能力
• 有意识地突破边界
• 在实验性与易用性之间取得平衡

---

常见误区

1. 毫无目的的动画

每个动画都必须回答：“这能帮助用户理解什么？”如果回答不了，就删掉它。

2. 间距不一致

使用间距比例。随意设置像素值会产生视觉噪声。坚持使用统一系统。

3. 焦点过多

每个屏幕只设置一个主要操作。相互竞争的 CTA 会降低转化率。

4. 忽视性能

在真实设备上测试。MacBook Pro 上达到 60fps，不代表低端 Android 设备也能达到 60fps。

5. 忽略减少动态效果

始终提供 prefers-reduced-motion 替代方案。这不是可选项。

6. 过度设计

最好的设计让人觉得浑然天成，而不是刻意炫技。不断简化，直到无法再简化，然后再加回一项元素。

7. 忽略设计系统

先建立设计令牌。没有系统就开始构建，只会导致不一致，并不断累积。

---

资源

设计原则深入解读

• visual-hierarchy.md - 尺度、字重、对比度、分组
• spacing-systems.md - 8px 网格、间距关系
• typography.md - 字体比例、流体排版、字体搭配
• color-theory.md - 令牌、对比度、深色模式

外部资源

• Awwwards - 获奖网站灵感
• Typescale - 交互式字体比例计算器
• Realtime Colors - 调色板可视化