系統化自學 UI UX 五步驟 | 零基礎半年內轉職 UI UX 設計師(下)

3. 打好地基 4. 實做作品集 5. 持續學習

UX Stone
AAPD — As A Product Designer
19 min readJul 7, 2019

--

在上一篇文章,我們確立了自己的目標,並且列出了為了達成這個目標所需要的技能體系,接下來到了第三步...

第三步:打好地基,找出最關鍵的能力是哪些,快速建立起來

畫完自己的技能樹之後,要先學什麼?怎麼開始呢?這是很多人的問題。我認為可以從 「最少必要知識 」 開始。

學習「最少必要知識」就夠了!

得到專欄作家李笑來說:「快速成功不可能,但是快速入門不僅有可能,還絕對必要!」他提出 「 最少必要知識 」 的概念:任何領域都可以在很短的時間內學習最少必要知識,學會後就可以超過90%的普通人,在UX領域中或許沒那麼誇張,不過一定也有所謂的比較重要、應該優先學的知識。

這個階段的重點就是:

理論不用學得多完整,在最短的時間內掌握基本知識就好,然後盡快地跳到第四步驟(實作)

那想要勝任 UI/UX 設計師工作的最少必要知識是什麼呢?我們在上一階段的技能樹列出了十大硬實力和三大軟實力,而硬實力當中的前五個就是最少必要知識:理解 UX、設計原則、設計流程、設計工具、視覺設計。

UI/UX 設計師技能地圖/技能樹

以下是這五個最少必要知識的推薦學習資源與學習方式,我花費大量時間研究各種 UX 的學習資源,而以下這些是我從無數篇個文章、書籍、課程中精選我認為最適合初學者的。

一、理解UX:

理解 UX 看似簡單,其實很多人都沒有真的透徹的了解。

你如果去 Google 關鍵字「UIUX」,會出現很多文章跟你解釋「 UI 和 UX 的差別」關於那些文章,我認為不僅解釋模糊,觀念有誤,重點是並沒有透徹解釋到 UX 的內涵。

那要怎麼樣才能透徹的理解 UX 的概念呢?

我認為了解「UX 誕生的脈絡」才是關鍵

其實不只是 UX 這個詞,我建議當你學習到每一個新概念或新詞彙時,都要養成一個思考習慣:這個新概念會誕生一定是有原因的,他是在什麼時空背景下誕生的?為什麼業界突然開是重視 UX?是因為 UX 有什麼樣的價值?要解決什麼樣的問題?了解這些問題,才能透徹了解一個新概念,而不是單純片面的了解「詞彙的定義」比如 UI 是什麼?UX 是什麼?。

要徹底理解一件事情,才能把這件事做好。

關於「UX 誕生的脈絡」,強烈建議一定要讀完這三篇文章:

  1. 給UX學習者的入門指南(上) -UX的起源
  2. 給UX學習者的入門指南(中) — 了解UX與UCD
  3. 給UX學習者的入門指南(下) — UX所涵蓋的領域

除了上面的文章,對於初學者剛開始自學 UX,我最推薦以下兩本書:

  1. 破繭成蝶 : 用戶體驗設計師的成長之路, 2/e
  2. 設計心理學

二、視覺設計:

由於目前工作最常接觸的,可能還是屬 web/app 相關產品最多,雖然不用練到像專業視覺設計師一樣的程度,但是還是要了解基礎的視覺設計,像是基礎的排版、色彩、字體…等等。

推薦入門資源:

  1. 這樣O 那樣X 馬上學會好設計
  2. 寫給大家看的設計書

練習方式:

  1. 多多觀看「美的事物」、「美的介面」來洗眼睛 → 認真觀察與思考這些東西為什麼會讓你覺得美?(配色、排版、間距…) → 臨摹這些介面

三、設計原則:

設計原則是由前人經過無數經驗累積所得出來的規範,簡單來說就是設計時該做什麼、不該做什麼?按照這些原則設計,能確保你的產品的易用性有一定水準,也可避開很多常見的錯誤。

