學習UI/UX設計，給非本科生的3個步驟

這篇想和大家分享我過去自學UI/UX設計時，從中累積體會到不錯的學習方式，不知道非本科系想轉職UI/UX設計師的你，有沒有一種經驗是在網上爬了很多關於學習UI、UX的文章後，有沒有感覺要轉職成UI/UX設計師前，需要學習的知識和技術非常多呢？

這個答案是肯定的，畢竟隔行如隔山，要重新學習的知識和練習很多，但也並不是全部都擠在同一個時間進行學習，學習還是有分為入門、中級、進階等不同的階段步驟，而好的學習步驟，可以幫助你累積事半功倍的成果，這篇就要和大家分享我統整出3個學習步驟要點

一、前置功課

在開始講述學習UI/UX的要點之前，還需要你先學習基本設計知識，也可以稱為先修班的內容，特別是本身還不是設計相關科系的話，建議你先完成以下的事項

1.基礎平面設計知識學習

在之前我的自學網頁設計這篇自介中有提到平面設計是所有設計之始，也是最基礎的設計知識，因此強烈建議在你學任何設計之前先將平面設計的知識學習起來

當你擁有平面設計知識後，再去學習他他類型的設計，就會發現很多設計都是由平面設計的基礎作延伸

平面設計知識包含了色彩、排版、文字等知識，其實要認真學習起來還真的很多，但這階段只先求基礎的平面知識即可

這邊推薦一本我在書店發現覺得不錯的平面設計入門書籍『基本設計力：簡單卻效果超群的77原則』

這本書內容會先帶你暸解什麼是不好的設計，再開始一項一項的從顏色應用、文字選擇、內容排版、照片插圖…等，一步步解析不同面向的設計要點，這些平面設計知識也大致涵蓋了UI設計上會使用的基本要點，所以個人蠻推薦這本書。

2.學習繪圖軟體

實作設計畢竟還是需要使用電腦軟體工具來進行，目前業界比較熱門使用的工具是Sketch、FIgma、Adobe XD，但若你已經自己會Photoshop、Illustrator也可以先繼續使用沒關係，畢竟設計沒有限定說一定要用什麼軟體工具完成（但公司都會要求就是了XD）

若問我會推薦哪個軟體工具進行學習，我會選擇Figma，因為Figma是目前唯一可以免費使用、不需要安裝桌機軟體、且雲端保存檔案的繪圖軟體工具，但Figma主要是用來作為UI設計繪圖使用，因此很多功能是無法跟Photoshop、Illustrator相比

另外學軟體和學設計是兩件不同的事情，假設你現在是對於軟體不熟悉，那需要專注尋找軟體工具的學習資源，不是設計面向的資源，反之若是設計上的學習，用什麼軟體進行就不是很重要的事情。

3.暸解設計規範與元件

UI/UX設計師主要常碰到的設計大多都是網頁或是APP，所以累積一些網頁和APP UI的使用經驗，能夠幫助你去進行設計時，對於要使用哪些操作元件、排版方式等等的設計靈感來源，畢竟用過的東西還是最印象深刻

若還可以去瞭解設計的規範更好，下面也推薦幾個資源

網頁：Bootstarp 4、Element UI

APP：IOS、Android

以上若已預備完畢，就可以開始進行下面的學習要點。

二、學習的3步驟

在平面設計理論當中有提到，一個平面的基礎構成元素由『點、線、面』這三個部分所組成，這三個元素的相依關係是從一個單點，再到點與點相連可成為線，而線與線延伸可成為面

將點、線、面的邏輯用來解析網頁或APP的話，不管是網頁或APP，都是由很多個頁面所組成，一個一個頁面我們可以稱為點，頁面與頁面彼此間又有流程關係，這就可以稱為線，而網站和APP都是由很多組流程所架構出來，我們可以將這些流程的集合體稱為面，也是作為整體的意思

當我們學習分為點、線、面這三個步驟來分別進行，學習就可以更有脈絡和專注性，這也是我前些日子在Reborn設計學院的UI/UX入門課授課中應用到的教學步驟，並且得到不錯的學習回饋，接下來就來說明這三個步驟的學習內容吧！

三、點的練習，單一頁面設計

單一頁面的設計練習，主要目的是提升視覺設計的能力

通常一開始會先臨摹好的設計，從中訓練觀察力和實踐力，完成臨摹之後，再加入自己的設計靈感來進行變化，聽似很容易，但這考驗著你如何觀察設計上的細節，下面提供幾個主要練習方向：

1.元素統合

當確認好欲設計的主題後，總得需要暸解有哪些內容吧？例如我們要設計一個登入頁，就要統合登入頁需要呈現哪些內容，可能有logo、標題、文字輸入框、按鈕…等等，這部分可以去參考實際的成品會是最快的方式

2.內容排版

排版在UI設計中是很重要的基本能力，從內容元素對齊方式、彼此間的間距、元素擺放位置、瀏覽的易讀性、視覺的平衡性等等都可以非常講究，排版排的好也等於成功設計的50%成分了

3.顏色配置

配色跟排版一樣是視覺設計中很重要的一環，好的配色可以抓住人們的目光，不好的配色反而會讓人倒退三步，並且拒絕繼續瀏覽下去

建議先從單一色開始，之後在慢慢嘗試加入一個一個顏色，顏色越少難度越低，顏色越多難度就越高

4.元件的設計

這邊的元件指的是輸入框、按鈕這類可以被使用操作的元素，主要可以嘗試用不同的形態方式來做呈現，例如用線畫框、用面畫出一個區塊或者加入3D立體的元素、陰影的應用呈現等等，這些都可以做嘗試

5.文字

