作为一个合格的页面重构者，恢复设计草稿的能力非常重要。页面能否与设计草稿一样，是人们关注的焦点。有时，细节可以决定成败。可以说相差千里。尤其是在创建精品项目时。

1、 外观规格

有时我们从设计师那里得到的设计草图并不一定是准确的。例如，对于同一类型的模块标题文本，一个地方是13px，另一个是14px；一个页面有多个字体颜色，肉眼看起来是一样的，但实际的颜色值不一样；每个段落的行高不同；同一类型的弹出框有多个大小，等等在这种情况下，我们无法恢复设计草图以恢复它。

为了降低与设计人员的沟通成本，改造工程师必须在前期督促设计人员做好全站的视觉说明，以文件的形式写出一些公众认可的内容，并在后期严格执行。

设计者在页面制作前设置可视化规范，这样可以大大降低后期联合调试的成本。另外，页面制作可以对前期模板化的东西进行统一规范，如字体、图标、边框、背景色、间距等，形成统一的类界面。在以后的设计规范确定后，在有变化的地方很容易调整。

2、 设计草图标记

必须要求设计者在设计草图中标注各种间距、宽度、特殊字体、特殊字体颜色、特殊线条高度等，这样在制作页面时就不必重新测量，这也大大提高了恢复设计草图的准确性，同时也降低了与设计方的通信成本和后期的联调费用。以下是一些示例：

3、 网络标尺工具（faststonecapture）

航海用罗盘、医生用温度计、木匠用卷尺许多职业都有自己的专用测量仪器，所以我们在制作页面时必须测量间距、宽度、高度和颜色等数据，那么页面制作也应该有专业的页面精确测量工具吗？

本文介绍了一种能够精确测量网页的软件faststonecapture。虽然这个软件很小，但它有五个内脏。

4、 Faststonecapture简单教程

单击控制面板最右边的图标打开并选择屏幕标尺。屏幕上将显示如下图所示的标尺。为了便于透视测量，可以将标尺设置为透明或半透明

默认标尺是水平的。您可以按键盘的上、下、左、右键，将标尺移动一个像素。鼠标点在尺子的刻度上。放大镜将在屏幕右上角显示测量区域。拖动鼠标可以精确测量水平长度。拖动标尺的两个侧边，可以随意拉长或缩短标尺。

如图所示，点击标尺上的按钮图标使标尺垂直；或者双击标尺使标尺垂直。

垂直测量方法与横向测量方法类似，此处不再重复。

单击标尺上的图标：屏幕右上角的放大镜将显示线条长度。

用鼠标拖动a点到B点的直线，测量两点之间的距离。

不幸的是，该软件没有三角形和罗盘，所以很难测量矩形。别担心，你可以用其他方法代替。这里我们使用屏幕捕捉功能。

单击标尺上的图标关闭标尺，返回软件控制面板，然后单击第三个图标（捕获矩形区域）

拖动鼠标以测量要测量的网页的矩形模块。屏幕左上角（或右上角）的放大镜将显示w*H=value*value，w为宽度，H为高度。

点击软件控制面板右侧的图标：出现下拉框，选择屏幕颜色选择器，出现吸管图标，移动吸管指示的坐标，点击获得屏幕上任意位置的颜色值。