作為一名合格的頁(yè)面重構(gòu)者，其實(shí)基礎(chǔ)能力項(xiàng)有一條：網(wǎng)頁(yè)還原設(shè)計(jì)稿。 第一步：打蛇打七寸——視覺(jué)規(guī)范 有時(shí)候我們從設(shè)計(jì)師那里拿到的設(shè)計(jì)稿不一定是精確無(wú)誤的，例如：同一類(lèi)的模塊標(biāo)題文字，一個(gè)地方是13PX，另外一個(gè)地方是14PX；一個(gè)頁(yè)面有多種字體顏色肉眼看起來(lái)一樣卻實(shí)際取到的色值不一樣；每個(gè)段落的行高不一樣；同一類(lèi)型的彈出框多種尺寸；等等…… 這樣的情況，我們不能為了還原設(shè)計(jì)稿而還原設(shè)計(jì)稿。 為了減少與設(shè)計(jì)師溝通上的成本，重構(gòu)師不得不督促設(shè)計(jì)師做前期整站的視覺(jué)規(guī)范，把一些公共能約定的內(nèi)容以文檔的形式寫(xiě)明，后期嚴(yán)格執(zhí)行起來(lái)。 設(shè)計(jì)師最好是在頁(yè)面開(kāi)始制作前定好視覺(jué)規(guī)范，這樣可以大大減少頁(yè)面制作后期聯(lián)調(diào)的成本。另外頁(yè)面制作可以對(duì)模板化的東西前期做統(tǒng)一的規(guī)范，如字體、ICON、邊框、背景色、間距等做統(tǒng)一的class接口，等后期設(shè)計(jì)規(guī)范固定下來(lái)后有變動(dòng)的地方調(diào)起來(lái)就很容易了。 第二步：萬(wàn)事俱備，只欠東風(fēng)——設(shè)計(jì)稿標(biāo)注 務(wù)必要求設(shè)計(jì)師在設(shè)計(jì)稿上對(duì)各種間距、寬度、特殊字體、特殊字色、特殊行高等等進(jìn)行標(biāo)注，這樣在頁(yè)面制作的時(shí)候不用去重新量取也大大加強(qiáng)了還原設(shè)計(jì)稿的準(zhǔn)確度，更減少了與設(shè)計(jì)師的溝通成本和后期聯(lián)調(diào)成本。 第三步：工欲善其事，必先利其器——網(wǎng)頁(yè)標(biāo)尺工具 頁(yè)面制作應(yīng)該有一個(gè)專(zhuān)業(yè)的頁(yè)面精確測(cè)量的工具，這里有一款可以精確測(cè)量網(wǎng)頁(yè)的軟件，軟件名是 FastStone Capture。 簡(jiǎn)單教程： 1、打開(kāi)測(cè)量工具 點(diǎn)擊控制面板最右邊的圖標(biāo)，打開(kāi)選擇“屏幕尺”，會(huì)在屏幕上顯示如下圖的尺子、為了方便測(cè)量，可將尺子設(shè)置成透明或半透明： 2、橫向測(cè)量 默認(rèn)尺子是橫放的，可以按鍵盤(pán)上、下、左、右鍵單像素移動(dòng)尺子，鼠標(biāo)點(diǎn)在尺子的刻度上，屏幕右上角會(huì)有一個(gè)放大鏡顯示測(cè)量的區(qū)域，拖動(dòng)鼠標(biāo)可以精確測(cè)量水平的長(zhǎng)度。拖動(dòng)尺子橫向兩邊緣可將尺子任意拉長(zhǎng)或縮短。 3、垂直測(cè)量 點(diǎn)擊尺子上的如圖的按鈕圖標(biāo)可將尺子垂直： 或雙擊尺子可將尺子垂直。 垂直測(cè)量和橫向測(cè)量的方法類(lèi)似，這里就不重復(fù)說(shuō)了。 4、點(diǎn)對(duì)點(diǎn)測(cè)量 點(diǎn)擊尺子上的圖標(biāo): ，屏幕右上角放大鏡會(huì)顯示線(xiàn)長(zhǎng)度。 用鼠標(biāo)拖動(dòng)從A點(diǎn)到B點(diǎn)的直線(xiàn)，測(cè)量?jī)牲c(diǎn)間的距離。 5、矩形測(cè)量 可惜該軟件沒(méi)有三角板也沒(méi)有圓規(guī)，難以測(cè)量矩形。別急，可以用其他方法代替，這里用到截屏功能。 點(diǎn)擊尺子上的圖標(biāo)關(guān)閉尺子，返回軟件控制面板，點(diǎn)第三個(gè)圖標(biāo) ： 拖動(dòng)鼠標(biāo)測(cè)量想要測(cè)量的網(wǎng)頁(yè)矩形模塊吧，屏幕左（或右）上角的放大鏡會(huì)顯示w*h=值*值，w是寬度，h是高度。 6、網(wǎng)頁(yè)取色 點(diǎn)擊軟件控制面板右邊的圖標(biāo)： ，出現(xiàn)下拉框，選擇“屏幕取色器”，出現(xiàn)吸管圖標(biāo)，移動(dòng)吸管指示的坐標(biāo)點(diǎn)擊獲取屏幕任一地方的顏色值。