MBA Logo 设计规范
站标 = 五镜头雷达 glyph + MBA. 字标。图形直接取自 MBA 报告的核心视觉——五镜头雷达图:一个正在被打分的品牌,一次正在成形的审计。本页是唯一权威规范;Markdown 版见 docs/17-logo-design.md。
01 · 设计理念
产品即符号。MBA 的方法论是"固定 5 镜头 × 7 维度,N 评委独立打分"——每份报告的第一张图都是五镜头雷达。logo 不另造抽象图形,直接把这张雷达图提炼成标志:懂产品的人一眼认出出处,不懂的人也能读出"测量"与"评分"。
- 外层五边形:评分框架——5 个镜头,固定、可比、不漂移;
- 内部数据形:一次审计——五个镜头上各有高低,真实的品牌从来不是满分正多边形;
- 峰值评分点:最高分镜头上的强调点——每个品牌都有它最锋利的一面;
- MBA. 字标:延续站点原有的编辑部刊头风格,句点收尾 = "审计有结论"。
Anti-fabrication 备注:数据形的五个半径是纯造型比例(见 §03),不是任何真实品牌的评分,禁止把它当成示例数据引用。
02 · 构成
- 评分框架 — 正五边形外框,墨色 2px 描边,圆角折点(呼应报告图表);
- 网格 — 50% 内环 + 五条辐条,墨色 12% 透明度,提供"图表感"但不抢主体;
- 数据形 — 烧橙 2.5px 描边 + 自上而下 30%→6% 渐隐填充;
- 评分点 — 顶点(镜头 1)上 r3.2 圆点,纸色描边把它从线里"抬"出来;
- 字标 — MBA + 烧橙句点,extrabold,字距 +0.02em,与 glyph 间距 10px、垂直居中。
03 · 几何
- viewBox
0 0 64 64,中心(32, 33),外接圆半径R = 26; - 顶点朝上,五个顶点位于
−90° / −18° / 54° / 126° / 198°; - 内环网格半径
0.5 R; - 数据形五个半径比例(自顶点顺时针):
0.94 · 0.66 · 0.78 · 0.55 · 0.72—— 峰值在顶点,整体重心略偏右下,形成不对称的张力; - 评分点圆心 = 数据形顶点
(32, 8.6),半径3.2,纸色描边1.5。
04 · 色彩
| Token | 值 | 用途 | 对比度(vs 底色) |
|---|---|---|---|
--ink | #111111 | 外框、字标(纸底) | ≈ 16 : 1 ✓ |
--accent | #c1440e | 数据形、评分点、句点(纸底) | ≈ 4.8 : 1 ✓(图形/大字号) |
--paper | #faf8f3 | 底色、评分点描边 | — |
--accent-dark | #d95f27 | 深色底专用强调色 | ≈ 5.0 : 1 vs #111 ✓ |
渐变填充:#c1440e 自上而下 stop-opacity .30 → .06。深色底版本外框与字标改用纸色,强调色换 --accent-dark(#c1440e 在墨底上只有 ≈3.4:1,不达标)。
05 · 动效
页面加载时,logo 演一遍"打分":数据形沿边描线画出(pathLength=100 + stroke-dashoffset 100→0),随后评分点弹出。
| 元素 | 动画 | 时长 / 缓动 / 延迟 |
|---|---|---|
| 数据形 | 描线 + 填充渐显 | 1.1s · cubic-bezier(.6,0,.25,1) · 0.2s |
| 评分点 | scale 0→1 弹出 | 0.4s · cubic-bezier(.2,1.6,.4,1) · 1.2s |
| 评分点(hover) | scale 1→1.35 | 0.25s · 回弹曲线 |
- 整套动画包在
@media (prefers-reduced-motion: no-preference)内——用户关动效时直接呈现成品态,无信息损失; - 只播一次,不循环;动效是"开场",不是"装饰噪声"。
06 · 变体
07 · 使用规范
- 最小尺寸:glyph ≥ 16px(favicon 版);完整 lockup 高度 ≥ 20px;
- 留白:四周 ≥ 0.25 × glyph 宽度,不与其它元素贴边;
- 单色场景(印章 / 传真 / 单色印刷):全 ink 版——数据形描边改 #111、去填充、评分点实心 #111。
禁止:
- 🚫 拉伸、压扁、旋转 glyph,或改变数据形的五个半径比例;
- 🚫 换配色(纸底只用 ink + accent;深色底只用纸色 + accent-dark);
- 🚫 把 glyph 当真实雷达图使用,或给数据形标注分数——它不是任何品牌的评分;
- 🚫 加投影、发光、3D、描边加粗等效果;
- 🚫 在低对比底色(中灰、烧橙同族色)上使用彩色版。
08 · 嵌入
logo 是内联 SVG,零外部资源、零请求,SVG 内禁用 CSS 变量(favicon 场景无 CSS 上下文),颜色写死。masthead 嵌入(动效类名 + 关键帧见 site/index.html 的 .mark-glyph 段):
<div class="mark" role="img" aria-label="MBA — Metric Brand Auditor">
<svg class="mark-glyph" viewBox="0 0 64 64" width="36" height="36"
aria-hidden="true" focusable="false">
<defs><linearGradient id="mbaGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#c1440e" stop-opacity=".30"/>
<stop offset="1" stop-color="#c1440e" stop-opacity=".06"/>
</linearGradient></defs>
<polygon points="32,7 56.7,25 47.3,54 16.7,54 7.3,25"
fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>
<g fill="none" stroke="#111" opacity=".12" stroke-width="1">
<polygon points="32,20 44.4,29 39.6,43.5 24.4,43.5 19.6,29" stroke-linejoin="round"/>
<path d="M32 33V7M32 33 56.7 25M32 33 47.3 54M32 33 16.7 54M32 33 7.3 25"/>
</g>
<polygon class="radar-data" pathLength="100"
points="32,8.6 48.3,27.7 43.9,49.4 23.6,44.6 14.2,27.2"
fill="url(#mbaGrad)" stroke="#c1440e" stroke-width="2.5" stroke-linejoin="round"/>
<circle class="radar-dot" cx="32" cy="8.6" r="3.2"
fill="#c1440e" stroke="#faf8f3" stroke-width="1.5"/>
</svg>
<span>MBA<span class="dot">.</span></span>
</div>当前落位:site/index.html(masthead + favicon)与本页。其余站内页面沿用文字版 mark,后续按此规范逐页替换。无障碍:容器 role="img" + aria-label,SVG 本体 aria-hidden,动效尊重 prefers-reduced-motion。