企业官网视觉不专业，多半不是审美问题，是这四处没对齐

官网视觉指的是页面上字号、行高、间距、图片与色彩五套规则是否出自同一套设定，而不是画面好不好看。

结论先说：官网视觉让人觉得不专业，多数不是配色不好，而是四套规则各写各的。字号随手挑、间距靠眼估、图片各处下载、主色铺满整屏，单看每一处都还行，放在一起就散了。

这四处都能测。官网视觉的问题测完再改，比换一版设计稿省事。

官网视觉的不专业，多数能落到四个可测项

判断官网视觉有没有问题，不用先讨论风格。先数四件事：字号用了几级、间距是不是同一套、图片是不是一个来源、主色占了多大面积。

官网视觉这四项的共同点是可量化。量化之后，改与不改、改多少，都有依据，不必靠谁嗓门大。

官网视觉的讨论一旦落到这四个数上，就从审美争论变成了工程问题。

字号：阶数太多，比例没有依据

常见的情况是一屏里出现六七种字号，每一处都是「看着差不多」。级数一多，层级就失效，读者分不清哪句重要。

官网视觉收敛字号的做法是先定一套阶梯，再按内容层级取用。正文、辅助说明、小标题、大标题各占一级，级与级之间的比例保持一致。

阶梯定完之后，页面里不允许出现阶梯之外的字号。这一条执行到位，官网视觉的整齐度会明显变化。

行高与行宽：正文有舒适区

字号对了，行高不对，读起来仍然累。正文行高控制在字号的 1.6 到 1.8 倍之间，是公开排版资料里的常见区间。

行宽同样有区间。一行容纳太多字，眼睛回行容易串行；太少则频繁换行，节奏被打断。

官网视觉里这两项常被忽略，因为它们不显眼。但正文占页面面积大，行高行宽一改，整页的观感跟着变。

间距：有没有落在同一套栅格上

间距是容易露怯的一项。标题与正文之间 12 像素，图片与说明之间 18 像素，模块之间 30 像素，三个数互不相干，页面就会显得松散。

做法是先定一个基础单位，其余间距都取它的整数倍。官网视觉的节奏感，本质来自这套倍数关系。

栅格不必复杂，四的倍数或八的倍数都能用。关键是同一页里不要出现两套。

图片：同源、同风格、同处理

图片是官网视觉里难统一的部分，因为来源太杂。产品部给一张、市场部给一张、图库下一张，色温、透视、留白全不一样。

处理顺序是先定风格，再定处理方式。统一裁切比例、统一色调、统一背景处理，三件事做完，来源不同也能看起来像一套。

官网视觉的图片问题，很少是拍得不好，多是放在一起不协调。

主色：占比过高，缺中性色托底

主色用得多，不等于品牌感强。整屏铺主色，视觉重心无处落脚，阅读也被打断。

通行做法是让中性色承担大面积，主色只出现在需要强调的位置。官网视觉的主色占比降下来，重点反而更清楚。

这一项改起来成本低，往往是四处里见效相对快的一处。

四处对齐的自查表

检查项	怎么测	常见问题	处理方向	改动量
字号	数一屏内的字号种类	六种以上、无阶梯	收敛为四级阶梯	小
行高	量正文行高与字号比	低于 1.5 倍	调到 1.6 至 1.8 倍	小
间距	抽查八处间距数值	互不成倍数	统一到基础单位	中
图片	看裁切比例与色调	比例混杂、色调不一	统一裁切与调色	中
主色	估主色占首屏面积	超过一半	中性色托底	小

改动量是相对判断，实际取决于模板结构与设计稿的完整度。

为什么改版之后又会乱回去

官网视觉的问题常常改完一版又回来，原因是规则没有落到可复用的地方。新加一个栏目，运营按自己的习惯调字号，阶梯就破了。

要让规则留下来，得把它写进组件库或模板，而不是写在设计说明里。官网视觉的稳定，靠的是默认值，不是自觉。

另一处常见原因是多头维护。市场部改活动页、产品部改产品页，各自一套，半年后又是四种字号。

官网视觉与 VI 手册的接口

VI 手册管的是标志、标准色、辅助图形，官网视觉管的是这些元素在屏幕上的比例与用法。

两者之间需要一张对照表：标准色对应哪几个色值、标志周围留多少空间、辅助图形允许出现在哪些位置。缺了这张表，手册落地就会走形。

官网视觉不是把手册搬上屏，而是把手册翻译成屏幕上的数值。

先改哪一处，改动量怎么估

四处里，字号与主色占比改动量小、影响面大，可以先动。间距牵动模板，图片牵动素材，放在其后。

官网视觉的调整建议按「先规则、后页面」的顺序：先把四级字号与间距单位定下来，再逐页替换。

官网视觉的改动量估不准时，先挑首页与一个栏目页试。两页跑通，再推全站。

关于官网视觉的高频问题

官网视觉不好，是不是要重新设计一版？

不一定。四处对齐属于规则层的问题，很多时候改字号阶梯与间距单位就能解决大半，不必推翻设计。先测再判断。

字号用几级比较合适？

四级阶梯覆盖多数企业站：大标题、小标题、正文、辅助说明。级数再多，层级反而模糊；级数太少，内容不好区分。

间距一定要按栅格吗？

建议按。栅格的价值不在精确，而在让不同人做出来的页面看起来像一套。没有栅格，每次改版都要重新对齐。

图片风格不统一，只能重拍吗？

不必。统一裁切比例、统一色调、统一背景处理，能解决大部分不协调。重拍是末了的选项，成本也高。

改完多久能看出效果？

页面层的调整当场可见，用户与检索端的反馈则需要时间积累，没有固定周期。以上为方法描述，个案结果不构成承诺。

结语

官网视觉的专业感，来自四套规则的一致性，不来自某一处惊艳。字号有阶梯、间距有单位、图片有统一处理、主色有中性色托底，四件事做到，页面自然就稳了。

---