世界级网站设计是做什么的？

目的

通过研究驱动的设计过程和精心实现，打造独特、深思熟虑、生产级的网站。

该技能适用于以下两种情况：

重新设计： 改善现有网站，同时保留其身份、定位、内容、路由和现有功能，除非有明确的理由进行更改。
新网站： 根据产品、受众和需求建立原创的创意方向，而非默认使用通用模板。

目标不是模仿设计画廊。而是创造连贯、令人难忘且工艺精湛的体验。

核心原则

先理解，后更改。 了解产品或公司的业务、服务对象以及网站需要实现的目标。
先研究，后设计。 检查相关参考资料，识别有用的设计决策；不要复制布局或视觉标识。
赋予每个项目独特身份。 不要在无关的项目中重复使用相同的视觉方向、首屏布局、章节顺序或装饰风格。
有目的地设计。 每个章节、动画、图像和交互都应支持沟通、可用性或品牌特性。
平衡原创性与清晰度。 在视觉上富有雄心，同时不使网站难以理解或使用。
构建、检查并优化。 在真实视口尺寸下审查实际实现之前，设计不算完成。

工作流程

1. 发现项目

在编辑文件之前：

检查仓库结构、框架、包管理器、依赖项、脚本和现有约定。
尽可能运行现有项目并检查当前渲染的网站。
审查所有相关页面、路由、导航、表单、行动号召和交互状态。
了解产品、受众、定位、价值主张、品牌声音和转化目标。
确定现有资产、字体、颜色、设计令牌、组件和集成。
对于重新设计，将现有网站和项目材料视为事实来源。不要在无正当理由的情况下编造产品声明或删除重要内容和功能。

如果关键信息不可用，则做出保守假设，并清楚地将它们与已验证的事实区分开。仅当缺失的信息阻碍了有意义的进展时才提出问题。

2. 研究视觉参考

当可以访问浏览器或进行网络研究时，检查各种高质量的网站。有用的发现来源包括：

尽可能检查实际页面和交互，而不仅仅是缩略图或搜索结果片段。

研究：

艺术指导和品牌表达。
构图、网格、间距和视觉节奏。
排版、层级和易读的行长。
颜色、对比度、边框、表面和纹理。
首屏部分和第一印象体验。
导航和信息架构。
产品演示和视觉叙事。
摄影、插图、3D 和其他资产。
动效、过渡和交互细节。
响应式行为。

出于特定原因选择参考资料。在内部解释每个参考资料有何用处以及如何将该想法适应当前项目。不要完全复制其他网站的独特设计。

如果无法进行外部浏览，则不要声称已检查过这些画廊。根据可用的项目上下文工作，并在相关时说明局限性。

3. 确立创意方向

在实现之前，形成适合该特定品牌和受众的清晰设计方向。

定义：

预期的感觉和个性。
视觉概念和艺术指导。
排版方法和层级。
调色板和对比度策略。
布局和网格原则。
图像和插图方向。
组件和表面语言。
动效原则。
品牌表达与可用性之间的关系。

对于重新设计，以现有身份为起点。当可识别的品牌元素仍然有效时，保留它们，但改进薄弱或不一致的执行。

避免默认使用：

通用的 SaaS 着陆页结构。
无动机的渐变和发光效果。
重复的便当盒网格。
装饰性斑点图像和通用的 AI 图像。
过多的卡片、药丸形状、边框和阴影。
随意的大号排版。
延迟或遮挡信息的动画。

这些模式并非禁止；仅在它们真正适合项目时才使用它们。

4. 规划体验

在构建之前绘制页面或站点结构。

优先考虑用户的问题和任务。
建立清晰的层级和逻辑内容流程。
让价值主张能够快速被理解。
赋予每个部分独特的用途。
在不失去连贯性的前提下使用视觉变化。
保持行动号召清晰且位置恰当。
在重新设计中保留重要的现有路由、内容、集成和用户旅程。

不要仅仅为了增加页面长度而添加部分。不要仅仅为了追求极简而删除有用的内容。

5. 设计与实现

直接在现有代码库中工作，除非用户要求单独的样机。

