web-visual-direction

Web 视觉方向

将模糊的需求转化为一套统一的视觉系统。选择适合产品且能经得起实现考验的方案；不要产出一串看起来像情绪板的形容词。

工作流

1. 检查产品需求说明、现有代码、品牌素材、截图、内容、组件库和限制条件。保留已有的品牌价值。
2. 分别用一句话说明受众、他们当前要完成的任务，以及界面应该营造的感受。
3. 选择一个有意义张力的视觉主张，例如“兼具编辑权威感与运营速度”。说明它为何适合。
4. 选择两到三个相关参考。提取节奏、对比、构图和信息密度等原则，而非表面装饰或受版权保护的版式。
5. 先确定构图，再处理样式细节：
   • 确定首屏的视觉焦点；
   • 定义网格、内容宽度、信息密度和区块节奏；
   • 决定是否有元素需要刻意打破网格。
6. 为字体、颜色、表面、边框、图像、图标和动效制定可直接用于实现的规则。
7. 将方向整理成一小组设计令牌，并说明对组件的影响。沿用项目现有的样式系统。
8. 如果任务包含实现，则实现一个有代表性的视口或组件。
9. 在移动端和桌面端宽度下验证设计方向。移除任何会削弱理解、层级、性能或无障碍性的选择。

决策规则

• 以真实的产品、工作、场所、人物、物件或成果为主角。
• 优先采用令人印象深刻的结构创意，而非装饰效果。
• 让信息密度符合任务需求：运营界面应紧凑；叙事型品牌页面则可以留白。
• 使用字体要有理由。不要仅因某款字体流行就禁用或选用它。
• 卡片应服务于有意义的内容分组，不要把它作为每句话的默认容器。
• 将渐变、玻璃质感、颗粒、辉光和超大字号视为工具，而非设计质量的证明。
• 让动效服务于明确目的，并尊重减少动态效果的偏好设置。
• 不要伪造品牌素材、客户徽标、指标或产品截图。

交付约定

返回或实现：

1. 视觉主张 - 一句话。
2. 参考原则 - 借鉴什么，避免什么。
3. 方向规范 - 构图、字体、配色、表面、图像、图标和动效。
4. 令牌草案 - 与代码库兼容的命名值或映射。
5. 响应式意图 - 窄屏和宽屏下的变化。
6. 验证依据 - 如果可以访问浏览器，则提供截图或检查过的视口。

参考

当产品类型应显著影响设计方向时，请阅读 references/site-archetypes.md。