UI、UX是什麼？5分鐘快速看懂UI、UX設計差在哪！

 

UI、UX設計是什麼？

以下將分別就兩者的定義簡要說明，並針對兩者的差異以表格方式做一清楚比較。

 

 

UX（User Experience）使用者經驗

UX設計師的工作重點是「產品使用起來的感覺」，因此，UX設計師需了解使用者需求、觀察使用者行為，並確保每個流程步驟都符合邏輯，以提升產品使用的流暢性。

 

 

UI（User Interface）使用者介面

UI設計師的工作重點是「產品如何呈現」，例如：字體大小、字型、按鈕、動畫效果、整體配色等視覺引導，提供讓使用者一看就懂的使用介面，進而增加使用者對產品的好感度與滿意度。

 

 

UI、UX設計差異總整理

 

	UI（User Interface） 使用者介面	UX（User Experience） 使用者經驗
定義	使用者與產品之間進行溝通的介面。	以使用者感受為出發點來​​設計產品。
重點	便利性及設計美學。	使用者體驗與感受。
執行目標	UI 設計師著重在「產品如何呈現」，考慮的是視覺呈現方式、是產品看起來如何，以創造直覺美觀的使用者介面。	UX設計師著重在「產品使用起來的感覺」，需了解使用者需求及習慣，使產品或流程符合邏輯，以創造好用的使用者體驗。
工作項目	視覺設計、字體大小與間距、字型配置、顏色搭配、互動效果等。	市場調查與研究、使用者行為分析、資訊架構設計、流程設計等。

 

 

UI、UX設計流程是什麼？6大步驟快速掌握

UI、UX設計流程為何？凱士數位詳列以下6大步驟，幫助你快速了解UI、UX設計流程執行內容。

 

 

 

STEP 1. 網站需求瞭解

在網站設計工作開始之前，UX設計師需透過市場調查、需求訪談，分析並了解使用者需求及網站使用習慣。

 

延伸閱讀：接手公司網站架設好煩惱，推薦6個與網站公司討論的準備重點

延伸閱讀：網站架構表怎麼做？教你用Word、Excel、PowerPoint完成網站架構圖(範本檔下載)

 

 

STEP 2. 進行設計思考

以使用者為主要的思考重點，站在使用者的角度發掘他們的需求及痛點，並以此為基礎，規劃能吸引使用者點擊、刺激購買慾，並增加轉換率的設計。

 

 

STEP 3. 繪製功能地圖

針對客戶的產品或服務的流程大綱，UI設計師將利用功能地圖檢視服務或商品的大概流程，以能交由資訊團隊分析此專案所需的人力、成本等構成報價為目的。

 

 

STEP 4. 操作邏輯流程

透過功能地圖確認大綱流程，接下來即針對大綱進行流程之間的串聯及確認，此階段是交由資訊團隊建置功能的關鍵，透過資料分析針對各別功能流程進行詳細研究及探討的流程圖（UI flow）。在擬定UI的操作邏輯流程後，利用線框圖（Wireframe）呈現出網頁介面的主要內容與排版架構，將設計的整體外觀和感覺傳達給客戶。

 

 

STEP 5. 製作DEMO

將流程圖與線框圖實際製作成網頁，進行至此的網頁版本已經非常接近原型，並可開始針對樣式、顏色進行較細微的調整。

 

 

STEP 6. 易用性測試

專注於功能的設計邏輯是否順暢，及整體介面是否直觀、易操作。藉由易用性測試來評估網站是否真的能滿足使用者需求，再針對測試結果的反饋，進行細節上的修改與調整。

 

 

 

UI、UX設計可應用在哪裡？

 

以幾乎人手都有一支的智慧型手機為例，提供使用者理所當然的操作手感、習以為常的人機互動，就是UI、UX設計最具體的實踐。使用者可採多點觸控和滑動手勢來控制產品、利用雙指併攏或縮放以及自然滑動來瀏覽頁面，甚至指紋辨識及人臉辨識的設定等等，都是經優化後被設計並定義出來的介面操作及使用體驗。

 

 

好的UI、UX設計有何特質？3大成功案例一次看！

 

案例1. 好的UX設計┃中國附醫

 

中國醫藥大學附設醫院臨床試驗中心希望「教育訓練平台」能導入數位流程、簡化作業程序。因此，凱士數位先將實體作業流程簡化以及精確化後，才將整個實體流程轉化為數位流程。簡化工作流程也要簡化UI設計，精簡後的操作介面，讓使用者得以專注按步驟完成線上課程與測驗，進而取得證書PDF。

 

 

案例2. 好的UI設計┃中強光電

 

VSBG影像事業群是中強光電集團的主力事業，VSBG官網在品牌形象擁有良好的基礎，但在使用介面與操作流程上一直無法擺脫使用者容易迷路的問題。在凱士數位的協助之下，使用中強光電的品牌色，紅、黑兩色作為整體設計的配色，利用圖像化引導第一次使用者能快速地了解產品特性，徹底改善了官網UI使用性設計。

 

 

案例3. 好的UI + UX設計┃CoolBau（團購平台）

 

以團購彩妝、保養品為主的CoolBau，網站平台設計從無到有，皆由凱士數位一手包辦。凱士數位協助設計出具質感的網站風格，且不僅操作功能直觀性佳，後台的流程設計亦是邏輯清楚，讓管理人員容易上手，是UI、UX設計兼顧的成功案例。

 

凱士數位科技專注於UX、UI網頁設計多年，對於企業客戶在網站運營的期許有深入的理解，並透過與客戶緊密的溝通、全面性的規劃與系統性的整合，提供給客戶最專業的建議。歡迎參考我們的網頁設計作品案例，或透過線上表單與我們聯繫，UX、UI以外，還有很多網站設計需注意的要點，讓我們完善且專業的團隊為你提供詳盡的網頁設計服務說明！

 

 

更多網站設計要點歡迎參考：

網站/網頁設計公司這樣挑不踩雷！5大原則教你找到專業設計公司

網站架設方式如何選擇？架設網站流程步驟、優缺點一篇比較

 

 

 

 

＊ 歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司

 

 

 

 

 

 

Eric Wang 凱士網頁設計公司 專案顧問 Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。