视觉识别的最小系统：一色、一字、一形状

识别不是设计得多，而是每次都一样。

一、改了四次颜色，还是没人记得

以下情境为教学假设，人物、引语和数字不代表经核实的真实案例。

阮青做一款订阅管理工具，一年里改了四次界面。第一次用蓝色，觉得太像银行；第二次换绿色，觉得太像记账软件；第三次用紫色，自己很喜欢；第四次跟着某个设计趋势换成了深色渐变。

每次改完，他都觉得「这次终于对了」。但用户反馈里从没出现过「你们的紫色很好看」这类话，倒是有人说「上次那个界面好像不是这样」。

问题不在于审美，而在于他每次都在重新发明识别系统。没有固定的主色、字族和形状，视觉就只能是当期心情的快照。

识别的本质是重复，不是惊艳。 用户一年只见你的产品几次，能记住的只有那些每次都出现的东西：一个颜色、一种圆角、一个图标形状。

识别可以测，方法很朴素：把产品截图混进五张同类产品截图里，让用过的人找出你的那张。找得出，说明识别成立；找不出，说明界面换成了任何一个竞品的样子。这个测试不需要设计能力，只需要几分钟。

改版前先问一句：这次要改的是识别，还是只是局部体验。 若只是某个流程不顺手，改流程；把颜色和形状一起换掉，等于把此前积累的识别清零。

二、最小系统只有四件东西

一个人的产品不需要品牌手册，四件东西足够撑起全部界面与物料。

四件东西的数量限制不是审美偏好，而是维护成本。每多一个颜色，就要多定义一次深色模式、多检查一次对比度、多同步一次设计稿与代码。

主色只能有一个。 第二个「辅助色」在一个人维护的产品里通常是灾难：它会被用在错误的地方，然后你需要第三个颜色来区分。语义色（成功、警告、错误）不算主色，它们是状态色，不参与品牌识别。

中性色阶比主色更重要。 界面上 80% 的面积是背景、文字和分隔线。中性色阶没层次，主色再准也显得脏。

形状母题要能被描述成一句话。 「所有按钮 8px 圆角，卡片 12px，图标外框统一圆角方形」比「现代简约风格」有用得多。

四件东西要同时定下来。 只定主色不定形状，界面会变成一个彩色但没有骨架的页面；只定形状不定字族，中文与西文混排时会立刻露馅。四件一起定，才是一次完整的系统决定。

字族优先考虑可用字符集与授权。 中英文都要覆盖时，选一套自带中文字重、可商用的字族，比中西文各配一套更省心。配两套的代价不是授权费，而是行高、字重与基线永远对不齐。

三、色板怎么搭，对比度怎么算

从主色出发，生成一套中性色阶，再补三个语义色，色板就完成了。

主色       1 个   品牌识别，只用于强调
中性色     5–7 个 从 #FAFAFA 到 #111111，间距均匀
语义色     3 个   成功、警告、错误（可用主色的邻近色相）
总计       ≤ 11 个色值

中性色阶可以用同一个色相加不同明度生成，也可以直接用中性灰。一个人维护时，建议后者：少一个变量，少一次调色。

对比度不是审美判断，是可以计算的。

相对亮度 L = 0.2126R + 0.7152G + 0.0722B   （各通道先做 sRGB 反伽马）
对比度 = (L亮 + 0.05) ÷ (L暗 + 0.05)

正文文字           ≥ 4.5:1
大字号（≥24px 或 ≥19px 粗体） ≥ 3:1
图标、边框、焦点环  ≥ 3:1

举一个具体例子：#767676 的文字放在白色背景上，对比度约为 4.54:1，刚过 AA 线。再浅一档的 #8A8A8A 就只有约 3.5:1，正文不合格。

先算对比度，再挑颜色。 顺序反过来，你会反复找到一个「看起来还行但其实不合格」的颜色，然后在验收时被迫返工。

语义色不要自己发明。 成功、警告、错误三类状态色在大多数设计系统里已有成熟取值，直接采用能省掉一轮色觉障碍测试。需要调整的是明度，不是色相。

半透明色要克制。 用透明度做层次看起来方便，但它会让同一个颜色在不同背景上呈现不同对比度，验收时无法用一个数值判定。需要层次就用中性色阶。

深色模式不是把颜色反过来。 深色背景上的正文对比度要求相同，但饱和色会显得更亮、更刺眼。可行做法是给主色准备一个深色模式下的降饱和版本，而不是直接沿用。

