沒有設計背景都可以做UI 設計？ 三個提升UI 能力的方法！

UI-demo. 找市面上你有興趣的上線產品，嘗試redesign 一整套：優點是可以練習設計系統，缺點是門檻比較高(需同時具備UX 研究、規劃能力)、要產出完整的一套作品花時較 ... UI 沒有設計背景都可以做UI設計？三個提升UI能力的方法！ AppCoda編輯團隊 May21,2018 8分鐘閱讀時間 In:UI 分享 本篇原文（標題：如何提升UI設計能力？實務篇）刊登於女人迷設計實驗室PHDLab，由女人迷網站設計師Merci所著並授權轉載。

此篇文章適合：想轉行做UI設計，但UI經驗少、想累積/提升UI能力的設計師。

如果你已經累積了許多UI實戰經驗，也很歡迎你與我們分享。

會有這篇，是因為有人請教我如何提升UI設計能力。

提問者在學校有一點點使用者研究經驗，想要提升更多UI實戰經驗、累積作品集。

這裏不談UI/UX設計師的職涯發展與工作景況，只聚焦於UI設計。

他的痛點有： 看過網路上的教學文或相關書籍等資源，還是不太知道怎麼下手 不是設計背景，身邊沒有有相關經驗的人可以請教、回饋 因為沒有足夠經驗，目前較難直接進入UIUX職場環境，無法得到職場前輩的回饋 我也不是設計背景，曾經遇到跟他一樣的問題，當時甚至沒有現在這麼豐富的教學資源。

此次梳理我摸索過來的經驗，希望可以幫助一些想提升UI能力、但不知如何起步的設計師。

我的背景 我大學是美術系西畫組背景，就是拿著畫筆畫油畫，畢業展必須要展出油畫作品的藝術系學生。

雖然對於設計有興趣所以旁修設計組的課，但唯一與UI有沾上邊的大概是網頁設計課，不過網頁設計教的是用dreamweaver刻出一個網頁(瞬間暴露年齡)。

現在的環境，免費的UI教學資源真的非常多，也有許多付費教學資源，校園裡也有UI設計課，而我當時是如何從完全不懂設計的藝術系學生，到成為一個UI設計師？ 設計師Anu經驗談說：實際累積作品，沒錯！但要如何提升UI能力，累積好作品呢？ 我的學習方式：研讀吸收、實地練習、回饋分析，不斷循環 我認為要累積好作品，「研讀吸收、實作、回饋分析」這三步缺一不可。

如果你選擇付費課程學習，通常這三個部分都有在課程規劃裡，能夠系統性的循序漸進學習。

若有預算，其實可以投資自己上課。

如果你想自學，以下是我過往的經驗，希望寫得足夠具體，能夠鼓勵一些不知道怎麼進行的人，踏出第一步： 一、研讀吸收：建立專業知識素養 重點在於建立所有跟設計、UI有關的專業知識素養，因應想要增進的UI能力，要看的資源都不同。

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

設計App：googlematerialdesign/iOShumaninterfaceguidelines 設計網頁：RWD(ResponsiveWebDesign)、breakingpoints原則與概念 二、實地練習：從做中學熟悉工具、真正產出 看完下一步，就是捲起袖子實作了。

空有好素養與濃厚知識，做不出好UI的話只是紙上談兵。

這裡也不談各種技術軟體，UI設計可以從學會sketch開始，再搭配學習使用prototype工具。

職場上直接面對案子就是很好的實作，如果沒有機會怎麼辦？就是自己創造囉！ 這裡僅列兩個方向： 依據dailyUI100主題直接跟著每日主題實際刻UI：優點有不用憑空想題目、可以觀摩很多其他設計師的作品、累積多元UI作品，缺點是若每天主題設計單一畫面，較難累積整套系統概念。

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

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

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

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

多方具體對照分析：有兩種方式，第一是「不同版本對照」：例如dailyUI，網路上有很多人一起做同樣主題，做完後，可以與其他人的作品對照，看看與自己的作品有甚麼差異。

