好文分享：3個方法紮實提升你的UI設計能力

berylgobby

文、Merci Kuo



原文網址




此篇文章適合：想轉行做 UI 設計，UI 經驗少、想累積/提升 UI 能力的設計師。如果你已經累積許多 UI 實戰經驗，也很歡迎整理分享你的經驗。

會有這篇，是因為有人請教我如何提升 UI 設計能力。提問者在學校有一點點使用者研究經驗，想要提升更多 UI 實戰經驗、累積作品集。這裏不談 UI/UX 設計師的職涯發展與工作景況，只聚焦於 UI 設計。

他的痛點有：
• 看過網路上的教學文或相關書籍等資源，還是不太知道怎麼下手
• 不是設計背景，身旁沒有相關經驗的人可以請教、回饋
• 因為沒有足夠經驗，目前較難直接進入 UIUX 職場環境獲得工作，得到職場前輩的回饋

我也不是設計背景，跟他曾經遇到一樣的問題，當時甚至沒有現在這麼豐富的教學資源。此次梳理我摸索過來的經驗，希望可以幫助一些想提升 UI 能力但不知如何起步的設計師們。


我的背景
我大學是美術系西畫組背景，就是拿著畫筆畫油畫，畢業展必須要展出油畫作品的藝術系學生。雖然對於設計有興趣所以旁修設計組的課，唯一與 UI 有沾上邊的大概是網頁設計課，不過網頁設計教的是用 dreamweaver 刻出一個網頁（瞬間暴露年齡）。

（會畫畫，不等於會設計呀孩子）

► 推薦課程：Illustrator向量繪圖、Photoshop影像處理

---

現在的環境，免費的 UI 教學資源真的非常多，也有許多付費教學資源，校園裡也有 UI 設計課，而我當時是如何從完全不懂設計的藝術系學生，到成為一個 UI 設計師？

設計師 Anu 經驗談說：實際累積作品，沒錯！但要如何提升 UI 能力，累積好作品呢？


我的學習方式：研讀吸收、實地練習、回饋分析，不斷循環

我認為要累積好作品，「研讀吸收、實作、回饋分析」這三步缺一不可。

如果你選擇付費課程學習，通常這三個部分都有在課程規劃裡，能夠系統性的循序漸進學習，若有預算，其實可以投資自己上課。

如果你想自學，以下是我過往的經驗，希望寫得足夠具體，能夠鼓勵一些不知道怎麼進行的人，踏出第一步：


一、研讀吸收：建立專業知識素養

重點在於建立所有跟設計、UI 有關的專業知識素養，因應想要增進的 UI 能力，你要看的不同。

因爲網路上有很多人整理資源了，我推薦這一篇「如何成為一個 UI Designer？」，裡面真的是超級精華！但如果你問 App/Web UI 設計的基本，進入實作前，建議下列名詞與原則一定要理解透徹。

設計 App： google material design/iOS human interface guidelines
設計網頁：RWD （Responsive Web Design）、breaking points 原則與概念


二、實地練習：從做中學熟悉工具、真正產出

看完下一步，就是捲起袖子實作了。空有好素養與濃厚知識，做不出好 UI 只是紙上談兵。這裡也不談各種技術軟體，UI 設計可以從學會sketch開始，再搭配學習使用 prototype 工具。

職場上直接面對的案子就是很好的實作，如果沒有機會怎麼辦？就是自己創造囉！

這裡僅列兩個方向：

1. 依據 daily UI 100 主題直接跟著每日主題實際刻 UI：優點有不用憑空想題目、可以觀摩很多其他設計師的作品、累積多元 UI 作品，缺點是若每天主題設計單一畫面，較難累積整套系統概念。

我雖然只做了兩天（捂臉），但是嘗試自己沒設計過的介面，也有收穫！

2. 找市面上你有興趣的上線產品，嘗試 redesign 一整套：優點是可以練習設計系統，缺點是門檻比較高（需同時具備 UX 研究、規劃能力）、要產出完整的一套作品花時較長。

如果以上兩個方向，對某些人來說仍然困難（打開 sketch 來腦袋就是一片空白），那麼就從「模仿」開始！模仿不是為了抄襲，而是在學習過程中觀察好的 UI 設計案例、拆解它的規則：哪裡好、為什麼好，吸收成為自己的基本專業素養，先有基本框架，你未來才有可能打破他。


三、回饋分析：思考可以如何更好？
實作完有產出還沒結束，若想成長、突破盲點，就要分析你的產出「哪裡好，哪裡可以更好」。

怎麼分析呢？

1. 從專業設計知識去分析：例如易讀性、易辨性、UI 上建議最小的按鈕大小等經驗法則，就會牽涉到 UI 排版上的字體大小、顏色使用等等，當你了解越多你就有辦法分析一個 UI 作品的好與不好。

2. 多方具體對照分析：有兩種方式， 第一是「不同版本對照」：例如 daily UI，網路上有很多人一起做同樣主題，做完後，可以與其他人的作品對照，去放在一起對照自己的作品差異 。第二是「不同人回饋」的對照：請教有經驗設計師的回饋，或是到設計師社群邀請大家提供建議！可以討論的社群有很多，我自己推薦： UI Club(FB 社團)、Taiwan UIUX designer (FB 社團)

3. 進行簡易 UX 調查，直接找使用者測試回饋：UI 設計是引導使用者完成最重要的任務，去看你的設計，是否能讓使用者達成你預設任務，你就會理解目前的 UI 設計上，哪裡讓使用者困惑，哪裡使用者很清楚。

---

以上是個不間斷的循環，不只是我個人，也是女人迷設計實驗室 phd lab 會運用到的學習方式，設計師們持續研讀分享不同的知識、工作產出後邀請不同的設計師彼此回饋，做中學、學中覺，幫助彼此更好。

最後，女人迷目前的設計師剛好也全都不是設計背景呢！因為我們有不同的成長背景，學習成為設計師的心路歷程與學習路徑不完全相同（當然有些也有異曲同工之妙），歡迎你多方閱讀，最後找到最適合你的方法。
♦ 從新聞系轉成 UIUX 設計師的 Anu
♦ 從行銷轉成 UIUX 設計師的 Daisy

謝謝有耐心看到這裡的你，謝謝想要透過設計讓世界更美好的你。
我們一起努力：）

文章轉載自「女人迷設計實驗室 phd lab」，已取得作者授權同意，原文為：如何提升 UI 設計能力？實務篇​​​，作者為女人迷網站設計師 Merci Kuo

官方網站：http://www.lccnet.com.tw
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w