top-design

Top-Design：屡获殊荣的数字体验

打造世界级数字创意机构水准的网站和应用。此技能体现了那些屡获 FWA、Awwwards、CSS Design Awards 和 Webby Awards 奖项的工作室的专业技艺。

核心原则

每个像素都有意为之——没有默认值，没有意外。 你要效仿的机构——Locomotive、Studio Freight、AREA 17、Active Theory、Hello Monday——有着共同的基因：排版就是设计，动效创造情感，留白是一种武器，性能不容妥协（60fps，否则免谈）。

基础： 8/10 和 10/10 之间的差距不在于技能，而在于用心。8/10 有出色的排版和流畅的动画；10/10 的排版令人惊叹，动画则娓娓讲述故事。每个决定都必须回答：“这有助于提升体验，还是只是在填充空间？”

评分

目标：10/10。 使用下方评分标准，为任意数字体验打 0-10 分——Awwwards 会推荐 10/10 的作品。始终说明当前分数，以及达到 10/10 需要进行的具体改进。

评分标准

分数	等级	描述
0-2	业余	默认字体、没有层级、布局平庸、充满模板感
3-4	基础	排版尚可、有一些层级，但令人难以记住
5-6	胜任	基本功扎实、实现简洁，但缺乏灵魂
7-8	专业	排版出色、动效用心、观点鲜明
9	卓越	标志性亮点、令人难忘的细节、工艺近乎无瑕
10	世界级	足以赢得 Awwwards SOTD，树立全新标准

分类评分（每项 0-10 分）

排版（权重：25%）

分数	标准
0-3	系统字体、字号统一、默认字距
4-6	优质字体、有一定的字号对比、层级基础
7-8	强烈的字号对比（10:1+）、完美字距、视觉对齐
9-10	排版就是设计——令人惊叹的瞬间、定制/可变字体、将文字作为建筑

视觉构图（权重：25%）

分数	标准
0-3	所有内容居中、间距相同、网格僵化、缺少张力
4-6	有一些不对称、间距节奏尚可、具备基础层次感
7-8	有意打破网格、元素层叠、留白突出
9-10	引人入胜的构图、出人意料的尺度变化、元素舒展而灵动，令人惊喜

动效与交互（权重：20%）

分数	标准
0-3	没有动画，或使用默认/线性动效
4-6	基础过渡效果、部分滚动效果
7-8	定制缓动、精心编排的内容显现、有目的的视差效果
9-10	用动效讲述故事、时机精准的编排、滚动体验仿佛全新创造

色彩与氛围（权重：15%）

分数	标准
0-3	色彩随意、纯黑/纯白、毫无氛围
4-6	配色协调、有一定氛围
7-8	色彩独具特色、随情境变化、对比经过精心设计
9-10	色彩仿佛专为此项目创造，氛围触手可及

细节与工艺（权重：15%）

分数	标准
0-3	默认光标、没有悬停状态、处处平庸
4-6	基础悬停状态、有一些定制元素
7-8	磁吸式按钮、品牌化选中色、定制光标（经用户批准后）
9-10	对每个微小细节都精益求精——焦点状态、加载状态、空状态、滚动指示器

快速评分公式

Total = (Typography x 0.25) + (Composition x 0.25) + (Motion x 0.20) + (Color x 0.15) + (Details x 0.15)

10/10 设计的七大支柱

1. 字体排版即架构

核心概念： 字体排版不是叠加在设计上的装饰——它本身就是设计。字体、字号和字距决定了色彩氛围、动画风格、间距节奏和整体个性。

为何有效： 显著的字号对比能建立层级，即使画面模糊或从房间另一端观看，也能传达信息。恢宏的展示字体与亲切的正文之间形成的张力，正是让人停下滚动的原因。

关键见解：

• 巨大的字号对比不可或缺——展示文字与正文的比例至少为 10:1（例如，180px / 14px）；极端情况下，字体可铺满整个视口
• 大字号文字使用负字距（-0.02em 到 -0.05em），让展示文字更紧凑、整体感更强；正文则需要宽裕的行高（1.5-1.7）
• 字体选择决定档次——可选高端字体厂牌（Pangram Pangram、Dinamo、Grilli Type、Klim、Commercial Type），或优质的 Google 替代字体（Space Grotesk、Instrument Serif、Fraunces）；在主视觉体验中，绝不要使用 Inter、Roboto、Arial 或 system-ui
• 可变字体支持悬停时动态调整字重，且不会引发布局偏移
• 视觉对齐胜过数学对齐——应根据视觉效果调整，而不只是依赖数值
• 严格控制标题的每一处换行——要让换行优美，在关键断点处必须手动调整