第二是「不同人回饋」的對照：請教有經驗設計師的回饋，或是到設計師社群邀請大家提供建議！可以討論的社群有很多，我自己推薦：UIClub(FB社團)、TaiwanUIUXdesigner(FB社團) 進行簡易UX調查，直接找使用者測試回饋：UI設計是引導使用者完成最重要的任務，去看你的設計，是否能讓使用者達成你的預設任務，你就會理解目前UI設計上，哪裡讓使用者困惑，哪裡使用者很清楚。

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

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

從新聞系轉成UIUX設計師的Anu 從行銷轉成UIUX設計師的Daisy 謝謝有耐心看到這裡的你，謝謝想要透過設計讓世界更美好的你。

我們一起努力：） 本篇原文（標題：如何提升UI設計能力？實務篇）刊登於女人迷設計實驗室PHDLab，由女人迷網站設計師Merci所著並授權轉載。

作者簡介：女人迷設計實驗室WomanyPHDLab，我們是打造女人迷產品的設計實驗室，PHD=PeopleHappyDesign！讓我們一起設計讓人快樂的服務和作品，用設計改變世界！女人迷是臺灣第一家以性別觀點為主軸的網路媒體社群，關注女人全方位議題，從職場發展、旅行玩樂、時尚彩妝、生活風格到愛性情慾，堅持走心、給力，連結世界多元觀點！ 作者 AppCoda編輯團隊 此文章為客座或轉載文章，由作者授權刊登，AppCoda編輯團隊編輯。

有關文章詳情，請參考文首或文末的簡介。

查看全部文章 評論 載入評論 精選文章 在SwiftUI使用Markdown輕鬆格式化文本 30Mar2022 透過SwiftPlaygrounds4直接在iPad構建一個文字轉語音App 12Jan2022 在SwiftUI中設置漸變動畫(animatedgradient)的3個方法 29Sep2021 最新文章 在SwiftUI利用LiveTextAPI　從圖片中擷取文本 29Jun2022 善用Swift的嵌套物件功能　編寫出更清晰的程式碼 22Jun2022 WWDC22的重點更新：SwiftUI4.0新功能一覽 14Jun2022 更多來自AppCoda中文版 SwiftUI框架 SwiftUITabView教學：利用PageTabViewStyle建立PagedScrolling視圖 在iOS14中，Apple在SwiftUI框架引入了一個新的樣式：PageTabViewStyle，讓開發者創建頁面滾動(pagedscrolling)界面。

SimonNg Jan20,2021 3分鐘閱讀時間 UI 利用EarlGrey做UITest　強化你的UI測試流程 在軟體的開發過程中，我們一定會需要測試我們做出來的東西是不是運作正常。

以手機開發為例，我們通常都是咻咻咻地寫好一堆程式之後，把它丟到手機或模擬器上面執行，然後東點一點西點一點，看看是不是一切都運作正常。

這樣的流程雖然運作正常，但是卻非常花時間，而且很容易漏掉該測試的項目。

如果要簡化這個流程，你就會需要電腦來幫你做自動化測試(TestAutomation)。

自動化測試有分很多類型，目前大家最常使用的分類法是用MikeCohn所提出來的測試金字塔(Test HuangShihTing Aug12,2020 31分鐘閱讀時間 SwiftUI框架 SwiftUI小技巧：透過PreferenceKey簡單對齊視圖 SwiftUI優點多不勝數，但當中你可能錯過了一個很聰明的工具──Preferences，尤其是PreferenceKey協定。

我會透過一個簡單的例子，向大家介紹如何利用PreferenceKey對齊視圖。

AppCoda編輯團隊 Feb12,2020 5分鐘閱讀時間 很好！你已成功註冊。

歡迎回來！你已成功登入。

你已成功訂閱AppCoda中文版電子報。

你的連結已失效。

成功！請檢查你的電子郵件以獲取用於登入的連結。

好！你的付費資料已更新。

你的付費方式並未更新。