在前端職涯中，我常遇到許多視覺科系背景的設計師來詢問投入前端領域的可能性，我可以打包票和你說是百分之兩百適合，但礙於許多人會對所謂的「前端工程師」、「前端設計師」、「網頁設計師」的工作內容感到黑人問號，因為有些設計師本身也會一些網頁排版，那麼到底要具備哪些能力，才可以稱得上自己有投入到「前端」呢？

前端工程師與前端設計師的差異

在講解前端之前，先附上一張圖，左邊是前端設計師，右邊是前端工程師。前端設計師會比較著墨在 UI/UX 設計並轉為網頁格式，他們能夠確保所設計出來的 UI 能夠在網頁上忠實呈現。

其實這段是比前端工程師還要來得有優勢的，就比方說前端工程師是必須拿到設計稿才能開始規劃前端架構，但是前端設計在設計 UI 時，就可以開始思考 CSS 模組化架構、JS 實作可行性等邏輯，而前端工程師則必須被動獲得設計稿後才有辦法開始規劃，流程上就慢了好幾拍。

在我輔導的學生當中，有設計經驗的設計師轉前端設計，拿的第一份薪水的平均值也高於前端工程的第一份工作，理由很簡單，畢竟前端設計除了前端技能外也包含了 UI 設計，無形間將自己打造為 T 型人才薪水也較高些。

若要分兩者的工作內容，我會說左邊是比較偏向「網頁 UI 視覺呈現」，右邊是偏向「程式邏輯」，雖然學的都還是 HTML、CSS、JS，但前端設計在學這些技術時是偏向「網頁視覺動畫呈現」為導向，前端工程是偏向「API 整合、JavaScript 開發」為重點。

那麼你說你是設計師想要跨足右邊整個內容可以嗎？當然也可以，畢竟任何東西都可以靠後天培養的。


網頁設計師、前端設計師的差異

有很多人會搞不清楚，網頁設計師與前端設計師的差異，其實工作內容是差不多的，就是需要設計 UI，同時也必須將 UI 轉化成前端介面。但若要以程式程度來細分的話，先不講設計功力，這裡用前端火侯來舉例：

不靠譜的前端設計師

• 當設計完前端介面後，就將整包網頁檔丟過去給後端，但不瞭解後端開發邏輯以及是否好套版
• 不懂版本控制語言，所以也不懂該怎麼跟其它工程師協作程式碼
• 當架構變大時，不瞭解如何透過工具或程式語言進行優化 (Gulp、Webpack、CSS 預處理器、NPM)
• 不瞭解瀏覽器渲染原理，以致於在 debug 時，不知道該如何透過瀏覽器內建的除錯工具來除錯
• 僅會套 jQuery Plugin 實作動畫效果，更進階要自己客製因為不懂 JS 底層與瀏覽器應用導致處處綁手綁腳
• 還不太熟悉 Web UI 介面，同時不清楚何謂 Guideline，例如 input 在 desktop、mobile 在各瀏覽器的渲染規則

靠譜的前端設計師

• 比任何人都瞭解一個 HTML Tag 在各載具上的瀏覽器的兼容性。

• 在圖形設計上，瞭解 CSS 的繪圖能力，不會任何東西都匯出圖形，能用 CSS 設計出來且又不影響網頁效能為主。

• 知道 SVG、PNG、JPG 的使用時機，並瞭解 Retina 螢幕機制，不會設計會讓圖片糊掉的致命性錯誤。

• 瞭解 JS、CSS 在開發網頁動畫效果的任何細節，擅長使用 SVG、Canvas、WebGL 設計各種 animation

• 知曉後端資料庫合作邏輯，當 Code 有問題時，會從 Git repo 拉下來切 branch，修改完再 merge 丟給後端。

• 當前端介面需要統一化時，會主動出公司內部的 Web Guideline，方便其它同仁遵守規範進行設計

• 會相當專注於網頁元素的設計細節，例如 Web Font、Image、Loading、文字設定 (行距、字距、粗細、字形大小、標題權重)

  而我認識這些靠譜的前端設計師，薪水級距也在年薪 80 ~ 120 萬左右，也是一個結合本身設計所長，開闢出自己的新道路的一個新的職涯方向，前端設計師。

觀察職稱與工作內容，瞭解廠商究竟是要找什麼樣的人才

最終你還是要觀察公司在職缺網站填寫的工作內容，因為我還是會看到有些廠商職缺寫「前端工程」，但竟然要包含設計 UI，或是要找前端設計或網頁設計，但工作內容都是跟「平面設計」有關，寫 Code 權重不到兩成。那以前端設計師來說，設計與寫 Code 的時間差不多都一半一半，或者是寫 Code 時間仍然偏多。

建議與求才廠商詢問工作比重，才能確保自己想投入的技術是否能在公司發揮長才，在靠譜的前端設計師，我也列舉了一些投入方向，若你有意轉職前端設計師，也歡迎找我諮詢更多細節 :D