v1 为 Codex 精细化的草稿 1;v2–v4 为 SVG 程序化模拟印泥质感的尝试。 调研结论:印泥质感本质上是位图,改用位图生成后矢量化。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
5.1 KiB
5.1 KiB
标博士 Logo 第二阶段设计说明(v2)
接着
BRIEF.md和第一阶段的成果继续。用户审阅第一阶段后提出三点意见(见第 2 节),并确认了两项决定(见第 1 节)。 这一阶段先出方案对比页让用户选,选定后再更新正式资产。
1. 已确认的决定(直接执行)
- 16px 图标用方案 B(加粗简化的「标」字):
png/favicon-16.png改为方案 B,logo-spec.md里删掉「待确认」的说法。 - 英文统一用拼音 BIAOBOSHI,不再出现 Bid Doctor。
2. 用户的三点意见
- 要有真实印章的质感:字形和边缘都要像真的盖出来的印章,有印泥不均、边缘不规则的感觉。
- 右下角的对勾破坏了整体平衡:考虑去掉,或者换一种表达方式。
- 「标博士」和 BIAOBOSHI 的字体太平淡:换成开源可商用的、更有性格的字体。
3. 设计方向
3.1 印章:印篆化的「标」+ 印泥质感
- 字形:不要直接用字体。参考汉印「摹印篆 / 缪篆」的造字方法,用方折笔画重新构造「标」字:笔画横平竖直、转折方硬,字形撑满印面,笔画之间的空白均匀(「印篆化」)。保持现代人一眼能认出是「标」字,不要用难认的小篆。这是我们自己画的字形,没有字体授权问题。
- 白文印:保持红底白字(白文),印面四周留红边。内框是否保留由方案决定(建议去掉,或者只做成残缺的边线)。
- 印泥质感(用矢量路径实现,不用 SVG 滤镜):
- 外轮廓:轻微不规则,像印章边缘磨损,四个角不完全一样,不要做成「锯齿」或「毛刺」;
- 印面:少量随机的小白点、细白丝(印泥没覆盖到的地方),集中在边缘和局部,大部分印面保持饱满;
- 白色笔画边缘:轻微的不规则,和印面质感一致;
- 用固定随机种子生成,保证每次导出结果一致。
- 小尺寸:≥ 64px 用质感版;32px 用简化版(去掉细碎斑点、保留轮廓的轻微不规则);16px 用方案 B。
- 质感版和干净版都要有:干净版用于需要极简的场合(例如界面中的小图标、单色印刷)。
3.2 对勾的三种处理(都要做,放进对比页)
| 方案 | 做法 |
|---|---|
| S1 纯印章 | 去掉对勾。最稳、最平衡 |
| S2 字内回锋 | 「示」字最后一笔(右下的点)写成带回锋的短勾,核对的意思融进字形里,印章外轮廓保持方正 |
| S3 印框缺口 | 印章右下角的红边上留一个小小的勾形缺口(像磨损),含蓄地表达「核对」 |
我的倾向是 S1 或 S2;请在对比页上标注你认为最好的一个和理由。无论哪个方案,都不能让标志读起来像「审核通过章」。
3.3 字标字体(三组对比)
| 组合 | 中文 | 拼音 | 特点 |
|---|---|---|---|
| W1(推荐) | 思源宋体 Noto Serif SC,Black 或 Heavy | Cinzel(碑刻风格大写字母),SemiBold 左右 | 和 A「校样」方向的宋体标题统一;印章 + 宋体的组合庄重,有「文书 / 出版」气质 |
| W2 | 站酷小薇 LOGO 体 ZCOOL XiaoWei | Marcellus | 专为 logo 设计的字体,个性更强 |
| W3 | 霞鹜文楷 LXGW WenKai Medium | Cormorant SC SemiBold | 楷书,书卷气、更柔和 |
要求:
- 字标转成路径;字距可以手动微调,但不要改字形结构。
- 拼音 BIAOBOSHI 的宽度和中文字标对齐,字距适当拉开。
- 字标颜色保持藏青 #1C2554(可以微调),印章红保持 #D2282E 附近。
字体文件都在 .work/fonts/,许可证(OFL)也在那里。最终选定的字体,要把许可证复制到 licenses/。
4. 交付物
4.1 这一阶段(方案对比)
docs/design/logo/
v2/
options.html # 对比页(重点)
seal-S1.svg seal-S2.svg seal-S3.svg # 质感版印章
seal-S1-clean.svg ... # 对应的干净版
wordmark-W1.svg wordmark-W2.svg wordmark-W3.svg
combo-*.svg # 你认为值得看的若干组合(至少:S1+W1、S2+W1、S1+W2、S2+W3)
options.html 内容:
- 三种印章方案并排,每个都展示 512px、128px、64px、32px 四个尺寸,质感版和干净版对照;
- 三组字标并排;
- 组合效果:横版,白底和 #1D2733 深底各一份;
- 每个方案下写一两句说明,并标出你的推荐和理由。
4.2 不要动的东西
- 第一阶段的正式资产(
svg/、png/、favicon.svg、logo-sheet.html)这一阶段先不替换,等用户选定后再更新。唯一的例外是第 1 节的 favicon-16 改为方案 B,以及logo-spec.md里相应的说明。 - 只改
docs/design/logo/里的文件,不要提交 git。
5. 完成标准
- 对比页在浏览器里直接打开就能看到全部方案。
- 每个方案都用 rsvg-convert 渲染检查过,尤其是 64px 和 32px 的质感是否还清楚、是否变脏。
- 最后用中文简要说明:每个方案的特点、你的推荐,以及还需要用户决定什么。