頁面重構師

頁面重構師,從事的工作簡單的說就是“將設計稿轉換成WEB頁面”。

做為一個專職的頁面重構者,我們從事的工作簡單的說就是“將設計稿轉換成WEB頁面”,這一過程可以很簡單到直接把PSD從PS里導出成網頁;也可複雜到需要考慮頁面中每個標籤的使用,考慮“頁面性能”。以“前端工程師”為目標的同學可能會不願承認將頁面重構這塊分出來,但隨著工種的細分,加上頁面重構本身的專業性,獨立為一個職業也不是不可能,至少我現在從事的就是一個專職的職位。如果你覺得一個前端工程師必須去畫設計稿,可以不理會下面的內容。
單純的頁面重構,所涉及到的工作內容一般是“分析設計稿=>切圖=>寫HTML和CSS”,雖然看起來很少,但要做好這份工作,絕非所想的那么容易。原因很簡單:工作內容單一,在時間和工作量上必會很苛刻,往往跟設計師的工作時間是3:1,即設計師給三天的時間,製作只給一天的時間完成;在這種工作強度下,很多人都是靠著對這份工作的喜愛在維持著,一旦工作熱情消失,很容易就會變得枯燥,保持熱情也成了重構工作者(也許是所有參加工作的人)應該具備的能力。
跟“前端工程師”所要求的有所不同,“頁面重構”雖然也是“前端工程師”的一個範疇,在職業化中,對專職的頁面重構者,要求當然也更高。不單是做出頁面,而是做出好頁面。又引出另一個話題,“何為好頁面?”,一般包括下面幾點:
1. 結構完整,可通過標準驗證
2. 標籤語義化,結構合理
3. 充分考慮到頁面在站點中的“作用和重要性”,並對其進行有針對性的最佳化
很多同學多少都遇到過方向不明,不知道自己應該提高些什麼,我們可以從“分析設計稿=>切圖=>寫HTML和CSS”這個工作內容,針對每一點提出一些要求,以方便我們分析自己的能力水平,為繼續提高確定個方向:
一、設計稿的分析
設計稿的分析是指對設計稿如何製作成頁面的分析,即哪一塊的內容可以做為公共的部分、哪一塊的內容結構可以如何實現等。對設計稿的分析能力可以劃分成下面的幾個階段:
1. 能分清設計稿中的公共與私有的部分
2. 在1的基礎上對各部分的實現方式有一個初步的方案(包括如何切圖、寫結構、寫樣式)
3. 在1的基礎上,準確的給出各部分的實現方案(包括如何切圖、寫結構、寫樣式)
4. 在3的基礎上,能同時考慮方案的擴展性、復用性及頁面性能(包括如何切圖、寫結構、寫樣式)
5. 在4的基礎上,考慮整站的結構分布(包括檔案分布、目錄結構
上面這些都是在還沒開始動手製作之前所要做的。
二、切圖
切圖是指將設計稿切成便於製作成頁面的圖片。都有個誤區,覺得切圖就是把圖片切出來,其實並不完全是這樣,還包括把切出來的圖片合併到一起,怎么切、從哪切才能將性能最大化,說“切圖是一門藝術”完全不為過。切圖也可以劃分成幾個階段:
1. 切成所需要的圖片(如何將需要的部分切出來)
2. 在1的基礎上,對切出來的圖片進行一些最佳化(包括壓縮檔案大小、選擇圖片類型)
3. 在2的基礎上,規劃切出來的圖片(包括檔案分布)
4. 在3的基礎上,考慮整體的性能(包括合併圖片、壓縮檔案大小)
HTML和CSS的編寫
HTML和CSS的編寫是指將上面完成的內容,通過HTML和CSS的編寫,將設計稿轉換成WEB頁面最重要的一塊,也是我們所要重點掌握的內容,把它們放在一起,是因為它們相互的關聯性太強,HTML的寫法會影響到CSS的寫法,它又可以劃分成下面幾個階段:
1. 還原設計稿視覺效果,並通過標準驗證(HTML)
2. 在1的基礎上,實現多瀏覽器的兼容(HTML)
3. 在2的基礎上,標籤語義化(HTML)
4. 在3的基礎上,選擇較優的實現方式(包括模組化結構,方便程式腳本使用,HTML和CSS)
5. 在4的基礎上,考慮到擴展性、復用性和可維護性(HTML和CSS)
6. 在5的基礎上,考慮到整站的樣式分布(包括如何實現分布)
7. 在6的基礎上,樣式寫法的最佳化(包括技巧的套用)
是對所遇到問題的解決能力,這一點在不同的階段都可能會遇到,所以沒有寫到上面。
如果你已經達到或超過3、4、5,恭喜你,你已經是一個職業的“頁面重構工作者”了。為了我們自身的發展,關注新技術、技術創新、提高用戶體驗、審美觀、程式腳本的實現方式等,也是十分必要的。大家一起進步吧。

相關詞條

熱門詞條

聯絡我們