网站设计做之前，先把公司 logo 和 VI 翻出来

      设计师开工前问一句“有没有 logo 源文件”，十次有八次得到的回答是“官网后台能下一个 png，你要不要去下”。

那个 png 通常是 200 像素宽，还带白底。

为什么非要源文件。因为网站要在各种尺寸下用 logo：PC 端页头大概 180 像素宽，手机端可能只有 120 像素，页脚是白的，页头可能是深色的，还有微信分享的缩略图。一个 200 像素的位图放到哪儿都是糊的，放大一点边缘就开始毛。矢量源文件（ai、eps、svg 都行）才能无损缩放，还能改颜色适配深浅背景。

顺带一个常见问题：logo 是白底 jpg 的，放到深色页头上就是一块白方块。这种情况要么找源文件去掉底色导出透明 png，要么干脆做一版反白版本，别硬贴。

VI 手册比 logo 更值钱。手册里写着标准色（一般是 CMYK 和 RGB 两套值）、辅助色、标准字、最小使用尺寸、留白规范。有了这些，网站配色就不是设计师凭感觉挑的，而是有依据的。没有 VI，至少也要从公司现有物料里把主色定下来——名片、画册、产品包装、门头，挑一个最正规的来源取色。

踩得最多的坑是颜色不一致。没有色值规范，设计师这次靠肉眼从名片上吸一个蓝，下次做活动页再吸一个，做出来的两个页面放在一起，蓝色明显不一样。看着都是蓝，气质差得远。所以色值一定要写进文档，2 到 3 个主色，加一套字号层级，后面所有页面照着来。

      还有个带法律风险的坑：字体。网站上用的中文字体，很多是商业授权的。方正、汉仪这些字体厂商都有过批量维权的案例，尤其是把字体用在了 logo 或者大幅标题上。做网站设计的第一步，应该是确认公司有没有字体授权；没有就老老实实用思源黑体、思源宋体这类免费商用的，别随手挑一个好看的。

没有 VI 的公司怎么办。其实不难补：拿 logo 反推主色，定两三个色；定一套字号层级（大标题、小标题、正文、注释）；定按钮和卡片的圆角、阴影这类细节的规则。就这么几行，一个下午能定完。定完打印一份，发给后面所有做物料的人——包括做网站的、做画册的、做展板的。这一张纸能省掉后面无数次“这个蓝色到底是哪个蓝”的争论。

还有个东西得提一句：logo 本身。有些公司 logo 细节特别多，字又小，缩到手机端只有 100 像素宽的时候，糊成一团什么都看不清。这种情况建议单独做一版简化版，专门用于网站和 App 这类小尺寸场景。原版该用在哪里还用在哪里，不冲突。

网站设计里，logo 和 VI 属于“先花半天、后面省一个月”的事。跳过它，后面全是返工。