几何标志蓝图是做什么的？

蓝图是一份简短的指令列表，能够从空白画布精确重建一个标志，而无需测量或追踪旧文件。如果你写不出这样的列表，你拥有的只是装饰，而不是系统。可交付的成果是一份你可以描述、辩护和复制的规格说明，而非一张图片。

受那些用简单几何构建标志的设计师的启发：James Barnard 关于标志蓝图的文章，以及 Chermayeff & Geismar & Haviv 和 Bruce Blackburn 的构建身份。第2版加入了来自三个开源项目的实践：

Kaan Kızıltuğ 的开源标志设计技能（测试电池、视觉修正、评审）；
Simple Icons 项目的图标规范（单路径单色导出）；
Inkloom 发布的关于在构建规则下制作标志的说明。

注记见 references/inspirations.md。

十条规则

概念优先，几何置后。 在画圆之前，先要清楚每个元素的意义。网格只在最后10%的工作中整理设计。
重建测试定义蓝图。 能否仅凭图表和几条简单指令，让别人精确重现标志？
尽可能少的共用基本元素。 一个基本形状族，具有共享的半径、相切连接点以及一种端点样式。
并非所有标志都适合蓝图。 手写体或高度视觉化的标志无法简化为清晰的几何。不要强行套用。
绝不事后修图。 在完成的标志上画黄金比例圆圈看起来排列整齐，但证明不了什么。
视觉修正是一个数字，不是微调。 将每项修正写入规则（参见步骤5）。
及早停止。 一旦标志可重现，就停止添加构建。
广泛探索，然后收窄。 许多廉价的一行概念，少数构建，一个最终版本。保留每一次迭代。
测量，而非欣赏。 每个候选方案在512像素下看起来都不错。用16像素真实渲染来判断。
交付规格说明。 规则列表、图表和测试结果。

如果构建需要大量测量，说明它不够简单。简化标志或系统。

步骤

1. 从简报转化为约束。 列出每个元素的含义。在画图之前，将简报中的形容词、受众和竞争对手转化为具体参数：

描边粗细；
宽度和比例；
几何族；
反白形状；
端点样式（圆头或平头）；
适合的标志类型。

然后列出该类别的陈词滥调（例如开发工具：方括号、尖括号、终端窗口、光标）。除非以新形式呈现，否则不要使用陈词滥调。

如果存在先前版本，先检查真实文件数据（尺寸、描边宽度、弧角、中心点），逆向工程其系统。注意哪些是随意的：非模数尺寸、不均匀的间距、偏离中心的质量。

2. 固定画框及其裁剪区域。

画布尺寸（512）以及标志必须适应的每种裁剪：圆形头像（半径 = 画布/2）、圆角应用图标、方形图标。
安全圆位于裁剪半径的7/8处（512中为224）。所有图形内容保持在此圆内。
什么放在裁剪中心。 如果标志基于一个圆构建，则将该圆的中心放在裁剪中心。两个近同心圆只差几个像素会被视为错误，而人眼更易原谅不均匀的重量。只有当标志中没有元素呼应裁剪时，才以面积质心为中心。
如果简报提到标志被裁剪，需明确说明：裁剪安全（默认）或故意出血（一个元素在记录点超出边缘）。

3. 选择一个模数和一个基本元素。

单位 u 划分画布（512中为8）。描边粗细为干净的倍数（48 = 6u）。
优先选择人们能用圆规和直尺重建的关系：勾股三元组（3:4:5）、半径等于画布一半。
角度通过对分（90°、45°、22.5°）或六边形（60°、30°）获取。避免近似角度。

4. 每个元素按规则放置。 每个元素得到一行指令，例如：“茎杆立在圆圈的西点，向上延伸直到其顶帽触及安全圆。”

一种描边粗细，垂直于描边测量。45°臂水平测量为48宽时，实际厚度仅为34。
每个元素使用一种顶帽和连接样式。尖角与圆头端帽共存会显得系统不统一。
一种间距规则，例如“每个间距等于一个描边宽度”，或对于断裂环“将其分成相等扇区并填充交替扇区”。
圆点直径等于描边粗细。

