10 张图秒懂UI和UX 到底有何不同？

来源 墨刀

UI 和 UX 到底有什么不同？

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

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

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

Source:agilebits

如果把产品比作人体的话，那么 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 时常被混用？它们之间的差别到底在哪里？说说你的观点吧。

您也可以加微信号1025792036备注“设计”进入微信群讨论。

想系统的学习了解如何在项目中循序渐进的思考体验设计和体验创新。个人参与可以学习到如何成为合格的用户体验设计师，团队参与可以推动团队在用户体验思维角度的主动思考，以帮助建立跨团队的用户体验协作的意识和初步能力。我们提倡把用户体验作为思维方式在企业中跨角色推广。若要获得产品和服务体验的全面提升和突破创新，需要团队成员对用户体验的思维方式的共同理解、认同和深入人心的贯彻执行。你不但可以听到理念方法讲授、案例分享，还有现场的小组实践项目练习帮你吸收、应用。

点击“工作坊详情”或扫描下图中的二维码进入报名页。