还原度上不去，多加几轮走查是最没用的那种努力

做企业官网这些年，只要有人抱怨设计稿到页面总是走样，给出的解法几乎都是同一个：上线前排一轮设计走查。设计师打开原稿，前端把测试环境投到大屏上，两人逐页对照，间距差了 4 像素记一条，字重轻了一档记一条，主色被用成了悬停色再记一条。一个三十页左右的站，两三个小时能挑出四五十条，导进任务系统，前端花一天半改完，再复查一遍收工。

这套流程的说服力很强。它成本极低，不用改动任何前置环节，只要项目末期腾出半天；效果也肉眼可见，改完之后页面确实齐整了一大截，客户在验收会上挑不出毛病。所以做过几个项目的团队，最后基本都会把它固化下来，写进网站设计的交付规范，甚至排进甘特图当成一个正式节点。

从概率上说这个判断也站得住脚：还原度出问题，多半是前端赶工时手抖，或者标注没看仔细，多一双眼睛复核一遍，偏差自然收敛。逻辑严丝合缝，几乎没有反驳的余地。

走查只能查出「两边都存在」的那部分差异

但走查这个动作有个前提被默认掉了——它是比对，而比对要求两边都有东西。设计稿上有这张卡片，页面上也有这张卡片，才比得出间距差多少。还原度真正塌得最厉害的地方，恰恰是设计稿上压根不存在的那些位置。

产品列表页的稿子里，每张卡片标题都是挑好的六个字，真实数据里最长那条有二十九个字。是换行、是截断加省略号，还是整体缩一档字号？三种做法出来的页面观感差得很远，前端当场就得替设计师选一个。表单提交失败时那条红色提示放在哪、要不要顶掉原来的说明文字，稿子里没有。列表数据为空时那块两百多像素高的区域摆什么，稿子里没有。按钮点下去到接口返回的那六百到八百毫秒之间页面处于什么状态，稿子里也没有。

断点是同一个问题的放大版。多数网站设计在交付时只出一套 1440 宽的稿，手机端看情况给一版 375，768 到 1024 这一段几乎从来没人画。这一段的排版规则全靠前端现推：三栏变两栏还是直接变一栏、侧边导航收成抽屉还是拍到顶部、原本并排的图文要不要上下堆叠。这些决定加起来对最终观感的影响，比某处 16 像素写成 12 像素大出一个量级，但它们进不了走查清单，因为没有参照物可比。

所以那张四五十条的表，拆开看八成是间距、字号、色值这类改一行样式就能消掉的条目。它们值得改，却不是还原度丢失的主要来源。真正的来源，是一堆前端替设计师做了、而设计师直到上线都不知道自己被替着做了的决定。走查排得越勤，越容易造成一种「已经管住了」的错觉。

把交付物从「页面」换成「规则」

要堵这个口子，该改的是交付形态。页面稿只是网站设计的一种表达方式，它擅长回答「这一屏长什么样」，不擅长回答「这类东西在各种情况下分别长什么样」。后者得靠另外四样东西补上。

第一样是变量表，不画在稿子里，直接列成表格交付：色值 12 到 16 个（主色及其深浅两档、文字三级灰、边框两级、四种状态色）、字号 6 到 8 级、间距只允许取 4／8／12／16／24／32／48 这几个值、圆角三档、阴影两到三档。前端拿到表格第一件事是写成 CSS 变量，之后所有取值只能从里面挑。这一步做完，走查清单上那批间距和色值条目会直接少掉一多半。它是网站设计里最不像设计的一步，收益却排在前面。

第二样是组件状态矩阵。每个可交互组件至少给五种状态：默认、悬停、按下、禁用、加载中；输入类再补两种，聚焦和校验失败。一个常规企业站的组件数量在 12 到 18 个之间，全部补齐大概多花设计师一天半到两天。这一天半买的是前端不用凭想象编状态，也买的是三个月后加新页面时有据可依。

第三样是内容边界规则，写在每个文字位旁边：卡片标题 8 到 16 字、超出两行截断；摘要 40 到 60 字；图片死死限定 16 比 9，上传时按这个比例裁；列表要同时给出 0 条、1 条、20 条以上三种排布。这些规则写下来花不了两小时，却替前端消掉了整个项目里最容易出错的那一类判断。

第四样是断点约定。稿子仍然只画 375 和 1440 两版，中间那段不画稿，改成一句话规则贴在旁边——比如「1024 以下三栏收为两栏，768 以下侧栏移到内容下方，导航收进抽屉」。一句话比再画三版稿省事，前端也不容易理解偏。

这四样东西交付时配一场 30 到 45 分钟的会，设计师当面讲清哪几条是硬约束、哪几条可以让步。这半小时的信息密度，比二十页标注文档高得多——标注文档前端最多翻两遍，何况硬约束和可让步项混在一起写，等于没写。

走查不该取消，该往前挪

走查这个动作本身没错，错的是它站的位置。放在上线前，改动只能一处一处补，而且越接近上线日越没人敢动全局样式表——改一个基础间距值可能牵动三十个页面，谁也不想在交付前夜赌这一把。于是能改的永远只剩那些孤立的小毛病。

更合适的位置是第一个页面模板刚做完的时候，通常是首页或者产品详情页。这时候走查一次能挑出十几条，但每一条改的都是变量或者组件本身，一改带动全站。之后每完成一个模块再走查一次，每次三五条。总量会从末期那张四五十条的表压到二十条以内，改动成本也低一个量级。走查的频率并没有降，只是它在整个网站设计流程里的位置换了。

五个页面的小站，老办法反而更划算

上面这套东西不是白来的。变量表加状态矩阵加内容规则，前期要多投两到三个设计人日，还要求设计师有耐心把约定写成文字，而不是只交一叠好看的画板。有些设计师宁愿多改两轮稿，也不愿意写规则文档，这是真实存在的阻力。

所以如果这个项目总共五个页面、只服务一个断点、文案长度早就定死、从画稿到写页面就一个人从头干到尾，那么搭一整套变量和状态矩阵属于自找麻烦。那种规模下，画稿、写页面、末期走查一遍依然是最省的路径，多出来的两天人日买不回等价的东西，走查那张清单也确实能覆盖八九成问题。

临界线大致落在三条上：页面模板超过六个、参与前端不止一个人、上线后半年内还要继续加内容。三条里占了两条，交付物就该摊开重做一遍；三条一条都不占，走查照旧，别给自己加戏。