像是我們最常聽到的十大易用性原則、Human Interface Guidelines (iOS 規範)、Material Design (Android 規範)…等等都屬於設計原則。

而熟讀這些設計原則,可以說是 CP 值超高的一件事,為什麼呢?以APP設計為例,任何人只要有遵循 Android、iOS 兩大設計規範,設計出來的產品易用性就有六、七十分起跳,不會差到哪裡去。花少少的時間學習之後,就能設計出具備一定水準的作品,所以非常適合初學者投資時間在這上面。

推薦入門資源:

  1. 十大易用性原則
  2. 設計心理學(第二、三、四章)
  3. Human Interface Guidelines
  4. Material Design
  5. 資訊架構學

四、設計流程:

設計流程講白話就像是「食譜」,告訴你第一步要做什麼、第二步要做什麼…,這樣做才能成功做出這道料理。

那為什麼要有這些流程?目的就是要解決我們在打造產品中遇到的各式問題,比如說:流程能幫助我們更高效地找出用戶的需求、制定更合適的解決方案、避免後期改來改去的機率…等等。

而在眾多設計流程中,Design Thinking (設計思考)是必學的一種流程,你會發現:千千萬萬的流程中,骨子裡幾乎都離不開「設計思考」的精神。

設計流程並不是一個線性的流程,而是很有可能來來回回修改。圖片出處:https://www.itagroup.com/insights/customer-engagement/design-thinking-empathy-agility-iteration

我想藉由上面這張圖調設計流程兩個最重要的觀念:「彈性」與「迭代」

彈性:沒有最完美的流程,或是「一定要這樣做」的步驟,全部都是看情況來做調整。就像是世界上絕對沒有「最完美的食譜」,因為每個人的口味都不一樣,要看吃的人是誰?以及你手邊有什麼食材,來決定這道料理怎麼做。

迭代:設計永遠沒有「完美」的一天,你所要做的就是設計、拿給使用者使用、從他們的反饋學習、然後優化與修改設計,不斷重複這個循環,就像上圖的箭頭永遠沒有結束點。這個循環重複的越多次,你的設計品質就會越好,所以做出好設計的秘訣就是盡可能重複這個循環多次。沒有做迭代,就沒有資格自稱在做 UX。

為了正確學習設計流程以及保持「彈性」與「迭代」,以下是我最推薦的自學文章與影片:

  1. What Is Design Thinking? An Overview (By AJ&Smart):最簡單清楚介紹 Design Thinking 是什麼的影片
  2. Design Thinking 101(By NNG):最簡單清楚介紹 Design Thinking 是什麼的文章
  3. How UX Professionals Define Design Thinking in Practice (By NNG): Design Thinking 如何真正應用在實際的工作中,工作者是如何看待 Design Thinking? 這個影片如果覺得英文太難可以開簡中字幕
  4. UX Design 初學者學習手冊:日本人寫的書通常不會有太多廢話,可以把一件事情講得清楚又具備實操性
  5. UI 設計流程 (By Akane Lee)

五、設計工具:

會工具或軟體是必備的,但一開始時先熟悉業界最常見的 Figma 我認為就夠了,之後如果專案有需要再去學別的。

推薦入門資源與自學方式:

  1. 產品設計實戰:用 Figma 打造絕佳 UI/UX
  2. Figma 官方 Youtube 頻道
  3. 了解基本操作後,用 Figma 臨摹喜歡的產品介面

至於剩下的五個,一樣是礙於篇幅,下篇文章再說吧~

為什麼以上都是在講硬實力,而沒有提到軟實力的部分呢?因為在這個階段我們的目的是:快速上手,然後快速跳到下一步驟(做中學)!硬實力比較能夠在短時間內培養,了解基礎之後,就可以馬上跳下一步驟來實做了,但是軟實力需要長期培養,難以短期見效,而且就算要培養,在工作/專案中磨練是最快的,詳情我們會在下一面會提到。

