给出非设计师也能落地的配色与字体规范，让站点看起来专业。下面按“先判断、再动手、最后验证”的顺序展开，每一步都给出可核对的检查点。
涉及 网页配色、网页字体、视觉设计 的关键动作都写成了具体命令或配置项，可以照着走，也可以当检查表用。
一个主色一个辅助色，灰阶做层次；不要超过三种彩色，饱和度降一档更耐看。
正文与背景对比度至少 4.5:1，灰色文字滥用是廉价感的第一来源。
正文系统默认字体即可，标题可用一款有性格的字体，别超过两款。
统一间距刻度（4 或 8 的倍数），留白比堆装饰更能提升观感。
按钮、链接、标签的样式全站统一，风格漂移是页面显旧的主因。
| 环节 | 关键动作 |
|---|---|
| 配色原则 | 一个主色一个辅助色，灰阶做层次；不要超过三种彩色，饱和度降一档更耐看 |
| 对比度 | 正文与背景对比度至少 4.5:1，灰色文字滥用是廉价感的第一来源 |
| 字体 | 正文系统默认字体即可，标题可用一款有性格的字体，别超过两款 |
| 间距 | 统一间距刻度（4 或 8 的倍数），留白比堆装饰更能提升观感 |
Q：按文中写法改完，怎么确认真的生效？
不要只看配置文件，用对应的验证命令或从外部视角复测一次；改完先小流量观察一段，再全量推进，出问题能马上回退。
Q：按文中的步骤做完，还需要注意什么？
把处理过程和最终生效的参数记下来。同类问题再出现时直接对照记录，比重查一遍快得多。
Q：业务规模小，也要按这套标准来吗？
不需要一次到位。先把影响最大的两项做到位，剩余的随着业务增长逐步补齐，比一开始就追求完美更容易落地。
回到这篇的 5 个环节：配色原则、对比度、字体、间距、一致性。把这几个动作写进检查表，下次遇到同类问题按顺序过一遍，比凭经验跳步骤稳。
微信公众号
微信客服