不要用颜色单独承载信息。 成功与失败若只靠红绿区分，色觉障碍用户无法判断。加图标或文字，颜色只做强化。

色值要写进代码，不要只存在设计稿里。 设计稿里的颜色和代码里的颜色一旦分叉，第二次改版就会以代码为准，视觉识别随之瓦解。

四、logo 的三种形态

一个人做产品，logo 最容易过度投入。实际需要的只有三种形态，加一套使用规则。

安全边距比 logo 本身更重要。 图形贴边会导致不同平台裁切后变形。方形图标四周留 12% 空白，是最低要求。

单色版本是检验 logo 是否成立的唯一标准。 去掉颜色、缩小到 16px 仍然能认出来，才算图形本身有识别度；否则它只是一个彩色贴纸。

图标不是 logo。 logo 只出现在品牌位置（导航、商店页、邮件页脚），界面里的功能图标要用另一套风格统一的图标库。把 logo 当图标用，是个人项目最常见的视觉事故。

不要让 logo 承担解释功能。 图形里塞进字母、齿轮、箭头、对话气泡，缩小后全糊成一团。一个人做产品，几何形状比复杂构图更耐用。

三种形态要同时产出，不要等需要时再补。 应用商店、社交平台、文档站各自需要不同尺寸，临时拼凑的版本会让同一个产品看起来像三个产品。

logo 的改动频率应当低于界面的改动频率。 界面随功能演进，logo 只在品牌层变化时动。若两者总是一起改，说明你还在用 logo 表达产品定位，而定位本该由承诺承担。

五、行动清单与复算验收

• 选定一个主色，写明它只用于强调，不用于大面积背景
• 生成 5–7 级中性色阶，覆盖背景、分隔线、正文与次要文字
• 补三个语义色，并确认它们与主色可区分
• 把全部色值控制在 11 个以内，写进代码变量
• 计算正文、次要文字、图标三处的对比度，记录数值
• 确定一个形状母题，写出按钮、卡片、图标的圆角规则
• 产出横版、方形、单色三种 logo，各自标注最小尺寸
• 用单色版缩小到 16px，检查是否仍可识别

验收标准：能报出主色、字族、形状母题各是什么，以及正文对比度的实测值。 答不出对比度数字的，说明视觉还停留在感觉层面。

使用边界与实操验收

本文讲视觉识别的最小系统，不涉及颜色与间距如何写成代码变量，那属于第 04 篇；多语言下的字体、断词与长度膨胀属于排版与字体：长度膨胀、断词与复杂文字 ；游戏的角色、世界观与美术资产属于游戏品牌资产系统：Logo、角色、世界观和视觉识别怎么长期沉淀 ；界面布局与状态属于第 05、06 篇。

本文也不主张「必须自己设计 logo」。购买现成图标或请人做一版都可以，但三种形态与安全边距要自己验收，否则交付物无法落到各个平台。

验证以一致性为准：把官网、应用商店页、文档站、邮件模板放在一起看，主色与圆角是否完全一致。任何一处偏差都说明系统只存在于设计稿里。

这项工作也不该由截图代替：截图只能证明「看起来一样」，真正要核对的是取值。把四处的主色十六进制值与圆角像素记在同一张表里，对不上就是没落到位。

另一个容易漏掉的验收点：把界面截图转成灰度，主按钮是否仍然是最突出的元素。如果灰度后它和背景混在一起，说明层次完全依赖颜色，换一个色觉环境就会失效。

还有一件值得做的收尾：把主色、中性色阶、语义色、字族、圆角规则和三种 logo 形态存成一个页面，附上色值与最小尺寸。这份清单不需要排版精美，它只需要在你半年后临时做一张宣传图时，能让你不用重新决定一次视觉。

关键参考与核验范围

本文的色值与比例数字为教学演示。核验日期：2026-10-24。

• WCAG 2.1: Contrast (Minimum) ：正文与大字号的最低对比度要求，以及对比度的计算方式。
• Apple Human Interface Guidelines ：应用图标的安全边距、尺寸与多平台适配规范。

上述两条只用于说明公开规范，不构成对任何平台审核结果的保证。具体对比度请用工具实测，本文给出的 4.54:1 为四舍五入后的近似值。

系列导航

• 上一篇：命名：可搜索、可发音、可注册
• 下一篇：设计 token：把颜色、间距、字号写成变量
• 回到目录：一个人把产品做得像样：品牌、视觉识别与设计系统
• 相关阅读：排版与字体：长度膨胀、断词与复杂文字 、设计验收：一致性、可访问性与跨平台的一张表