講完要先學的東西(What)之後,接下來來聊聊該怎麼學(How),以下是我在自學時的感悟和幾個小建議:

一:我不建議新手從「閱讀網路文章」開始自學

為何不建議新手從「閱讀網路文章」開始自學呢?因為網路文章是屬於碎片化的知識,而我認為應該要先建構「系統化知識」,再填補「碎片化知識」。

相信很多自學者都是從閱讀網路上的文章或乾貨開始的吧?我也是如此,但是一段時間後,我發現好像並沒有辦法把看過的東西有效記住、變成自己的知識,學起來也很虛、很分散,這是什麼情況呢?那因為大部分的網路文章其實是屬於碎片化的知識。

碎片化知識不大適合新手,因為這個時期,我們的知識基礎還不夠, 這就像是你一直撿破碎的拼圖,卻不知道要怎麼拚?拚在哪? 因為你根本就不知道拼圖拚完是什麼樣子。

但是對於一個已有系統化知識的人來說,碎片化知識就很有效果了,因為他清楚知道整個拼圖長怎樣, 所以每撿到一塊破碎的拼圖都能確實填補缺口,讓自己的拚圖更加的完整。

假如缺乏系統化的知識,那就沒有足夠的知識能與之連結。反之,假如已建立好系統化的知識,那破碎化知識就能與之連結,可以讓我們的"拼圖"更加完備。

結論就是,並不是說破碎化知識不好,而是要先有厚實的「底層知識」,再吸收破碎化知識,那才真正會對我們產生幫助。

詳細的介紹可以閱讀這篇文章,為什麼碎片化學習對你沒效? 非常推薦!

重點來了,那要如何建構出系統化的知識?

書籍是我們好的夥伴!書籍和網路的資源的嚴謹性是差非常多。真正好的書,每個字、每個段落都過精心的編排,前後邏輯嚴謹、由淺入深,不只是講理論,還有推導過程,能夠有效幫助我們了解一個知識體系的全貌是長怎麼樣?這也是為什麼我在上面的入門資源推薦大部分都是書籍。

如果不堅持一定要自學的話,有些線上課程或實體補習班的課綱也是很有系統的,雖然我自己沒上過外面的補習班,但我並不是反對上課,是因為我對於自己該學什麼、怎麼學,都滿清楚的,所以就沒有上課的必要,但如果能花點小錢能讓自己節省時間、少走彎路,還有業界講師可以詢問,那當然也是很不錯的選擇。

2023 更新:雖然在學生時期因為沒有錢所以沒有買課,但出社會開始領薪水後我開始大量買課,因為這個時期,時間的重要性已經大於金錢,我會挑選優質的課程為我節省大量學習摸索的時間。以下是我精選的課程:

二:是不是要學很多繪圖軟體呢?

這是很多人會問的問題。我分享一下自己的故事:想當初大學時期,我也非常喜歡鑽研「工具」,像是Office系列(Word、Excle、PPT)、或是Adobe家族(AI、PS、ID)等等,我也會去報名學校的證照課,然後瘋狂練習題目,當時真的把PS/AI練得很熟,最後還考到很多張不同軟體的證照,我當時覺得會這些東西就是代表「會設計」、好找工作,但事實完全不是這樣,那些證照的對於我後來求職其實沒什麼幫助,為什麼呢?原因有三:

  1. 熟練工具不代表能做出好設計
    道理很簡單,一個武功很弱的人即使拿著屠龍刀/倚天劍,也打不過武功高強但空手的人。如同會操作 Excel 不表就會統計分析、會操作 Word 不代表就能寫出優美的文章、會操作 PPT 不代表能做出有說服力的簡報…。優先專注在培養背後的核心思維,使用工具才能發揮價值。工具永遠都只是”手段”,真正的設計師,哪怕只是一張紙、一枝筆,也能產出偉大的設計。
  2. 工具是必要,但不是最重要的
    大家可能都聽過這句話:真正的UX設計師其實只有20%的時間是在用工具畫圖,剩下80%的時間都是在開會溝通、思考解決方案。所以,一開始只要會 Figma 其實就很足夠了,可視專案需要再去學其他軟體即可,不需要一開始就瘋狂學。
  3. 工具會不斷推陳出新、不斷淘汰,但思考能力永遠不會淘汰
    早期的時候,畫UI是用PS,畫完還需要切圖,輸出成工程師要的格式,相當搞剛,但現在,Figma/Sketch/XD 就是專門 for UI,再加上數不清的方便外掛、更種好用的小工具,這在過去都是看不到的。我想未來的工具/軟體或許會越來越簡單、方便、易學,讓我們能不被工具綁住,更專注在「策略思考」上面。

