taste-brand-identity

taste-brand-identity

Logo 是记忆的辅助，而不是一幅画。这项技能确保品牌形象在缩至网站图标或放大至广告牌时依然成立。

1. 概念（动笔之前）

1. **一个想法，两个词：**标志归结为一个联想（“北方 + 指针”“唱片 + 花朵”）。如果无法用两个词说清楚，说明概念还不够明确。
2. **具象是最后的选择：**产品类别的通用图标（火花、火箭、聊天气泡、齿轮）是其他品牌标志都会采用的做法。试着挖掘产品背后的抽象概念。
3. **先在 16px 下测试，再决定是否喜欢：**标志首先必须能作为网站图标清晰呈现。如果概念必须依靠 3 种颜色或精细细节才能成立，就不合格。
4. **颜色上限为两种：**一种主色 + 一种强调色（或单色）。必须依赖渐变才能成立的标志，不算真正的标志。

2. 字标字体排印（没人检查的另一半）

• 优先调整现有的优秀字体，而不是另造字体：字距（−0.03em）、大小写、标点细节（“skittie.dev”中的 .），或替换一个镂空或字形。
• 每个字标只做一种字体排印调整：收紧字距、改变大小写，或只改一个字形。做两种调整，就成了猎奇式 Logo。
• 测试字标在全大写、句首字母大写和 12px 下的效果。如果缩小后无法保持清晰，就收紧字距或接受使用次级组合标。
• 小写字母之间绝不添加字距（这会破坏词形）。绝不拉伸字体（请使用真正的窄体字族）。

3. 组合标（标志 + 字标，规范化）

• 按构图网格制作：标志和字标共享视觉中心；四周留白等于标志最小元素的高度（或标志宽度的 1/4）。
• 一次定义三种组合标：水平（标志 + 字标）、上下（标志在字标上方）、紧凑（标志 + 短字标，用于狭小空间）。
• 最小尺寸：标志 ≥ 16px（网站图标），≥ 24px（应用内）；仅紧凑组合标中的字标可小至 12px。
• 组合标禁忌：带阴影、带渐变、小尺寸下带描边，以及首屏只显示标志而不显示品牌名称。

4. 色彩应用

• 品牌形象以主色 + 一种强调色呈现（强调色取自页面使用的调色板）。必须提供反白（浅色置于深色背景）版本，并定义两种版本。
• 强调色的使用范围：强调色用于传递信号（链接、一个按钮、激活状态、Logo 的强调细节）——绝不用于大面积背景填充。
• 提供“仅单色”备用版本：每个品牌素材都必须默认提供 100% 主色版本。
• 如果 Logo 是字标，颜色规则为：与标题使用相同的主色——绝不按区块使用不同的彩虹色。

5. 交付内容（全部提供）

1. 主组合标 — SVG，兼容 currentColor。
2. 网站图标 — 32px 和 180px（apple-touch）：仅用标志，居中放置于独立的方形底图中。
3. og-image — 1200×630 画布：标志或字标置于左上角或居中，配一个强调色细节，四周留白 ≥ 80px；这是互联网上浏览量最高的品牌素材——绝不能用网站截图代替。
4. 单页品牌规范表 — 标志、字标、留白示意图、最小尺寸、调色板（附色彩变量）、字体搭配、注意事项对照表。这将成为 Agent 自用的品牌规范文件。

6. 应做 / 不应做（快速筛选）

应做	不应做
化繁为简，直到只剩一个元素	为了“增加层次感”而添加描边、阴影和渐变
在 16px、48px、400px 下测试	只在 400px 下设计，然后祈祷一切顺利
只做一种字体排印调整	自行绘制与字体格格不入的字母
提供反白版本	只交付适用于白色背景的版本
认真制作 og-image	任由社交平台裁切网站截图

7. 检查清单（出现以下情况即判定品牌形象不合格）

• 无法用两个词概括概念。
• 颜色超过两种（中性色除外）。
• 必须使用渐变、阴影或描边才能保持清晰。
• 16px 下的标志与竞争对手的标志难以区分。
• 没有反白版本。
• 没有定义留白或最小尺寸规则。
• 缺少 og-image，或使用了页面截图。