应用： 填满视口的展示文字骤然收束为正文（Locomotive 主视觉）；可变字体悬停时动态调整字重（Studio Freight）；以极端字号对比搭配衬线体和无衬线体（AREA 17 编辑风格）。展示文字 = 一句表述，3-7 个词；正文 = 至少 16-18px，每行 45-75 个字符。

选择字体或构建字号体系时，请参阅 references/typography.md——其中包含按风格分类的命名字体搭配、完整的流式 clamp() 和阶梯式字号体系、字距/行距阶梯，以及字体子集与 FOUT 机制。

2. 布局与构图

核心概念： 掌握网格，才能有意地打破网格——每一处偏离都应显得刻意，而非无意。疏密交替、张弛有度的节奏能创造引人入胜的阅读体验。

为何有效： 留白是主动的设计素材，能营造张力并控制节奏。非对称构图能带来居中构图无法实现的视觉活力；有意重叠或溢出容器的元素则显得鲜活而自信。

关键见解：

• 把留白当作武器——新手会填满每一处空隙；顶尖设计师则利用空白制造张力、引导视线
• 非对称平衡能带来趣味——将元素偏离中心，让图像溢出容器边界
• 意外的尺寸变化能创造节奏——交替使用巨大与细腻、密集与稀疏的布局，以控制叙事节奏
• 网格悖论——正是坚实的底层网格让偏离变得有意义；没有网格，偏离就只是混乱

应用： 标题错位，图像延伸出容器（margin-left: 8.33%; margin-right: -5vw）；通过不同卡片尺寸打造刻意的非对称构图（Locomotive 展示案例）；元素相互重叠以营造纵深（Active Theory）。让沉浸式全宽版块与收窄的阅读版块交替出现。

伦理边界： 布局实验绝不能损害导航的清晰度——用户必须始终清楚自己身在何处，以及如何继续前进。

布局各个版块或适配响应式设计时，请参阅 references/layout-systems.md——其中包含网格框架、断点系统，以及非对称和溢出元素模式。

3. 动效与动画

核心概念： 每个动画都必须回答“为什么要动？”精妙动效的三条法则：目的优先于装饰、自定义曲线（绝不使用线性曲线）、编排优先于孤立呈现。

为何有效： 精心编排的动效能够引导注意力、传达层级，并营造情感共鸣。自定义缓动曲线能赋予运动真实的物理质感，这是浏览器默认缓动效果无法实现的。

关键见解：

• 必须使用自定义缓动——禁止使用 ease、ease-in、ease-out、linear；改用 cubic-bezier(0.16, 1, 0.3, 1)（指数缓出）、cubic-bezier(0.25, 1, 0.5, 1)（四次缓出）、cubic-bezier(0.87, 0, 0.13, 1)（指数缓入缓出）
• 页面加载必须严格遵循编排顺序——结构（0-200ms）、主视觉标题逐词错落出现（200-600ms）、副标题（400-800ms）、导航级联出现（600-900ms）、辅助元素（800-1200ms）；参考资料中列有每个元素的标准错落延迟值
• 动画应体现元素间的关系，而非孤立呈现——同步移动的元素会显得协调且自然
• 60fps 是硬性要求——如果动画出现掉帧，就简化或移除

应用： 精心编排、错落呈现的页面加载揭示效果（Studio Freight）；进入视口时通过 clip-path/mask 揭示图像（AREA 17）；悬停时的字重变化和磁吸按钮（Dogstudio）。文本行应逐行向上滑入，并错落出现——绝不应作为整体淡入；页面应通过形变过渡，而非直接切换。

伦理界限： 动效绝不能阻碍交互或引发晕动症——遵循 prefers-reduced-motion，确保所有内容在没有动画时仍可访问，并为任何超过 1.2s 的动画说明理由。

实现动效时，请参阅 references/animation-patterns.md——其中包含可直接复制粘贴的滚动揭示效果、错落式加载编排、页面过渡，以及磁吸／悬停微交互代码。

4. 色彩与对比度

核心概念： 每个项目的色彩都应像是专门为其创造的——绝不从通用配色生成器中套用。三种方法：单色张力（95% 主色、5% 强调色）、大胆标志色（打造专属配色组合）、情境变化（配色随内容变化）。

