將設計稿轉換成WEB頁面職業者

2024-07-11 08:24:17

字體：大中小

來源：轉載

供稿：網友

我們從事的工作簡單的說就是“將設計稿轉換成WEB頁面”，這一過程可以很簡單到直接把PSD從PS里導出成網頁；也可復雜到需要考慮頁面中每個標簽的使用，考慮“頁面性能”。以“前端工程師”為目標的同學可能會不愿承認將頁面重構這塊分出來，但隨著工種的細分，加上頁面重
做為一個專職的頁面重構者，我們從事的工作簡單的說就是“將設計稿轉換成WEB頁面”，這一過程可以很簡單到直接把PSD從PS里導出成網頁；也可復雜到需要考慮頁面中每個標簽的使用，考慮“頁面性能”。以“前端工程師”為目標的同學可能會不愿承認將頁面重構這塊分出來，但隨著工種的細分，加上頁面重構本身的專業性，獨立為一個職業也不是不可能，至少我現在從事的就是一個專職的職位。如果你覺得一個前端工程師必須去畫設計稿，可以不理會下面的內容。
單純的頁面重構，所涉及到的工作內容一般是“分析設計稿=>切圖=>寫HTML和CSS”，雖然看起來很少，但要做好這份工作，絕非所想的那么容易。原因很簡單：工作內容單一，在時間和工作量上必會很苛刻，往往跟設計師的工作時間是3:1，即設計師給三天的時間，制作只給一天的時間完成；在這種工作強度下，很多人都是靠著對這份工作的喜愛在維持著，一旦工作熱情消失，很容易就會變得枯燥，保持熱情也成了重構工作者（也許是所有參加工作的人）應該具備的能力。
跟“前端工程師”所要求的有所不同，“頁面重構”雖然也是“前端工程師”的一個范疇，在職業化中，對專職的頁面重構者，要求當然也更高。不單是做出頁面，而是做出好頁面。又引出另一個話題，“何為好頁面？”，一般包括下面幾點：

結構完整，可通過標準驗證標簽語義化，結構合理充分考慮到頁面在站點中的“作用和重要性”，并對其進行有針對性的優化
很多同學多少都遇到過方向不明，不知道自己應該提高些什么，我們可以從“分析設計稿=>切圖=>寫HTML和CSS”這個工作內容，針對每一點提出一些要求，以方便我們分析自己的能力水平，為繼續提高確定個方向：一，設計稿的分析
設計稿的分析是指對設計稿如何制作成頁面的分析，即哪一塊的內容可以做為公共的部分、哪一塊的內容結構可以如何實現等。對設計稿的分析能力可以劃分成下面的幾個階段：

能分清設計稿中的公共與私有的部分在1的基礎上對各部分的實現方式有一個初步的方案（包括如何切圖、寫結構、寫樣式）在1的基礎上，準確的給出各部分的實現方案（包括如何切圖、寫結構、寫樣式）在3的基礎上，能同時考慮方案的擴展性、復用性及頁面性能（包括如何切圖、寫結構、寫樣式）在4的基礎上，考慮整站的結構分布（包括文件分布、目錄結構）

上一篇：CSS3教程:新增加的結構偽類

下一篇：padding與line-height的區別