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

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

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

如果說 UX 設(shè)計(jì)師是一個(gè)站在 4000 米山上遠(yuǎn)眺產(chǎn)品整體格局的人，那么UI設(shè)計(jì)師則是一個(gè)拿著顯微鏡檢視產(chǎn)品細(xì)節(jié)部分的角色。UX 設(shè)計(jì)師關(guān)注產(chǎn)品帶給用戶的感受，著眼整體，UI 關(guān)注細(xì)節(jié)。

拿瓶裝番茄醬舉例，UI 關(guān)注產(chǎn)品本身，UX 則是考慮了用戶體驗(yàn)和使用情境，最右邊則是可用性測試，通過測試效果再不斷地對(duì)產(chǎn)品體驗(yàn)進(jìn)行調(diào)整和修正。

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

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

UI 關(guān)注產(chǎn)品功能，UX關(guān)注用戶情感。

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

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

UI 涉及人機(jī)交互、工業(yè)設(shè)計(jì)、視覺和聲音設(shè)計(jì)等。而 UX 則包含信息架構(gòu)、內(nèi)容策略在內(nèi)的更多部分，他需要從整體動(dòng)態(tài)流程上考慮產(chǎn)品是否能解決用戶的問題。UI 屬于 UX 的一部分。

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

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

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

近年來，在「設(shè)計(jì)思考流程」的趨勢下，整體性設(shè)計(jì)流程越來越受到關(guān)注，UX 和 UI 設(shè)計(jì)師的界限變得越來越模糊，設(shè)計(jì)師不再關(guān)細(xì)節(jié)部分，而是著眼整體和全局，只為打造以用戶為中心的最佳產(chǎn)品體驗(yàn)。

「設(shè)計(jì)思考流程」，是指一套以人為本的設(shè)計(jì)思維和方法論，包括「同理心」、「需求定義」、「創(chuàng)意動(dòng)腦」、「制作原型」、「實(shí)際測試」 5 個(gè) 步驟。在整個(gè)設(shè)計(jì)思路中，原型制作則是其中一個(gè)重要的環(huán)節(jié)。

一個(gè)接近真實(shí)的原型設(shè)計(jì)不必苛求完美，只需要通過它獲得想要的測試結(jié)果。理想的狀態(tài)是，以動(dòng)態(tài)界面原型模擬一款產(chǎn)品的完整體驗(yàn)，不僅可觸摸，還有動(dòng)畫、手勢和等微交互，基于交互原型大家可以對(duì)自己最基礎(chǔ)的設(shè)計(jì)想法進(jìn)行可用性測試和驗(yàn)證，通過測試效果再不斷地進(jìn)行調(diào)整和修正。

歡迎關(guān)注譯者微信公眾號(hào)：

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

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com