为何有效： 色彩在读者读到第一个字之前就已营造氛围。纯黑与纯白显得冰冷、缺乏生气；暖色变体则更具质感，也更显考究。克制地使用强调色，能精准引导视线。

关键见解：

• 绝不使用纯黑或纯白——#0a0a0a 和 #fafaf9 具备 #000/#fff 所没有的质感
• 建立实用的层级体系——text-primary、text-secondary（60% 不透明度）、text-tertiary（40%）、surface、border（10%），以保持层次一致
• 克制使用一种醒目的强调色（#ff4d00 或类似颜色），胜过复杂的多色调色板
• 不同区块间的情境色彩变化能营造视觉篇章
• 为明暗两种场景设计色彩系统，而不是针对单个实例分别设计

应用： 单色搭配标志性强调色（Locomotive：奶油色 + 黑色 + 橙色点缀）；根据案例研究进行情境配色变化（AREA 17）；搭配一种鲜艳强调色的深色模式（Stripe：海军蓝 + 紫色）。所有颜色都应由 CSS 自定义属性驱动（--color-dark/-light/-accent 加上功能性属性 --color-text-primary/-surface）；强调色仅用于 CTA、链接和单个细节点缀。

当你需要了解任一设计支柱的完整示例时，请参阅 references/case-studies.md——其中按设计公司拆解了真实的色彩系统、字体处理和微交互，便于逆向分析。

5. 基于滚动的设计

**核心概念：**滚动是 Web 的主要交互方式，应该经过精心设计，而不是沿用默认效果。将滚动视为叙事工具——控制节奏、创造显现效果、营造张力，并带来标志性时刻。

**为何有效：**默认滚动显得机械，并将所有内容视为同等重要。当滚动位置驱动内容显现和转场时，浏览内容就会成为一种参与式体验，而非被动浏览。

关键要点：

• 平滑滚动是基础——使用 Lenis 或 Locomotive Scroll，实现屡获殊荣的网站常见的厚重、富有实体感的体验
• 视差效果必须有目的——少量使用，且仅用于装饰元素；绝不要用于文本或关键内容
• 固定区段可以营造叙事节奏——锁定某个区段，同时让其中的内容发生变化
• 横向滚动图库需要清晰的视觉提示
• 内容显现应循序渐进——元素在进入可视区域时出现，带来探索感
• 滚动速度可以调节动画速度，带来灵敏的交互体验

**应用场景：**由滚动驱动变化的固定 Hero（Apple 的深度探索页面）；带有视觉提示的横向滚动图库（Studio Freight）；滚动驱动的动画序列（Active Theory）。轻量级的类切换使用 IntersectionObserver；复杂的多步骤序列则使用 GSAP ScrollTrigger。

**伦理边界：**劫持滚动属于糟糕的用户体验——用户必须始终能够按自己的节奏滚动，并访问所有内容。

参见 references/technical-stack.md，了解如何设置平滑滚动（Lenis/Locomotive 配置及库的权衡）；参见 references/animation-patterns.md，了解固定元素、横向图库和滚动速度驱动的动画序列。

6. 性能与加载

**核心概念：**性能从一开始就是设计约束，而非优化阶段才考虑的问题。丢帧的精美动画，或导致布局偏移的惊艳字体，都无法满足工艺标准。

**为何有效：**用户会将性能视为质量的一部分——无论视觉复杂度如何，快速加载和流畅滚动都能带来高端体验；而令人惊艳的网站若运行卡顿，就会显得失灵。

关键要点：

• 对字体进行子集化并预加载——只包含所需字形，使用 font-display: swap 或 optional，并预加载关键文件
• 优化图片——使用 WebP/AVIF 并提供回退方案，使用响应式 srcset，并对首屏以下的图片进行延迟加载
• 使用 GPU 加速动画——只为 transform 和 opacity 添加动画；绝不要为 width、height、top、left 或 margin 添加动画
• 将 CLS 控制在接近零——为图片、字体和动态内容预留空间（在容器上使用 aspect-ratio）
• 将 LCP 控制在 2.5s 以内——优化 Hero 的关键渲染路径
• 将加载状态作为设计元素——使用自定义骨架屏和进度指示器，而非事后补充