文字的練習不外乎就是字體的選用、字重粗細的應用、字間距的設定等等，一個設計的好壞，往往可以從文字的使用感受出來，屬於魔鬼藏在細節中的設計重點

6.尺寸

UI設計一定都會用螢幕作呈現，不論是電腦螢幕、平板、手機，用對的螢幕尺寸作設計很重要，事先暸解被常用來作UI設計的螢幕尺寸就格外重要

若你需要些練習主題，可以訂閱Daily UI它會每日寄一封題目給你，或者也可以用Collect UI，這網站已經搜集各類用途的UI設計，你可以用它的分類作為你練習的題目，也能參考到一些靈感。

四、線的練習，頁面流程設計

頁面流程的設計練習，主要是訓練如何串連頁面，來達成某一情境中的目的，也可以想作是使用者要達成某一目的操作的過程

一開始一樣會找現成的流程來做分析研究，通常會有一條主要流程，但也會有很多支線流程來因應使用者的操作變化狀況，可以說是聽似簡單，但卻不容易，關係到如何找到或想到不同情境面向的狀況處理，但我們還是由淺入深一步步進行吧，下面提供幾個主要練習方向：

1.研究現有操作流程

找一個網站、APP或服務來研究他的操作流程，通常要達成一個操作目標會有一個主要流程，這流程是作為最理想情況使用，例如進行會員登入流程時，完全沒有發生輸入錯誤、密碼遺忘、或根本沒帳號等等的情況

儘可能將頁面上所有功能都操作一遍，進而暸解每個過程的最後達成的目的，也設想其他不同的使用情境來操作，例如使用者忘記帳號是什麼方式註冊，藉此暸解用可以用什麼方式處理這些情境

2.將流程紀錄下來

將流程記錄下來是非常重要的事情，主要可以梳理並記錄腦袋所接觸到的訊息，通常我們會使用流程圖繪製User flow，可以更有效紀錄流程上的不同狀況處理，方便之後設計頁面時的流程對照

3.繪製相關的頁面

有了流程後就會知道需要有哪些頁面進行流程的呈現，例如成功/錯誤的回饋畫面、不同操作方式的處理，將這些頁面都繪製出來後，就可以將頁面串起，並從頭對照一下流程圖，看看頁面是否有滿足流程上的需求頁面

一開始就要無中生有一個服務的確蠻有難度，主要原因是沒有確切的主題和需求可以進行發想，這邊建議先從我們常接觸的流程開始下手，例如登入註冊流程、電商網站結帳流程等等，這些也是業界比較有共識的流程

五、面的練習，整體產品規劃

整體產品規劃的練習，主要是訓練自己有能力完成一個完整的服務，各樣功能流程要如何相應配合

這部分是最龐大也是最重要的練習，一開始先從常用熟悉的網站或是APP作為練習主題，可以更快暸解到實際營運的網站、APP有哪些資訊、功能是大家都會設計，這樣你的基本觀念才夠與現實接軌，下面提供幾個主要練習方向：

1.列出所有的功能分類

暸解網站、APP實際規劃的內容功能有哪些，以購物網站為例，功能分類就有首頁、商品瀏覽、查詢訂單、個人資料管理等等；以通訊軟體APP為例，功能分類就有聯絡人列表、近期聊天紀錄列表、功能設定等等

通常我們會用Sitemap列出所有的服務功能大項目，才能知道網站、APP總共有哪些功能，最好也多研究幾個同性質的產品，透過此方式可以觀察同一個範疇中有沒有不太一樣的差異

2.列出所有頁面

列出大項目後，就需要暸解這些項目中的流程，也就是很多頁面流程的研究分析，這樣才能夠知道需要哪些頁面做乘載呈現

在業界設計師的設計稿最後就是這麼一大包，全部的畫面都要交代和繪製出來，流程也都要理順，通常會出的文件有Sitemap，用來說明有多少的大功能、子功能要進行，再來是不同功能的user flow，用來說明操作上的邏輯和對應的頁面呈現，最後是所有頁面的mockup完稿圖

這部分其實會花蠻多時間進行，建議先從規模較小、功能較單純的開始，例如小型購物網站、公司形象網站、串流音樂APP、拍照APP等等，從單純再到繁雜會是比較好的學習過程。

六、結語

以上三個步驟是由單純到繁雜作為難度區分，是我從過去經驗統合出來的結果，主要想讓學習可以更有條理和效果

另外在練習的過程中，臨摹的階段非常重要，建議以上的練習一開始都以完成一模一樣為臨摹目標，唯有透過實際觀察、研究別人的設計並實作，才能夠明白當中的設計細節，明白細節後才有可能作出一模一樣或是更好成果，但有一點要記住，請選擇自己覺得很不錯的設計來作臨摹，這樣你的設計能力才能夠飛躍提升

另外當你已臨摹一過幾次後，就可以針對相似的網站或APP開始進行所謂的redesign，從中找出你覺得可以更好的部分進行優化，像是視覺、操作流程、排版等等，這時候redesign的成果會更有效果和底氣，因為你已經先分析過相似產品的設計

我當時是用The body shop這品牌網站，來進行redesign，因為我發現他們當時的網站版型並不支援RWD(響應式網站設計)的排版變化，而其他品牌已有出現，所以我則是針對這點進行redesign

希望以上的分享對你有幫助，若你覺得對你有幫助，也不要吝嗇的幫我按個Like喔！

延伸閱讀：
【線上課程分享】網頁UI設計課程怎麼挑？設計師推薦的5堂設計課
非本科系如何準備UI作品集? 5個必知製作要點分享

若你喜歡我的這篇文章，麻煩拍5次下面小手給予我支持與鼓勵喔！