图谱审美

我们的图谱规范

草稿 · 还没定这一版只依据补充收集的图写成（Will 精选目前 0 张）。Will 精选的图陆续到了以后，规范以 Will 精选为准重写，补充收集的图只做佐证。

从画廊里 150 张图谱拆出来的 18 条规矩，每条都能量、能查。每条下面挂的是做得最好的原图，点开看拆解。

一、整体：一张图就是一张海报
01

打开第一屏就看到图

好图谱的第一眼就是整张图；读者是来看「谁在哪一格」的，不是来看筛选和统计卡的。

  • 桌面 1440×900 打开，首屏至少露出 60% 的分组和 logo
  • 标题一行 + 副标题最多一行；统计数字压成标题下一行小字，不做大卡片
  • 说明、口径、方法挪到 /about
The Hemingway ReportMenloa16z
02

海报比例：16:9，最多 4:3

图谱会被截图、转发、放进 PPT。16:9 的图在哪都能整张看清；5:1 的长条和 1:3 的长卷一缩就糊。

  • 导出画布 1920×1080（或 2560×1440 两倍图）
  • 超过 150 家或 8 组，就拆成「总图 + 每组一张子图」，不要硬塞
  • 发小红书另出竖版：3:4（宽 1242），「封面总图 + 一层一页、每页同一版式只换色条」——小红书爆款图谱库实测 315 篇爆款首图 80% 是 3:4（xhs-hot-maps.vercel.app/why.html）
MenloCB InsightsMenlo
03

一根主轴，3 秒说得出怎么切

最好的图都有一个读的方向：从下到上的分层栈、从左到右的流程、2×2 象限、人体部位、成熟度光谱。有主轴，分组顺序就有意义。

  • 先定版式再填公司：分层栈 / 流程链路 / 象限 / 光谱 / 人体或实物图示 / 网格
  • 组的排列顺序要跟主轴走（底层在下、上游在左、早期在左）
  • 主轴本身画出来：箭头、坐标轴名或层号（L0–L5）
KeyrockSequoiaInsightMenloMenlo
二、分组
04

一级 4–8 组，每组 3–12 个

人一眼能比较的块不超过 8 个；一组只有 1–2 家像漏了，30 家像没分。

  • 一级分组 4–8 个，二级分组每组 3–12 个 logo
  • 最大组 ÷ 最小组 ≤ 4；不足 3 家的并到邻组，超过 15 家的再拆一层
  • 组的面积跟公司数成正比，不要所有框一样大留一半空白
The Hemingway ReportSynapticThe XX Factor
05

分组框只用一种画法

好图的框几乎都很轻：1px 细线框或浅底色块，二选一。框的层级靠留白和字重表达，不靠叠边框。

  • 一级组：浅底色块（或 1px 线框）；二级组：只用组标题 + 留白，不再套框
  • 不同时用实线框 + 虚线框 + 整条色块标题条
  • 组标题放框内左上角，12–14px 粗体，不做满宽色条
MenloMenloSpeedinvestMenlo
06

留白有尺寸

留白是图谱的骨架；挤在一起的 logo 分不出属于哪组。

  • 组与组之间的间距 ≥ 1 个 logo 高度
  • 框内边距 ≥ 0.5 个 logo 高度
  • logo 之间横向间距 ≥ 0.6 个 logo 高度
Menloa16za16zMadrona
三、logo
07

用横版字标，不用方形图标

海外好图谱几乎都用公司的横版字标（wordmark），logo 本身就带名字；方形 app 图标在海报上只是一排彩色方块，认不出谁是谁。

  • 优先用横版字标（官网 header 里的 SVG/PNG）
  • 只有方形图标时用「图标 + 公司名」两件套
  • 不放字母占位块；找不到 logo 的写公司名纯文字，同字号
The Hemingway Reporta16zCB Insights
08

统一视觉高度，不出格

logo 有宽有窄，统一「框」会让宽 logo 变小、方 logo 变大；好图统一的是视觉高度。

  • 1920 宽画布上字标高 18–24px、最宽 120px；方形图标比字标矮约 20%
  • logo 在格子里水平垂直居中，任何 logo 不超出格子和分组框
  • 透明底；深色 logo 放深色底时换反白版
CB Insightsa16zThe XX Factor
09

一家只出现一次

同一个 Meta、Apple、Google logo 在一张图上出现三次，读者会以为是三家公司。

  • 一家公司只放一次，放在它最主要的那格
  • 大公司的产品用「产品名」字标（如 Ray-Ban Meta），不重复母公司 logo
  • 确实跨多格的，第二处起用灰色小字「另见 X 组」
