你是一個(gè)職業(yè)的頁(yè)面重構(gòu)工作者嗎?

轉(zhuǎn)載贊1 收藏1 評(píng)論

舉報(bào) 2009-01-19

掃描,分享朋友圈

來(lái)源：CSS森林

有這么一批人, 他們的身份到目前已經(jīng)越來(lái)越難被定義, 在不同領(lǐng)域不同行業(yè)都有著不同的稱(chēng)謂, 甚至在同個(gè)領(lǐng)域都有截然不同的叫法。

在IT企業(yè), 他們可能被簡(jiǎn)單的叫做網(wǎng)頁(yè)設(shè)計(jì)師, 或者前端架構(gòu)師, 甚至用戶(hù)體驗(yàn)工程師等等, 企業(yè)越大, 只能分工就越多越細(xì)；在Online廣告公司, 他們可能歸IT部門(mén)管會(huì)被創(chuàng)意的人叫做“做UI的”, 或者“切頁(yè)面的”, 也有可能同是創(chuàng)意部的, 或者在大一點(diǎn)的代理機(jī)構(gòu)專(zhuān)門(mén)有個(gè)部門(mén)是做項(xiàng)目執(zhí)行的, 職稱(chēng)就多種多樣了…

簡(jiǎn)單說(shuō)來(lái), 他們就是幫我們將設(shè)計(jì)稿Layout轉(zhuǎn)化成可用的Web頁(yè)面的那批人。

做為一個(gè)專(zhuān)職的頁(yè)面重構(gòu)者, 我們從事的工作簡(jiǎn)單的說(shuō)就是“將設(shè)計(jì)稿轉(zhuǎn)換成WEB頁(yè)面”, 這一過(guò)程可以很簡(jiǎn)單到直接把PSD從PS里導(dǎo)出成網(wǎng)頁(yè); 也可復(fù)雜到需要考慮頁(yè)面中每個(gè)標(biāo)簽的使用, 考慮“頁(yè)面性能”。以“前端工程師”為目標(biāo)的同學(xué)可能會(huì)不愿承認(rèn)將頁(yè)面重構(gòu)這塊分出來(lái), 但隨著工種的細(xì)分, 加上頁(yè)面重構(gòu)本身的專(zhuān)業(yè)性, 獨(dú)立為一個(gè)職業(yè)也不是不可能, 至少我現(xiàn)在從事的就是一個(gè)專(zhuān)職的職位。如果你覺(jué)得一個(gè)前端工程師必須去畫(huà)設(shè)計(jì)稿, 可以不理會(huì)下面的內(nèi)容。

單純的頁(yè)面重構(gòu), 所涉及到的工作內(nèi)容一般是“分析設(shè)計(jì)稿=>切圖=>寫(xiě)HTML和CSS”, 雖然看起來(lái)很少, 但要做好這份工作, 絕非所想的那么容易。原因很簡(jiǎn)單: 工作內(nèi)容單一, 在時(shí)間和工作量上必會(huì)很苛刻, 往往跟設(shè)計(jì)師的工作時(shí)間是3:1, 即設(shè)計(jì)師給三天的時(shí)間, 制作只給一天的時(shí)間完成; 在這種工作強(qiáng)度下, 很多人都是靠著對(duì)這份工作的喜愛(ài)在維持著, 一旦工作熱情消失, 很容易就會(huì)變得枯燥, 保持熱情也成了重構(gòu)工作者(也許是所有參加工作的人)應(yīng)該具備的能力。

跟“前端工程師”所要求的有所不同, “頁(yè)面重構(gòu)”雖然也是“前端工程師”的一個(gè)范疇, 在職業(yè)化中, 對(duì)專(zhuān)職的頁(yè)面重構(gòu)者, 要求當(dāng)然也更高。不單是做出頁(yè)面, 而是做出好頁(yè)面。又引出另一個(gè)話題, “何為好頁(yè)面？”, 一般包括下面幾點(diǎn):

結(jié)構(gòu)完整, 可通過(guò)標(biāo)準(zhǔn)驗(yàn)證
標(biāo)簽語(yǔ)義化, 結(jié)構(gòu)合理
充分考慮到頁(yè)面在站點(diǎn)中的“作用和重要性”, 并對(duì)其進(jìn)行有針對(duì)性的優(yōu)化

很多同學(xué)多少都遇到過(guò)方向不明, 不知道自己應(yīng)該提高些什么, 我們可以從“分析設(shè)計(jì)稿=>切圖=>寫(xiě)HTML和CSS”這個(gè)工作內(nèi)容, 針對(duì)每一點(diǎn)提出一些要求, 以方便我們分析自己的能力水平, 為繼續(xù)提高確定個(gè)方向:

設(shè)計(jì)稿的分析

是指對(duì)設(shè)計(jì)稿如何制作成頁(yè)面的分析, 即哪一塊的內(nèi)容可以做為公共的部分、哪一塊的內(nèi)容結(jié)構(gòu)可以如何實(shí)現(xiàn)等。

對(duì)設(shè)計(jì)稿的分析能力可以劃分成下面的幾個(gè)階段:

能分清設(shè)計(jì)稿中的公共與私有的部分
在1的基礎(chǔ)上對(duì)各部分的實(shí)現(xiàn)方式有一個(gè)初步的方案(包括如何切圖、寫(xiě)結(jié)構(gòu)、寫(xiě)樣式)
在1的基礎(chǔ)上, 準(zhǔn)確的給出各部分的實(shí)現(xiàn)方案(包括如何切圖、寫(xiě)結(jié)構(gòu)、寫(xiě)樣式)
在3的基礎(chǔ)上, 能同時(shí)考慮方案的擴(kuò)展性、復(fù)用性及頁(yè)面性能(包括如何切圖、寫(xiě)結(jié)構(gòu)、寫(xiě)樣式)
在4的基礎(chǔ)上, 考慮整站的結(jié)構(gòu)分布（包括文件分布、目錄結(jié)構(gòu)）

上面這些都是在還沒(méi)開(kāi)始動(dòng)手制作之前所要做的。

切圖

是指將設(shè)計(jì)稿切成便于制作成頁(yè)面的圖片。

很多人都有個(gè)誤區(qū), 覺(jué)得切圖就是把圖片切出來(lái), 其實(shí)并不完全是這樣, 還包括把切出來(lái)的圖片合并到一起, 怎么切、從哪切才能將性能最大化, 說(shuō)“切圖是一門(mén)藝術(shù)”完全不為過(guò)。切圖也可以劃分成幾個(gè)階段:

切成所需要的圖片(如何將需要的部分切出來(lái))
在1的基礎(chǔ)上, 對(duì)切出來(lái)的圖片進(jìn)行一些優(yōu)化(包括壓縮文件大小、選擇圖片類(lèi)型)
在2的基礎(chǔ)上, 規(guī)劃切出來(lái)的圖片(包括文件分布)
在3的基礎(chǔ)上, 考慮整體的性能(包括合并圖片、壓縮文件大小)

HTML和CSS的編寫(xiě)

是指將上面完成的內(nèi)容, 通過(guò)HTML和CSS的編寫(xiě), 將設(shè)計(jì)稿轉(zhuǎn)換成WEB頁(yè)面。

這塊是最重要的一塊, 也是我們所要重點(diǎn)掌握的內(nèi)容, 把它們放在一起, 是因?yàn)樗鼈兿嗷サ年P(guān)聯(lián)性太強(qiáng), HTML的寫(xiě)法會(huì)影響到CSS的寫(xiě)法, 它又可以劃分成下面幾個(gè)階段: