10张图看懂UI和UX到底有何不同?

UI 和 UX 到底有什么不同？

如果说 UX 设计师是一个站在 4000 米山上远眺产品整体格局的人，那么UI设计师则是一个拿着显微镜检视产品细节部分的角色。

UX 设计师关注产品带给用户的感受，着眼整体，UI 关注细节。

一图胜千言，下面这 10 张图，告诉你 UI 和UX 到底有何不同？

拿瓶装番茄酱举例，UI 关注产品本身，UX 则是考虑了用户体验和使用情境，最右边则是可用性测试，通过测试效果再不断地对产品体验进行调整和修正。

如果把产品比作人体的话，那么 UI 就是身体，UX 则是心脏，代码是骨骼。

source: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 设计师的界限变得越来越模糊，设计师不再关细节部分，而是着眼整体和全局，只为打造以用户为中心的最佳产品体验。

图：thinkspace.csu.edu.au

「设计思考流程」是指一套以人为本的设计思维和方法论，包「同理心」、「需求定义」、「创意动脑」、「制作原型」、「实际测试」5个步骤。

在整个设计思路中，原型制作则是其中一个重要的环节。

一个接近真实的原型设计不必苛求完美，只需要通过它获得想要的测试结果。

理想的状态是，以动态界面原型模拟一款产品的完整体验，不仅可触摸，还有动画、手势和等微交互。

基于交互原型大家可以对自己最基础的设计想法进行可用性测试和验证，通过测试效果再不断地进行调整和修正。

因此，越来越多的设计师也开始青睐「墨刀」了。

与复杂难用的 Axure 不同，墨刀作为一款简单易上手的原型设计工具，能让你 10 分钟就快速勾勒出一款 app 的原型构想，展示页面连接关系，呈现拟真的互动体验。

来源：墨刀素材广场

看完上面的文章，希望你能够更清楚UI和UX的区别，在选择职业和岗位时能对号入座，真正从事自己想探索的领域。

关于UI和UX的区别，你还有哪些看法？

欢迎评论区留言，一起探讨！