名称: 顶级设计 描述: ‘受精英机构（Locomotive、Studio Freight、AREA 17）启发的获奖网页设计框架。用于需要时：(1) 构建高端作品集网站和品牌网站，(2) 创建具有自定义动画的沉浸式网页体验，(3) 实现具有戏剧性比例对比的卓越排版，(4) 设计基于滚动的有目的性动效组合，(5) 匹配Awwwards获奖网站的质量，(6) 实现性能优化的动画。’ 许可证: MIT 元数据: 作者: wondelai 版本: “1.1.0”
顶级设计：获奖级数字体验
创建与世界级数字机构水平相当的网站和应用程序。这个技能体现了那些持续赢得FWA、Awwwards、CSS设计奖和Webby奖项的工作室的工艺。
核心原则
每一个像素都有意图——没有默认，没有意外。 您模仿的机构——Locomotive、Studio Freight、AREA 17、Active Theory、Hello Monday——共享共同的DNA：排版就是设计（不是装饰，而是架构），动效创造情感（动画服务于叙事，而非新奇），留白是一种武器（通过克制创造张力），性能是不可妥协的（60fps或无）。
基础： 将10/10与8/10区分开来的不是渐进改进，而是质的飞跃。一个8/10的设计有好的排版、漂亮的颜色和平滑的动画。一个10/10的设计有让人惊叹的排版、感觉专为这个项目发明的颜色，以及讲述故事的动画。差距不是技能——而是意图。在10/10水平的每一个决定都回答一个问题：“这是服务于体验，还是只是填充空间？”
评分
目标：10/10。 在审查或创建数字体验时，使用下面的评分标准评分0-10。10/10意味着设计将在Awwwards上被推荐。始终提供当前分数和达到10/10所需的具体改进。
评分标准
| 分数 | 水平 | 描述 |
|---|---|---|
| 0-2 | 业余 | 默认字体、无层次、通用布局、模板感 |
| 3-4 | 基础 | 不错的排版、一些层次，但可忘记 |
| 5-6 | 熟练 | 良好的基础、干净的执行，但缺乏灵魂 |
| 7-8 | 专业 | 强排版、有意图的动效、清晰的观点 |
| 9 | 卓越 | 标志性时刻、难忘的细节、近乎完美的工艺 |
| 10 | 世界级 | 将赢得Awwwards每日最佳，定义新标准 |
类别评分（每个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 | 每一个微细节被考虑——焦点状态、加载、空状态、滚动指示器 |
快速分数公式
总分 = (排版 x 0.25) + (组合 x 0.25) + (动效 x 0.20) + (颜色 x 0.15) + (细节 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.ca英雄排版 |
| 品牌网站 | 自定义/可变字体配悬停权重动画 | Studio Freight交互式字体 |
| 产品落地页 | 紧显示字距配慷慨正文间距 | Apple产品页面 |
| 编辑布局 | 衬线/无衬线配对配极端比例对比 | AREA 17案例研究 |
| 文化机构 | 成为视觉身份的声明排版 | Hello Monday博物馆网站 |
| 科技初创 | 高级几何无衬线配建筑比例 | Stripe排版系统 |
复制模式：
- 显示：单个强大声明，最多3-7词
- 副标题：一句话解释显示字体
- 正文：最小16-18px，慷慨行高，适度行宽（45-75字符）
- “排版凝视测试”：模糊您的眼睛——字体层次是否仍然可读？如果模糊时一切都看起来同等重要，您失败了
伦理边界： 排版选择应增强可读性和可访问性，不牺牲易读性为美学新颖。确保正文文本满足WCAG对比要求并保持在标准观看距离可读。
见：参考/排版.md 字体配对策略、字体比例系统和高级CSS排版。
2. 布局与组合
核心概念： 掌握网格以便有意图地打破它。每一次违反应感觉有意，非偶然。密度和呼吸空间的节奏——全视图英雄、亲密文本部分、巨大单字、密集网格——创造一个保持注意力的阅读体验。
为什么有效： 留白不是空空间——它是活跃设计材料，创造张力、控制节奏和让观看者靠近。不对称布局产生居中对称组合无法达到的视觉能量。当元素有意图地重叠、溢出或延伸超出其容器时，设计感觉生动和自信而非受限。
关键见解：
- 留白作为武器 —— 业余者用内容填满每个间隙，专业人士自由使用填充，10/10设计师用留白创造张力控制读者眼睛
- 不对称平衡创造兴趣 —— 将元素从中心偏移（例如，12列网格中一列偏移），让图像溢出和延伸超出容器
- 意外的比例变化创造节奏 —— 巨大和亲密、密集和稀疏的交替创造叙事节奏防止单调
- 元素应有意图地重叠、溢出或延伸 —— 打破容器信号自信和工艺
- 网格悖论 —— 强基础网格是必要的，以便有意义地打破它；没有网格，打破只是混乱
- 截图测试 —— 如果某人不会截图一个部分并分享它，您缺少标志性时刻
产品应用：
| 上下文 | 应用 | 示例 |
|---|---|---|
| 英雄部分 | 偏移标题配溢出图像 | margin-left: 8.33%; margin-right: -5vw |
| 作品集网格 | 有意图不对称的不同卡片尺寸 | Locomotive项目展示 |
| 部分过渡 | 密集和呼吸部分之间的比例变化 | Studio Freight滚动组合 |
| 图像画廊 | 混合全溢出和包含图像 | AREA 17编辑布局 |
| 功能展示 | 创造深度的重叠元素 | Active Theory分层组合 |
| 导航 | 有戏剧性比例的不对称巨型菜单 | Hello Monday导航系统 |
复制模式：
- 英雄：将文本偏移中心配有意对齐到网格
- 部分：在全宽沉浸和包含阅读之间交替
- 卡片：在网格内变化尺寸——不是一切都需要相同尺寸
- 图像：混合全溢出、包含和重叠处理
伦理边界： 布局实验不能损害导航清晰度或内容可访问性。用户应始终理解他们在哪里、如何前进以及如何访问关键信息，无论组合选择如何。
见：参考/布局系统.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，80ms错开）、副标题（400-800ms）、导航级联（600-900ms）、支持元素（800-1200ms）
- 滚动触发序列揭示元素进入视图 —— 不是一次全部；视差谨慎使用且仅在非必要元素上
- 固定部分用于叙事时刻和水平滚动用于画廊（有清晰启示）创造沉浸式阅读体验
- 默认浏览器滚动不可接受 —— 使用Lenis或Locomotive Scroll实现平滑、自定义滚动行为
- 60fps是不可妥协的 —— 如果动画丢帧，简化或移除它
产品应用：
| 上下文 | 应用 | 示例 |
|---|---|---|
| 页面加载 | 编排错开揭示序列 | Studio Freight入口动画 |
| 滚动部分 | 固定叙事配渐进揭示 | Locomotive滚动体验 |
| 导航 | 磁性悬停效果配自定义光标 | Active Theory交互式导航 |
| 图像揭示 | 滚动进入时的Clip-path或遮罩动画 | AREA 17案例研究揭示 |
| 页面过渡 | 无缝跨页动画连续性 | Hello Monday页面变形 |
| 微交互 | 悬停权重变化、按钮磁性效果 | Dogstudio交互式细节 |
复制模式：
- 揭示：文本行单独滑上配错开（不是作为块淡入）
- 悬停：元素响应配自定义光标、比例变化或颜色过渡
- 滚动：内容渐进揭示，从不一次全部
- 过渡：页面变形而非剪切或淡出
伦理边界： 动效绝不能阻止交互、导致晕动症或阻止用户访问内容。始终尊重prefers-reduced-motion并确保所有内容在无动画时也可访问。超过1.2秒的动画需要清晰理由。
见：参考/动画模式.md 滚动动画、页面过渡和带代码的微交互。
4. 颜色与对比
核心概念： 颜色应感觉为每个特定项目发明——非从通用调色板生成器拉取。三种方法是单色张力（95%一主导色，5%弹出的强调色）、大胆签名（拥有颜色组合使其不可错认）和上下文变化（颜色响应内容，部分有独特调色板）。
为什么有效： 颜色在单个词被读之前创造氛围。当颜色感觉被特定项目拥有时，它们成为品牌身份的一部分。纯黑(#000000)和纯白(#ffffff)感觉数字和无生命；稍暖变体(#0a0a0a, #fafaf9)感觉物理和考虑。单个强调色的受限使用创造吸引眼睛的惊喜时刻。
关键见解：
- 永远不要使用纯黑或纯白 —— 暖变体创造纯数字颜色缺乏的物理质量
- 功能颜色层次 —— 文本-主要、文本-次要（60%不透明度）、文本-三级（40%不透明度）、表面、边框（10%不透明度）——在所有组件上创造一致深度
- 强调色创造惊喜时刻 —— 单个强强调色(#ff4d00或类似)少量使用比复杂多颜色调色板更有冲击
- 部分间上下文颜色变化 信号内容变化并创造视觉章节
- 眯眼测试 —— 眯眼看您的设计；如果重要元素不通过对比单独突出，您的颜色层次失败
- 颜色必须在光和暗上下文中工作 —— 设计系统，非个别实例
产品应用：
| 上下文 | 应用 | 示例 |
|---|---|---|
| 机构作品集 | 单色配签名强调色 | Locomotive：奶油+黑+橙色火花 |
| 品牌身份 | 大胆拥有颜色组合 | Studio Freight：黑+奶油+锈色 |
| 客户展示 | 每个案例研究的上下文变化 | AREA 17：适应每个客户的调色板 |
| 产品落地页 | 暗模式配单个鲜艳强调色 | Stripe：深海军蓝+签名紫色 |
| 文化网站 | 来自源材料的丰富色调调色板 | Hello Monday：从艺术/内容绘制的调色板 |
| 科技产品 | 最小中性配功能强调色 | Linear：灰度+签名蓝色 |
复制模式：
- 为您的完整颜色系统定义CSS自定义属性：
--color-dark、--color-light、--color-accent - 在上面构建功能令牌：
--color-text-primary、--color-text-secondary、--color-surface - 使用基于不透明度的变体（
rgba(10, 10, 10, 0.6)）用于一致次要/三级文本 - 强调色出现在CTA、链接和单个细节时刻——从不无处不在
伦理边界： 颜色选择必须满足WCAG 2.1 AA对比要求最小。氛围设计不能以视觉障碍用户的可读性为代价。用对比检查器测试所有颜色组合。
见：参考/案例研究.md 机构技术分解包括颜色系统分析。
5. 基于滚动的设计
核心概念： 滚动是网络上的主要交互，它应感觉被设计，非默认。最佳数字体验将滚动作为叙事设备——控制节奏、创造揭示、建立张力和交付与滚动位置相关的标志性时刻。
为什么有效： 默认浏览器滚动是机械和统一的，将内容视为同等重要。自定义滚动行为（通过Lenis或Locomotive Scroll）创造平滑、加权的感觉，镜像物理对象。当滚动位置驱动动画、揭示和过渡时，用户通过内容的移动成为主动、参与性体验而非被动消费。
关键见解：
- 平滑滚动是基础 —— 实现Lenis或Locomotive Scroll用于加权、物理滚动感觉，每个获奖网站使用
- 视差必须有目的性 —— 谨慎使用且仅在非必要装饰元素上；永远不要在文本或关键内容上
- 固定部分创造叙事节拍 —— 锁定一个部分同时内容在其中变换创造电影时刻
- 画廊的水平滚动 需要清晰视觉启示以便用户知道横向滚动
- 滚动触发揭示应渐进 —— 元素进入时揭示，创造发现感
- 滚动速度可以调制动画速度 —— 快滚动压缩动画，慢滚动扩展它们，创造响应感觉
产品应用：
| 上下文 | 应用 | 示例 |
|---|---|---|
| 产品故事 | 固定英雄配滚动驱动内容变换 | Apple产品深度探讨 |
| 作品集 | 渐进图像揭示配滚动位置 | Locomotive项目展示 |
| 编辑 | 仅装饰元素上的视差深度 | AREA 17编辑布局 |
| 落地页 | 水平滚动画廊配清晰启示 | Studio Freight工作画廊 |
| 品牌叙事 | 滚动驱动动画序列 | Active Theory沉浸式故事 |
| 功能导览 | 逐步揭示固定到滚动进度 | Stripe功能演示 |
复制模式：
- 使用
data-scroll、data-scroll-speed和data-scroll-direction属性用于声明式滚动行为 - 实现交叉观察器用于轻量级滚动触发类切换
- 保留GSAP ScrollTrigger用于复杂、多步滚动驱动动画
- 始终为非滚动可访问性提供回退
伦理边界： 防止用户以自己的节奏滚动的滚动劫持是敌对UX。自定义滚动应增强体验，非困住用户。始终允许用户自由滚动通过内容，并永远不使滚动驱动动画强制用于访问信息。
见：参考/动画模式.md 滚动动画实现模式。
6. 性能与加载
核心概念： 性能不是优化步骤——它是第一天起的设计约束。一个丢帧的美丽动画、导致布局偏移的惊人字体、或需要三秒加载的华丽图像都失败工艺测试。60fps是底线，非天花板。
为什么有效： 用户将性能感知为质量。一个即时加载和流畅滚动的网站感觉高端，无论视觉复杂性。相反，一个卡顿或延迟的视觉惊艳网站感觉损坏。最佳机构通过使性能成为一等设计决策实现视觉雄心和技术性能：选择GPU加速属性、子集字体、优化图像和在真实设备上测试。
关键见解：
- 字体必须子集和预加载 —— 仅包括您需要的字形，使用
font-display: swap或optional，并预加载关键字体文件 - 图像必须优化 —— 使用带回退的WebP/AVIF，实现响应式
srcset，并懒加载折线后图像 - 动画必须GPU加速 —— 仅动画
transform和opacity；永远不要动画width、height、top、left或margin - 无布局偏移 —— 累积布局偏移（CLS）必须接近零；为图像、字体和动态内容保留空间
- LCP小于2.5秒 —— 最大内容绘制是关键指标；为英雄优化关键渲染路径
- 首次内容绘制必须感觉即时 —— 使用自定义骨架/加载动画作为设计元素，非事后
产品应用：
| 上下文 | 应用 | 示例 |
|---|---|---|
| 字体加载 | 子集、预加载和交换策略 | <link rel="preload" as="font" crossorigin> |
| 图像交付 | 带响应srcset的AVIF/WebP | <picture>元素配格式回退 |
| 动画性能 | GPU仅属性配will-change提示 | transform: translate3d() + opacity |
| 布局稳定性 | 图像容器的纵横比和最小高度保留 | aspect-ratio: 16/9 在图像容器上 |
| 加载体验 | 设计骨架屏幕和进度指示器 | 自定义品牌化加载动画 |
| 包优化 | 代码分割、树摇、推迟非关键JS | 折线后交互性的动态导入 |
复制模式：
- 用Lighthouse审计，目标所有指标90+
- 在真实设备上测试，非仅模拟器——模拟器对性能和感觉撒谎
- 在所有折线后图像上实现
loading="lazy" - 谨慎使用
will-change且仅在即将动画的元素上 - 以4x CPU节流用Chrome DevTools性能面板分析动画
伦理边界： 性能优化不能剥离可访问性功能、跳过语义HTML或移除有意义内容。快但不可访问不是有效权衡。
见：参考/技术栈.md 库、工具和性能优化技术。
7. 微交互
核心概念： 标志工艺的细节生活在1%大多数设计师跳过的地方：自定义光标、品牌化选择颜色、磁性按钮效果、设计焦点状态、考虑加载状态、制作错误页面和正确微排版。这些细节是专业和世界级之间的区别。
为什么有效： 微交互创造每一个像素被考虑的感觉。当光标在悬停时改变、当文本选择有品牌化颜色、当按钮有微妙磁性拉动、以及当焦点状态美丽且可访问时，用户感受体验中嵌入的关怀。这些细节复合——单独微妙，集体变革。
关键见解：
- 自定义光标反映品牌个性 —— 光标在交互元素上改变，配可选磁性效果在按钮上
- 选择颜色品牌化 —— 自定义
::selection颜色在所有背景上工作良好 - 每个链接有考虑悬停状态 —— 图像有比例或覆盖处理，卡片有意义变换
- 焦点状态可见且美丽 —— 焦点指示器匹配品牌美学同时保持键盘导航清晰可见
- 加载和空状态被设计 —— 自定义骨架动画、品牌化进度指示器、设计404页面、有用错误状态
- 微排版正确 —— 智能引号、正确撇号、en/em破折号在适当地方、标题无孤儿、
text-wrap: balance在关键文本上
产品应用：
| 上下文 | 应用 | 示例 |
|---|---|---|
| 光标 | 自定义光标配交互元素变体 | Dogstudio自定义光标系统 |
| 选择 | 品牌化::selection背景颜色 |
在所有表面上工作的品牌化高亮 |
| 按钮 | 磁性悬停效果配微妙拉动 | Studio Freight磁性按钮 |
| 焦点 | 样式化焦点-可见环匹配品牌 | 可访问+美丽焦点指示器 |
| 加载 | 自定义骨架屏幕和进度条 | Locomotive品牌化加载序列 |
| 错误状态 | 设计404和错误页面 | 难忘、品牌化错误体验 |
复制模式：
::selection { background: var(--color-accent); color: var(--color-light); }cursor: none;在主体上配自定义光标div跟随鼠标位置- 磁性效果：计算光标和按钮中心之间的距离，应用比例变换
- 智能引号：使用
“和”或配置您的构建工具自动转换
伦理边界： 微交互必须增强可用性，非阻碍它。自定义光标必须保持功能和可见。焦点状态必须满足可访问性要求——美丽不能替代可见性。设计的错误状态必须真正有用，非仅聪明。
见：参考/案例研究.md 机构技术分解在微交互实现上。
设计过程
1. 概念第一，代码第二
在任何代码之前，定义：
品牌本质：什么单字捕捉灵魂？
视觉张力：什么对立力量创造兴趣？
标志性时刻：什么会让人截图并分享？
技术雄心：什么推动浏览器极限？
2. 首先设计标志性时刻
不要从头开始。从定义体验的东西开始。标题可以稍后解决。每一个10/10项目至少有一个让人停止和分享的时刻：从未见过的英雄动画、如此大胆的排版它成为视觉、意外惊喜的交互、讲述故事的滚动序列、或感觉像魔法的过渡。
识别您的标志的问题：
- 什么会让人截图？
- 他们会对同事描述什么？
- 他们会试图反向工程什么？
- 什么使这个不可错认是这个项目？
3. 排版设置一切
首先选择您的显示字体。让它决定调色板氛围、动画风格、间距节奏和整体个性。
4. 动效不是光泽
早期原型动画。动效设计与视觉设计一起发生，非之后。
5. 以克制交付
三件事完美击败十件事平庸。无情削减。
实现笔记
- 从标志性时刻开始 —— 首先设计定义体验的东西
- 桌面优先概念化，移动优先构建 —— 梦想大，渐进实现
- 早期原型动画 —— 动效不是抛光步骤，它是设计的核心
- 在真实设备上测试 —— 模拟器对性能和感觉撒谎
- 以克制交付 —— 三件事完美击败十件事平庸
- 汗水微细节 —— 工艺生活在1%其他人跳过的地方
- 设计状态 —— 悬停、焦点、加载、空、错误都重要
- 拥有您的约束 —— 每一个限制是设计机会
- 使用项目约定 —— 如果Tailwind 4+和/或shadcn/ui可用，在其上构建而非对抗它们。扩展它们的设计令牌、自定义它们的组件，并使用它们的模式作为10/10工艺的基础
参考文件
咨询这些以详细实现：
- 参考/排版.md：字体配对策略、字体比例系统、高级CSS排版
- 参考/动画模式.md：滚动动画、页面过渡、带代码的微交互
- 参考/布局系统.md：网格框架、断点、响应式模式
- 参考/技术栈.md：库、工具、性能优化
- 参考/案例研究.md：机构技术分解（Locomotive、Studio Freight、AREA 17、Hello Monday等）
常见错误
| 错误 | 为什么失败 | 修复 |
|---|---|---|
| 使用Inter、Roboto、Arial或system-ui作为主要字体 | 这些是应用字体，非体验字体——它们信号通用，非高级 | 从高级字体厂选择（Pangram Pangram、Dinamo、Grilli Type、Klim）或优质Google替代品（Space Grotesk、Instrument Serif、Fraunces） |
| 统一字体比例（一切在彼此的2倍内） | 无层次意味着无惊叹时刻——一切感觉同等不重要 | 推至显示和正文之间最小10:1比例；视图填充字体是目标 |
使用ease、ease-in、ease-out或linear缓动 |
默认缓动感觉机械和无生命——立即信号业余工作 | 使用自定义三次贝塞尔曲线：指数出（0.16, 1, 0.3, 1）、四次出（0.25, 1, 0.5, 1） |
| 同时动画一切 | 同时动画创造无层次或叙事的视觉噪声 | 用错开编排（元素间80ms错开），按重要性顺序序列 |
| 全部居中对齐 | 对称安全但无聊——它创造无张力或视觉能量 | 使用有意图网格偏移和溢出元素的不对称组合 |
| 到处等间距 | 统一间距创造单调——眼睛无处休息或聚焦 | 变化间距创造节奏：密集部分后配呼吸空间 |
| 纯#000000黑和纯#ffffff白 | 纯数字颜色感觉无生命和刺眼——它们信号无设计考虑 | 使用暖变体：#0a0a0a（稍暖黑）、#fafaf9（稍暖白） |
| 默认浏览器滚动 | 标准滚动感觉机械并将所有内容视为同等重要 | 实现Lenis或Locomotive Scroll用于平滑、加权、物理滚动感觉 |
| 紫到蓝渐变英雄部分 | “AI渐变”——立即信号通用、跟风设计 | 开发针对项目的签名颜色方法 |
| 整个体验中无标志性时刻 | 无截图值得的时刻，设计是熟练但可忘记 | 首先设计标志性时刻——人们会反向工程的东西 |
| 专业界面中的任何表情符号 | 表情符号信号随意/业余工艺并破坏高级定位 | 使用自定义图标或排版处理代替 |
| 文本和关键内容上的视差 | 可读内容上的视差导致晕动症和可访问性问题 | 保留视差仅用于装饰、非必要背景元素 |
| 阻止用户交互的动画 | 阻止滚动、点击或阅读的动效是敌对UX | 确保所有动画非阻塞；内容在过渡期间保持可访问 |
| 未修改的Font Awesome图标 | 通用图标集信号模板级设计 | 创建自定义图标或高度自定义现有图标以匹配品牌个性 |
| 默认表单样式 | 未样式表单元素立即打破工艺错觉 | 设计每一个输入、选择、复选框和按钮作为品牌化体验 |
快速诊断
| 问题 | 如果否 | 行动 |
|---|---|---|
| 英雄排版是否让人在滚动中暂停？ | 显示字体不够命令性 | 推比例对比到10:1+，选择更独特字体，填充视图 |
| 某人会截图任何部分并分享吗？ | 无标志性时刻存在 | 识别一个部分使其非凡——一个动画、比例变化或交互 |
| 当您模糊眼睛时设计仍然可读吗？ | 层次太扁平 | 增加级别间对比——更大标题、更多留白、更强强调色 |
所有缓动曲线自定义（无ease或linear）？ |
动效感觉默认和机械 | 替换为指数出（0.16, 1, 0.3, 1）或四次出（0.25, 1, 0.5, 1） |
| 组合中有不对称张力吗？ | 布局感觉安全和对称 | 将元素从中心偏移，让图像溢出，变化部分密度 |
| 颜色感觉为这个项目发明吗？ | 调色板可能属于任何品牌 | 开发签名颜色身份：单色张力、大胆签名或上下文变化 |
| 页面加载编排（非一次全部）吗？ | 元素同时弹出 | 实现错开揭示：结构首先，然后英雄，然后支持元素 |
| 滚动感觉自定义和加权吗？ | 使用默认浏览器滚动 | 实现Lenis或Locomotive Scroll用于平滑、物理滚动行为 |
| 微细节被考虑（选择、焦点、光标）吗？ | 默认浏览器行为保留 | 添加品牌化选择颜色、设计焦点状态和考虑光标行为 |
| CLS接近零且LCP小于2.5秒吗？ | 性能破坏感知质量 | 子集字体、优化图像（WebP/AVIF）、仅动画transform/opacity |
| 每一个动画回答“为什么这个移动？”吗？ | 动效是装饰性的，非有目的性 | 移除不服务于叙事、层次或用户指导的动画 |
| 焦点状态既美丽且可访问吗？ | 可访问性为美学牺牲或反之 | 设计匹配品牌美学同时满足WCAG可见性要求的焦点指示器 |
进一步阅读
- 设计排版 by James Craig——排版原则、层次和设计中字体架构的基础文本
- 平面设计中的网格系统 by Josef Muller-Brockmann——网格基础组合、比例系统和视觉布局数学基础的权威作品
- 排版风格元素 by Robert Bringhurst——排版者圣经覆盖节奏、比例和精美设置字体的工艺
- 颜色互动 by Josef Albers——颜色感知、对比和颜色如何相互行为的必要阅读
- 布局精华：100个使用网格的设计原则 by Beth Tondreau——应用于真实设计场景的实用网格基础布局原则
- Awwwards年度：全球最佳365个网站——网络最创新设计的年度集合，作为10/10工艺的基准
关于作者
这个技能综合了世界最获奖数字设计机构的技术和原则。主要来源是：
Locomotive（蒙特利尔）——平滑滚动体验的先驱（Locomotive Scroll的创造者），以单色张力调色板、大胆排版和无缝页面过渡闻名。他们为Ubisoft和国家电影委员会加拿大等客户的作品定义了沉浸式网络叙事的标准。
Studio Freight（纽约）——创意开发专家，以磁性交互、大胆签名调色板和推动浏览器技术边界闻名。他们的开源工具和实验项目影响更广泛的创意开发社区。
AREA 17（纽约/巴黎）——数字产品机构，以适应每个客户身份的上下文设计系统、编辑质量布局和视觉雄心与功能清晰度的平衡闻名。他们为文化机构和媒体组织的工作设定了内容驱动设计的标杆。
Active Theory（洛杉矶）——专攻WebGL、沉浸式3D体验和交互式叙事的创意工作室。他们的作品展示了当技术雄心遇见设计愿景时的可能性。
Hello Monday（哥本哈根/纽约，现为DEPT部分）——以有趣、创新交互和感觉像魔法的页面过渡闻名。他们为Spotify、Adidas和Google等品牌的作品持续赢得顶级奖项。
额外灵感来自Dogstudio（比利时）、Tonik（波兰）、Instrument（波特兰）、Resn（新西兰）和更广泛的Awwwards、FWA、CSS设计奖和Webby获奖者社区，他们的集体作品建立了世界级数字工艺的演进标准。