@墨刀_MockingBot ：UI 和 UX 到底有什么不同？一圖勝千言，我們整理了10 張形象生動的圖片，告訴你 UI 和UX 的區別到底在哪里。

有哪些不容易搞懂的差別？

1. 《術語小科普！聊聊線框稿、視覺稿與原型的區別》
2. 《UI設計師來收！FLOW CHART 和 UI FLOW 有什么差別？》

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

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

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

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

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

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

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

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

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

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

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

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

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

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

歡迎關注譯者微信公眾號：

「本月最值得閱讀收藏的完美像素使用手冊」

1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
2. 《中文版來了！值得每個設計師收藏的《完美像素使用手冊》之細節篇》
3. 《第三集！值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
4. 《第四集！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》
5. 《最終版！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com