UI/UX是什麼？一篇搞懂UI與UX的差異，並掌握UIUX 課程理論與實務

隨著各大行業逐漸邁向數位化，品牌都紛紛推出自己的網站、流動應用程式等，進而帶動了用戶體驗與介面設計的龐大需求，吸引許多人才轉做UI/UX Designer。不過，到底UI/UX是什麼？兩者有什麼不同？想要轉工做UI/UX Designer又該從何開始學起？本文將分別為您介紹UI與UX定義與5個常見專有名詞，並帶您認識UI/UX的設計流程，幫助您瞭解UI/UX的各項基本概念，在香港找到適合您的工作。

UX是什麼？根據使用者習慣創造出良好的「使用者體驗」

UX的全名為User Experience，中文為「使用者體驗」，顧名思義即是針對使用者的習慣，設計出符合使用者需求的流程。舉例來說，您是否曾在品牌官網上選購某項產品時，卻因為需要太多付款步驟而放棄下單呢？不夠直觀的購物體驗，就是UX設計師致力解決的問題之一，UX設計師往往需要透過問卷調查、人物誌（Persona）、客戶旅程地圖（Customer Journey Map）等工具，找出消費者的痛點並一一改善，給予消費者良好的使用體驗。

UI是什麼？從使用者角度打造出美觀且直覺的產品介面

UI的全名為User Interface，中文為「使用者介面」，使用者介面更強調使用者在瀏覽網頁、APP等介面時的整體感受。從介面路徑、按鈕位置、點擊後動畫、閱讀文字的感受到整體的網頁風格，都是UI設計師需要考量的重點。

UI/UX的差別為何？

由上述內容可知，UI與UX都是基於使用者角度，提升產品使用體驗，兩者的工作內容雖然相差很大，但卻是相輔相成的。為了避免打造出毫無美感可言，或是中看不中用的產品，UI設計師與UX設計師會在設計過程中互相給予專業意見。一般來說，一個產品的開發流程通常要先經過UX設計師歸納出用戶需求，給予產品的基本框架，再交由UI設計師打造出引人注目的產品介面，進而提升使用者對產品的好感度。

UI/UX入門須知｜5大常見UI/UX專有名詞介紹

在踏入UI/UX領域前，事先熟知2種領域的基礎概念才能無往不利。以下列舉了5種常見的UI/UX專業名詞：

UI/UX專有名詞1：Persona

Persona中文稱作「人物誌」，藉由描繪人物誌，可幫助UX設計師瞭解受眾的問題與需求，進而設計出更貼切的用戶體驗。人物誌的內容包含用戶基本背景、年齡、收入、個性、興趣、使用上的挑戰等多項細節，讓UX設計師可以從構思的過程中，逐步分析出值得優化的重點。

UI/UX專有名詞2：Information Architecture

Information Architecture（IA）中文稱作「資訊架構」。用戶在使用產品介面時所需要接觸的資訊相當龐大，而透過歸納資訊架構，整理、分類這些內容，可幫助UX設計師將整個過程一覽無遺，結合早前的使用者體驗研究結果，逐步打造出符合用戶體驗的成品。

UI/UX專有名詞3：Wireframe

Wireframe中文稱作「線框稿」，就像影片拍攝需要畫出分鏡一樣，在設計產品介面時也常常需要以Wireframe呈現頁面排版與架構，將設計概念以線條草稿視覺化呈現，方便團隊討論並即時調整。

UI/UX專有名詞4：Mockup

Mockup中文稱作「視覺模型」，當Wireframe大致定型，UI設計師便會開始依照架構加入設計元素，建構出產品視覺。

UI/UX專有名詞5：Prototype

Prototype中文稱作「原型設計」，在進入最終成品前，UI設計師會製作出產品的Prototype，將靜態設計稿所無法呈現的動態細節表現出來，可避免在工程師實際開發時，還需要猜測或是反覆向UI/UX設計師確認所有細節。

解釋完上述專有名詞後，您是否對UI/UX design更加有興趣了呢？接下來，我們將介紹UI與UX的設計流程，提供您參考。

UX設計師如何優化使用者體驗？

一般來說，UX設計師的設計流程會包含以下4個步驟：

1.確定產品需求：

與客戶討論產品的需求，並確認整個計劃的時間表。

2. 使用者研究：

進行質化與量化訪談，並使用雙鑽石模型、人物誌等研究工具找出用戶的痛點。

3. 創建產品流程與資訊架構：

搭配使用者研究所得出的資訊，創建資訊架構，確定產品的雛形。

4. 設計Prototype：

將新的設計以線框稿呈現，並撰寫交互文檔，以便順利與UI設計師、工程師對接。

UI設計師如何打造使用者介面？

若是團隊中有UX設計師互相合作，UI設計師便會接手UX設計師的專案，加入視覺化設計元素，以Mockup或Prototype呈現，確定每一項細節後才會交由產品經理或是工程師繼續下一階段的開發步驟。而若是團隊中是由UI設計師從頭發想，則會經過以下程序：

1. 確定產品需求：

與客戶討論產品的需求，並確認整個計劃的時間表。

2. 製作User story：

根據使用者需求整列產品介面設計中需包含的資訊。

3. 整理Flow chart：

模擬使用者的操作過程，繪製出Flow chart。

4. 繪製UI flow：

根據Flow chart繪製出視覺化概念呈現的UI flow。

5. 繪製Wireframe：

將每個頁面所需要的資訊繪製成Wireframe，以便與客戶或團隊討論。

6. 繪製Mockup：

將Wireframe加入視覺設計元素，呈現靜態的視覺設計稿。

7. 製作Prototype：

製作Prototype以便完整呈現靜態與動態的視覺效果。

UI/UX Design課程香港推薦｜Xccelerate，UI/UX人才培育基地

迫不及待開始邁向UI/UX Design的領域了嗎？推薦您報讀Xccelerate的UI/UX 課程，用16週的時間幫助您紮穩UI/UX理論基礎，並學習如何根據客戶需求掌握實務操作細節，完成課程後還能夠獲得專業的認證證書，並幫助您建立個人檔案、簡歷及求職信，協助您拓寬您未來職涯道路，成為頂尖的UI/UX人才。

想了解更多的Xccelerate UIUX 課程內容，歡迎參考全端UX Design課程、UX 課程（基礎） 以及 UI Design課程。

延伸閱讀：
Programming課程可培養哪些工作技能？13種軟硬技能為您創造高收入