设计稿确认那天，很多客户以为网站已经成了大半，剩下的就是“把图放上去”。其实从一张静态设计图到一个能点开、能滚动、能提交的网页，中间隔着一道关键工序——前端切图。在网页设计制作流程里，这道工序决定你最终看到的样子，跟设计稿能差多远。
切图不是“导出图片”那么简单
行话说的切图，包含两件事：把设计稿里的图标、照片、背景纹样按用途导出成合适格式的素材，以及用 HTML 和 CSS 把整个版面重新搭出来。注意，网页不是一张大图切成几块拼起来，那是二十年前的做法，现在搜索引擎不认，手机端也没法自适应。真正的切图是用代码一比一重建版面：字是真实文字，按钮是真实按钮，图片该多大多大。素材导出也有讲究，图标用 SVG 矢量格式，缩放不糊；照片压成 WebP，几百 KB 的事；背景大图切几张、懒加载到哪一段，都要逐个定。
像素级还原，差的就是这几毫米
同样是还原设计稿，粗活和细活差在细节上。间距差个几像素、字号用近似值、圆角大小随手一写，远看差不多，拼在一起整个页面就“松”了。靠谱的前端会拿着设计稿的标注尺寸，对照着写，做完还要并排截图比对。客户验收时有个简单的自查法：浏览器里按比例缩放到八成再看整体，版面松散还是紧凑一目了然；再把窗口拉宽拉窄，看内容是跟着流动还是直接错位。
切完图不等于万事大吉
网页设计制作的静态页面出来只是半成品，还要挂上真实交互：导航吸顶、图片懒加载、表单校验、轮播自动播放的间隔，这些都在这个阶段补齐。手机端尤其要单独过一遍，设计稿通常只出一张宽度的图，前端得让页面在三百多像素到近两千像素宽的屏幕上都体面。这一步勤快一点，上线后的兼容性投诉能少一大半。
切图交付的验收三件套
切图阶段交付什么，提前约定清楚。一是页面源文件，HTML、样式表、脚本完整可运行，别只给一个打包后的成品；二是切图标注，间距、字号、色值都标好，方便日后改版的人对齐；三是多端截图，电脑、平板、手机三档宽度的整页截图，跟设计稿并排比对。行里有些外包只交付一个能打开的网址，源码一问三不知，这种交付方式日后换谁都接不了手。验收时三件套齐了再确认，主动权在你手里。
给两句实在建议：验收切图成果时，别只盯着首页，内页和手机端各随机点开三页对照设计稿；如果你们没有专业前端，比格网络这类有完整设计和前端班底的团队会提供设计稿还原度对照表，逐项打钩交付，省得靠肉眼去猜。