5. 视觉修正，化为数字。

质量： 对于没有圆形呼应裁剪的标志，将面积质心置于视觉中心（大约比几何中心高1%），而非边界框中心。对于基于环的标志，参见步骤2：环优先，且位于轻一侧的开放空间平衡重量。
上冲： 圆形形式超出高度1%到3%；尖点超出3%到6%。圆点与直描边相邻时，直径需增加约4%。
光照效应： 浅底深色图形看起来更重。将反色文件减细2%到5%，并作为单独文件命名。
字母： 横线比竖线细5%到10%。

将每项修正写入规则列表。

6. 运行重建测试。 用8行或更少的规则写出规则。仅凭列表重建标志（通过代码），并与原图进行差异比较。任何你需要测量的部分都需要更好的规则。

7. 探索，然后进行淘汰赛。

编写12到15个一句话概念，涵盖至少三种标志类型。良好的分布：
- 对当前标志的改进；
- 重新诠释一个元素的混合体；
- 全新方向（字母形式、连字、容器、负空间、位图）。
全部从规则构建。
应用门槛，然后对幸存者评分（参见评分卡）。
从不同方向中选取三名决赛选手，而非同一家族的前三名。
对每名决赛选手进行迭代以修复测试发现的问题，然后对胜出者再次迭代直至最终版。
保存每一轮的文件。迭代有时会使标志变差。承认这一点并保留早期版本。
在决策者工作的地方展示每一轮（例如 Figma 页面、共享看板），每个版本一个标注好的框架及其评分，然后再请任何人选择。在视野之外计算的分数会让人觉得无法验证。
让决策者用眼睛挑选候选人，然后根据其蓝图修改每个选择。分数为选择提供依据，但不决定选择。

8. 测试电池。 使用真实渲染，绝不使用缩小的截图。

尺寸： 16、20、24、32、48、64、128、256像素。
形状计数： 在50%阈值下，计数512、32和16像素下的墨迹形状和封闭孔洞。如果16像素下的计数与512像素不同，则间距已闭合或标志已碎裂。
最小间距： 至少为标志宽度的1/32。在16像素下，低于约1.3像素时，间距会闭合。
字母测试： 每个字母在初看时仍能辨识。更改描边粗细、环大小或断裂后重新测试。较粗的描边可能淹没上伸部分，而新的断裂可能将b变成播放按钮。
意外解读： 镜像、旋转180度、极小观看、模糊（眯眼）。
颜色： 单色黑和白、反色、品牌色、照片、图案。
货架熟悉感： 将标志与同类别中使用相同手法的4到6个标志并列。如果它看起来熟悉但不是你的，那就是别人的。
连接处： 放大每个描边相遇的地方。寻找缺口、细长碎片和肿块。
上下文合成： 将标志置于其实际使用位置，使用决策者自己的 Dock、主屏幕或标签栏的真实截图，以原生分辨率与其相邻图标对比。
诚实测量： 栅格化时采样像素中心。包含边缘像素的多边形填充会添加虚假灰色边框并夸大模糊数值。

9. 配色方案。 反色版本交换背景和前景并保持几何形状，但减细的反色文件除外。检查对比度（目标4.5:1或更高）。每个版本一种平坦颜色，主版本无渐变。

一个强调色，一个含义。 如果使用第二种颜色，将其赋予承载含义的单个元素（例如表示“代码”的光标或提示符）。图形强调色与其背景至少需要3:1的对比度，因此只在其能达到此值的地面上使用。

10. 生产文件。

