超简单！10 张图秒懂UI和UX到底有何不同？

@墨刀_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