**应用场景：**对字体进行子集化、预加载并设置交换策略（<link rel="preload" as="font" crossorigin>）；使用响应式 srcset 提供 AVIF/WebP 图片（并通过 <picture> 提供回退方案）；只使用 GPU 加速的动画（transform: translate3d() + opacity）。以 90+ 为目标使用 Lighthouse 进行审计；对非关键 JS 进行代码分割并延迟加载。

**伦理边界：**速度快但无法访问，并非可接受的权衡——绝不要为了速度而移除无障碍功能或语义化 HTML。

选择库或遇到性能预算限制时，请参见 references/technical-stack.md，了解推荐技术栈及具体的字体、图片和动画优化技巧。

7. 微交互

核心概念： 精工细作体现在 1% 的细节中，而大多数设计师都会忽略它们：品牌化的选中文字颜色、磁吸按钮、精心设计的焦点状态、周到的加载状态、精心制作的错误页面，以及准确的微排版。

重要：自定义光标仅限主动选择启用。 除非用户明确要求或确认，否则绝不替换原生光标——不恰当地使用自定义光标会损害可用性，显得花哨。务必先询问。

为何有效： 微交互传递出每个像素都经过深思熟虑的信号。单独看时细微，整体上却能带来变革——用户能感受到体验中蕴含的用心。

关键见解：

• 自定义光标体现品牌个性，并可针对交互元素使用不同样式（须遵守上述主动选择规则）
• 品牌化的 ::selection 颜色在所有背景上都清晰可见
• 每个链接和卡片都有经过考量的悬停状态——缩放、叠层或有意义的变换
• 焦点状态既醒目又美观——符合品牌风格的指示器，让键盘用户能够清楚辨识
• 加载、空状态、404 和错误状态都应经过设计，成为实用且贴心的时刻
• 微排版准确无误——使用弯引号、短破折号／长破折号，标题避免孤行，关键文本使用 text-wrap: balance

道德边界： 即使焦点状态采用了符合品牌风格的设计，也必须满足键盘可见性要求；错误、空状态和 404 页面必须真正实用，而不只是装饰。

参见 references/animation-patterns.md，获取可直接复制使用的磁吸按钮、光标以及 ::selection／悬停微交互代码。

设计流程

按以下顺序进行——这个顺序本身就是规范：

1. 先确定概念，再编写代码。 先定义四件事：

BRAND ESSENCE: What single word captures the soul?
VISUAL TENSION: What opposing forces create interest?
SIGNATURE MOMENT: What will people screenshot and share?
TECHNICAL AMBITION: What pushes the browser's limits?

2. 先设计标志性时刻——而不是页眉。每个满分项目至少都有一个让人停下来分享的时刻（前所未见的主视觉动画、足够大胆到本身就成为视觉焦点的字体、讲述故事的滚动序列）。通过以下问题明确这个时刻：人们会截取什么屏幕、向同事描述什么、尝试逆向还原什么？是什么让它一眼就能看出是这个项目？
3. 接下来选择展示字体——它决定其余设计（支柱 1）。
4. 将动态效果与视觉设计同步制作原型，而不是事后再补——动态效果不是润色（支柱 3）。
5. 克制地交付——把 3 件事做到完美，胜过把 10 件事做得平庸。果断删减。

实现说明

1. 概念构思以桌面端为先，开发实现以移动端为先——大胆构想，循序渐进地实现
2. 遵循项目约定——如果项目提供了 Tailwind 4+ 和／或 shadcn/ui，就在其基础上扩展设计令牌和组件，以打造精工细作的作品，而不是与之对抗

常见错误

每项修正都指向定义了规则的支柱——不要在此处重新推导数值。

