設計師投入前端的不二法門

洧杰 已發佈 2019-10-16

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

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

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

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

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

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

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

![](/assets/螢幕截圖 2017-12-31 18.16.04.png)

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

有很多人會搞不清楚,網頁設計師與前端設計師的差異,其實工作內容是差不多的,就是需要設計 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

關於筆者

暱稱:洧杰

介紹:六角學院校長,熱愛分享與交流的前端工程師,目前專注於兼容桌面/移動網頁前端開發,期間已協助數百位平面設計師,網頁設計師導入標準網頁設計。