brand-identity

品牌视觉识别

设计或评估用于呈现品牌的视觉元素：标志系统、色彩、字体、图像、图标和动效。不受技术栈限制。不受工具限制。

本技能假设品牌方向已获批准（定位、情绪、名称）。如果尚未确定，请先运行 brand-ideation。

---

适用场景

• 设计标志系统
• 定义品牌配色
• 选择品牌字体
• 开发图标或插画风格
• 定义图像方向（摄影、插画）
• 建立动效原则
• 审核现有视觉识别的一致性或缺漏

不适用场景

• 尚未确定品牌方向（使用 brand-ideation）
• 记录已完成的系统（使用 brand-style-guide）
• 定义品牌声音和语气（使用 brand-voice）
• 根据现有品牌构建 UI 组件（使用 design-standards 或 design-system）

---

必需输入

• 品牌名称和已批准的定位
• 情绪方向（来自构思阶段，或以参考资料形式提供）
• 受众和品类背景
• 应用场景（网页、印刷、包装、动效——按实际情况选择）
• 限制条件（母品牌要求、监管标志、无障碍最低标准）

---

框架：5 个要素

完整的视觉识别由 5 个要素组成。每个要素都应强化其他要素。它们之间缺乏一致性，是视觉识别最常见的问题。

1. 标志系统

大多数品牌需要的不是一个标志，而是适用于不同场景的一套标志。

标志系统的组成部分：

• 主标志。 核心标志。在空间足够时使用。
• 字标。 仅由字体构成，不含图形符号。用于空间狭窄的横向场景。
• 符号或字形。 仅含符号，不含文字。用于应用图标、网站图标和社交头像。
• 组合形式变体。 横向、堆叠、方形——按实际需要选择。
• 字母组合。 将首字母设计成标志。可选，但适用于小尺寸场景。

设计原则：

• 在 16 像素下清晰可辨。 在网站图标尺寸下测试标志。如果细节无法辨认，就重新设计。
• 可用单色再现。 如果标志仅在全彩情况下才有效，就无法进行丝网印刷、刺绣，或用作浏览器网站图标。
• 轮廓鲜明独特。 眯起眼看它。还能认出它是什么吗？如果它的轮廓看起来和同品类的所有其他标志都一样，就重新设计。
• 构造网格。 每条曲线和每个角度都应经过刻意设计。记录构造方式。

常见问题：

• 只设计主标志，直到发布时才发现字标、字形和小尺寸变体都不存在。

2. 色彩系统

色彩系统不只是调色板，更是色彩传达含义的规则。

组成部分：

• 主色。 最能代表品牌的标志性色彩。
• 辅助色。 1 到 3 种用于扩展调色板的辅助色。
• 中性色。 构成大部分表面的灰色和浅色调。
• 语义色。 如果品牌应用于产品 UI，则包括成功、警告、错误、信息等颜色。
• 强调色。 少量用于突出重点和强调内容。

每种颜色都应记录：

• Hex、RGB、HSL、CMYK（适用印刷时），以及 Pantone（存在对品牌至关重要的印刷需求时）
• 与系统中其他颜色的 WCAG AA 对比度
• 允许和禁止的搭配方式（有些品牌色搭配在一起很难看）
• 使用说明（何时使用、何时不使用）

设计原则：

• 进行无障碍测试。 WCAG AA 要求普通文本的对比度为 4.5:1，大号文本为 3:1。如果品牌色与白色的搭配无法满足任一标准，就有问题。
• 进行色盲测试。 大约 8 percent 的男性患有某种形式的色盲。关键 UI 信号不应仅依赖颜色。
• 谨慎定义中性色。 在大多数品牌应用中，中性色占表面面积的 80 percent。它们比品牌色更具影响力。
• 限制调色板规模。 包含 30 种颜色的调色板难以管理。精心挑选 5 到 8 种颜色，胜过臃肿的系统。

3. 字体排版

字体是仅次于 Logo 的第二大品牌辨识元素。

字体系统的组成部分：

• 展示字体。 用于标题和品牌展示场景。
• 正文字体。 用于长篇阅读。通常与展示字体相同，有时会有所不同。
• 等宽字体（适用于技术品牌时）。
• 字体级数。 应用于不同场景的一组字号，通常有 5 到 8 级。
• 字重和样式。 确定系统包含哪些字重和斜体样式。

设计原则：

• 字体搭配。 如果使用两种字体，它们在正文字号和展示字号下都必须相得益彰。常见搭配包括：衬线展示字体 + 无衬线正文字体，或几何无衬线展示字体 + 人文主义无衬线正文字体。
• Web 授权。 确认 Web 授权涵盖预期的页面浏览量。一些流行字体的 Web 授权费用高得令人却步。
• 可变字体越来越适合兼顾性能和灵活性。
• 备用字体栈。 指定品牌字体无法加载时使用的系统备用字体。备用字体应在视觉上与品牌字体相似。
• 开源替代字体。 记录在授权不切实际的情况下（例如第三方工具、嵌入式场景）可用的开源替代字体。