错误	失败原因	修正方法（参见）
将 Inter、Roboto、Arial 或 system-ui 用作主要字体	应用默认字体显得普通，不够高级	高端字体厂商的字体，或优质的 Google 替代字体（支柱 1）
字号级别过于统一（所有字号都在 2 倍范围内）	缺乏层次，没有令人惊叹的瞬间	达到展示字体与正文的比例要求（支柱 1）
使用 ease、ease-in、ease-out 或 linear 缓动	机械、缺乏生气——立刻显得不专业	禁止使用——改用自定义 cubic-bezier（支柱 3）
所有元素同时动效	产生视觉噪音，缺乏层次或叙事	按重要程度错开并依次呈现（支柱 3）
所有内容都居中对齐	安全但乏味——缺乏张力与活力	采用非对称设计、网格偏移、元素溢出（支柱 2）
各处间距一律相同	单调乏味——视觉焦点无处停留	调整密度：先安排密集区块，再留出呼吸空间（支柱 2）
纯 #000000 / #ffffff	缺乏生气且刺眼	使用暖色变体（支柱 4）
使用浏览器默认滚动	机械地对待所有内容，一视同仁	使用平滑滚动库（支柱 5）
紫到蓝的渐变主视觉区	“AI 渐变”——追随潮流，千篇一律	为项目量身打造标志性色彩方案（支柱 4）
没有标志性瞬间	看似专业，却令人难忘不了	首先设计值得截图的瞬间（流程步骤 2）
在专业界面中使用任何表情符号	显得随意、不专业	使用自定义图标或字体排印设计
在文本或关键内容上使用视差效果	导致晕动症，造成无障碍访问问题	仅在装饰性背景元素上使用视差效果（支柱 5）
动效阻碍交互	用户体验不友好	确保所有动效都不会阻塞交互（支柱 3）
未经修改的 Font Awesome 图标	设计显得像模板套用	使用自定义图标，或进行充分定制以符合品牌风格
表单使用默认样式	立刻破坏精心设计的质感	为每个输入框、下拉框、复选框和按钮进行设计（支柱 7）

快速诊断

每行回答“是”得 1 分，然后将总分对应到评分标准区间：11-12 -> 9-10，8-10 -> 7-8，5-7 -> 5-6，低于 5 -> 0-4。注明得分。

问题	如果回答“否”	修正方法（参见）
主视觉区的字体排印是否能让人滚动到一半时停下来？	展示字体缺乏主导感	支柱 1——调整比例、使用独特字体、填满视口
是否有任何区块会让人想截图？	缺少标志性瞬间	流程步骤 2——让一个区块出类拔萃
模糊视线时，设计是否仍然清晰？	层次过于平淡	加大标题、增加留白、强化强调元素
所有缓动曲线是否都是自定义的（没有 ease/linear）？	动效显得默认	支柱 3——自定义 cubic-bezier
构图是否具有非对称张力？	布局显得保守	支柱 2——偏移、溢出、调整密度
色彩是否像是专为本项目创造的？	配色方案过于普通	支柱 4——单色张力、标志性色彩或情境化配色
页面加载是否经过精心编排？	元素同时突然出现	支柱 3——错开的呈现顺序
滚动体验是否独特且富有分量感？	使用浏览器默认滚动	支柱 5——平滑滚动库
是否考虑了微小细节（选中、焦点、光标）？	仍保留浏览器默认行为	支柱 7——品牌化选中样式、精心设计的焦点样式（光标为可选项）
CLS 是否接近零，且 LCP 是否低于 2.5s？	性能拖累品质	支柱 6——字体子集、WebP/AVIF、仅使用 transform/opacity
每个动效是否都能回答“为什么要动”？	动效仅具装饰性	支柱 3——删去没有叙事或引导作用的动效
焦点状态是否兼具美观与无障碍访问？	两者只能取其一	支柱 7——符合品牌风格且满足 WCAG 可见性要求的指示器

延伸阅读

• 字体设计，作者 James Craig——关于字体设计原则与层级的奠基性著作
• 平面设计中的网格系统，作者 Josef Muller-Brockmann——关于网格构图的权威之作
• 字体排印风格元素，作者 Robert Bringhurst——关于节奏、比例与技艺的字体排印圣经
• 色彩的相互作用，作者 Josef Albers——了解色彩感知与对比的必读之作
• 布局要义：运用网格的 100 条设计原则，作者 Beth Tondreau——实用的网格布局原则
• Awwwards 年鉴：全球 365 个最佳网站——年度标杆作品集，展示 10/10 的工艺水准

关于作者

这项技能融合了全球最受赞誉的数字代理机构的设计技巧：Locomotive（蒙特利尔——Locomotive Scroll 的创作者，擅长营造单色张力与大胆的字体设计）、Studio Freight（纽约——打造引人入胜的交互体验与标志性配色）、AREA 17（纽约／巴黎——构建情境化设计系统与编辑式布局）、Active Theory（洛杉矶——运用 WebGL 打造沉浸式 3D 叙事）和 Hello Monday（哥本哈根／纽约——为 Spotify、Adidas、Google 打造富有趣味的交互体验）。此外还汲取了 Dogstudio、Tonik、Instrument、Resn，以及更广泛的 Awwwards、FWA、CSS Design Awards 和 Webby 获奖者社群的灵感。