10 張圖秒懂UI和UX 到底有何不同？

UI 和 UX 到底有什麼不同？

如果說 UX 設計師是一個站在 4000 米山上遠眺產品整體格局的人，那麼UI設計師則是一個拿著顯微鏡檢視產品細節部分的角色。UX 設計師關注產品帶給用戶的感受，著眼整體，UI 關注細節。

一圖勝千言，我們整理了來自網路上的 10 張圖，告訴你 UI 和UX 到底有何不同？

拿瓶裝番茄醬舉例，UI 關注產品本身，UX 則是考慮了用戶體驗和使用情境，最右邊則是可用性測試，通過測試效果再不斷地對產品體驗進行調整和修正。

Source:agilebits

如果把產品比作人體的話，那麼 UI 就是身體，UX 則是心臟，代碼是骨骼。

source:http://careerfoundry.com

上圖從專業分工來看，UX和UI的工作內容有不同之處，但也有重合的部分。

Source：Asinthecity

UI 關注產品功能，UX關注用戶情感。

Source：Strategyanddesign

從定義來看，UI 是指網頁布局的方式。UX 關注網站的交互部分，是對產品和服務的綜合體驗，UX可以包含很多，從網站地圖（site map）到內容架構 (architecture of the content)。好的用戶體驗不能只停留在介面表層的交互與美觀部分，而應該是連貫的旅程、有線上與線下不同接觸點。

Source：Deptofmarketing

從工作分工來看，UX 職責包括用戶畫像，用戶故事，用戶調研，可用性測試，UI 則是布局設計，視覺設計，品牌形象。連接兩者的是線框圖。

Source：Thecdm

UI 涉及人機交互、工業設計、視覺和聲音設計等。而 UX 則包含信息架構、內容策略在內的更多部分，他需要從整體動態流程上考慮產品是否能解決用戶的問題。UI 屬於 UX 的一部分。

source:Dan Saffer

UX 設計以用戶為中心，關注任務流和使用場景。UI 設計重心則是色彩、排版等視覺方面。相似之處是兩人都留著大鬍子。

Source:ad DevLabs

UI 是你使用的部分，而 UX 是在你使用時的感受。

Source：Userexperiencerocks

UI 設計師關注按鈕的顏色，考慮的是視覺的部分，是產品看起來如何。而 UX 設計師則關注按鈕放置位置是否合適，最終出發點是用戶的感受 ，想要弄清楚人類想要使用的是什麼，覺得痛點。

source:原型設計工具墨刀

近年來，在「設計思考流程」的趨勢下，整體性設計流程越來越受到關注，UX 和 UI 設計師的界限變得越來越模糊，設計師不再關細節部分，而是著眼整體和全局，只為打造以用戶為中心的最佳產品體驗。

圖：http://thinkspace.csu.edu.au/inf536reflections/files/2015/08/dt-copy-xfcrbh.jpg

「設計思考流程」，是指一套以人為本的設計思維和方法論，包括「同理心」、「需求定義」、「創意動腦」、「製作原型」、「實際測試」 5 個 步驟。在整個設計思路中，原型製作則是其中一個重要的環節。

一個接近真實的原型設計不必苛求完美，只需要通過它獲得想要的測試結果。理想的狀態是，以動態界面原型模擬一款產品的完整體驗，不僅可觸摸，還有動畫、手勢和等微交互，基於交互原型大家可以對自己最基礎的設計想法進行可用性測試和驗證，通過測試效果再不斷地進行調整和修正。

「墨刀」，和複雜難用的 Axure 不同，作為最易上手的一款原型設計工具，能讓你 10 分鐘就快速勾勒出一款 app 的原型構想，展示頁面連接關係，呈現擬真的互動體驗。

實際情況中，UI和UX時常被混用，它們之間的差別到底在哪裡？說說你的觀點吧。

原文：10 張圖秒懂UI和UX 到底有何不同？
推薦閱讀：