UI、UX是什麼？5分鐘搞懂UI/UX：UI、UX設計5步驟、軟體、課程介紹

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 應用範圍非常廣泛，涵蓋了各種數位和實體產品的設計和開發，以下將列舉 4 個生活中常見的應用範疇。

官方網站

直觀、易於導航和具有吸引力的 UI、UX 網站介面，不僅能夠讓受眾進入網站後獲得良好的瀏覽體驗，還能有效降低跳出率，提升停留時間。

電商平台、線上購物平台

我們常說的良好的線上購物體驗，有很大一部分取決於 UI、UX 設計，搜尋商品頁面、結帳流暢度與直覺性等，都能大大降低消費者在購物的過程中「棄單」的風險，從而提高轉換率。

APP 應用程式或軟體

無論是社群媒體 APP、閱讀軟體 APP，又或是記帳 APP 等，良好的 UI、UX 設計都至關重要，將關係到使用者是否能夠輕鬆上手及操作瀏覽，進而提升受眾對於 APP 的黏著度與使用頻率。

手遊／桌遊

遊戲的 UI 設計需確保介面美觀、功能佈局直覺且合理，而 UX 設計則需要提供愉快且無縫的遊戲體驗，以保持玩家的投入度。

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

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

STEP1. 了解需求

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

1. 使用者（User）：受眾、需求、痛點、行為等。
2. 情境（Context）：產品環境背景如何？
3. 內容（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 設計師，需要具備的軟硬實力有哪些呢？

以 UI 設計師的軟實力來說，「美感」無疑是首要必須具備的能力，同時也需要設計上的創造力；至於 UX 設計師在前期的使用者分析上必須要發揮洞察力，而在後期的產品設計上則需要創意力。

如果以整個 UI／UX 來說，兩者都需要有顆樂於學習的心和一定的溝通能力，因為科技不斷地進步，設計師必須隨時注意產業的變動，並學習新的工具與技能；此外，因 UI 和 UX 在開發產品時，必須相互討論與協作，因此溝通能力也是必備的軟實力之一。

至於大家最在意的薪資水平，普遍來說，新鮮人的月薪通常落在 3~4 萬元，會依據不同產業略微不同，像是科技業或是知名大企業薪資就會較高；而通常超過 5 年的資深 UI／UX 設計師月薪可以超過 5 萬元。

以下利用表格整理 UI／UX 設計師應具備的軟硬實力與人格特質：

UI/UX 軟體介紹｜3 大 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 設計師必備工具之一。

（三）Sketch

主要針對 UI 設計的 Sketch，以簡單的功能介面在 UI/UX 工具裡佔有一席之地，其屬於向量繪圖軟體，無需擔心改尺寸的問題；除此之外，使它歷久不衰的原因還包含 Sketch 的價格平易近人，且網上的教學資源豐富，對於剛踏入 UI/UX 界的人來說，十分友善。

以上 3 種都是相當好用的 MarTech 設計工具！其中只有 Adobe XD 的入門門檻稍微高一些，其他 2 種設計工具對行銷人來說都是相當好上手的！有興趣、有需求的你都可以嘗試看看喔！

UI／UX 書籍與 UI／UX 線上課程推薦

UI／UX 領域的知識又廣又深，且會隨著科技的進步日新月異，想要踏入 UI／UX 領域的你除了需要具備上述的軟硬實力和人格特質，也要擁有願意不斷接收新知的心，因此透過 UI／UX 設計書或是線上課程學習，都是精進自己的好方法。

以下將分享 2 本UI／UX書推薦和 UI／UX 線上課程平台推薦。

（一）打造最強網頁 UI／UX 設計腦

《打造最強網頁 UI／UX 設計腦：設計師都該懂的絕佳設計・溝通法則》適合 UI／UX 入門不久的新手，也是網上非常熱門的 UI／UX 自學書，它將告訴你「溝通」在 UI／UX 世界裡的重要性，並教你基本的設計法則。

（二）WEB 設計職人必修：UX Design 初學者學習手冊

《WEB 設計職人必修：UX Design 初學者學習手冊》也是一本在網路上許多人推薦的初學 UX 設計書，裡面主要會提到 UX 的基本觀念與流程，除此之外，也會教學簡單導入 UX 的方法。

（三）UI／UX 線上課程平台：Hahow、YOTTA

如果想要透過線上課程進修，除了在 Hahow UX 和 UI 課程都很豐富之外，友讀 YOTTA 上也有很多 UI／UX 課程可以購入，以下各推薦一門熱門課程給大家參考：

• YOTTA：Adobe Xd 設計實務｜成為 UI 設計師的 8 項核心技能
• Hahow：從入門到業界實戰 - UI / UX 前端網頁設計

以上就是 UI／UX 設計的介紹，感謝閱讀！如果您希望定期收到 Welly 為您整理的行銷新知或定期彙整的知識懶人包，都可以填寫下方申請表訂閱 Welly 的電子報噢！▼