遵循项目的框架、约定和包管理器。
在合理的情况下重用和改进现有组件。
为重复的模式创建可重用组件和设计令牌。
使用语义化 HTML 和可访问的交互模式。
尽可能使用真实的项目资产；不要编造客户评价、客户徽标、统计数据、奖项或产品能力。
有目的地选择依赖项，避免不必要的包。
确保链接、按钮、表单、菜单和其他控件执行其预期操作。
让响应式行为有意为之，而不仅仅是缩小桌面布局。
优化图像、字体和加载行为。

不要用静态样机替换正在运行的应用程序。除非已实现并测试，否则不要声称某个集成或交互有效。

动效与滚动标准

全局平滑/缓动滚动

平滑、缓动滚动是整个网站项目的默认偏好。

目标是让运动感觉流畅、可控且自然：

在适当的情况下使用平滑/缓动滚动。
调整缓动和持续时间，使页面始终保持对用户输入的响应。
支持鼠标滚轮、触控板、键盘导航和触摸输入。
使锚点导航平滑，避免造成混淆的跳跃。
避免过度的平滑、人为延迟或页面与用户输入脱节的感觉。
保留预期的浏览器行为，避免不必要的滚动锁定。
确保实现与粘性元素、动态内容和路由更改兼容。

在选择实现之前检查现有技术栈。像 Lenis 这样的库可能合适，但并非强制。当原生浏览器功能满足设计和可访问性要求时，优先使用它们。不要仅仅为了添加滚动库而添加。

尊重 prefers-reduced-motion。提供减少动效的体验，确保核心内容和导航在没有动画的情况下仍然可用。

可选的部分特定滚动技术

在它们能改善叙事或理解时，有选择地使用：

固定部分： 保持一个部分或视觉元素固定，同时其内容变化。
滚动驱动动画： 将动画进度与滚动位置绑定。
粘性叙事： 保持视觉元素固定，同时相关的文本或数据变化。
视差效果： 通过分层运动创建克制的深度感。
水平序列： 在直观的情况下，将垂直滚动映射到水平内容移动。
部分过渡： 用有目的的过渡连接场景或部分。
微交互： 为悬停、聚焦、按下和状态变化提供响应式反馈。

不要将平滑滚动与劫持滚动混淆。

避免控制整个页面的滚动行为。用户绝不能感觉被困住。保留直观的滚动、键盘访问、触摸行为、浏览器历史以及直接到达内容的能力。如果使用了固定或滚动控制的部分，请提供合理的移动端和减少动效的替代方案。

动效质量

动效应传达层级、状态、连续性或品牌个性。
使用一致的计时和缓动。
避免动画化每个元素。
避免布局偏移和阻挡阅读或交互的动画。
在合适的情况下，优先使用 transform 和 opacity 进行高性能特效。
如果动画失败或被禁用，确保关键内容保持可见和可用。

质量保证

在首次实现后不要结束。

当工具和环境允许时：

使用现有脚本运行项目。
在浏览器中检查渲染的网站。
审查所有相关页面和重要状态。
测试桌面、平板和移动视口尺寸。
测试导航、链接、表单、菜单和行动号召。
使用鼠标滚轮、触控板、触摸和键盘测试平滑滚动。
检查固定部分和滚动动画是否存在卡住、抖动或布局问题。
检查减少动效的行为。
检查控制台错误和失败的网络资源。
优化间距、排版、对齐、响应式布局和动效。

如果无法进行浏览器检查或特定测试，请直言，而不是声称已通过。

完成标准

项目准备就绪的条件：

其设计方向符合实际品牌和受众。
视觉层级和内容流程清晰。
体验在不同页面和视口尺寸中保持一致。
全局平滑/缓动滚动在不损害控制感的前提下感觉精致。
可选的动效技术增加了价值而非摩擦。
现有的基本功能保持完整。
交互元素按预期工作。
已考虑可访问性和减少动效的行为。
实现已尽可能运行并进行视觉审查。
已知的限制已披露。

最终响应

总结：

更改了什么。
创意方向和关键设计决策。
重要的动效和滚动行为。
更新的页面或组件。
实际执行的测试。
任何遗留问题或限制。

不要在没有证据的情况下声称获奖、完美质量或成功的测试。

世界级网站设计