三年 UI 設計師 + 前端工程師雙修經驗談 (2017 - 2019)
其實雙修、多修在職場很常見，UI + UX、前端配後端、業務 + 工程師 … 等等，相信各位一定也是某些好幾種技能的結合。今天特別以自身經歷來聊網頁 UI 設計 + 前端工程師的心得且佔不將 UI / UX 特別分開 (如有需求可前往 AAPD、UX 四神湯 自行探索！)；而文章內容，也屬於局部面向，斟酌閱讀，歡迎留言討論。
希望幫助這樣的你
(1)對於 UI / UX / Frontend 什麼都碰了一陣子，以為這些事都要學會，不知道未來該怎麼選擇的你。
(2)已經耕耘其中一領域想多學 UI UX 或 Frontend 的
先說結論再說背景故事
最終我很幸運在 Appier 擔任 (可能是空前絕後 XD) 的 Frontend Designer。求職旅程可以參考我之前的求職文 — 2017 Front-End 及 UI Designer 面試紀錄
先總結個人覺得幾個在台灣可行方向：
A) Frontend Designer (創意廣告型)
- 設計：加強視覺精細度、掌握趨勢、互動創意展現，大部分可省去 Prototype 步驟，UX 方面有基本一致性、易用性知識就好
- 工程：專精於 CSS 樣式語言及 HTML 的乾淨好維護結構、非常了解響應式、動畫及跨瀏覽器處理，想獨立接案可以接學習 Vue.js + JQuery 做基本介面互動、 API 串接及資料處理。如更大型可以直接提供 HTML + CSS 剩下配合專業的前端或後端專心處理程式邏輯及 API 互動！
- 小結：你能在創意廣告界發光發熱，獨立接案能力也大增，能夠做出各種精彩的 Web Landing Page、互動型廣告。但注意做產品型網站會有些流程上的不順。
B) Frontend Designer (MVP 產品型)
- 設計：能基本線上 A/B testing，做基本訪談，視覺不用太磨練，大部分產出到 Wireframe 或按照 UI Guideline 拼出像樣的介面即可
- 工程：除 CSS 樣式語言及 HTML 的乾淨好維護結構、了解跨瀏覽器處理外，能按照團隊需求使用前端框架規劃好及開發好 UI Component 及單元測試，讓剩下資料流處理交給專業前端工師處理即可
- 小結：開發產品流程最順，能在做完 Wireframe 時就交給後端評估 DB 及 API 設計，如有配合專業 UI 設計師，又能同時間同步開始設計及開發 UI Component 架構，最後配合 Mockup 套上樣式即可 (但建議質化研究還是交給專業的 UX 研究員啦，如果有的話 ….)。
C) Frontend Engineer (設計為加分輔助)
- 設計：最大效益在於溝通，如果能熟悉 UI 設計師是如何產出一個介面以及有著 UX 的基本洞察即可
- 工程：就是前端工程師
- 小結：懂設計及以人為本的前端工程師很強大，這將有助於你在設計 UI Component 時預知許多可擴充性，也能適時從工程方面提出更好的 UX 解決方案（簡單例如拖曳上傳、自動判斷特殊欄位省時間、瀏覽器儲存使用者進行中狀態 … 等）
D) Product Designer / UI Designer / UX Designer (程式為加分輔助)
- 設計：你就是個以人為本的設計師 (姑且不區分 UX Researcher 跟 UI Designer 分開，或其實 Product Designer 更需要懂什麼)
- 工程：瞭解工程師如何 Google ，在時程緊湊時能迅速找到有沒有對應前端的套件，基於套件介面設計做可允許的客製化 (行事曆、圖表)，讓工程師們大幅省去時間，加速產品迭代；也可以輕易找到實作可行性及評估時程（例如你會知道 Google Map 可以做什麼事變顏色)；帶著工程思維設計出更一致認性、更符合開發效益的 UI 元件。除了 CSS 能做到什麼程度外，建議還是可以去略懂主流前端框架一些資料流管理方式及他們如何設計一個 UI Component。
- 小結：擁有工程背景的設計師也將很強大，你的解決方案不在侷限於圖形介面、動畫，甚至包含各式前端科技已提供 UX 解決方案
E) . Product Manager / Team Lead
- 設計：設計技能可能比前端更直接有效益，更能補足使用者為本的需求，甚至按照 UI Guideline 就能輕易做出非常有效益的介面，讓沒有設計師的時候也不要卡太久（但有時有配合專業設計師還是用 Wireframe 讓他們發揮吧，不然很容易限制到他們）。
- 工程：透過學習前端程式的影響產生「複製貼上寫程式」的能力，你能夠更輕易地聽懂大家在說什麼、知道開發困難度，輕易地 google 到他們懶得找的解決方案，看網路上文章就可打開環境、打開瀏覽器開發者工具下 console 偷東西、複製貼上 code 開始爬蟲、不吵你們後端自己下下 SQL 可能卡很久，就差不多夠應付基本產品調查了，其實更深入的前端技術效益較小。
- 小結：專業的 Product Manager 我認為都需要經歷過兩者一定程度的學習，雖然這些技能在 PM 的日常生活中只是冰山一角，但卻能在產品關鍵策略時創造出非常棒的方向，且有許多手段搜集到更質性或量化的資料。至少我在 Appier 看到的 PM 都非常強大。
個人經驗純記錄 (僅供參考)
撇除實習接案，正職約三年半經歷
-) 普通高中畢業
-) 工業設計系被退學（其實叫做藝術與造形設計學系）
-) [約一年] 超人氣娛樂 平面視覺設計 / 網頁設計師
-) [約一年半] 貝殼放大 Frontend Designer ( 70% 創意廣告 30% 產品)
-) [約一年半] Appier Frontend Designer (50% 創意廣告 50% 產品型)
作品網站: https://doppler.rocks
(備註：裡面作品幾乎我只負責前端工程，設計師由更專業的設計配合；至於文案內容… 略過即可，那是包裝過後的我)
早期在碰觸網頁這塊時想說，哇怎麼又要會設計又要會寫程式，這台灣哪個系可以培育這樣人才啊！當時看到 HTML + CSS 就害怕以為他就是「寫程式」，後來才知道 JavaScript 才算得上程式語言，這部分就不贅述；那時候 UI/UX 這詞彙也沒這麼盛行，網路上文章少少，看到美美的活動網頁就覺得他是這領域設計的全部，但後來才大吃一驚 Gmail, Dropbox 等等原來都是網頁…（汗），最終結合原來工業設計所學的人機互動才理解，喔喔這就是操作介面 (UI)、這就是好用的東西 (UX)、也包含視覺設計，中期進了貝殼才真正開始做產品。
實質上的能力
- 單純考慮 UI/UX Designer 顯見的專業能力，我只比 Junior 再好一點，如果把溝通協作及產品開發思維考慮進去頂多可成為 Mid Level 的 Designer；早期在文章資源還沒這麼多的時候也做過一些努力，例如上過當時市面上許多老師的課程、早期參與且完成 Daily UI (可參考這篇文章)；不避諱地講，在 Daily UI 那一百四十天的日子裡，我就只是在做「視覺」及對每個題目做「思考」，並無深入地執行。雖然之後有參與一些產品 0–1、1–100 的其中設計師、當過一陣子 UI/UX 教室助教、實際做過一陣子 A/B testing 量化分析去改良設計，但也差不多就是這樣啦。
- 而單純考慮 Frontend Engineer 技能，哇，不避諱地說，結果後期花在這裡的時間太多，也不知不覺有 Mid Level 的實力（必須承認，當個 DOer 的日子是很有自己時間的，就連接案我也不太接設計案，畢竟無形的溝通成本讓錢變得世界難賺），從一開始 CSS + JQuery 還不錯做了許多活動頁面就自許為工程師到真正碰觸許多深淵如 Git 協作、透過 Rails 改前端，引入 Vue.js、ReactJS、Chrome Extension、效能調校、Functional programming 、自動化佈署及測試… 竟然已經入了比設計學的東西還要多的大坑，但最悲慘的是上述的許多概念還懞懞懂懂，只是打出來很嚇人而已。
以時間軸，對前端+設計的心境變化
2014 ~ 2015 超人氣娛樂結束後
嗯嗯，我學會 CSS3 好猛，響應式網頁 (RWD) 剛逐步取代自應試網頁 (AWD)，工程師終於可以大膽說「做不出來了，交給 Doppler！」這就是我的價值，我自己設計元件、動畫，自己寫！我好棒！但開始意識到，好像要開始選擇一些事務深入，當時才不想要學 JavaScript 各種框架。
2015 ~ 2017 貝殼放大實習到正職到結束
沒錯！這就是設計+工程師的威力，此時開始接觸 Vue.js 的我各種活動網頁的高動畫、與 API 的高互動通通難不倒我！開始做產品時也可快速針對需要的功能（例如購物車功能、標籤功能、購物流程）做快速的 Mockup 及實作，大幅降低溝通成本，很能夠產出符合基本設計、基本使用者體驗、基本邏輯功能的 MVP 快速提交市場驗證超迅速迭代！但 … 開始找工作又開始覺得是不是要選邊站了 … 所以我在 2017 年的那篇求職文才會這麼的艱辛，去每間公司與其說是應徵，不如都是求情想問「那個 … 有沒有不是做活動頁面，做產品，可以設計又可以寫程式的職缺 …。」最終幸運有在 Appier 找到歸屬，但起出其實也不是做產品就是了…。
2017 ~ 2019 Appier 正職到結束
其實，Appier 有 Frontend Designer 這職缺是運氣好，基本上找到我之後，職缺也關了，隨著制度越來越建立，這世界上可能也不再會有我這種「難搞」的工作角色。因方便管理及我的職涯需求 (當時知道自己可能快被淘汰了，趕緊要求想學技術)，終究隸屬於技術較重的團隊裡；起初如我預期，開始做產品時，依舊有展現降低溝通成本的價值或能基於設計及使用者為本的工程開發，但在嚴格地制度下浮現許多小問題。在跑 Scrum 裡，這樣的角色一半拿開發的票一半拿設計的票其實遇到的不少讓主管難以掌握的課題，展現太多特殊評估（例如 Standup meeting 常會覺得自己設計上的報告是不是跟 PM 單獨報告，由 PM 拿清楚 spec 再去交付給工程師或 Grooming 會議裡面，覺得自己設計的任務溝通起來讓會議時間更長，即便這些問題都有因團隊的成熟及善解人意得到一些方式解決，但類似問題還是一直出現，這方面先不深談)。最後角色上的設定，導致如有分級制度出現，還是會被拷問「你想被分在 Engineer 還是 Designer 的階級制度裡面」，在公司除了專做 MVP 或四處打游擊支援外 team 外，也終究要面對，產品成熟後，我該在哪裡。漸漸地在這制度下，其實越來越向技術靠攏幾乎不太做設計了。
常見問題 Q&A
Q: 在設計與工程師來回交叉的學習及工作，你是怎麼調整的？究竟有助於專心面對工作呢？還是會精神分裂降低效益？
A: 其實以目前客觀環境，可能適合獨立配合不同人作業，隸屬在制式化團隊裡很吃隊友，不小心精神分裂。但如果個性像我一樣喜歡換換心境做事，也不用擔心，非常容易安排出一週適合的時間更專心面對工作，例如我喜歡星期二、星期五寫文件做一些創意的思考及討論，剩下時間較憂鬱等放假的時可以專心面對工程開發。整體而言其實非常有效率，只要能讓團隊成員知道你的工作狀況，在對的時間討論即可。
Q: 當面臨抉擇被公司分在 Engineer 或 Designer 階級制度裡，我的心態是什麼？是如何回應的？
A: 老實說，面對制度我沒太多的考慮，畢竟我知道自己的價值及特別，歸屬在一個能方便公司作業的流程裡對我沒太大影響。願意建議制度的人，也願意照顧你的，所以不用太擔心。而到最後歸屬到 Engneer 裡面並把設計當加分也是單純是後期確實時間花很多在工程開發。
額外可以補充的是，新鮮人跟有幾年工作經驗的人差別只在「知道什麼問題是真正的問題，不是自己的問題」，而在這種時候，你會更放心地提出問題去溝通，自然問題會迎刃而解，至少我目前很幸運沒遇到過不合理的狀況。
Q: 這角色在不同公司有能夠產生更多價值嗎？真的會被迫選邊站嗎？
A: 誠如上述分類所說，多修的價值一定有，尤其是設計跟前端結合價值比其他顯而易見。但確實，兩樣專業都需要足夠時間去專精，我通常是以團隊成員組成去選擇我需要專精的議題，達到「補位」的效果，但就會比較吃隊友，你只要可以知道「更深入」的東西交給專業的誰，你就可以輕易安排好你的技能取向。
Q: 這公司打游擊四處支援 MVP 產品的優缺？對自我發展的好處？
A: 優點是你會認識很多人，看到很多產品 0 到 1，不管在大小公司其實都會有「新產品」團隊；而缺點就是，你沒辦法累積到太多的中後期成長維護，Code 的可維護性、可預知性、可擴展性的能力較不容易累積到，而設計方面的量化分析及優化也不太容易1累積到。
Q: 還有沒有其他可能性？
A: 其實設計+工程不侷限在網站/APP，很多藝術與程式互動、遊戲、AR/VR、動畫、3D 領域都有很多發展且成功的人。（超不負責任回答）