轮廓而非描边。一个 <path>、一个 <title>、坐标保留两位小数。
弧线表示为弧线。由基本元素构建的标志需要几十个锚点，而非几百个。
具有相同缠绕方向的叠加子路径渲染为联合体（非零填充）。这对于屏幕和印刷没问题。在矢量编辑器中合并它们用于切割和刺绣。
24像素图标导出（Simple Icons 惯例）：
- 24×24 viewBox，单色，一个路径；
- 至少触及两边且居中；
- 精度3位小数；
- 无 fill、width 或 height 属性；
- 品牌颜色记录为6位十六进制数。
- 如果单色版本需要分隔段，在24上使用约0.5的间距（1/48）。
小尺寸裁切： 如果主版本的细节在16像素下融合，绘制单独的16像素版本。去掉最小元素并加粗描边，然后仅在该尺寸下使用。不要为适配削弱主版本。
像素网格构建用于需要锐利的标志：使用画布/16的单元格（512中为32），这样在16像素下每个单元格恰好1像素，32像素下为2像素。仅放置在整个单元格上。将曲线标志的垂直杆对齐到16单位的网格上，使其在32和64像素下保持清晰。
图标裁剪： 方形图标不需要安全圆。将 viewBox 重新裁剪到图形边界加上6%的边距，使标志显示得更大。
安全空间源自标志本身的几何（例如一个描边或一个圆点直径），而非固定数字。

11. 工具包前的检查点。 展示概念表及你的建议，然后等待。仅在决策者选定的方向上构建锁屏、图标集和指南。

12. 交付。

主版本（正片）、反色版（减细）和单色版本。
蓝图图表。
裁剪测试和图标裁剪。
24像素单路径图标。
规则列表。
附有测量值的评分卡。
简要说明，阐述更改了什么及其原因。

在 Figma 中，将新框架添加到原图旁边，切勿覆盖原图。

评分卡

先做门槛测试。 失败任一门槛即淘汰候选方案，无论总分如何：

裁剪： 最远的图形内容位于安全圆内或刚好在其内。
字母测试： 预期的字母仍可辨识。

然后按5分制评分，加权计算，并展示你的计算过程（总分/50）：

标准	权重
图标辨识度：16像素下轮廓是否仍传达其含义？	×3
形状和间距：在32和16像素下测量形状计数是否保持不变；最小间距	×2
符合简报：保留承载含义的元素	×2
独特性：货架和熟悉感测试	×2
工艺和重建：一种描边粗细、一种端点样式、视觉修正为数字、简短的规则	×1

最高总分不自动成为选择。如果一个版本通过丢弃承载品牌含义的元素而赢得尺寸测试，它并未通过。说明这一点，并将其列为亚军。

断裂和间隙。 将断裂放在不改变所读字母或形状的地方。每处新断裂都要通过字母测试和意外解读测试。

工具

scripts/blueprint_kit.py（需要 shapely、numpy 和 pillow）涵盖：

基本元素：圆头弧线、线条和圆点；
放置：质心居中与安全圆适配；
SVG 输出：主版本和图标裁剪，以及24像素 Simple Icons 导出；
测量：面积覆盖率栅格化器以及任意尺寸下的形状和孔洞计数。

运行 python3 scripts/blueprint_kit.py --demo out/ 查看演示标志的效果。

蓝图图表规范

标志以25%到30%不透明度置于构建线之下。
一种强调色用于构建线。网格用约18%不透明度的柔和色调。
绘制：
- 裁剪圆（实线）和安全圆（虚线）；
- 每个基本圆的实线中心线和虚线描边边缘；
- 你使用的圆规射线；
- 关键三角形或比例，带有数字标签。
标记比例和规则，而非每个维度。

动作解说（可选）

逐步动画：

画框（裁剪圆和安全圆）
网格
基本元素
角度
规则三角形
元素
移除辅助线
裁剪测试
缩放测试

每个步骤构建为带有部分几何的 SVG：弧线按角度增长，线条按长度增长。避免使用虚线技巧（某些渲染器忽略）。组装 GIF，每个步骤最后一帧持续显示。

反模式

事后添加的黄金比例圆圈。
对角线描边按水平宽度裁剪，使其看起来更细。
尖角与圆头端帽混用。
无规则依据的不均匀间距。
质量以边界框居中，而裁剪中心在其他位置。
元素意外触及裁剪边缘。
未记录的视觉调整。
由圆形和直线组成的标志却有数百个锚点。
一个环几乎但未完全与裁剪中心共享。
决策者看不到的评分版本。
同一想法的三个版本进入短名单。
覆盖迭代，或直接编辑原始主版本。
在512像素下判断可缩放性。
声称你未运行的测试，或你无法提供的商标许可。建议进行专业搜索。

几何标志蓝图