设计稿和上线页面对不上，多半差在这几处

设计稿评审那天，会议室里所有人都点头。上线之后老板看了两眼，说“感觉不对”。说不出哪里不对，就是松、挤、脏。这类问题很少是开发不用心，多半是几处细节没对齐。

字体先背锅

设计稿里用的字体，网页上未必有商用授权，替换之后字重、字宽、行高全变。同样一段文字，换一款字体可能多出一行，整个版式就塌了。字体回退顺序要明确写进样式：中文西文分别指定，先本机常见字体，再通用族。字重也别只写一个数字，有些字体没有对应字重，浏览器会自己加粗或减细。

间距不是目测出来的

设计稿上的空白往往是设计师拉出来的，落到代码里需要一套基准，比如四像素或八像素的倍数。缺了这套基准，每个模块各写各的，页面就会显得松散。看一个站点是否讲究，量三个卡片之间的间距就知道。

色值会骗人

设计工具里的色值与浏览器渲染存在差异，半透明叠在图片上时差得更明显。取色要取最终合成后的颜色，不要只看图层标注的十六进制值。同一套灰阶在不同屏幕上偏冷偏暖，真机看一遍比在电脑上争论有用。

图片比例与裁切焦点

设计稿里图片按固定比例摆放，实际素材比例各不相同，拉伸或裁切之后主体位置就跑了。裁切焦点要提前约定：人脸、产品主体靠哪一侧，不要全交给自动居中。响应式下同一张图在窄屏被裁掉一半，是常见事故。

圆角、描边与阴影

这三个属性最容易被写成近似值。一像素的描边、两像素的圆角，在高分屏上看得清清楚楚。阴影的模糊半径和扩散范围差一点，观感就从“轻”变成“脏”。

断点之间的那一截

设计稿通常只给两三个宽度。中间宽度怎么排，靠开发自己判断。判断依据应该是内容：文字到多长会挤，卡片到多窄会垮。窄一格换行、宽一格留白，都是没定义清楚的表现。

走查怎么做

把设计稿和上线页面叠在一起对比，量间距、取色值、对字重；再换真机看一遍。问题记成清单，一次改完再复核，别边看边改——边改边看，改到后面就忘了前面。

小结

视觉还原的差距，几乎都藏在字体、间距、色值、比例、描边和断点这六处。设计稿给的是结果，代码要还原的是规则。冉冉科技在交付前会做一轮视觉走查，把偏差逐条记下来再改。

关于冉冉科技

江苏冉冉信息科技有限公司（品牌“冉冉科技”）成立于2017年，位于江苏省常州市新北区，是一家从事互联网信息服务、电子商务应用与企业应用系统开发的技术服务企业。公司业务涵盖网站建设、网页设计、SEO优化、竞价包年、域名注册、虚拟主机、企业邮箱、整合营销及企业形象策划等，以“只做有效果的网络营销”为服务主张，累计完成三千余起网站建设与服务。