ENsearch btn

2022-05-17
Eric Wang

UI、UX設計有何不同?5分鐘快速看懂UI、UX設計是什麼!

你是不是很常聽到UI、UX設計,但卻搞不懂UI、UX設計的差別是什麼?UI、UX兩者之間可說是唇齒相依、互為表裏;然而,有好的UI不代表有好的UX,反之亦然。本文將帶你完整了解UI、UX設計流程及應用範圍,並分享3個成功案例,讓你一次看懂好的UI、UX設計應具備哪些特質!

cover 20200705 3

 

UI、UX設計是什麼?

UI、UX設計是什麼?有何差別?以下將分別就兩者的定義簡要說明,並針對兩者的差異以表格方式做一清楚比較。

 UI、UX設計有何不同?5分鐘快速看懂UI、UX設計是什麼!

 

UX(User Experience)使用者經驗

UX設計以解決使用者在產品使用上的痛點,並經由不斷的修改以創造優質的使用者體驗。UX設計師的工作重點是「產品使用起來的感覺」,因此,UX設計師需了解使用者需求、觀察使用者行為,並確保每個流程步驟都符合邏輯,以提升產品使用的流暢性。

 

 

UI(User Interface)使用者介面

UI設計除了需考慮使用的便利性外,也需顧及整體的設計美學。UI設計師的工作重點是「產品如何呈現」,例如:字體大小、字型、按鈕、動畫效果、整體配色等視覺引導,提供讓使用者一看就懂的使用介面,進而增加使用者對產品的好感度與滿意度。

 

 

UI、UX設計差異總整理

 

 

UI(User Interface)

使用者介面

UX(User Experience)

使用者經驗

定義

使用者與產品之間進行溝通的介面。

以使用者感受為出發點來​​設計產品。

重點

便利性及設計美學。

使用者體驗與感受。

執行目標

UI 設計師著重在「產品如何呈現」,考慮的是視覺呈現方式、是產品看起來如何,以創造直覺美觀的使用者介面。

UX設計師著重在「產品使用起來的感覺」,需了解使用者需求及習慣,使產品或流程符合邏輯,以創造好用的使用者體驗。

工作項目

視覺設計、字體大小與間距、字型配置、顏色搭配、互動效果等。

市場調查與研究、使用者行為分析、資訊架構設計、流程設計等。

 

 

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

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

 

 

STEP 1. 網站需求瞭解

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

 

延伸閱讀:公司架站必讀】推薦5個 與網站公司討論的準備重點

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

 

 

STEP 2. 進行設計思考

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

 

 

STEP 3. 繪製功能地圖

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

 

 

STEP 4. 操作邏輯流程

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

 

 

STEP 5. 製作DEMO

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

 

 

STEP 6. 易用性測試

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

 

 

 

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

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

 

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

 

 

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

 

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

cmuh

 

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

 

 

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

 

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

 

 

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

cover

 

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

 

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

 

 

 

* 歡迎分享這篇文章,分享時請加入文章來源:凱士網頁設計公司

 

 

 

網站設計服務諮詢

為什麼推薦台中網頁設計公司凱士數位?位於台中的凱士相對有機會接觸到各種不同的產業面向,擁有各種產業的網站設計經驗,幫助企業提升網路品牌形象,建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求,歡迎聯絡我們。

 

您可以直接填寫諮詢表單,或撥打諮詢電話 04-22210688

 

 

 

cadiis

Eric Wang

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

 

 

 

好的形象網站設計,可以幫助公司提升品牌形象與企業價值,透過清楚的網站架構與視覺設計,造就良好的使用體驗與企業形象。

 

需要網站設計服務嗎?

凱士為您設計製作優質網站

形象網站、公司網站、企業網站、
及各類型客製化網站系統平台

 

立即填表諮詢

想進一步了解網頁設計服務?