VI 规范做完为什么用不上？官网落地缺的是四张规范表

VI 规范是品牌视觉在各类载体上保持一致的一套规则，但它通常写给印刷与物料，很少写到网页。

结论先说：VI 规范用不上，多半不是手册做得不好，而是缺了把品牌语言翻译成网页字段的那一层。

这一层是四张表：色值、字阶、间距栅格、图片风格。它们不替代手册，只补手册到代码之间那一段。

表名	必填字段	交付格式	常见缺口
色值表	HEX、RGB、原始色号、使用场景	表格 / 变量文件	只有色号，没有比例
字阶表	字号、行高、字重、层级	表格	只写字号
间距栅格	基准单位、档位、容器与断点	表格	只有辅助线
图片风格	比例、色调、主体占比、禁止项	表格 / 示例图	只有参考图

四张表都不长，难的是把每一项写成可执行的字段，而不是形容词。

手册和网页之间，缺的是一层翻译

VI 规范里写「主色为品牌红，辅助色为暖灰」，网页需要的是 #C8102E 与 #F2F0EC 这样的值。

VI 规范里写「标题加粗、正文清晰易读」，网页需要的是 28/36、600 这样的字号与行高组合。

差的不是审美，是单位。这一关过不了，设计与开发只能靠口头对，改一次错一次。

色值表：把印刷色换成屏幕值

印刷用 CMYK 或 Pantone，屏幕用 HEX 或 RGB，两套色域并不重合，直接换算会偏。

色值表要给出每个颜色的 HEX 与 RGB 两列，并保留 Pantone 或 CMYK 作为原始依据。

转换后的值要在大面积色块上核对。小色片上看不出的偏差，铺满首屏之后会被放大。VI 规范里的色值若只给一组，前端只能各自猜。

色值表要写清用在哪

只给一组色值，等于没给规则。主色铺多大面积、辅助色用在哪里、中性色分几档，都要写。

中性色至少分三档：文字、边框、背景。三档混用，页面就会出现七八种灰。

VI 规范里少了这一步，前端只能自己配灰，结果每个页面都不一样。

字阶表：字号只是其中一列

字阶表要写四列：字号、行高、字重、使用场景。只写字号，等于只写了三分之一。

中文正文 15 到 16 像素、行高 1.6 到 1.75 倍比较稳妥；标题按层级递减，相邻两级的跨度不要低于 1.25 倍。

层级过多也是问题。标题四级加正文，五级足够，再多就分不清谁重要。VI 规范的字阶落到网页，往往要重排一次。

中文字体栈要写回退顺序

VI 规范指定一款商用字体，网页未必加载得动。字体文件大、授权按域名算，都是现实约束。

字体栈要写成一条链：指定字体、常见系统字体、通用族名。缺一环，落到默认字体就会变形。

在 VI 规范里补上这条链，是让品牌字在多数设备上「接近」而不是「消失」的低成本办法。

间距栅格：先定基准再定容器

VI 规范的间距若只给示意图，开发仍会各写各的。栅格不是画辅助线，而是定一个基准单位，所有间距取它的整数倍。

4 或 8 像素作基准比较常见，取 8 更好算。间距只留 8、16、24、32 几档，页面自然就齐。

容器宽度与断点要一起定。容器 1200、断点 768 与 1200，是多数企业站可用的起点。

图片风格：用比例和色调约束

图片这类内容，失控的比例偏高。不同来源的图，色温、饱和度、留白都不一样。

VI 规范里的约束写到三条就够：比例（16:9 或 4:3）、色调（暖、冷、中性）、主体占比。

再加一条禁止项：不叠字、不加边框、不做多重滤镜。这一条能省掉大量返工。

四张表怎么交给前端

交付格式比内容更容易被忽略。给 PDF，前端要手抄；给表格，可以直接转成变量。

命名要统一：color-primary、text-body、space-4 这类语义名，比 red-1、gray-2 好维护。

VI 规范的四张表如果能落成一份这样的文件，改版时只需要改值，不用改结构。

改版三个月后又乱了

新页面加急上线，设计直接取色，不走 VI 规范。两次之后，页面就出现了第五种蓝。

治理办法是加一道检查：上线前用取色工具抽查三个页面，色值不在表内就退回。

表是活的。业务新增颜色时，先改表再用，而不是先用再补。VI 规范的维护成本主要在这里。

验收：拿表逐项对

验收不看感觉，看 VI 规范的四张表能不能对上。色值抽查五个，字阶抽查三级，间距抽查两处，图片抽查三张。

对不上的地方分两类：VI 规范没写清，或没按表执行。前者改表，后者改流程。

两类混在一起谈，收尾往往变成「设计不行」这种没有结论的判断。

关于 VI 规范的高频问题

VI 手册里已经有色值了，为什么还要单独做表？

VI 规范里的色值多按印刷口径给，网页需要 HEX 与 RGB，还要规定使用比例与中性色档位。补上这一层，前端才能直接落地。

没有 VI 规范，能不能先做官网？

可以，但建议先定四条：主色与中性色、字阶、间距基准、图片比例。四条约半天能定完，能省掉后续大量返工。

字体必须用品牌指定的那一款吗？

尽量用，但要准备回退链。商用字体的网页授权按域名计费，加载也有成本，回退链能让缺字时不变形。

四张表请设计公司做，还是自己整理？

已有 VI 规范的，内部整理即可，工作量在换算与核对。没有的先补规范再整理，顺序反了会白做。

按四张表改完，页面会有什么变化？

变化主要落在一致性上：同一层级的标题、同一类间距、同一组色值。视觉提升幅度取决于原有基础，以上为方法描述，个案结果不构成承诺。

结语

VI 规范落到网页，靠的不是再写一份手册，而是四张能被前端直接读取的表。表定完，争论就少了一半。

---