UI/UX是什麼？分享UI/UX設計比較、UI/UX流程5步驟

Welly SEO 編輯部

2023-03-17更新

數位行銷

# 設計

# 行銷Marketing

UI/UX是什麼？UI和UX的差別是什麼？本文將介紹UI UX設計流程5步驟和3個常見的UI UX軟體，並分享UI UX設計師職業解密，最後推薦UI UX書籍與線上課程。

快速跳轉目錄

UI UX設計是什麼？UI UX比較表分享！

UI UX設計流程有哪些？介紹UI UX流程5步驟

UI UX軟體介紹｜業界常使用的軟體有哪些？

UI UX設計是什麼？UI UX比較表分享！

「UI UX」想必如今大家一定不陌生，現在電商平台盛行，最常見的UI/UX是運用在架設網站或是設計新的APP時，會需要UI UX技能的協助。

網路上除了時常討論UI UX是什麼之外，更多的是比較兩者之間的差異，雖然UI和UX確實是不同面向的專業領域，但他們之間卻是唇齒相依、密不可分的關係，究竟UI設計是什麼？UX設計又是什麼呢？

（一）UI是什麼？

UI全名為User Interface，而UI中文則翻成使用者介面。

所謂的介面可以解讀為「媒介」，換句話說，UI是著重在設計與使用者互動時接觸的媒介，是與使用者最具連接性的視覺設計。

因此UI設計的重點在於產品介面如何呈現才能讓使用者操作直覺且流暢。

以電梯為例，使用電梯最直接會與使用者接觸的就是電梯樓層與開關門按鈕，如果按鈕圖案設計得不夠直覺，使用者將不知道究竟哪一個按鍵是開門或關門，也就表示這個使用者介面的視覺設計不佳。

由此例可以得知，雖然整部電梯能夠很好地運作，但與使用者接觸的媒介如果呈現不佳，仍無法使商品發揮效用，因此UI設計在視覺上的呈現，像是字體大小、字型、按鈕、整體配色等都不容小覷。

（二）UX是什麼？

UX全名為User Experience，而UX中文則翻成使用者體驗。

UX設計是早於1990年代就推出的概念，而所謂的使用者體驗設計不單單限於產品本身的使用，還包含企業的整體服務、商品包裝等，皆必須站在使用者的角度出發，並利用設計思考的概念讓整個使用者體驗的流程是符合邏輯的。

因此UX更偏向後端的產品設計，且更著重在產品本身使用起來的感覺與流程如何。

而在UX設計流程必須研究使用者的習慣與需求，並仔細觀察使用者行為，在得到觀察與分析的結果後，除了應用在商品本身的使用體驗外，整個消費者旅程、行銷漏斗裡的各項服務也都應該注重UX設計。

（三）UI UX差異為何？UI UX比較表分享

UI和UX之所以常常讓人分不清楚其差異，是因為兩者確實有些部分是相互重疊，像是在互動設計上，UI/UX就必須相互合作與討論，才能設計出兼具好的使用者體驗與視覺介面的商品。

而在實際應用上，通常會先執行UX設計，才輪到UI設計整個視覺介面，而中間的串連就需要UI、UX設計師去討論與協商。

以下利用表格的方式比較UI/UX的差異：

	UI 使用者介面設計	UX 使用者體驗設計
定義	設計與使用者互動時接觸的媒介	設計整體流程服務與產品的體驗
核心任務	直覺性的視覺設計	了解使用者需求後，設計出符合邏輯的商品與流程
目標	利用視覺設計與美學，讓使用者在使用過程中感到舒適、直覺、流暢。	利用設計思考結果，設計出能夠解決使用者痛點並兼具良好體驗的產品與流程。
實際工作內容	視覺設計互動設計前端設計	設計思考與研究互動設計後端設計

UI UX設計流程有哪些？介紹UI UX流程5步驟

如果你是UI UX入門不久的設計師或是在考慮是否從事UI UX設計職業，想必會想大概了解究竟UX設計流程或是UI流程是如何進行，以下簡單將UI/UX流程分成5步驟做介紹。

UI/UX設計流程5步驟：

STEP1. 了解需求

