UX/UI不一樣,UI/UX設計是什麼?

Author: 路卡斯特
ui-ux-images


已故的蘋果CEO 史蒂夫·賈伯斯說過:「大部分的人以為產品外觀做得美觀就是一個好設計(UI),但實際上成功的設計不能只是好看更必須要好用(UX)。」網站很美很時尚(UI),但是網站操作卻很難用(UX),反之,網站很容易操作(UX),但是網站設計的美感卻令人不敢恭維(UI),UI與UX是完全不一樣的定義,但兩者之間卻如同唇齒彼此相依,不可失去彼此。好的產品、系統、網站都需要UX收集,才能根據UX轉化UI去呈現最後的使用者介面(成品)。大家熟知的 iPhone、小米…都是經過大量的UX數據收集才有目前友善、簡單、易用的好產品。

 

UI 是什麼意思?

UI(User Interface)的中文翻譯是「使用者介面」,什麼是使用者介面?簡單來說就是使用者與這個東西的之間的連接點,例如:方向盤就是人跟車子的使用者介面、手機按鈕就是人跟手機的使用者介面…,透過這個使用介面讓你輕易的控制車子、手機, UI設計就是把這個介面信行美化的工作,UI(使用者介面)的設計重點:配色對比、按鈕設計、字型設計、風格氛圍、動畫效果、版面視覺、簡單易懂….,這些專注在美感、心理、視覺、質感的設計,這就是UI設計。
延伸閱讀:網站設計出了什麼問題?如何改善?


UI 設計重視視覺與配置

UI設計重視視覺美感與配置

 

UX 是什麼意思?

User Experience(UX)的中文翻譯是「使用者體驗」,什麼是使用者體驗(UX)?簡單來說就是使用者對於品牌印象、客服、商品、包裝、操作、售後服務….,舉凡所有沾上邊的任何體驗都是UX(使用者體驗),例如:以手機iPhone的使用者體驗(UX)來說有,對APPLE品牌的好感度、客服人員說話的口氣、商品的包裝品質、購買前的電視廣告、售後服務的流程、網站流程順暢….都是UX(使用者體驗),UX不是只有商品本身的體驗,每一個環節與過程都是UX。
延伸閱讀:5個網頁設計建議,優化使用者體驗(UX)


UX 設計流程與架構

UX設計流程與動線

 

UX 和 UI 有什麼不一樣?

UI是使用者與裝置之間的接點,UX則是使用者從商品或服務中得到的所有體驗,兩者是完全不同的概念,千萬不要覺得UI跟UX是一樣的東西,使用者介面(UI)強調美學與便利性,使用者體驗(UX)則是收集多數使用者習慣與體驗,成功的商品或服務都要需要經過大量UX累積,才能將UX融入到UI設計,UX屬於架構本質,UI則是美感與配置,兩者皆不可或缺。
延伸閱讀:2021網頁設計指南


UI 與 UX 的比較

項目 UI  使用者介面 UX 使用者體驗
定義 使用者與商品之間的連接介面 商品或服務的所有體驗與感受
重點 美學設計與便利性 收集使用者體驗與感受
執行 由UI設計師進行視覺與易用性設計 透過實驗、問券、測試、收集反饋、分析、架構流程
目標 視覺優化、簡單易用的商品與服務 讓商品或流程符合邏輯與使用者習慣

 

UI 設計師與 UX 設計師的搭配

通常在網站設計或是產品開發的初始階段,UX會先做,然後再會進行UI的設計,以網站設計來說,UX設計師會先規劃整個網站的流程與動線,這時候就會產出網站的原型架構,然後才交給網頁設計師(UI)進行版型與視覺設計、互動效果與元素。成功的網站設計不會是看起來很炫、動畫很多,但卻是很慢、動線很糟糕的網站,華而不實的網站就是沒有帶入使用者體驗(UX),反之,缺乏UI設計師的網站,網站再好用都沒有辦法吸引人,美好的視覺感受也是UX的範圍,只有UI與UX緊密搭配才能成就一個成功的網站。
延伸閱讀:如何成為專業的網頁設計師?



UI設計師、UX設計師比較

項目 UI 設計師 UX 設計師
工作 視覺設計:配色、字型配置、圖片設計、互動效果、版型配置、按鈕設計 市場調查、問券設計、使用者行為分析、網站原型、資科邏輯、流程設計
特質 重視美感、基礎常識、創造力、堅持、溝通 喜歡歸納、整理、思考、分析、同理心、溝通


UI/UX 設計可以應用在哪裡?

