visual-direction

视觉方向

当前视觉方向：色彩调色板、字体搭配、布局组合与视觉语言（截至 2026 年第一、二季度）。内容采用结构化形式，便于定期更新。

适用范围

在以下情况下使用此技能：

• 为新项目定义色彩调色板
• 选择字体搭配
• 规划布局组合与视觉节奏
• 建立一致的视觉语言
• 实现深色／浅色主题

原则

1. 色彩传达品牌，而非潮流

根据品牌形象制定调色板。潮流影响设计框架，品牌决定具体呈现。

2. 字体决定氛围

与其他任何元素相比，字体选择对情感基调的影响更大。无衬线体 = 现代，衬线体 = 信任感，展示字体 = 创意。

3. 留白也是设计

留白能引导视线、建立层级，并传递高端品质。

4. 一致性胜过创意

统一的视觉系统比零散的灵光一现更显专业。

5. 对比度构建层级

视觉对比（尺寸、颜色、字重、空间）是构建信息层级的主要工具。

规则

色彩调色板

• 应做：定义角色清晰、结构明确的调色板：
  • 主色：品牌色，少量使用（行动号召按钮、激活状态）
  • 中性色：灰色渐变（至少 5 个层级）
  • 语义色：成功（绿色）、警告（黄色／橙色）、错误（红色）、信息（蓝色）
  • 强调色：可选，用于突出显示
• 应做：科技／SaaS 使用深色：#0A0A0A 到 #1A1A1A（而非 #000000）。
• 应做：生活方式／品牌使用暖中性色：米白色（#FAFAF5 到 #F5F0EB）。
• 应做：采用单色强调——一种鲜明的颜色就足够。
• 不要做：主调色板中使用超过 2 种彩色。
• 不要做：在大面积区域使用高饱和度颜色。高饱和度颜色仅用于小面积强调。
• 不要做：文字对比度低于 4.5:1（WCAG AA）。

字体搭配

• 应做：最多使用 2 种字体系列：
  • 选项 A：几何无衬线体 + 人文无衬线体（例如 Inter + DM Sans）
  • 选项 B：现代衬线体 + 中性无衬线体（例如 Fraunces + Inter）
  • 选项 C：开发者工具使用等宽字体 + 无衬线体（例如 JetBrains Mono + Inter）
• 应做：形成鲜明的字号对比：展示文字至少比正文大 3 倍（72-120px 对比 16-18px）。
• 应做：尽可能使用可变字体——一个文件，多种字重。
• 不要做：搭配风格相似的字体。对比至关重要。
• 不要做：每种字体使用超过 4 个字重。
• 不要做：正文小于 16px。

布局组合

• 应做：采用非对称平衡——不要让所有内容都居中。
• 应做：保持宽松的垂直节奏：桌面端每个区块间距为 120-200px。
• 应做：以 12 列或 16 列网格为基础，再有意打破网格。
• 应做：图片使用全宽，文字限制宽度（最大 720px；每行 65-75 个字符）。
• 不要做：使用毫无变化的等宽分栏。50/50 分栏显得呆板。
• 不要做：每页使用超过 3 种容器宽度。

视觉语言

• 应做：统一图片处理方式：滤镜、透视和风格保持一致。
• 应做：有选择地、适度地使用 3D 元素。
• 应做：使用品牌专属插画（不要使用通用素材库）。
• 应做：使用光线自然的真实摄影作品。
• 不要做：将 AI 生成的图片作为主要视觉内容。
• 不要做：使用未压缩的图片。使用 WebP/AVIF，并启用延迟加载。
• 不要做：图片缺少替代文本。

调色板范式与字体趋势：参见 references/archetypen.md

模式

深色模式优先

适用场景： 科技产品、开发者工具、高端品牌。 做法： 从深色模式开始设计，再衍生出浅色模式。使用 CSS 自定义属性切换主题。

字体主视觉

适用场景： 宣言式落地页、代理机构网站、作品集。 做法： 不使用图片，只用字体排版。标题字号为 100px 以上，并将负空间作为设计元素。

视觉节奏区块

适用场景： 含多个区块的长落地页。 做法： 交替使用背景色：深色 > 浅色 > 深色。使用同一调色板，但调整色温。

单色 + 强调色

适用场景： 极简主义产品、奢侈品牌。 特点： 黑白／灰度配色 + 一种强调色，用于行动号召按钮和重点内容。

超大字体网格

适用场景： 作品集、创意机构、编辑设计。 特点： 将大号字体作为网格元素。字母打破列的边界；文字成为视觉图案。

反面模式

1. 趋势拼贴 -- 在同一页面上混用玻璃拟态、新粗野主义和新拟态。每个项目只用一种风格。
2. 过度饱和的渐变 -- 2023 年流行的紫－粉－橙渐变在 2026 年显得平庸。改用微妙的单色渐变。
3. 图库照片混用 -- 使用来自不同来源、风格不一致的图片。
4. 字体过多 -- 使用 4 种或更多字体显得杂乱。
5. 图标风格不一致 -- 混用线框、实心和双色调图标。统一风格，使用同一套图标。
6. 阴影过度 -- 层级和方向过多。3-5 个层级足矣。
7. 纯装饰性元素 -- 没有作用的形状。每个元素都必须有助于构建层级或营造氛围。
8. 对比度不足 -- 没有叠加层的图片文字。使用自动对比度检查。

检查清单

• 颜色调色板明确划分用途：主色、中性色（5 个以上层级）、语义色、强调色
• 所有文字与背景的组合均符合 WCAG AA（4.5:1）
• 项目中最多使用 2 种字体
• 正文文字至少为 16px
• 展示文字至少比正文大 3 倍
• 区块间距保持一致（例如，桌面端为 120px，移动端为 64px）
• 图片处理方式保持一致（滤镜、透视、风格）
• 所有图片均使用 WebP/AVIF 格式，并启用延迟加载
• 图标集的风格统一
• 阴影系统最多包含 5 个层级
• 已实现暗色模式或将其用作主主题
• 颜色系统使用 CSS Custom Properties
• 主视觉区或功能区不使用图库照片

交叉参考

• design-trends -- 塑造这一视觉方向的整体趋势
• ui-patterns -- 针对这一视觉方向设计的模式
• component-patterns -- 用于组件主题化的令牌系统
• color-theory -- 颜色系统基础知识与令牌结构
• web-typography -- 排版系统与字号缩放
• branding-identity -- 品牌形象作为视觉方向的基础
• images-media -- 图片优化与格式