设计变量如何让网站改版不再逐页找颜色

网站页面一多，改版最怕的就是“逐页找颜色”。明明想把所有主按钮从蓝色换成绿色，结果翻了几十个页面，有的按钮还是旧蓝，有的新绿深浅不一，还有的圆角、阴影各差几个像素。问题不在设计师不细心，而在样式值散落在每个页面文件里，没有统一出口。

设计变量就是给这些散落的值一个名字、一个存放位置。颜色、字号、间距、圆角、阴影，凡是会重复使用的视觉属性，都先定义成变量，页面里只引用变量名。后续要改，只动变量定义那一处，所有引用它的页面自动更新。这个思路不限于视觉样式，也适用于组件状态、交互反馈和内容权限的控制。

先判断问题出在哪一层

动手改版前，先分清问题属于哪一层。常见的情况有三种：一是同一个视觉属性在多个页面重复出现，但值不统一，比如“主色”在A页面是 #1a73e8，在B页面是 #1967d2，肉眼几乎看不出差别，但改版时就会漏掉；二是组件本身的状态不完整，按钮只有默认态，没有悬停、按下、禁用、加载中的样式，变量建了也没法覆盖全；三是内容层面的问题，比如长文本、空数据、无权限提示没有设计，变量再规范，页面依然不完整。

判断方法很简单：找一个要改的属性，搜索它在项目里出现了多少次。如果同一含义的值出现在几十处，而且写法不统一，就值得收拢成变量。如果只出现在一个页面、一处组件里，暂时不必急着抽象，先记下来，等出现第二次再提取也不迟。

另一个容易忽略的判断点是：变量不只是给设计师看的，还要给前端实现、给后续维护的人看。变量命名如果只有自己能懂，换个人接手就失效。命名要按用途走，比如 color-primary、color-danger、spacing-md、radius-sm，而不是 blue-1、gray-2 这种只描述外观的名字。外观会变，用途不会。

按顺序处理，别一上来就铺开

实际处理时，不建议一次性把所有页面都改完再检查。那样出了问题很难定位，而且中途需求一变，返工成本很高。更稳的顺序是：先定基准，再做最小改动，然后逐层验证。

第一步：盘点现状，留好退路。 把现有页面里用到的颜色、字号、间距、边框、圆角、阴影值全部列出来，按出现频率排序。同时把修改前的页面截图、原文件或配置值保存一份。这样改完以后可以逐页对比，出了异常也能快速还原。对网站内容还要确认访问权限：哪些信息公开可见，哪些只对登录用户或管理员开放，这会影响变量在模板里的引用方式。

第二步：从最小可用版本开始。 先挑一个最常用、影响面最大的组件，比如主按钮或导航栏，把它的颜色、圆角、间距抽成变量。只做这一处，不顺手改其他样式。确认这一处没问题以后，再扩展到下一个组件。每完成一个组件就做一次小范围验证，比全部改完再集中排查要省时间。

第三步：检查真实使用状态。 变量改完以后，不能只看设计稿或自己的电脑。要切到不同屏幕尺寸，从手机到宽屏显示器都过一遍；要切换不同用户权限，看看普通访客和管理员看到的页面是否都正常；还要构造异常状态，比如清空列表看空数据提示、断网看错误页、快速连点看按钮是否防重复提交。涉及服务端渲染的页面，还要看浏览器控制台有没有报错，接口返回的状态码是否正常。

容易出错的位置，提前盯住

变量方案在实施中，有三类问题最常出现。

第一类是命名混乱。有人用 color-1、color-2 这种序号命名，也有人用 dark-blue、light-gray 这种描述性命名。前者看不出用途，后者在颜色调整后就会名不副实。命名应该反映“这个变量控制什么”，而不是“它现在长什么样”。

第二类是只覆盖了正常流程。设计变量时把默认状态都定义了，但悬停、按下、禁用、加载中、错误态没做。用户鼠标悬停在按钮上没反馈，或者提交表单时按钮没有加载指示，体验就会断档。变量体系里要留出状态扩展的位置，每个组件至少要有默认、悬停、禁用三种状态。

第三类是检查时只看静态效果。页面在静态设计稿里看起来没问题，但真实数据一进来就露馅——标题太长换行了、用户昵称包含特殊字符、列表为空时没有引导、图片加载失败没有占位。这些情况在设计变量时就要考虑进去，变量值要能适配内容变化，而不是假设内容永远不长不短。

改完以后，怎么确认真的改好了

验证变量是否生效，不能只看首页。挑几个有代表性的页面：一个内容密集的列表页、一个带表单的提交页、一个移动端页面，逐一检查。重点看三件事：同一变量在不同页面是否表现一致；组件在不同状态下是否都有正确的样式；长文本、空数据、窄屏等边界条件下页面是否仍然可用。

如果项目用了自动化构建工具，还可以在代码里搜索旧的色值或字号是否还有残留。只要旧值还在页面文件里硬编码，就说明变量没有完全接管。这一步可以交给前端同事配合检查，或者自己在代码仓库里全局搜索确认。

最后，留一份简短记录。写明这次改了哪些变量、为什么这么改、检查过哪些页面、还有哪些已知问题没处理。这份记录不需要多长，但要在项目文档里放好。半年以后有人接手改版，看到这份记录就能知道当时的设计意图，不用再从头猜。

设计变量的价值不在变量本身，而在它让改版从“逐页找颜色”变成“改一处，处处更新”。这个转变的前提是：命名清楚、状态完整、边界条件有覆盖、验证方法可执行。做到这几点，网站改版就不再是一场靠眼力和耐心的搜索游戏。