UI/UX 不只是用在數位系統開發,其實 UI/UX 無所不在,舉凡一般網站、平板、手機、網站、點餐機、汽車控制台、電影、虛擬實境(VR)、展場設計、餐廳...,有數不完的應用方式。例如:餐廳的UI/UX設計,餐廳的受眾有誰呢?有消費者、點餐結帳人員、廚師、服務人員,UI設計之前必須收集足夠的使用者體驗(UX),包含消費者的點餐、等餐、座位配置,服務人員的送餐路線、廚師的餐廳動線、結帳人員收費流程、餐廳空間規劃、用餐後評價、網站設計...,以上的各種使用者體驗、習慣、空間動線就是由UX設計師收集歸納後進行流程設計,設計後後交由UI設計師進行視覺設計與優化,依照CIS設計原則設計,以上就是一個完整的餐廳UI/UX設計。
延伸閱讀:轉換率提昇的關鍵在網頁設計


網站設計的UX使用者體驗

UX在網頁設計前、網頁設計中、網站設計完成後,都有需要執行的UX工作,網站設計前需要收集資料與分析UX,網站設計中需要將很多UX的原則跟技術置入網站,網站設計完成上線後則需透過數據工具(GA)進行網站數據收集,並依據數據修改網站,網頁設計的UX做得好UI就會好用,一個網站設計的成功來自於UX使用者體驗的徹底執行。
延伸閱讀:網頁設計的使用者體驗(UX)如何執行?


UI/UX 設計好壞的差異

好的UI設計可以讓你很清楚知道按鈕在哪裡,直覺的知道下一步的流程,清晰的文字、按鈕、顏色、乾淨簡單的設計,好的UX設計會考慮到你每一個動作的流程,讓你在使用任何工具、系統、服務時,都能用最短的路徑完成動作,即使有發生錯誤也會友善提醒,不會讓你重複一樣的動作而卡關,下面是以網站的形式做UI/UX設計好壞的案例。
延伸閱讀:如何選擇網頁設計公司?


好的 UI:馬上知道要按哪一個登入按鈕

好的UI設計按鈕顏色明確
Source: Career Foundry


好的UX:填錯E-MAIL格式時的提醒

錯誤的email格式即時提醒
Source:Adobe


UI/UX 書籍推薦:

多元裝置時代的UI/UX設計法則:打造出讓使用者完美體驗的好用介面(第二版)

作者:原田秀司
1974年生於東京都,東京大學工學部畢業。其在IT供應商擔任程式設計師/SE之後,於Web製作公司擔任總監。自2008年開始成為自由工作者,負責為PC、智慧型手機、平板電腦、電視、智慧家電等設計UI。目前是日本平面設計師協會(JAGDA)的一員。

內容簡介:
該書內容從UI設計的定義開始介紹,UI設計會受到哪些軟硬體限制,以及人類心理面影響、如何打造容易懂簡單易用UI的具體方法,針對UI設計的各個面向提供技巧及重點整理,以豐富的圖片輔佐說明,讓讀者可清楚了解「易懂」及「易用」的UI設計重點,製作出不讓使用者迷惘簡約UI,本書適合各種UI設計師閱讀,像是:網站設計師、工程師、設計總監、發案案主、相關工作者及一般使用者都適合閱讀本書。


多元裝置時代的UI/UX設計法則
多元裝置時代的UI/UX設計法則:打造出讓使用者完美體驗的好用介面(第二版)


結論

UX跟UI常常會被放在一起,但兩個名詞的定義卻完全不同,使用者體驗(UX)跟使用者介面(UI)會被放在一起,是因為他們必須搭配才能創造有用的商品或服務,以網站設計來說,設計真的很重要,視覺是第一個吸引人的重點,但如果網站為了吸引人卻不管網站使用者的感受,例如:動畫很炫卻找不到按鈕連結、把搜尋放到大家不熟的位置、沒有導覽列、無法上下頁、會員申請很繁瑣、購物車很難找到….,這些都是UX(使用者體驗)失敗的例子,UI/UX相互搭配才能打造讓使用者完美體驗的介面,無論是商品、網站、系統、APP、展覽、餐廳、店面、電影、動物園….,只要跟人有關的介面,都是UI/UX的範疇。
延伸閱讀:網頁設計公司不會告訴你的5個真相

(本文為達文西數位科技所有,轉載文圖請註明出處)
  馬上諮詢網頁設計
喜歡探索,常常埋首於新奇的事物裡,總是希望給您最適切的解決方案。

SEO套版網站,優惠 $ NT 62,000 (1年代管+SSL)

請與我們聯繫
線上客服 TOP