作為一名合格的頁面重構(gòu)者，其實(shí)基礎(chǔ)能力項(xiàng)有一條：網(wǎng)頁還原設(shè)計(jì)稿。

你能做到頁面與設(shè)計(jì)稿絲毫不差嗎？

有人可能會(huì)想，哪能一像素不差??？

我想說: 細(xì)節(jié)真的很重要！細(xì)節(jié)決定成敗，真可謂失之毫米差之千里，如果你是想打造一個(gè)精品項(xiàng)目真的有那么可怕。所以在前面啰嗦那么多是想大家多重視頁面細(xì)節(jié)問題，真的要把頁面當(dāng)原子彈來做。這里分享一下我工作中的一點(diǎn)經(jīng)驗(yàn)吧，請多多拍磚。

第一步：打蛇打七寸——視覺規(guī)范

有時(shí)候我們從設(shè)計(jì)師那里拿到的設(shè)計(jì)稿不一定是精確無誤的，例如：同一類的模塊標(biāo)題文字，一個(gè)地方是13PX，另外一個(gè)地方是14PX；一個(gè)頁面有多種字體顏色肉眼看起來一樣卻實(shí)際取到的色值不一樣；每個(gè)段落的行高不一樣；同一類型的彈出框多種尺寸；等等…… 這樣的情況，我們不能為了還原設(shè)計(jì)稿而還原設(shè)計(jì)稿。

為了減少與設(shè)計(jì)師溝通上的成本，重構(gòu)師不得不督促設(shè)計(jì)師做前期整站的視覺規(guī)范，把一些公共能約定的內(nèi)容以文檔的形式寫明，后期嚴(yán)格執(zhí)行起來。

設(shè)計(jì)師最好是在頁面開始制作前定好視覺規(guī)范，這樣可以大大減少頁面制作后期聯(lián)調(diào)的成本。另外頁面制作可以對模板化的東西前期做統(tǒng)一的規(guī)范，如字體、ICON、邊框、背景色、間距等做統(tǒng)一的class接口，等后期設(shè)計(jì)規(guī)范固定下來后有變動(dòng)的地方調(diào)起來就很容易了。

第二步：萬事俱備，只欠東風(fēng)——設(shè)計(jì)稿標(biāo)注

務(wù)必要求設(shè)計(jì)師在設(shè)計(jì)稿上對各種間距、寬度、特殊字體、特殊字色、特殊行高等等進(jìn)行標(biāo)注，這樣在頁面制作的時(shí)候不用去重新量取也大大加強(qiáng)了還原設(shè)計(jì)稿的準(zhǔn)確度，更減少了與設(shè)計(jì)師的溝通成本和后期聯(lián)調(diào)成本。如下樣例：

第三步：工欲善其事，必先利其器——網(wǎng)頁標(biāo)尺工具(FastStone Capture)

航海用的指南針、醫(yī)生用的體溫計(jì)、木匠用的卷尺……很多職業(yè)都有它專用的測量儀器，那么我們在制作頁面的時(shí)候勢必也要測量間距、寬度、高度、顏色……等等數(shù)據(jù)，那么頁面制作是不是也應(yīng)該有一個(gè)專業(yè)的頁面精確測量的工具呢？

這里有一款可以精確測量網(wǎng)頁的軟件想分享給大家，軟件名是 FastStone Capture，記得是一同事去年推薦給我的，當(dāng)時(shí)只是為了找一款可以截屏的小軟件，而今我想找一款可以專門用來測量網(wǎng)頁的軟件的時(shí)候，想不到它還能排上用場——軟件雖小，卻五臟俱全。

簡單教程：

1、打開測量工具

點(diǎn)擊控制面板最右邊的圖標(biāo)，打開選擇“屏幕尺”，會(huì)在屏幕上顯示如下圖的尺子、為了方便透視測量，可將尺子設(shè)置成透明或半透明：

2、橫向測量

默認(rèn)尺子是橫放的，可以按鍵盤上、下、左、右鍵單像素移動(dòng)尺子，鼠標(biāo)點(diǎn)在尺子的刻度上，屏幕右上角會(huì)有一個(gè)放大鏡顯示測量的區(qū)域，拖動(dòng)鼠標(biāo)可以精確測量水平的長度。拖動(dòng)尺子橫向兩邊緣可將尺子任意拉長或縮短。

3、垂直測量

點(diǎn)擊尺子上的如圖的按鈕圖標(biāo)可將尺子垂直：

或雙擊尺子可將尺子垂直。

垂直測量和橫向測量的方法類似，這里就不重復(fù)說了。

4、點(diǎn)對點(diǎn)測量

點(diǎn)擊尺子上的圖標(biāo)，屏幕右上角放大鏡會(huì)顯示線長度。

用鼠標(biāo)拖動(dòng)從A點(diǎn)到B點(diǎn)的直線，測量兩點(diǎn)間的距離。

5、矩形測量

可惜該軟件沒有三角板也沒有圓規(guī)，難以測量矩形。別急，可以用其他方法代替，這里用到截屏功能。

點(diǎn)擊尺子上的圖標(biāo)關(guān)閉尺子，返回軟件控制面板，點(diǎn)第三個(gè)圖標(biāo)?（撲捉矩形區(qū)域）：

拖動(dòng)鼠標(biāo)測量想要測量的網(wǎng)頁矩形模塊吧，屏幕左（或右）上角的放大鏡會(huì)顯示w*h=值*值，w是寬度，h是高度。

6、網(wǎng)頁取色

點(diǎn)擊軟件控制面板右邊的圖標(biāo)，出現(xiàn)下拉框，選擇“屏幕取色器”，出現(xiàn)吸管圖標(biāo)，移動(dòng)吸管指示的坐標(biāo)點(diǎn)擊獲取屏幕任一地方的顏色值。

OK，簡單教程到此結(jié)束，本想搞個(gè)視頻演示的，但想想這個(gè)軟件其實(shí)很簡單很簡單，如果有不明白的地方可以實(shí)際操作一下 ^_^

如果嚴(yán)格做到以上設(shè)計(jì)師到重構(gòu)師流程的三個(gè)步驟，頁面還會(huì)有那么多頁面還原設(shè)計(jì)稿的問題嗎？

實(shí)踐證明，我在負(fù)責(zé)的新項(xiàng)目中這樣的問題已經(jīng)減少了很多了。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁標(biāo)題：根據(jù)設(shè)計(jì)稿來精確制作網(wǎng)頁頁面
當(dāng)前鏈接：http://www.rwnh.cn/news27/320427.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、、網(wǎng)站改版、ChatGPT、軟件開發(fā)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)