MenloMenlo
10

logo 颜色：保留原色，有含义才变灰

原色 logo 最好认；灰度只在表达「旧势力 / 非重点」这类含义时用，而且要写图例。

  • 默认保留品牌原色
  • 要区分时：重点公司彩色、其余灰度，并在图例写明灰色代表什么
  • 不要给 logo 加彩色描边、阴影或卡片底
SapphireInsighta16za16z
四、颜色和字
11

颜色 ≤ 3 种，每种都有含义

好图的颜色大多就是一个品牌强调色 + 中性灰；颜色多了就和 logo 抢眼。

  • 一个强调色（标题、主轴、一级组标题），最多再加两个分类色
  • 每个颜色必须能用一句话说出含义，并写进图例
  • 分组底色用强调色 6–10% 透明度的浅色，不用饱和色填满标题条
MenloInsightMenloMenlo
12

字号最多 4 级，最小 10px

字号层级越少越整齐。好图通常就是：大标题、一级组名、二级组名、脚注。

  • 1920 画布：标题 36–44 / 一级组 18–20 / 二级组 12–14 / 脚注 10–11
  • 任何字不小于 10px（导出图上）
  • 一种字体：中文 Noto Sans SC（思源黑体），组名不用中文衬线体
SpeedinvestMenloa16z
13

浅色为主，深色另出一版

浅色图谱在文章、PPT、打印里都清楚；深色适合封面和社媒，但很多 logo 在深色底上会消失。

  • 主图浅色：白或暖白（#F7F6F2）底
  • 深色版底色用 #0F1115 一类深灰，不用纯黑；logo 放白色小牌或用反白版
  • 两版用同一套布局，只换色
The XX Factora16zIVP
五、标注
14

署名、日期、版本号、来源一行

被转发的图谱离开了网页，只剩图本身；没有署名和日期的图很快就被当成别人的、或被当成最新的。

  • 底边一行：作者 logo · 「版本 1.0 · 2026-11」 · 数据来源 · 「不完全收录，排名不分先后」
  • 右上角或左下角放作者标识，别放在图中间
  • 改版就升版本号
Criteria Venture TechInsightCriteria Venture TechCB Insights
15

每个记号都有图例，图例跟着图走

色边、角标、灰度都是记号；没有图例的记号等于噪音。导出的海报也要带图例。

  • 记号不超过 3 种（例：新公司、被收购、已关闭）
  • 图例放在标题下或底边，海报导出也要带上
  • 能不用记号就不用
a16zSapphireSequoiaMenlo
16

海报上不放数字

估值、融资额放进海报，格子就从 logo 变成表格，密度翻倍还难对齐。好图把数字放在单独的图或表里。

  • 海报只放 logo（和必要的名字）
  • 数字放详情、表格视图或单独一张「估值 × 收入」图
  • 真要放，就全部放、同一单位、同一位置
a16zMenlo
六、网页上怎么放
17

筛选收在一边，不推开图

Will 定的规矩：筛选默认展开，右上角有「收起筛选」。但展开的筛选不能把图推到第一屏外。

  • 筛选放左侧窄栏或一行折叠条，图谱占主区域
  • 右上角「收起筛选」，记住用户的选择
  • 筛选结果写进网址，可以直接分享
18

手机上能看整张图

很多人在手机上点开转发的链接。

  • 手机打开先看整张海报的缩小图，可以双指放大
  • 或者改成单列：每组一张卡片，组内 logo 横排
  • 任何宽度都不出现横向滚动条

对照体检：我们已上线的图谱

2026-11-02 实测：每张图谱用 1440×900 打开首页截图，再打开海报视图（?d=logo）量画布比例、分组大小、logo 尺寸和占位块。只写出来，不改各图谱站；改不改、怎么排期由各图谱子任务定。