4. 图像与插画

图像风格方向往往缺乏明确规定，导致品牌形象随时间逐渐偏离。

摄影风格方向：

• 主题。 品牌展示什么？
• 构图风格。 紧凑裁切、广阔环境、抓拍还是摆拍？
• 光线。 明亮自然、戏剧化且方向明确，还是柔和漫射？
• 色彩处理。 真实色彩、偏暖、降低饱和度，还是高对比度？
• 应避免的内容。 库存照片风格，以及该类别中的特定陈词滥调。

插画风格方向：

• 风格。 扁平、立体、手绘、几何、抽象还是具象？
• 色彩运用。 使用完整色板、限制色板，还是仅使用品牌色？
• 线条处理。 粗重描边、柔和阴影，还是不加描边？
• 主题。 哪些内容应绘制成插画，哪些不应？

图标设计：

• 风格。 填充还是描边。圆润还是锐利。单一线宽还是可变线宽。
• 网格。 像素级精准的网格（通常以 24x24 或 16x16 为基准）。
• 描边宽度。 在整套图标中保持一致。
• 图标集。 明确包含哪些图标，以及如何以一致的方式添加新图标。

5. 动效

如果品牌出现在任何数字产品、营销视频或动画触点中，动效就是品牌识别的一部分。

需要定义的动效原则：

• 缓动曲线。 动画中使用的默认缓动方式：线性、缓入缓出或自定义。
• 时长级别。 快速（100ms）、中等（200-300ms）、缓慢（500ms+），以及各自的适用场景。
• 编排。 元素如何进入、退出，以及如何响应交互。
• 品牌时刻。 标志性动画（Logo 展开、页面转场、加载动画）。

设计原则：

• 克制。 产品 UI 中的大多数动效都应快速且细微。戏剧化动效应留给品牌时刻。
• 减少动态效果。 始终为有前庭敏感问题的用户提供 prefers-reduced-motion 替代方案。
• 性能。 动画必须在目标设备上达到 60fps。发布前进行性能分析。

---

工作流

1. 确认品牌方向。 定位、调性、受众。如果不明确，请返回 brand-ideation。
2. 审查应用场景。 列出品牌将出现的所有场景（网站、印刷品、包装、应用、社交媒体、标识、视频）。应用场景决定系统需要应对什么。
3. 逐项设计元素。 从 Logo 和颜色开始，因为它们会限制字体排版的选择。然后设计字体，再设计图像、图标和动效。
4. 压力测试。 将系统应用到 3 到 5 个模拟场景中（首页、社交媒体帖子、名片、产品 UI、标识）。找出问题所在并迭代。
5. 编写文档。 为每个元素列出规则、示例和注意事项。这将成为 brand-style-guide 的输入。
6. 在大范围推广前获得批准。推广后修改品牌识别系统的成本，是设计期间修改的 10 倍。

---

失败模式

• 脱离应用场景设计标志。 标志在高分辨率模型图上看起来很棒，但缩小到网站图标尺寸后却难以辨认，这就是设计失败。
• 选择品牌色时不进行对比度测试。 如果品牌色与白色的对比度不符合 WCAG AA 标准，那么基于该品牌色构建的 UI 默认就无法满足无障碍要求。
• 指定字体时不检查 Web 授权。 到部署时才发现字体厂商按页面浏览量收取所选字体的使用费，会让预算超支。
• 跳过图像风格指引。 没有这项指引，品牌形象就会变成下一个人挑选的任何素材照片。
• 把动效当作装饰。 动效不一致对品牌凝聚力的侵蚀，和颜色不一致一样快。
• 只设计主要状态。 品牌在错误状态下是什么样子？在深色模式下呢？在需要翻转字标方向的本地化版本中呢？这些都不是边缘情况，而是品牌的一部分。

---

输出格式

默认输出为一组结构化文件：

• identity/logo/ - 所有标志变体（主要版本为 SVG，另附常见尺寸的 PNG/JPG 导出文件）
• identity/colors.md - 色彩系统，包含十六进制代码、对比度、使用规则
• identity/typography.md - 字体系统，包含字号比例、字重、回退字体
• identity/imagery.md - 图像风格指引，附参考示例
• identity/iconography/ - 图标集或图标风格规范
• identity/motion.md - 动效原则
• identity/applications/ - 3 到 5 个应用模型图，用于压力测试该系统

这些内容可直接用于 brand-style-guide。

---

参考文件

• references/identity-system-spec.md - 用于记录各元素的详细规范模板。
• references/contrast-and-accessibility.md - 关于颜色和字体的无障碍检查，附计算方法。