網(wǎng)頁(yè)美工設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)制作是如何精確還原設(shè)計(jì)稿的

編輯：時(shí)間：2016-04-16 14:42:02

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

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

　　有人可能會(huì)想，又不是造原子彈，哪能一像素不差啊?

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

　　第一步：打蛇打七寸——視覺(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)尺工具(FastStone Capture)

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

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

<< 上一篇：網(wǎng)頁(yè)設(shè)計(jì)中的柵格系統(tǒng)是什么？

>> 下一篇：網(wǎng)站美工和平面設(shè)計(jì)的區(qū)別有哪些？

推薦資訊