网站建设设计稿交付前，这五处先对一遍

上个月深圳一家做实验室设备的客户，官网做到切图环节停了三天。设计稿只有首页和列表页两个尺寸，内容页、搜索结果页和 404 页全都没有。前端只能照着首页的版式自己凑，凑出来的东西跟设计师想要的不一样，又退回去重画。

这类缺口在评审会上看不出来。图摆在大屏幕上是完整的，问题出在没有的那一页。设计稿交付前有一份核对清单，五处位置逐个过一遍，后面能省下不少来回。下面按核对顺序讲，文末那张表可以直接照着打勾。

断点给不全是深圳设计项目里最常见的缺口

先把断点这件事说清楚。网页的宽度是流动的，它要在 1920 像素的显示器、1366 的笔记本，768 的平板和 375 的手机上各显示一遍。设计师习惯出一套宽屏稿，再补一张手机稿，中间两档留给前端自己发挥。发挥的结果通常是导航栏在 900 像素附近挤成一团，卡片变成四列挤不下。

常规做法是四档断点，1920、1440、768 和 375。内容密集的站点要再补一档 1024。深圳做外贸的客户多，海外访问里平板横屏的比例不低，768 和 1024 这两档都得有人负责。设计交付清单里写清每档断点各出几个页面，比口头交代"手机端你们看着办"要牢靠。

还有一类页面经常被忘掉。搜索结果是空的那一版，列表只有一条内容那一版，404 页，以及后台上传图片时超长文字的溢出效果。这些页面在评审会上没人提，上线后用户**个碰到。

字体和图标这两样，交付时最容易只剩一半

正文字体在设计稿上是最不起眼的部分，出问题却最多。设计师在稿子上用了思源黑体，前端拿到的文件里没打包字体，线上就掉回系统默认。Windows 上显示成微软雅黑，苹果上显示成苹方，字宽不一样，标题直接换行错位。

交付包里该有三样内容。**样是用到的字体清单，标清是哪几档字重。第二样是可以商用的授权说明，避免用了没授权的字体。第三样是图标文件，用 SVG 格式，不要只给 PNG。字体授权这件事上，方正和汉仪的字库都有明确的商用范围，深圳做消费品的客户踩过这个坑的不少。

图标只给 PNG 的后果在高清屏上很明显。两倍屏上图标边缘发虚，三倍屏上更糊。换成 SVG 之后同一份文件适配所有屏幕，还能用 CSS 改颜色，交付时顺手的事。

交互状态缺图，前端只能自己猜

设计稿上的按钮是静止的。鼠标悬停上去变什么颜色，按下去变什么颜色，禁用时是什么灰度，这几种状态只要没画，前端就自己做主。等到验收时甲方觉得悬停色太重，又是一轮改稿。该停在哪一步可以参考 target="_blank"。

一份完整的设计稿，交互状态至少要覆盖默认、悬停、按下和禁用四种。链接还要单独给访问过和未访问的两种颜色。卡片类组件如果整块可点，悬停时是整块变化还是只有标题变化，也要标出来。这些细节写在标注层里，比事后在群里反复解释快得多。

移动端没有悬停这个概念，但按下的反馈要有。没有按下反馈的按钮，用户会怀疑自己点没点上，然后连点两次。深圳这边做表单页面的项目，提交按钮重复提交的问题，有一部分根子在这里。

表单的四种状态要单独出图

表单是官网里转化最直接的地方，也是设计稿最容易只画一半的地方。设计师画了一个漂亮的空表单就交出去了。用户输入到一半的填充态和输错的报错态，加上提交成功的反馈态，全都没有。

报错态尤其要单独画。错误提示放在输入框下面还是右边，提示文字用什么颜色，边框要不要跟着变，一次说清楚。提示文字的字数上限也要给，用户输入手机号多敲一位，如果提示语句太长会把整块布局撑开。

提交中这个中间态也不能漏。表单提交到后台要等一两秒，这段时间按钮上要不要转圈，页面要不要禁止再次点击，这两件事没画，前端通常不做，用户就在这一两秒里多点几次。

图片规格和裁切规则写在稿子边上

设计稿上的图是**的，线上图片是编辑上传的。这两件事之间的落差靠裁切规则来补。稿子边上要写清三件事。**件是显示区域的宽高比，比如产品图统一 4 比 3。第二件是超出部分是裁中间还是裁顶部，人像类内容裁顶部容易切掉头。第三件是图片最小允许多大，太小的图拉大会糊。

产品图这块还要再细一点。相机原图一张三到五兆，直接传到官网上，页面加载时间会拖到五六秒。设计交付时给出建议尺寸，列表页缩略图 600×600，详情页大图 1200 宽，前端才好写压缩规则。这一条写在设计说明里，比上线后挨个改图省力。

背景图的处理方式也要标。深色背景上的白色文字，图片压缩到什么程度文字仍然可读，这个阈值设计师心里有数，但很少写进交付物。标注一句，前端调压缩参数时就有依据。

设计交付物核对表

设计稿里必须标出来的参数

• 主色、辅助色和文字色三组的色值，标注到十六进制
• 标题到正文的字号阶梯，以及对应的行高
• 栅格列数和列间距，卡片之间的间距
• 圆角数值，描边宽度，阴影参数
• 动效的时长和缓动曲线，弹层出现是 200 毫秒还是 300 毫秒

设计阶段不该纠结的三件事

• 首页轮播图放几张。这类元素在深圳官网项目里的点击率一直很低，把时间花在**屏的信息排布上更值
• 图标用线性还是面性。这是风格选择，两套都成立，纠结一周不如先定一套跑一遍
• 正文用哪种中文字体。系统字体和自研字体的差别，在正文这个字号上普通用户看不出来，标题上才需要单独处理

深圳这边的网页设计费，跟交付物粗细直接挂钩

同样是官网设计，报价能差出好几倍，差的主要是交付物的粗细。只出首页加内页两个版式的，深圳市场上通常几千元能拿到。出全套断点、全套交互状态，附字体授权和设计规范的，报价区间会拉到两万到五万。

需要说明，上面是深圳市场公开参考区间，并非本站报价。具体金额要看页面数量、行业属性和是否需要定制插画。

这两档之间怎么选，看网站的使用年限。用一两年的活动站，省这笔钱合理。打算用五年以上的企业官网，交付物细一点，后面每次改版都能复用规范，摊下来反而便宜。

对完这五处，下一步做什么

视觉稿核对这件事不需要开会。把上面那张表发给设计方，让对方逐项标注"有"或"没有"，半天就能回。缺的项目当场定补齐时间，写进项目排期里。

补齐的时间要算进去。断点补画通常要两三天，交互状态补画一到两天，表单状态半天。这些时间不排进去，项目就会在开发阶段以"等图"的形式还回来。深圳这边赶工的项目里，开发周期超期的原因，等图能占到三分之一。 target="_blank"里讲过这类元素在设计阶段就该定下来。

核对完还有一个动作值得做，就是让前端提前看一遍稿子。开发的视角和设计不一样，设计看不出的问题，前端一眼能看到。提前半天做这件事，比切图时再来回问要省时间。

如需进一步沟通，可直接致电 13928418795。