從 9 年設計坑，聊走向 UI/UX 設計師的心法
● work from home ＆ work at home
2020 年的動盪與不安，是否有為你的生活帶來不同的改變？到了 2021 年，朋友間的話題難免帶到交流「work from home」調整前後的心得，像是：學了哪些新的協作工具、工作時間怎麼調配…等等。
而有一圈朋友並沒有太大的不同，因為他們一直以來都是持續穩定「work at home」的自由工作者，比如說：跨國專案經理、接案設計師、接案行銷、編輯、自媒體經營者…等。
實際上，我花了將近 9 年來學習和實踐用戶界面設計、主導數位產品專案規劃相關的事兒，因此我想我對這個行業也算是有些許的了解。也曾經有一段時間是 work at home 的接案自由工作者，多少遇到想轉職來從事 UI/UX 設計的朋友會問起「該怎麼跨入這個領域，甚至期待可以走向 work at home 的狀態」。
外在的喧囂，再也掩蓋不了你內心想全速前進的引擎聲？
不能否定的，遠端工作、一人公司的議題儼然成為新時代的工作模式，但是，成為「UI/UX 設計師」是不是真的需要學位、證書呢？還是應該要入學相關科系才可以學到東西並運用於職場？也想跟我走同樣路線的人，我可以提供什麼建議？
▍本篇目錄
一. 我是怎麼開始的？
二. 成為設計師前，釐清學習的衝刺方向
三. APP UI/UX 設計師該遵循哪些應用設計系統？
四. 3 步驟：動手做→平台交流→統整作品
五. 工欲善其事，必先利其器，現在就出發
六. 開始關注設計與邏輯思維力的 6 個方向
七. 結論
一、我是怎麼開始的？
總有些老友、總有些故事，會烙在我心底（笑）
這個問題讓我回想起剛畢業的我，真的有非常多想做的事情，曾經執意想走節目企劃，也曾經想當設計人…後來，相信命運總有安排的我，因為第一份工作的錄取，進到電子商務產業負責網頁設計的角色而開啟了這道門 ( 那是一個電子商務產業發展蓬勃且深具潛力的時期 )。
把時間再拉回去一點點，也就是在走進這道門之前，我還只是個剛從大學獲得資訊傳播學位，必修課有印刷設計學程、攝影、計算機程式、3D 設計…都有接觸，而一起畢業的同學大多從事攝影、影片製作、平面設計、商業設計、行銷傳播…，但是，對於剛走在「網頁設計」這條路上的我，對於「設計實作」卻上不了手，用一無所知來形容並不誇張。直到後來，我有了深刻的體悟，其實學校並不會教我們「實用的設計」，甚至僅傳授「理論知識」，即便有 Adobe Suite 等設計工具的使用，但是，與現實狀態是有差距的，還真的是不夠。
做中學，透過獨自實踐與實務累積，是唯一可以讓你成為更好的 UI/UX產品設計師 的方式
我從一個僅能畫視覺，連改 HTML 文字、換 HTML 圖片都戰戰競競，到後來可以獨立完成一個網站的架設，從規劃→視覺設計→切版（HTML），然後到 APP UI/UX 產品設計、數位專案產品規劃與管理。（那時的國內幾乎沒有聽到 UI/UX 這樣的職務別稱，甚至在求職網站上也很少被使用，我想這也代表著在數位圈子內移動，需要不斷的讓自己與時代接軌。）
我只是想簡要、快速的表達，我與許多人一樣，起跑點的開端並沒有 WEB 和 APP 的設計經驗，甚至在畢業後，由於 iPhone 4 的出現，才慢慢的接觸到 APP 相關知識。我認為我唯一的優勢是我或多或少了解 Adobe Photoshop、Adobe Illustrator，即便最初的狀態並沒有合適的作品集，但是經過一段時間的準備，我錄取了在電商的第一份設計工作，然後是另一份工作，然後是下一份工作…。
二、成為設計師前，釐清學習的衝刺方向：
世界之大，這麼多條路，這麼多個遠方，茫茫職海中，我該怎麼尋找目標？
有朋友說起自己對用色敏銳，喜歡畫畫 icon、插圖，不喜歡碰數字，對研究上不了心，也不呷意做測試；另一派則是超愛分析邏輯過程，對提手畫視覺一事了無新意。如果捉不到該朝什麼方向準備，說不定可以參考以下方向來梳理目標：
- 我喜歡畫視覺、畫 icon、我看到手機、電腦的狀態列上的圖標就超有感的，然後我還可以／我想動手畫出我自己喜歡的樣式？
— — 如果答案是肯定的，那麼你可以試試看往 UI 視覺設計師 衝刺。 - 我喜歡思考產品怎麼與使用者互動，我連搭車、買東西、瀏覽頁面都喜歡研究動線，我想鑽進用戶腦子做研究，我想擬定測試、看數字分析來了解使用者的情感體驗。
— — 如果答案是肯定的，那麼你可以試試看往 UX 用戶體驗設計師 衝刺。 - 如果你同時對第一點及第二點有感，甚至想更深入的了解產品。
— — 如果答案是肯定的，那麼你可以試試看往向 UI/UX 產品設計師 衝刺。 - 儘管 UI/UX設計 在台灣多數的職缺需求上是並行的，但是，他們的概念和執行上並不相同，若是要將 UX 用戶體驗設計師 做比喻，他好比是建築師，負責結構跟建築藍圖，類似於「線框 wirefram」，而 UI 視覺設計師 相對的就像室內設計師，需要為建築裡面來構思壁紙樣式、粉刷色系和家具風格（像是配色和字體…等），這兩個必須緊密配合才能打造出功能良好而且美觀的產品。
聊聊最常受關注的類型 — — 界面和體驗的結合：UI/UX 產品設計師
三、APP UI/UX 設計師該遵循哪些應用設計系統？
APP 目前主要有兩大設計系統：
根據 Statcounter 的統計數據，在 2020 年 Q4，Android 系統 和 iOS 系統 約佔全球智慧手機市場的 99％。
關於兩大設計系統都有針對 APP 在操作動線、視覺設計上定義準則，包含 Navigation、layout grid、headers、bottom sheets、cards…等元素的原理和模式，遵循設計系統來規劃，可以讓你的產品在使用經驗上更加順暢，通常 UI 視覺設計師、UX 用戶體驗設計師 普遍也會需要因應品牌、雇主、產品功能…做調整，甚至針對某些狀態、流程進行客製，不過，遵循這些應用設計系統的規範可以讓整個團隊的進行更順暢，對於你的產品使用者來說也能加快理解、上手並且符合普世的價值觀。
可以參考兩大設計系統的官方文件：
( 一. ) iOS 應用設計系統規範 Human Interface Guidelines
( 二. ) Android 應用設計系統規範 MATERIAL DESIGN
四、3 步驟：動手做→平台交流→統整作品
- Daily UI
- Daily Photoshop Tutorials
- Adobe Creative Challenge-xd
- Adobe Creative Challenge-Photoshop
- Daily UX Challenge
- dailyuxwriting
- 平台交流
- 匯整成自己的作品集
執行力是成功的關鍵之一，打開行事曆動手開始安排作業實作吧！像是擇一選擇 Daily UI、Daily Photoshop Tutorials、Adobe Creative Challenge-xd 或 Adobe Creative Challenge-Photoshop 其中一個平台開始練習。
想特別提醒，帶著作品做為面試資料時，遍普多數的面試官都會期待聽到「屬於你個人的聲音」，因此，著重 UI 視覺設計 的練習外，我蠻建議在視覺裡納入如何用自己的角度來完成作品的想法，像是以文字說明規劃的邏輯、研究方法和步驟…等的 UX 用戶體驗 的思維，甚至在繪製色稿前，也做 線框 wirefram 規劃、手繪草圖、色彩計劃、字體搭配…等的描敘。
在網路興盛的現代，找到集結各路 UI 或 UX 專業的相關社群不再是難事，透過在上面發表作品，並且收集各種意見與之交流也是快速學習的好捷徑。
若是想做純 UX 用戶體驗設計師 的練習挑戰，我蠻推 Daily UX Challenge、dailyuxwriting 這兩個平台。
五、工欲善其事，必先利其器，現在就出發
工具也是一種共通的語言
- UI 視覺設計師：
我的經驗是，你可以挑一個你順手的，或是方便協作的工具開始，也可以參考 uxtools 的 設計工具統計，據統計顯示，目前使用 Figma 的人數是最多的，其次分別由 Sketch 及 Adobe XD 拿下，再來是 Adobe Illustrator。這 4 款我都有用過，初入門的朋友，可以先以人數較多的 Figma 開始。 - UX 用戶體驗設計師：
我覺得 UX 用戶體驗設計師 的使用工具還真的蠻多元的，雖然不如 UI 視覺設計強調可視化。像我老闆的風格是喜歡在會議的當下希望我能邊提初略的想法的模式，我認真覺得紙跟筆、白板還蠻便利、即時的，不過數位工具在與團隊或客戶分享、網路協作上會更有優勢，像是畫面中重覆的 icon 就可以套用現成的，經由拖拉也有便利、即時的效果，像是我們熟知的 Microsoft Word 也辦得到，我自己是蠻愛用 balsamiq、Axure，balsamiq 的風格就像是把「手繪帶到數位」上，所以不會讓我的偏執症發作，甚至快速的就能拉好想要的線稿，加上帶有童趣的質感，還能降低與客戶做討論時，對產品有了想像的落差。再來也可以參考 uxtools 的統計，顯示使用 Figma 做 User Flows設計工具統計 的人數最多，其次是 miro 及 Sketch，再來是 whimsical。以上的工具除了 whimsical 我還沒有機會使用過，其他也都是蠻好上手的工具。
六、開始關注設計與邏輯思維力的 6 個方向
熟讀設計原理是件好事，卻覺得還少了點什麼～其實，除了固定每天瀏覽設計相關的新知，還必須訓練自己的眼睛，辨別優秀的產品，並試著理解產品在不同使用面相上的優缺點與細節的處理方式。
( 1. ) Muzli
為了讓我自己可以輕鬆接收到設計產品的新知，我目前是把每天必開的 Google Chrome 首頁設成 Muzli 所製作的背景插件，每天打開就會像下面這樣丟給我來自世界各地的專家設計觀點、資訊文章、產品規劃理念…等訊息。
( 2. ) Feedly
透過訂閱 RSS ( 什麼是 RSS？ ) 也是不錯的方式。我自己是用 Feedly，然後在 Google Chrome 加裝擴充套件就能利用右上角 icon 直接點擊瀏覽。
( 3. ) dribbble 集結設計師作品的網站
( 4. ) Behance 集結設計師作品的網站
( 5. ) Awwwards 定期網羅優秀的網站設計案例
( 6. ) pttrns APP 裝置的各種設計統整
勇敢並行動手開始！不要停滯不前，朝著目標前進！祝福有志者、事竟成。
謝謝你讀完這篇文章，你可以透過回饋讓我知道你的閱讀感受，這也將會成為我在建構知識體系上的參考哦〜「1下」拍手：既然看到這邊了，就簽到吧。
「2-5下」拍手：你表示喜歡這篇文章〜
「5-15下」拍手：在期待未來看到我能寫更多這類主題的文章
「15-50下」拍手：看你很想湊滿50下，那就順著你的心去做吧！
