作為一名合格的頁面重構者，其實基礎能力項有一條：網頁還原設計稿。
你能做到頁面與設計稿絲毫不差嗎？
有人可能會想，又不是造原子彈，哪能一像素不差啊？
我想說: 細節真的很重要！細節決定成敗，真可謂失之毫米差之千里，如果你是想打造一個精品項目真的有那麼可怕。所以在前面囉嗦那麼多是想大家多重視頁面細節問題，真的要把頁面當原子彈來做。這里分享一下我工作中的一點經驗吧，請多多拍磚。
第一步：打蛇打七寸-視覺規範有時候我們從設計師那裡拿到的設計稿不一定是精確無誤的，例如：同一類的模塊標題文字，一個地方是13px，另外一個地方是14px；一個頁面有多種字體顏色肉眼看起來一樣卻實際取到的色值不一樣；每個段落的行高不一樣；同一類型的彈出框多種尺寸；等等…… 這樣的情況，我們不能為了還原設計稿而還原設計稿。
為了減少與設計師溝通上的成本，重構師不得不督促設計師做前期整站的視覺規範，把一些公共能約定的內容以文檔的形式寫明，後期嚴格執行起來。
設計師最好是在頁面開始製作前定好視覺規範，這樣可以大大減少頁面製作後期聯調的成本。另外頁面製作可以對模板化的東西前期做統一的規範，如字體、icon、邊框、背景色、間距等做統一的class接口，等後期設計規範固定下來後有變動的地方調起來就很容易了。
第二步：萬事俱備，只欠東風-設計稿標註務必要求設計師在設計稿上對各種間距、寬度、特殊字體、特殊字色、特殊行高等等進行標註，這樣在頁面製作的時候不用去重新量取也大大加強了還原設計稿的準確度，更減少了與設計師的溝通成本和後期聯調成本。如下樣例：
第三步：工欲善其事，必先利其器-網頁標尺工具(faststone capture)航海用的指南針、醫生用的體溫計、木匠用的捲尺……很多職業都有它專用的測量儀器，那麼我們在製作頁面的時候勢必也要測量間距、寬度、高度、顏色……等等數據，那麼頁面製作是不是也應該有一個專業的頁面精確測量的工具呢？
這裡有一款可以精確測量網頁的軟件想分享給大家，軟件名是faststone capture ，記得是一同事去年推薦給我的，當時只是為了找一款可以截屏的小軟件，而今我想找一款可以專門用來測量網頁的軟件的時候，想不到它還能排上用場-軟件雖小，卻五臟俱全。