所有图谱共有的问题（同一套模板）
逐张
图谱离规范最大的差距怎么改对应规范
Agent Infraagent-infra-map.vercel.app 415 家、38 个二级组塞进一张图，海报 1832×5293（约 1:2.9 的长卷），最大组 30 家、最小 2 家。
· 拆成总图 + 子图：总图只放 6 个大层、每层前 8 家字标；每层一张 16:9 子图
· 2–3 家的小组并入邻组，30 家的组再拆一层
· 「新分类」字样从组标题里拿掉，改成图例里的一个记号
2, 4, 15
AI 原生安全ai-security-map.vercel.app 一级组用 7 个英文名（Authentication、Privacy…）、二级组用中文长句，两套语言混排；海报 2.2:1 偏扁。
· 一级组改中文主名、英文小字放后面
· 二级组名压到 8 字以内（「AI 写的代码的安全扫描」→「AI 代码扫描」）
· 画布按 16:9 重排：7 个一级组排成 4+3 两行
3, 12, 2
AI 原生支付ai-pay-map.vercel.app 六层分层栈方向是对的（L5 应用在上、L0 结算在下），但每层是一整行，logo 只占左边一小段，右边 40–70% 空着；每层还多一行 Keyrock 原文小字，黄边、绿边两种记号没有图例。
· 照 Keyrock 原图：层名放左边一列（L5 应用 … L0 结算），logo 紧跟在右边，每层高度按家数自适应
· Keyrock 原文那一行挪到 /about 或鼠标悬停
· 黄边、绿边写进图例；有一个空白 logo 要补
6, 15, 8
AI 心理健康软件ai-mental-health-map.vercel.app 海报 1832×487，约 3.8:1 的长条，一缩就看不清；19 个二级组里有 3 个只有 2–3 家。
· PitchBook 四块 + 框架外两块排成 3×2，画布回到 16:9
· 「督导与质量评估」「AI 接诊与分诊」等 2 家的组并入相邻组
· 组标题去掉满宽紫条，改成框内左上角粗体字
2, 4, 5
AI 数字人digital-human-map.vercel.app 海报 1832×470，约 3.9:1 长条；9 个二级组从 2 家到 20 家，相差 10 倍。
· 四个大框排成 2×2，16:9
· 「个人分身与克隆」2 家并入「有形象的陪伴」
· 「营销与 UGC 广告、带货直播」20 家拆成「广告」「直播带货」两组
2, 4
AI 情感陪伴聊天ai-companion-map.vercel.app 组大小极不均：「恋爱与擦边 / 成人向伴侣」30 家、「角色平台」27 家，而「语音与多模态陪伴」「生活伙伴」各只有 2 家。
· 30 家和 27 家的两组各拆成 2 组（按产品形态或按市场）
· 2 家的组合并成「新形态」一组
· What’s out there 等英文框名换成中文
4, 12
AI 原生 K12 教育ai-k12-edu-map.vercel.app 215 家里有 14 个字母占位块，海报上像缺了牙；「学伴、升学与身心」29 家一组挤成一大片。
· 补齐 14 家横版字标，补不到就写公司名纯文字
· 29 家的组拆成「学伴」「升学」「身心」
· 「原图之外」「大厂与老牌」两个框移到右侧窄栏，主区只放 Edtech Insiders 两大块
7, 4
AI 公司收入ai-revenue-map.vercel.app 没有海报，是一面带数字的卡片墙（$65B 年化、来源、标签），纵向约 3,400px；这是榜单，不是一张能转发的图。
· 加一张 16:9「收入阶梯」海报：横向 7 个档位，每档只放字标
· 数字和来源留在卡片墙 / 表格视图里
· 档位颜色只用一个色的深浅表示大小
2, 16, 11
AI 硬件aiwatch-hardware-rankings.vercel.app/map 139 家里有 26 个字母占位块（全站最多）；Meta、Apple、Google 的同一个图标在多个组重复出现，看起来像好几家公司。
· 补 26 家字标
· 大厂产品用产品字标（Ray-Ban Meta、AirPods），不重复母公司图标
· 跨组的第二处改成灰字「另见」
7, 9
北美女性可穿戴硬件womens-wearables-map.vercel.app 海报 1832×365，约 5:1，是所有图谱里最扁的长条；49 家分了 10 组，平均每组不到 5 家，组太碎。
· 改成「女性一生」横向光谱：经期 → 备孕 → 孕产 → 更年期，每段下面放设备（参考 Femovate 半圆、FutureFem 人体图）
· 10 组并成 5–6 组
· 画布 16:9，logo 可以放大到 32px 以上
3, 2, 4
AI 眼镜ai-glasses-map.vercel.app Counterpoint 的分法本身是一条从轻到重的光谱（音频 → 拍摄 → 单目 → 双目全彩 → 观影），图上画成并排方框，没有箭头和方向。
· 四个形态框之间加一条从左到右的箭头，写「越来越重、越来越贵」
· 右边四个垂直场景改成光谱下方的一行标签
· 9 组里 2 家的组并入相邻组
3, 4