第四步:實做練習,找份工作或專案做中學,然後製作成作品集

學習UX,「做中學」絕對是必要且關鍵的。UX非常強調把手弄髒,別的領域或許會重視理論,但設計絕對是重視實作大於理論的。而且,我們大可在還沒有很厲害的時候就開始嘗試實作。

實作的方式有很多:實習/工作、接案、side project(個人或團體)、參加比賽、學校專題、Daily UI…。

那最好的實作練習是哪一種?實作練習時又應該注意什麼?

有上述這麼多種實作方式,有沒有哪一種是最棒的呢?

答案當然是:沒有標準答案。不過我個人認為

真正有效的實作練習需要具備兩個元素:

「教練」和「即時反饋」

無論是怎麼樣的實作練習,去公司也好,自己的專案也好,都要把握「教練」和「即時反饋」這兩個重點,這是《刻意練習》這本書中提到的觀念。有了反饋,我們才能知道每一次的做法到底是否恰當、並且修改,反饋越是即時,我們越能多次修正,能力進步的速度也就越快。而教練可能是我們的指導老師、主管、Mentor…,但相信很多人的環境是沒有這樣的老師的,這個時候,就是把「能夠給我們反饋的人」都當作是我們的教練!

所以我個人最推薦實際去一間公司實習/工作,因為公司的環境剛好符合上述的兩個條件,在公司裡,同時有很多教練和很多反饋:無論是來自於外部(市場、客戶、用戶)或是內部(同事、主管、老闆),再者,比起只是單純發想或沒有落地的練習,實際去參與企業專案流程,解決真實的問題,能夠真正面對到成本和專案環境的限制,在設計方案的同時還要考慮到商業層面。有些時候,如何克服這些限制和商業問題,才是體現設計師價值的重要關鍵。

其次才是自己做專案,像是學生時期的專題、自發性的 side project 等等, side project 的話也是建議真的做出來,或是上架之類的,因為真的做出來,所面臨到的問題才是最真實的、也最有挑戰性,能夠讓我們學到更多東西。另外,如果是自己練習,就要主動去找反饋了,可能是用戶或是專家訪談之類的,哪怕是周遭的親朋好友、家人,也都是反饋的來源,有絕對比沒有好。

如果我的目的是求職,希望能在最短的時間內找到工作,該做些什麼呢?

求職的話,我覺得作品集就是一切。在設計領域,作品集會比學歷、經歷還要加更重要,這是因為我們的所有能力,幾乎都可以體現在作品集上。

看學歷、看證照、看上了什麼課、補過什麼習、看待了什麼公司...,這些指標可能都無法很清楚的看出一個人的設計能力,但是一翻開作品集,每個作品集的「使用者體驗」差距就明顯很多,所以如果以求職為目標的話,我認為最快的方式可能就做一個專案,並建立成作品集。專案不需多,其實只要一個完整的專案經驗就夠了,要具備研究、設計、驗證三個階段,並且有令人耳目一新的洞見、有根據反饋迭代,具備這些條件,我想這應該就是一個不錯的作品集了。

但就是找不到實習/工作,也沒什麼做專案的機會,該怎麼辦啊… ?

說到這點,我是最有感的…我的故事是這樣:

