很多公司花大价钱做了 VI，结果网站上用的配色、字体和宣传册对不上。原因是：VI 手册是为印刷设计的，直接搬到屏幕上会出现各种问题。
先把VI里的东西摘出来
改版前从 VI 手册里提取这些：
- 主色与辅助色的准确色值：包括 RGB 和 HEX
- 标准字与指定字体：中英文各是什么
- logo 规范：标准版、反白版、最小尺寸、安全边距
- 图形元素：辅助图形、纹理、图标风格
- 图片调性：偏冷还是偏暖，写实还是抽象
屏幕和印刷不一样
直接照搬会有这些问题：
- 印刷色值在屏幕上偏暗：CMYK 转 RGB 后需要微调，尤其是深色
- 指定字体可能没有网页授权：很多品牌字体只有印刷授权，商用网页字体要单独买
- 字号体系缺失：VI 通常只规定了标题样式，网页需要完整层级
- 没有交互状态：按钮按下去什么样，手册里不会写
第 2 条是硬伤。用了没授权的字体上线，可能收到侵权通知，改版时要先确认授权范围，或者找视觉接近的开源字体替代。
补齐VI没覆盖的部分
网页需要而手册里通常没有的：
- 字号与行高体系：正文、小标题、标题、大标题各多大
- 间距规则：模块之间、元素之间的留白标准
- 按钮样式：主按钮、次按钮、文字链接，以及悬停、按下、禁用状态
- 表单样式：输入框、下拉、复选、错误提示
- 图标风格：线性还是填充，圆角还是直角
- 配图规范：比例、滤镜、是否加边框
建立一套设计系统
把上面这些整理成网页设计规范，好处是后面加页面不用再重新定：
主色：#1A5FB4辅助色：#F5A623正文：16px / 行高 1.7 / #333333H1：32px / H2：24px / H3：18px主按钮：高 44px / 圆角 4px / 主色填充模块间距：桌面 64px / 移动 32px这份规范最好做成一页可视化文档，把颜色、字号、按钮、表单的实际样式都展示出来。设计师和开发都照着它做，一致性就有保障了。
常见的视觉断层
- 新旧页面混用：改版只改了部分页面，风格不统一
- 后台上传的图破坏版式：市场部传的图比例不对、带水印
- 第三方组件风格不搭：客服挂件、地图、评价插件自带样式
- 邮件和文档的模板没跟着改：网站改了，发给客户的还是老样式
顺手统一的东西
改版时一起更新，避免品牌割裂：
- 浏览器标签页的小图标 favicon
- 分享到社交平台时的缩略图和描述
- 邮件签名档里的网址和视觉
- 404 页面和加载页，别用默认样式
- 微信分享卡片
后续怎么保持
把设计规范交给日常维护的人，并定两条规矩：新增页面必须复用已有组件，不另造样式；需要新样式时先更新规范文档再开发。做不到这两条，一年后网站又会变成各种样式的大杂烩。
品牌一致性不是把 logo 放上去，而是让用户在不同地方看到你时，感觉是同一个人。
—— 一位做过品牌视觉落地的设计顾问