商學院轉職UI設計—自學方式分享
此篇撰寫於 2018 年，最新編輯於 2020 年。
嗨，我是Lena，當初決定踏入UI設計領域時在網路上得到了非常多的資訊和前輩們分享的心得，於是我也決定將自學的這段經歷分享上來，希望能幫助到當初和我一樣迷茫、想自學卻不知從何開始的人。
先介紹我的背景：
國立科大商科畢業，大學時沒碰過繪圖軟體、沒有相關作品，設計相關經歷是0，雖然從小就有興趣但仍沒有一項拿得出手的技能。
當時看到很多都是設計背景、頂尖四大，或是在學期間就有相關作品的前輩分享，不禁覺得自己沒有什麼優勢（含淚）。
我參考許多入門心得文之後，大致理出了自己的學習地圖，以下分成不同要點分享，文末會放上我讀過的幾篇入門文章。
一、學習準備
關於設計與UI
如果你和我一樣不具設計背景，先簡單了解設計的發展史。設計是什麼，設計的目的呢？有哪些類型呢？接著了解什麼是UI，和一般人常聽到的平面視覺設計差別在哪？交互設計又是什麼？UI設計師的工作內容通常是哪些？工作流程呢？（不過有些公司分工不會很細就是了）
首先了解自己做的這件事情是什麼。
Guideline
很重要的Guideline，雖然有翻譯版但我是讀原文（直接從官網取得也方便），比較貼近原意想表達的。看完一次後，實作時邊做邊查，也容易記得起一些基本的了（元素尺寸等等）。
iOS Guideline該怎麼看？ — — Akane Lee
二、應用實作
設計原則
由於我沒有任何設計基礎，所以從設計四大原則、版面、色彩、字體等等基本知識與應用開始了解，網路上有非常多文章、市面上也有很多書可以參考。
軟體應用
掌握基本軟體：PS、AI，有Mac的用Sketch，沒有的可以用XD，動效部分可以使用AE（這可以擺後面一點學）。可以先找基礎入門課了解大致功能，多練習幾次就慢慢上手了。當初急著想學很多軟體（好像設計就是會很多軟體），後來才了解軟體是工具，更重要的是思考模式。
臨摹學習
一步一步來的臨摹教程，是幫助我快速上手軟體的方法，但這不是長久之計。軟體熟悉後可以開始到各大作品網站觀察大神們的作品，色彩、構圖、光影、交互等等，試著拆解所有的細節、如何做出來的、思考為什麼要這麼設計。下面附上幾個知名的作品網站：
還需要了解如何能平衡理想與現實、減少與工程師間的溝通阻礙：
視覺設計師是怎樣讓前端工程師100%實現設計效果的？（知乎）
解析度與螢幕尺寸
了解什麼是DPI與PPI，還有DP、PT、SP之間的關係。Android和iOS系統分別要以哪種尺寸來做設計呢？（這個每個人的做法都不太一樣，建議多爬文會有自己的思路）
命名、標註與切圖
雖然命名沒有一定的標準，多是以各團隊為主。不過比起內建的Oral、Oral2，經過命名整理後的圖層與切圖會整齊許多，自己修改內容、工程師開發時也能輕鬆找到對應的元件。標註的部分除了軟體插件，還有團隊協作用的Zeplin，在標註與切圖上能夠省下不少時間，被邀請的團隊成員也可以在設計稿上留下備註。
Prototype製作
如果想將設計稿做成一個可操作的原型（Prototype），有許多工具可以幫助我們。Prototype可以讓我們更直觀了解介面間的切換、交互效果，就像平常在手機上操作App一樣，在團隊開發過程中也有很大的助益。
另外還有設計前的使用者研究分析、資訊架構等等前置流程和思考，這裡就不多敘述了。
三、閱讀與思考
網路上的資源非常多，除了練習外要大量閱讀文章，設計相關的職涯發展、不同角色間的溝通、前輩經驗、產品研發與優化、使用者研究等等都有，每天吸收一點對自己有幫助之外，也能慢慢篩選出一些好文。同時也盡可能看看不同領域的文章、思考不同的觀點，認識這個世界。
這好像比較抽象一點，大概是讓自己不斷吸收新知、訓練思考，需要長時間累積（我也還在努力中）。
關於課程
PTT上有滿多人問到入門課程選擇的問題，以我經驗分享，我自己用的平台是Udemy，很常促銷也有許多免費的課程，但幾乎都是英文的。
對於害怕英文或想上中文的人可以上Hahow，目前有觀摩幾堂課，但當初入門的時候沒有上過。另外中國也有很多成套課程，強調終身幫你解決所有問題，但大概要台幣一萬元以上，對於有經濟考量的人可能不是首選。
我當初挑選的是一系列的課：從基本知識簡介到教你實作出一個頁面，甚至有教到Code與網頁設計部分（皮毛）。其實Hahow的課程也多是這種的，老師還能幫你批改作業、回答問題等等。我覺得這類課程的好處是：短時間內能產出一個介面，讓你成就感滿分，然後有動力繼續學下去（OK我自己屬於需要成就感滿足那型）。而日後更進階的課，再依自己需求去挑選（我也好多口袋名單呀）。
但僅僅上完入門課程不代表什麼保證，還是得花時間去吸收更多的知識、做更多的練習，盡量不要讓自己養成被動取得資訊的習慣。
資源網站
放上幾個多方面資源的學習網站和我私心的Blog給大家參考，也推薦大家可以加入FB社團與同行前輩交流和分享資訊哦。
優設：大量文章，還有很多免費的線上課程、軟體基礎入門，不過比較完整的都是付費的。
站酷：有中國許多大神發表的好文、教學與作品，可以追蹤喜歡的大神。
學UI網：也是中國的，有付費課程和許多短篇教程。
Akane Lee：當初把大神UI/UX相關的文章都翻完了，也有推薦書單。希望之後有幸能上到大神的課:)
As A Product Designer：在這裡可以看到很多分享，也發現了很多值得Follow的前輩，而且都是中文！
入門文章
從零基礎如何自學UI設計（知乎）
除了上面提到的之外，還有很多技能都值得學習，比如入門文章連結裡提到的手繪、網頁設計html/CSS/Javascript等等（寫不完拉），都能在這條路上分別幫助我們不同的地方，至於怎麼分配技能點，在學習的過程中再由大家摸索出自己的方向了。
我認為自學最怕的是一直在自己的世界裡，找不到盲點，所以盡可能看看別人的經驗、多問多交流。我想沒有最完美的學習方法，只有最適合自己的，畢竟學習的路是永無止盡的（官腔）。
最後，如果這篇文章有幫助到你，別忘了幫我分享給更多人，或是留言讓我知道。祝大家都能達到自己的目標，也請不吝提出指教，謝謝。
-
2020更新
近年來除了Sketch外，也有許多UI設計軟體興起，Figma莫過於2020年最熱門的軟體了！而透過Figma，能夠取代過去Sketch+Zeplin的組合，只需要在Figma上即可讓工程師夥伴直接下載需要的素材切圖（當然設計師還是需要清楚的標示）。
而在多位設計師的團隊協作、與其他部門的團隊溝通上，個人也覺得Figma是最為方便的選擇。
Figma本身透過瀏覽器即可使用，不需要再下載軟體、更新。也解決了部分設計師沒有Mac系統的困擾。
在此推薦給想要入門的讀者們！
你可能也想看
