UI & UX 差別是什麼,看圖大整理

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

1.倒過來的蕃茄醬瓶設計,考慮到番茄醬快用完時很難倒出的使用情境。
ketchupSource: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-5fbLvXZHbnHR4gmIwU3SrwSource: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 的差異。

UI&UX2

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

UI&UX3

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

以上就是 Conversion Lab 為您整理的 UI&UX 的差別圖。歡迎加入 Conversion Lab 粉絲頁,每天有更多更相關的資訊與您分享。

  • James

    我覺得這篇蠻好的,很完整!感謝整理!

    但Akane Lee那邊似乎對裡面的內容不太認同,轉到她的blog後大家針對UI / VD 吵了兩三天了哈哈哈

    • 謝謝您的支持!歡迎多來逛逛,也給我們一些建議!

      我覺得能多些討論也很棒啊,能聽到大家不同的意見跟想法,或許也說出了許多人的疑慮呢!我也認同 Akane Lee 提醒的:介面設計需要考量輸入、輸入、運作內容等等。

      回到這篇文章的初衷:為什麼要整理 UI/UX 的不同?我想 Hans 寫這篇的出發點,其實還是因為許多企業仍然不懂什麼是 UX、UX Designer 在做什麼、以及 UX 可能帶來的價值。當談到使用者經驗時,老闆們會說:我們一直都很重視使用者啊!但是並不了解有些研究方法或設計方法可以運用。在規劃介面時,只認知到「我們需要一位介面設計師」來畫一個美美的網站。而這些圖背後的目的,其實也是想要提醒這些公司,其實我們需要規劃的不只是介面視覺而已,還有背後的 UX!我們需要的是 UX 人才,而這些人才應該做的事情、具備的能力則包括這些圖中所列舉的這些項目。

      至於工作職掌與分工,如同您、Shani Li 以及其他先進的觀察,目前一些大公司會把工作分為 UI Design (Visual)、Interaction Design、UX Research 等三塊,但也在部分團隊中出現了 Full-Stack Designer 的角色;所以我覺得工作職位設計這一點,其實並沒有絕對,還是看公司需求、個人能力、團隊合作而定。

      這些圖多少會有未盡之處,但我個人在看這幾張圖的時候,注重的是這些圖有沒有把兩者的差異舉出來,而非對兩者分別下了精準的定義。當然也歡迎大家提出更好的版本,我們很樂意幫忙推廣的。也歡迎大家來投稿,分享自己的工作心得、產業觀察等主題都可以唷!

    • Kaka

      我也有默默的關注一下那位小姐的部落格!雖然這樣說很失禮,但我也真心覺得她某些觀念不是很正確、部分說法很含糊,也不知真懂還是⋯覺得這樣去開課似乎有些⋯
      不過這次台下訪客也有點太tough…

      我想UX是非常重要也專業的一門學問!不僅僅要熟知基本的視覺設計,還包含色彩、圖形、心理、人類行為、社會、程式等等等等!我想這就是為什麼業界會將重要並複雜的觸發及運作設計交予UXT而非UID的原因之一吧!

      • James

        就是別人好心花時間跟她說,結果一直被盧小孩⋯唉~浪費時間!

      • 我想樂於分享的人還是值得鼓勵的啦…雖然溝通過後想法還是不同,但至少她沒有刪掉回應、把部落格變成一言堂,那這樣其實大家還是可以從討論中看到不同觀點呀…
        (所以也要在這裡邀請大家多來發表意見 :P)

        UX 很複雜?我想是因為人類很複雜!

        • Kaka

          讚同您的看法!

  • Lin Kathy

    感謝您的分享,我也認為可以多方討論是一件很好的事情!
    但我比較無法接受那位小姐的論點,將UX design定義為UX Researcher,「做的是「發現」,他只能告訴你問題出在哪,但沒辦法直接告訴你問題要怎麼解決。解決問題是「創造」,歸設計師思考。思考出解法再交給 UX Researcher 驗證」包含wireframe等,都將歸類為UID 的工作?
    您認為呢?

    • Hans

      這樣分當然是有問題的囉,因為研究需要設計思考,也需要創造力與想像力,如果研究者如果有具備設計能力也能直接告訴你問題怎麼解決,而且有時候 User 也已經有很好的解決方法囉,不提出來也不好吧。

      但如果說研究員說提不出解決方案的話,嗯~當然是會有提不出來的狀況,但實際上在業界中,厲害的研究員是可以提得出來的,而且研究員也絕對需要設計思考、創造力與想像力的,不具備的話很難做出有價值的研究 =)

    • 一般的 UX Researcher 都會參與設計,只是在過程中要能區分清楚哪些是「觀察與洞見」,哪些是「設計意見」。也有些公司的 UX Researcher 是負責一般性的研究,像是一年一度的全國手機用戶行為研究,以供集團參考,而非直接為了某個專案的需求。

      至於吵翻天的話題:UI Design 應該包含哪些工作,我再次總結如下:
      1. 設計好一個介面要做哪些事情?基本上這篇文章提到的所有工作都要做。
      2. 一個介面設計師要做哪些事情?應視老闆意見、公司需求、個人能力、團隊組成、開發方式、開發階段而定;但許多網路公司的職務設計是以介面視覺設計為主,因為設計好一個介面要做的事情太多啦,所以會拆開來。有些公司則會避免使用 UI Designer 這個模糊的名詞,而直接使用 Visual Designer 來溝通。
      (同樣的,UX Designer 也很包山包海!所以針對 UX Design 又可以再來討論一番…)

  • 張遜

    感謝整理!!觀念比較一覽表<3

  • JOCK

    請問各位大大對於 Human Factors 與 UX 的差異 ?
    最終追求的目標是?
    Nielsen and Norman 早期研究大部分以Human Factors為主,任何一點都有依據。
    大家對這Human Factors瞞陌生的但說到UX大家都變成專家了。
    使用者經驗分析師~大家都是使用者所以都是專家。
    所以會一直聽到~我覺得…應該..等等。
    目前在業界面領這問題讓我無奈到底~~大家都是專家~~哈哈
    花了將近10年研究Human Factors 現在一堆專家(自認)用一個工作經驗或我覺的~打臉…..

    • Jock 您好:我不是大大,對 Human Factors 研究不深;就我目前所知,兩者相同處很多,主要還是起源不同,但目前兩個領域關注的問題十分類似。

      我試著列舉一些主要不同之處,若有偏誤還請不吝指正-
      1. 目前所討論的 UX,是從 HCI、UI 領域發展而來的,所以會納入資訊架構(Information Architecture)領域的知識;Human Factors 則無
      2. UX 重視使用者在整個生命週期之中,與不同接觸點的互動情況(像是旅遊者行前怎麼做功課?旅途中怎麼使用之前的規劃?結束後怎麼分享?);Human Factors 較專注在單一接觸點的互動或是在工作流程中的互動。
      3. UX 較重視精神、情感面,如果使用者用的開心,也是好的體驗;Human Factors 偏重於 Physical 方面,Mental 方面則重視情緒是否會增加或降低生產力,是否會影響任務的完成,至於使用者開心與否,不是首要目標
      4. UX design 的目標是,從基礎的 usable、usability,一直到精神層面的 pleasurable、meaningful;Human Factors 主要是關注任務是否能順利完成

      至於您提到的"大家都是專家",也是小弟我很苦惱的一件事 😛

      這句話真的每天都會出現一遍:大家都說自己是使用者,所以都是專家;事實上我們對自家的產品往往都累積了許多知識與經驗,在使用上早已跟一般使用者距離非常遠了,許多大家會碰到的問題我們可能很難發現。

      所以真的要做出好的 UX,其實應該要透過使用者研究去發掘使用者的真實心聲,用科學的證據去支持我們的設計;若單純是提出"我覺得如何如何",那只是在提出一個創意而已。

      Nielsen Norman Group 也有一篇文章是講:"UX without User Research is not Good UX" https://www.nngroup.com/articles/ux-without-user-research/

      以上淺見,歡迎討論。

  • Amanda Huang

    好棒的文章!!