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

    Eric Wang

 

你是不是很常聽到UI、UX設計，但卻不太了解UI、UX設計之間的差別是什麼？UI 著重視覺介面與操作細節，UX 則聚焦於使用者整體使用體驗，不只是外觀漂亮，更關乎操作順手、流程直覺。跟著凱士一起從網頁設計流程出發，5分鐘帶您掌握UI與UX設計法則、實施方式與常用案例，協助企業打造既美觀又易用的網站，提升品牌形象與轉換率。

 

UI、UX設計是什麼？

• UX（User Experience）使用者經驗：UX設計以解決使用者在產品使用上的痛點，並經由不斷的修改以創造優質的使用者體驗。
• UI（User Interface）使用者介面：UI設計除了需考慮使用的便利性外，也需顧及整體的設計美學。

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

 

 

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個與網站公司討論的準備重點

延伸閱讀：網站架構表是什麼？該怎麼做？實用工具一次報你知(範本檔下載)

 

 

STEP 2. 進行設計思考

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

 

 

STEP 3. 繪製功能地圖

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

 

 

STEP 4. 操作邏輯流程

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

 

 

STEP 5. 製作DEMO

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

 

 

STEP 6. 易用性測試

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

 

 

延伸閱讀：官網架設該怎麼進行？不同網站類型與3個架站方式告訴你！

 

 

 

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

UI、UX設計的應用範圍可說是相當廣泛，除了一般我們所熟知的網站、手機、平板等應用外，還有ATM自動提款機、汽車導航、媒體播放器、遊戲機、點餐機、VR虛擬實境等等，無所不在地應用在我們生活中的各個角落。

 

以幾乎人手都有一支的智慧型手機為例，提供使用者理所當然的操作手感、習以為常的人機互動，就是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以外，還有很多網站設計需注意的要點，讓我們完善且專業的團隊為你提供詳盡的網頁設計服務說明！

 

 

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

網頁設計公司怎麼挑？選商前先看這篇推薦攻略不踩雷

如何架設網站？網站架設流程、優缺點一篇比較！