在大學的時候,我沒學歷、沒經歷,又沒什麼作品,雖然投了很多實習,但根本就拿不到任何一間 Offer,那怎麼辦?我只能先從個人專案開始,觀察生活周遭有什麼問題是尚未解決的,試著用打造一個虛擬產品,來解決這個問題。建議要選自己本身就會接觸到或是「感同身受」的問題,設計起來會更加有感,也比較有說服力。

Daily UI 也是一種方式,但是我建議可以利用這樣的方式來練習

快畢業的那段時間,我參加了一些學生培訓活動,其中會遇到少數和設計有相關的專案,像是與組員一起做周邊小物、作網站之類的,雖然說這根本不是 UX 相關的活動,但只要能套用到 UX 或是設計思維的專案/作業,都是很寶貴的練習機會,甚至是學校上課要做的報告,也能嘗試用UX的方法下去做。找不到實習或接案機會就是這樣,珍惜每一次實作練習的機會。

直到畢業後,我都沒有一個比較完整的設計作品,但我還是不怕死的去找工作了,甚至連面試時面試官給我的作業,我都把它當成難得的練習機會😅。我把它當成是自己的專案在做,而不是把它當「作業」,是真心想解決那個問題,而不是單純為了錄取。最後也做了一份算有點篇幅的報告,一樣放到作品集裡,這個「面試作業」在當時應該是我完整度最高的作品…。後來面試別家公司時,面試官看到也滿驚訝:不過是個面試作業,做的那麼完整幹嘛!?

總結以上,練習的機會其實無處不在,UI/UX 並不是只存在在手機或電腦上,大可放眼任何相關的事物,比如說看到洗衣機或遙控很難用/按鈕很多,那要如何把它變得好用?看到廣告時,可以想怎麼設計會更吸引人?玩桌遊時可以想怎麼設計會更有遊戲性?看到告示牌、導引時,去想怎麼設計動線/位置會更流暢?不管看到什麼,都把它當成 UX 專案來做就對了!

請看以下兩個實際案例:某位業界前輩看到一棟大樓的電梯按鈕設計的不好,鼓勵設計師們來 redesign,下面真的有很多熱心網友留言他們對這個問題的思路甚至手繪解法,很推薦大家去看看留言裡面的「問題拆解思路」!

文章連結:https://www.linkedin.com/feed/update/urn:li:activity:7029171152870633472/

之前很有討論度的「台北捷運中山站」的購票系統新設計,也有熱心的設計師做 redesign,並且貼到社群請大家給予反饋,留言非常踴躍,這也能讓自己學到很多!

文章連結

以上兩個案例都是我們生活中很常見的「問題」,而且也都不是老掉牙的 APP 或 Web,所以你現在應該有感受到,其實解決方案可以很多元,不一定要侷限在裝置。你甚至可以把 UX 這個詞丟掉,把自己當成一個 creative problem solver,或許可以因此打破框架,想出一個獨具創意、脫穎而出的新想法,這些都可以吸引雇主/面試官的好奇心!

質>>>>>>量,一個大專案勝過很多個小專案

過去我在做作品集網站時,很後悔的一件事就是:沒有專注在一個專案上好好打磨。因為我在自學的時候很自由、沒人管,可以一直做新的東西,前前後後我放了6個相關專案在我的作品集網站上,但是這些專案沒有一個是我認為拿得出檯面的...,有些是只有設計方案,卻缺少用戶研究,有些只是前端切版,卻沒有設計規劃...每個專案都有點破碎,這要拿去求職其實是很不利的,還不如一個完整的專案打天下。

我認為能夠真正體現出我們價值的專案一定要是完整的:大概就是包含三個部分:1)前期的研究、2)中期設計方案規劃、3)後期的方案驗證,這也是為什麼我建議把Daily UI的好幾天組合起來成一個大網站,而不是一個一個分散的畫面。

以「問題」為出發的學習效果會更佳