第1步是UX發揮的領域，主要以使用者為中心去了解他們的需求與痛點，換言之，就是以設計思考的方法去了解使用者最真實的想法，過程中除了可以透過訪談、觀察的方式認識使用者，還可以藉由IA（Information Architecture）資訊架構整理基礎的網站規劃，其主要分成以下3個面向：

使用者（User）：受眾、需求、痛點、行為等。
情境（Context）：產品環境背景如何？
內容（Content）：內容形式、呈現的資訊型態等。

當使用者資料收集完畢後，可以再藉由Persona人物誌繪製出更明確的受眾樣貌，有利於將大量的使用者資訊統整，並用於後續的流程中。

STEP2. 畫出功能地圖（Functional Map）

所謂的功能地圖是將產品需要的功能進行分類，並劃出各個功能的主次順序，以利後續UX設計師在產品開發時，可以一目瞭然功能設計的架構。

此外，清楚畫出功能地圖也有利於UI設計師檢視完整的服務與產品功能設計，進而在後續的視覺設計與互動設計可以有更明確的設計藍圖。

STEP3. 製作邏輯流程

邏輯流程目的：不同情境下產品會出現的狀態與需要的功能確認。

而邏輯流程可以再依據不同的用途分成Flow Chart和UI Flow：

Flow Chart：主要針對UX設計產品操作進行流程圖的繪製，藉由不同的圖形標籤表示不同的流程內容。
UI Flow：依據使用者體驗為中心產生的Flow Chart設計出對應的產品操作介面圖，利用視覺雛形使得後續產品溝通能更加直觀。

STEP4. 線框稿（Wireframe）

線框稿Wireframe是利用呈現主要的內容與基本排版，進行架構的確認，像是是否為使用者需要的配置等，都是必須考量的重點。

然而需注意繪製線框稿時，無需在顏色、字型等細節上做過多的琢磨，UI/UX團隊僅需著重在整個產品的架構、功能與流程即可。

STEP5. 設計原型並進行測試（Mockup & Prototype）

在製作出原型Prototype前，會先請UI設計師設計Mockup視覺設計稿，也就是基於上個步驟的Wireframe加入更詳細的視覺設計，以增加質感、美感與使用介面的直覺性為目標。

接著，最後就是原型Prototype的製作，所謂的原型是指產品初期的樣子，基本上已經可以進行簡單操作與測試，並做最後的優化，確定沒有問題後，就可以將產品上架了。

若是產品通過了市場的小規模初步驗證、要進行設計上的優化時，企業通常會開始進行CIS的設計與規範制定。若是公司已有設計好的CIS規範，則可於此階段提出給UI設計師將元素套用至產品中、優化整體的設計調性。

UI UX軟體介紹｜業界常使用的軟體有哪些？

在UI/UX的世界裡，擁有實用的UI UX設計軟體可以幫助UI/UX設計師事半功倍，以下將介紹目前業界常見的3大UI/UX軟體。

（一）Figma

Figma是受各界設計師愛戴的線上設計工具，主要於網頁進行，透過macOS或Windows的桌面應用程式可啟用離線編輯功能，檔案待連上網路後就會上傳雲端，因此其方便、簡單操作又能共同編輯的特性，是讓「Figma UI UX」的應用總是一起討論的原因。

以Figma網頁設計來說，簡單且直覺的拖曳編輯器加上快速的框線建立，能夠協助UI/UX設計師即時地進行原型設計，甚至還有模擬介面操作的功能，與許多的支援模組外掛，不管是視覺上的UI設計師還是功能上的UX設計師都能輕鬆使用Figma設計基本的產品草稿。

（延伸閱讀：想快速產出站內行銷用圖？Canva大量模板供你選擇！）

（二）Adobe XD

Adobe XD的全名為Adobe Experience Design，是同時具備UI/UX所需功能的向量繪圖軟體，因此「Adobe XD網頁設計」總會讓人聯想在一起。

而如果你是時常使用Adobe系列軟體的設計師，像是Photoshop、Illustrator等，那你在使用Adobe XD勢必會得心應手；在產品介面設計工具應用上，可將Figma的設計草稿轉放進Adobe XD進行更近一步的工程設計，上面有許多工程開發時需要用上的spec細節，是UI/UX設計師必備工具之一。