你是一個職業的頁面重構工作者嗎?
來源：CSS森林
有這么一批人, 他們的身份到目前已經越來越難被定義, 在不同領域不同行業都有著不同的稱謂, 甚至在同個領域都有截然不同的叫法。
在IT企業, 他們可能被簡單的叫做網頁設計師, 或者前端架構師, 甚至用戶體驗工程師等等, 企業越大, 只能分工就越多越細；在Online廣告公司, 他們可能歸IT部門管會被創意的人叫做“做UI的”, 或者“切頁面的”, 也有可能同是創意部的, 或者在大一點的代理機構專門有個部門是做項目執行的, 職稱就多種多樣了…
簡單說來, 他們就是幫我們將設計稿Layout轉化成可用的Web頁面的那批人。
做為一個專職的頁面重構者, 我們從事的工作簡單的說就是“將設計稿轉換成WEB頁面”, 這一過程可以很簡單到直接把PSD從PS里導出成網頁; 也可復雜到需要考慮頁面中每個標簽的使用, 考慮“頁面性能”。以“前端工程師”為目標的同學可能會不愿承認將頁面重構這塊分出來, 但隨著工種的細分, 加上頁面重構本身的專業性, 獨立為一個職業也不是不可能, 至少我現在從事的就是一個專職的職位。如果你覺得一個前端工程師必須去畫設計稿, 可以不理會下面的內容。
單純的頁面重構, 所涉及到的工作內容一般是“分析設計稿=>切圖=>寫HTML和CSS”, 雖然看起來很少, 但要做好這份工作, 絕非所想的那么容易。原因很簡單: 工作內容單一, 在時間和工作量上必會很苛刻, 往往跟設計師的工作時間是3:1, 即設計師給三天的時間, 制作只給一天的時間完成; 在這種工作強度下, 很多人都是靠著對這份工作的喜愛在維持著, 一旦工作熱情消失, 很容易就會變得枯燥, 保持熱情也成了重構工作者(也許是所有參加工作的人)應該具備的能力。
跟“前端工程師”所要求的有所不同, “頁面重構”雖然也是“前端工程師”的一個范疇, 在職業化中, 對專職的頁面重構者, 要求當然也更高。不單是做出頁面, 而是做出好頁面。又引出另一個話題, “何為好頁面？”, 一般包括下面幾點:
- 結構完整, 可通過標準驗證
- 標簽語義化, 結構合理
- 充分考慮到頁面在站點中的“作用和重要性”, 并對其進行有針對性的優化
很多同學多少都遇到過方向不明, 不知道自己應該提高些什么, 我們可以從“分析設計稿=>切圖=>寫HTML和CSS”這個工作內容, 針對每一點提出一些要求, 以方便我們分析自己的能力水平, 為繼續提高確定個方向:
設計稿的分析
是指對設計稿如何制作成頁面的分析, 即哪一塊的內容可以做為公共的部分、哪一塊的內容結構可以如何實現等。
對設計稿的分析能力可以劃分成下面的幾個階段:
- 能分清設計稿中的公共與私有的部分
- 在1的基礎上對各部分的實現方式有一個初步的方案(包括如何切圖、寫結構、寫樣式)
- 在1的基礎上, 準確的給出各部分的實現方案(包括如何切圖、寫結構、寫樣式)
- 在3的基礎上, 能同時考慮方案的擴展性、復用性及頁面性能(包括如何切圖、寫結構、寫樣式)
- 在4的基礎上, 考慮整站的結構分布（包括文件分布、目錄結構）
上面這些都是在還沒開始動手制作之前所要做的。
切圖
是指將設計稿切成便于制作成頁面的圖片。
很多人都有個誤區, 覺得切圖就是把圖片切出來, 其實并不完全是這樣, 還包括把切出來的圖片合并到一起, 怎么切、從哪切才能將性能最大化, 說“切圖是一門藝術”完全不為過。切圖也可以劃分成幾個階段:
- 切成所需要的圖片(如何將需要的部分切出來)
- 在1的基礎上, 對切出來的圖片進行一些優化(包括壓縮文件大小、選擇圖片類型)
- 在2的基礎上, 規劃切出來的圖片(包括文件分布)
- 在3的基礎上, 考慮整體的性能(包括合并圖片、壓縮文件大小)
HTML和CSS的編寫
是指將上面完成的內容, 通過HTML和CSS的編寫, 將設計稿轉換成WEB頁面。
這塊是最重要的一塊, 也是我們所要重點掌握的內容, 把它們放在一起, 是因為它們相互的關聯性太強, HTML的寫法會影響到CSS的寫法, 它又可以劃分成下面幾個階段:
- 還原設計稿視覺效果, 并通過標準驗證(HTML)
- 在1的基礎上, 實現多瀏覽器的兼容(HTML)
- 在2的基礎上, 標簽語義化(HTML)
- 在3的基礎上, 選擇較優的實現方式(包括模塊化結構, 方便程序腳本使用, HTML和CSS)
- 在4的基礎上, 考慮到擴展性、復用性和可維護性(HTML和CSS)
- 在5的基礎上, 考慮到整站的樣式分布(包括如何實現分布)
- 在6的基礎上, 樣式寫法的優化(包括技巧的應用)
還有一點是對所遇到問題的解決能力, 這一點在不同的階段都可能會遇到，可能需要在經驗的累積中不斷提升自己的能力。
經上所述，你認為自己是一個職業的頁面重構工作者了嗎?
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）