最後要提的是,在實作中,你可能會發現自己缺少很多能力,像是不夠了解設計原則,不大懂流程怎麼跑,不知道設計方法怎麼實作、不夠了解人(心理學)…等等,這時候就是缺什麼補什麼,這就是為什麼我們不用在上一階段學多或太深,因為在這個階段,是在專案實際遇到問題然後去找答案,會比起單純讀理論,更能理解、更有印象、更能活用。

至於作品集和求職面試的部分,已經有很多很棒的文章在講這件事,所以在這裡就不多提了。

實作階段提到的重點有點多,這裡幫大家總結出五個重點:

1.實作練習的重點在於「教練」與「及時反饋」,反饋越多,學得越多,反饋越快,學得越快。

2.想快速找到工作,先做一個完整的專案,並製成作品集。

3.找不到實習/工作,也沒什麼做專案的機會,怎麼辦?有兩種方法:第一、任何題目都拿來套用UX方法來做,第二、放眼自身周遭的任何尚未被解決的問題(不要設限於設計/APP/Web,而是什麼領域都可以),來思考如何解決。

4.一個大專案勝過很多個小專案:仔細把一個專案研究的很透徹、好好迭代、打磨幾次,對於雇主來說,比起100張UI插畫還要有價值。

5.以「問題」為出發的學習效果會更佳:遇到困難,不用急著要闖過去,先停下來,仔細的思考目前遇到的問題是什麼?然後蒐集資料/看書/問人。這樣的學習效果比起單純看書還要好過數倍。

第五步:吸收新知:持續接觸新知(文章、書籍、廣播、講座、交流、活動…等等)

終於到了最後一個步驟!成功找到工作之後,接下來該如何繼續成長呢?答案聽起來很像幹話,但我覺得就是「用任何可能的手段來讓自己成長」,包括:文章、書籍、廣播、講座、交流、活動…等等。

到了這個階段,我們應該已經具備完整的基礎知識了,這時候再去讀網路文章和乾貨就會有感很多,也更能理解,這些破碎的知識能慢慢填補我們的知識體系。其實社群交流也是一樣的道理,有些演講和社群交流最好還是要有一點點實務經驗再去,因為講師講的東西通常來自於他們真實工作上遇到的情況,可能要有點基礎才會聽得懂,在交流的時候也比較能提供價值給他人,否則別人可能也不太會想跟我們交流。

最後我想分享一下自己的感想:

我覺得這條路真的不好走。

每當投了履歷又沒下文、或是面試又沒上的時候,承受了一次失望之後還有連續不斷的失望,也因為如此,我想過無數次要放棄,也開始質疑自己:我是不是真的太晚開始了?我應該走這條路嗎?我真的適合走這條路嗎?我真的能堅持下去嗎?

我經歷了很長的迷惘期,甚至到現在,我還是沒有完完全全的脫離迷惘。

這五個步驟只是開始,只是一個敲門磚,真正要修練的東西還很多,要在這條路走得遠,就是永遠不能停止學習。自從踏入這個領域後,就會開始知識焦慮,因為要學的東西真的太多了,天天學還是學不完…,我所畫的技能樹或許只是一部分而已,可能要工作幾年後,才能發現更深的、我沒發現過的東西,讓這棵樹越長越大吧。

最後,我覺得職涯要脫離迷惘,就是把自己當成產品來迭代,快速試錯、快速修正,才能快速找到自己想走的路。

這篇文章就到這邊結束啦,如果有發現到任何錯誤的地方、想補充的東西或有任何想說的話,都可以留言告訴我~如果需要的話我也會盡量回覆的。

如果你想知道更多產品設計/UI/UX的小知識,可以追蹤這個IG帳號👇

如果你覺得這篇文章還可以,可以幫我拍手 1-10下
如果你覺得這篇文章有幫助,可以幫我拍手 10-30下
如果你還想再看到更多類似的文章,可以幫我拍手 30-50下
按住拍手就可以連拍哦~ 很感謝你的鼓勵!👏👏👏
https://medium.com/as-a-product-designer

--

--