f4ef7af542
v1 为 Codex 精细化的草稿 1；v2–v4 为 SVG 程序化模拟印泥质感的尝试。 调研结论：印泥质感本质上是位图，改用位图生成后矢量化。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
86 lines
6.1 KiB
Markdown
86 lines
6.1 KiB
Markdown
# 标博士 Logo 精细化设计说明
|
||
|
||
> 给执行设计的代理（Codex）。目标：把用户的草稿 1 精细化成**可以直接落地的产品 logo 资产**。
|
||
> 先读：`docs/design/brand-strategy.md`（品牌策略）、`docs/design/brand-directions.html` 中的「A 校样」方向（已选定的视觉方向）、`AGENTS.md` 的「产品红线」。
|
||
|
||
## 1. 基础草稿
|
||
|
||
- **采用**：`drafts/draft-1-seal-check.png`。红色方形印章，里面是白色「标」字，内框断开；一个对勾从右下角穿出印章边框；右边是藏青色「标博士」字标和拼音「BIAOBOSHI」。
|
||
- **不采用**：`drafts/draft-2-mortarboard.png`（学士帽）。学士帽是教育类品牌的常见套路；3D 阴影和细流苏在小尺寸下没法用；也和「投前审校员」的定位不符。
|
||
|
||
## 2. 要保留的东西（用户喜欢的部分）
|
||
|
||
1. 方形印章 + 白色「标」字 + 断开的内框：取自投标人每天都在做的「盖章」。
|
||
2. 对勾从印章右下角**穿出边框**：表示「逐项核对」，也让图形有动势。
|
||
3. 红色印章 + 藏青字标的配色关系。
|
||
4. 字标：粗黑体「标博士」+ 拉宽字距的拼音「BIAOBOSHI」。
|
||
|
||
## 3. 要改进的问题
|
||
|
||
| 问题 | 要求 |
|
||
|---|---|
|
||
| 粗糙的印泥纹理、手绘边缘 | 主稿用**干净的几何矢量**（直边、统一圆角、统一笔画宽度）。可以另做一个「印泥纹理」版，只用于宣传物料 |
|
||
| 小尺寸下糊掉 | 另出一版**小尺寸专用图形**（≤ 32px）：去掉断开的内框，加粗笔画，对勾和「标」字保持清晰。在 16px 和 32px 下按像素网格检查 |
|
||
| 「标」字和字标用的是普通字体 | 以 **思源黑体 / Noto Sans SC（SIL OFL 1.1，可商用）** 的 Heavy 或 Black 字重为基础，**转成路径并做调整**（字重、重心、笔画末端），让印章里的「标」和字标里的「标」属于同一套造型。**不能**用方正、汉仪、微软雅黑等需要商业授权的字体。拼音用开源字体（如 Montserrat、Inter、Barlow，均为 OFL），也要转成路径 |
|
||
| 对勾压住「标」字的笔画 | 调整对勾和「示」部右下笔画的关系：要么让对勾干净地从笔画外侧穿出，要么让它和笔画共用一段，不能看起来像重叠出错 |
|
||
| 「印章 + 对勾」可能被理解成「审核通过章」 | 图形可以保留，但使用规范里要写明：**不能把标志当作「通过 / 合格 / 已审核」章盖在检查报告、投标文件或任何结论上**，也不能和「通过」「合格」字样组合。这是产品红线（不承诺结果） |
|
||
|
||
## 4. 颜色
|
||
|
||
| 用途 | 要求 |
|
||
|---|---|
|
||
| 印章红 | 参考草稿，取一个纯正的朱红 / 印泥红，例如 #D2282E 附近。**只用在 logo 上** |
|
||
| 字标藏青 | 参考草稿的藏青，向 A 方向的「墨」#1D2733 靠拢，取一个偏蓝的深藏青，例如 #1C2554 附近；在白底上的对比度要 ≥ 7:1 |
|
||
| 界面「致命」红 | A 方向里的 #C4122F，用于界面中的致命问题。和印章红要能区分（印章红偏橙，致命红偏洋红），请在规范里写出两者的区别和使用边界 |
|
||
| 反白 | 深色底上：印章保持红色，字标改为白色；另出单色版本（全黑、全白） |
|
||
|
||
给出每个颜色的 HEX、RGB，以及印刷用的 CMYK 近似值。
|
||
|
||
## 5. 交付物（全部放在 `docs/design/logo/` 下）
|
||
|
||
```
|
||
docs/design/logo/
|
||
BRIEF.md # 本说明（不要改）
|
||
drafts/ # 原始草稿（不要改）
|
||
svg/
|
||
mark.svg # 印章图形主稿（干净矢量）
|
||
mark-small.svg # 小尺寸专用图形（≤32px）
|
||
mark-textured.svg # 印泥纹理版（宣传用，可选）
|
||
logo-horizontal.svg # 横版：印章 + 标博士 + BIAOBOSHI
|
||
logo-vertical.svg # 竖版：印章在上，字标在下
|
||
wordmark.svg # 只有字标
|
||
logo-horizontal-reverse.svg # 深色底反白版
|
||
logo-mono-black.svg / logo-mono-white.svg
|
||
png/
|
||
favicon-16.png favicon-32.png apple-touch-icon-180.png icon-192.png icon-512.png
|
||
logo-horizontal@2x.png
|
||
favicon.svg # 网页图标（用 mark-small 的造型）
|
||
logo-sheet.html # 预览页：所有版本 × 浅色 / 深色背景、最小尺寸、安全区示意、16/32/64/128px 实际效果、错误用法
|
||
logo-spec.md # 使用规范：构成网格、安全区、最小尺寸、颜色值、字体与授权、正确和错误用法（含第 3 节的红线条款）
|
||
```
|
||
|
||
要求：
|
||
|
||
- SVG 里**不能有 `<text>`**，所有文字都转成路径；`viewBox` 要紧贴图形；不能有内嵌的位图。
|
||
- 在 `logo-spec.md` 里写明所用字体的名称、版本、许可证和下载来源。
|
||
- 工具和临时文件放在 `docs/design/logo/.work/`（已加入 `.gitignore`），例如 Python 虚拟环境、下载的字体文件。不要全局安装软件包。
|
||
- 只改 `docs/design/logo/` 里的文件；不要修改仓库其他文件，**不要提交 git**。
|
||
|
||
## 6. 已经准备好的工具（不需要联网）
|
||
|
||
| 工具 | 位置 |
|
||
|---|---|
|
||
| 思源黑体可变字体（Noto Sans SC，字重 100–900，OFL） | `.work/fonts/NotoSansSC[wght].ttf`，许可证见 `.work/fonts/OFL-NotoSansSC.txt` |
|
||
| Montserrat 可变字体（OFL，用于拼音） | `.work/fonts/Montserrat[wght].ttf`，许可证见 `.work/fonts/OFL-Montserrat.txt` |
|
||
| fontTools 4.68（用于取字形轮廓、生成可变字体实例） | `.work/venv/bin/python`（例如 `fontTools.varLib.instancer` 生成 900 字重，`fontTools.pens.svgPathPen` 导出路径） |
|
||
| SVG 转 PNG | `rsvg-convert`、`resvg`（Homebrew 已安装），也可以用 `magick` |
|
||
|
||
拼音字体可以换成其他 OFL 字体，但需要自己下载，并在规范里写明来源。
|
||
|
||
## 7. 完成标准
|
||
|
||
1. 横版 logo 在 120px 宽时清晰可读；印章图形在 16px 下仍然能认出「标」字和对勾。
|
||
2. 和草稿 1 对比，用户能一眼认出是同一个 logo，但更精致、更规整。
|
||
3. `logo-sheet.html` 用浏览器直接打开就能看到全部版本。
|
||
4. 最后用几句话总结：做了哪些造型调整、为什么这样调、还有哪些需要用户决定的地方。
|