UI、UX 傻傻分不清?11 張圖讓你秒懂!

評論
評論

UIUX

本文轉載自 Conversion Lab,Inside 獲授權刊登。Conversion Lab 是由一群對體驗設計抱有熱忱的產業專家創立。希望藉由優化使用者經驗,進而提升轉換率,為事業與網站帶來巨大成效。Conversion Lab 的成員來自不同背景,包含使用者研究、視覺設計師、使用者中心設計顧問、前端工程師、網站經理等;融合中國、北歐、台灣、日本、新加坡的市場實戰經驗。藉著分享知識、觀點與實作技巧,期望對華語圈的使用者經驗設計資訊品質有所貢獻。

UI 與 UX 有什麼不同?Conversion Lab 整理了網路上常見的 UI 與 UX 差異圖,一圖勝千言,讓我們用這些圖來看一下 UI & UX 不同之處吧,已經了解差異的讀者也可以來數數看自己曾經看過的圖有幾張。

1. 倒過來的蕃茄醬瓶設計,考慮到番茄醬快用完時很難倒出的使用情境。

ketchup1Source:Techtic

2. 從定義來解釋 UI 與 UX 之間的差異,兩者定義有很大的不同

UX inforgraphicSource:Deptofmarketing

3. 從專業分工的角度來說明差別,可以看出負責的部分哪些相同,哪些不同。

ux-vs-ui-dev-skills-expandedSource:Asinthecity

4. 這張圖比較複雜,但基本上還是看得出差異。相同之處很明顯, 都是留著大鬍子的胖子

UX_vs_UISource:Abdevlabs

下面這張圖跟上面那張是同一張,只是畫風不一樣,從設計師們從大鬍胖子變成花美男

Infographic-UpdatedSource:Uxdesigner21

5. 從工作項目來解釋差異,雖然 UX 的範圍很廣,但很少人可以精通全部,幾乎沒有。

螢幕快照-2015-11-29-下午10.00.37Source:Uxinterface

6. 這張圖的分法有點奇怪,但畢竟是大整理,還是整理起來給讀者參考一下。

1-5fbLvXZHbnHR4gmIwU3Srw

Source:Linkis

7. 用兩者基本的工作項目來區分,但 UI 有沒有專職 Branding 就看每家公司對職位的設計了

ux-verses-uiSource:Thecdm

8. 從產品的角度看 UI 與 UX,UI 是產品的一部份,UX 是使用產品的體驗

20140304-183926Source:Userexperiencerocks

9. UI Design:功能。Usability design:動作。User Experience Design:情感

Bi9ItWiCcAArpXg1Source:Strategyanddesign

10. UI 是用來取用 Content 的工具,使用者使用 UI 吃完 Content 的體驗是 UX

ux-cereal-01Source:Icarehealth

Conversion Lab 也畫了一張圖來說明 UI 與 UX 的差異。

UIUX

UI 在使用者的眼前,UX 在使用者的大腦裡。UX 設計師不僅關注介面設計,更關心所有會影響使用體驗的一切,例如資訊架構、互動設計、Content、使用者的認知、經驗、需求、價值觀。當 UI 設計師設計完介面之後,對 UX 設計師來說工作還沒完成,UX 設計師最終的工作是在使用者的大腦裡完成的,所以 UX 設計師永遠看不到自己的工作成果,只能透過使用者訪談或定性定量 UX 研究方法,去檢視使用者腦袋裡的體驗是否正確。

UIUX3

有人會說設計 UI 不就是在設計 UX 嗎?,如果 User 的體驗只被 UI 影響,那或許可以說設計 UI 就等於設計 UX,但使用者手上拿的不是 UI,而是產品,UI 是產品設計的一部份。體驗也不完全受產品影響,還會受到使用產品時當下的使用情境以及使用者對品牌的印象等等其他與體驗相關的事影響。

以上就是 Conversion Lab 為您整理的 UI&UX 的差別圖。

好友人數

相關文章

【硬塞科技字典】什麼是 UI/使用者介面?

UI 中文稱為使用者介面,以產品的角度來看,就是使用者實際接觸產品的部分,實務開發上包含外觀、前端和互動設計等範疇。

產品訪談時,別問使用者的感覺「是真的嗎?」

先講結論,其實直接詢問使用者的「感覺」是可以的,甚至可以透過這種方式挖掘更深層使用者心中的想法,但這種做法在學術界被認為不夠嚴謹,且同時使用者訪談的新手常會因這麼做而犯許多錯誤,所以建議在學習訪談的初期避免這種做法。

預設如何統治世界?改變習慣,從設計自己的「預設值」開始

我們對太多的東西感到習以為常,並沒有意識到預設值對我們行為的影響。這篇文章告訴我們設計的力量,也提醒我們,改變行為和習慣要從調整預設值開始。

評論