UI/UX 是什麼？UI/UX 設計差在哪？快速了解 UI/UX 4個重要觀念！
💡 此篇文章建議搭配文中影片閱讀
UI/UX 設計是近幾年來大家都在關注，並且很多人爭相學習的觀念/技術，但是你知道 UI/UX 是什麼嗎？有哪些軟體可以製作 UI設計呢？如果我要跟業主溝通，應該具備什麼樣的概念、接洽流程為何？我們特別邀請孫鳴遠老師為大家講解 UI/UX 基本觀念以及UI設計常用的幾個軟體，話不多說，繼續看下去吧！
UI/UX 是什麼？快速了解基本定義與概念
UI/UX 是什麼？本段落將透過實例，帶你快速搞懂 UI 與 UX 的核心概念與關聯性：
UI (User Interface)
中文為使用者介面，意思為所有使用者在使用某一項工具或產品時一定會接觸到的功能或介面，例如電梯的按鈕、網站的按鈕等，比較偏向設計面向。
UX (User Experience)
中文為使用者體驗，意思為使用者在使用某一項工具或產品時一連串的經驗，例如我逛一個線上購物網站，從搜尋商品、觀看商品簡介到下單付款的過程。通常 UX 比較偏向企劃階段的規劃，並且需要以三種角度來判斷，包含使用者需求、商業目標及技術(輔助用)。
UI/UX 兩者之間是相輔相成的，在規劃前期必須先分析 UX，之後在 UI設計上才會精準達到使用者的需求。而如果預算有限的情況下，兩者只能擇一時，UX 的實用性可能會比 UI 好。
UI/UX 無所不在，生活中其實到處都用得到
UI/UX 設計的應用遠不只限於網站或 App，舉凡手機介面、自助點餐機、汽車中控螢幕、VR 裝置、展場互動設計，甚至是實體空間的動線規劃，都與 UI/UX 息息相關！只要是人與系統互動的地方，就需要透過 UX 去優化流程，並由 UI 呈現清楚的視覺介面。它的本質是提升使用體驗與操作效率，讓使用者在不知不覺中愛上產品。
以餐廳為例，UX 設計師會先分析顧客點餐、等待、用餐到評價的整體流程，也會考量廚房備餐、服務動線與結帳操作的便利性；接著再交由 UI 設計師依據流程設計畫面，包括菜單版面、結帳介面與餐廳網站風格。兩者環環相扣，讓顧客從進門到離席都能有順暢且愉快的體驗，這正是 UI/UX 設計真正的價值所在！
UI 設計與 UX 設計的工作內容差別
UI 設計與 UX 設計雖密不可分，但關注重點截然不同。UI 著重在視覺呈現與介面美感，UX 則聚焦於使用流程與體驗規劃，以下為兩者在實際工作內容上的主要差異整理，幫助你快速掌握各自的職責重點。
| UI設計：專注於 UI (User Interface) 使用者介面 |
UX設計：專注於 UX (User Experience) 使用者體驗 |
|
|
- 收集使用者的多面向資訊數據，分析使用行為，找出使用動機 & 路徑。
|
|
|
|
- 整體視覺與畫面細節的安排：排版、字型字體、用色、按鈕位置…等。
|
|
- 產出具有對照參考價值的原型設計 (Prototype)，作為提案企劃報告的視覺表現。
|
- 流程轉換成畫面：靜態線框分鏡 (Wireframe)。
|
設計師與企劃必備的 UI/UX 重要觀念
通常做 UI/UX 不會只做來自己用，因此如何與業主溝通就變得很重要。坊間可能會遇到業主要求多或不了解設計而時常出現大改的情況，為了杜絕這樣的情形發生，你可以嘗試以下這套流程，並在每個階段完成後請業主簽名蓋章，避免之後又更改需求：
需求訪談→企劃提案→分鏡規劃→原型設計→網站開工。
至於設計師與企劃在協助業主製作 UI/UX 時，必須注意以下這些事項：
- 定義問題使用者是誰？使用者的需求是什麼？
- 資料分析數據統計、分析使用者習慣。
- 設計規劃根據分析過後，針對使用者決定功能與分鏡。
- 使用測試做出網站原型並驗證。
常見的 UI/UX 設計軟體
在提到 UI/UX 的推薦軟體之前，首先要知道如何挑選工具。大致可以設定以下這些條件：免費、可跨系統使用(Windows 與 MAC 都可用)、全世界的人都有在使用。
常見的 UI/UX 工具有：Figma、Adobe XD 及 Sketch。但 Sketch 因為目前僅提供 MAC 系統使用，這邊就不再多做介紹，其他兩款軟體分述如下：
- Adobe XD同時具備 UI 與 UX 設計功能的軟體，最重要的是免費且好學易上手，並且相容於所有 Adobe 系列產品。在功能上除了可以製作 demo 畫面外，也可以請業主自己遠端(電腦/手機)操作確認按鈕及流程，並且可留下意見評論。
- Figma是網頁版平台，基本上對於遠端或國外客戶，需要分享檔案或大量溝通時比較方便。
經過老師的講解之後，相信大家對 UI/UX 是什麼已經有粗淺的認識，之所以現在大家都重視 UI/UX，是因為市場漸漸證明越能貼近使用者需求感受的產品，越受消費者青睞，「使用者體驗」對品牌或企業來說愈來愈重要，想讓產品在激烈的市場競爭中脫穎而出，如何讓產品更貼近使用者將是勝出的重要關鍵！
【課程推薦】UI/UX 設計體驗思考術
免費學習資源不漏接
