ui和ue的区别是什么？

我主要说说UI和UX吧。

现在越来越多公司都在提倡UX体验设计，那么到底什么是UX体验设计？和UI有哪些区别？

感觉这个词语熟悉又陌生，那么今天我和大家分享下我的理解，仅代表我个人的观点和大家互相交流探讨，如有不对的地方欢迎多交流。

一、什么是UI？什么是UX？

1 什么是UI？

简单理解就是界面+交互。

什么属于UI呢？

这个我想大家都已经很熟悉，就是我们每天使用的产品的界面外观设计，无论是视觉效果，还是品牌个性，还是页面的交互设计，都属于UI范围内。

很多同学会问，交互设计不是属于交互么？怎么划分在UI了？

其实，UI是用户界面设计的统称。随着时代的发展，纯UI的时代已经过去了，今天的UI设计师，除了掌握视觉设计还需要具备一定交互设计能力。

从百科中对于UI的定义也是如此：负责产品的人机交互、操作逻辑、界面视觉的整体设计。从字面大家也可以看出-用户界面，除了界面还包含用户和界面之间的交互。

如果你觉得不好理解，一个简单粗暴的理解方式就是UI=交互+视觉。

2 什么是UX？

UX我们可以把它理解为用户任务流程设计，今天我们用户注册我们一个新的产品，需要那几个步骤？

——用户通过朋友圈看见我们的商品广告，通过那几步到达购买页，最后转化付费，这些我理解为UX，

引用的资料UX核心是用户，体验指用户在使用产品以及与产品发生交互时出现的主观感受和需求满足。

UX设计师研究和评估一个系统的用户体验，关注该系统的易用性、价值体现、实用性、高效性等。

举个例子：我们去银行的ATM提款机上取钱，看到的界面和每一步操作数据UI设计。但是如何存钱？如何更改密码？如何转账汇款？

——这些流程的设计属于UX设计，他关注这个产品是否好用和易用。

UX我更多理解为用户的行为表达，UX设计是在用户直接或者使用服务时候感受到的体验，比如反馈，和任务指引的整体设计。

比如之前我们去星巴克买咖啡时候，如果遇见人很多，我们就必须排着很长的队。但是今天，我们去店里人很多，直接可以手机上操作，手机上排号，大大提升了效率。

那么这个体验的的优化就是UX工作，它可以改变我们生活的体验，类似这样的UX改变生活的案例还有很多。比如越来越多餐厅也可以通过微信排号，无须店门口等待，只需要关注他们公众号，到时候会有排号提醒。

3 解决问题的视角不同

UI和UX大家本质都是在解决用户问题，只不过站位不同视角不同，UI更多是解决用户第一印象，这个设计好不好看，交互逻辑合理不合理，结构清晰不清晰，页面功能层次表达是否合理。

而UX更多是定义了产品目标流程，UX更多解决产品的深度，而UI是产品的宽度，两者都很重要。

互联网行业发展了这么多年，用户体验已经融入到了我们生活中点点滴滴，UI和UX尽管本质不同，UI更加具有视觉性，UX更多是逻辑系统性。

但是他们一般都属于一个团队，只不过大家运用不同的技能，不用的工具，不同的问题处理方式——但是最终都是把我们产品体验做好。

二、UI与UX的区别有哪些？

1 UX让界面更好用，UI让界面更好看

这句话很好理解，UI设计师的价值是让我们的界面好看符合用户审美趋势，同时交互上符合用户逻辑，符合产品想传递的功能优先级，没有大的交互原则问题。

UX是让整个流程更好用，更好引导用户完成任务，达成我们的商业目标。这中间两者使用的技能也不相同。

2 UX让用户实现目标，UI让界面提升品牌感

UX帮产品实现产品目标，很好理解，今天任何的产品都需要有商业目标，无论是刚上线的新产品，还是老产品都有用户目标。

拿618，双11这些大型活动来说：很多电商都各种营销，那他们的商业目标是什么？

——是GMV成交额，所以UX的目标是怎么让GMV最大化，那么这中间就涉及到：用户入口、用户路径和链路的完整设计，每一个环节的漏损都应该考虑在里面。

那么UI就是用户在使用产品过程中，心情是否感觉愉悦，没有任何的使用负担，体验时候特别友好。

同时界面和交互时候不会感觉冗余，同时用户界面的表达有温度，如上图google的情感化表达一样，UI就是建立用户和商业这件的情感品牌桥梁。

3 UX核心目标引导用户完成任务，UI不是

另外一个不一样的点是，UX核心是引导用户完成用户目标和任务。

比如火车票软件，虽然它的交互视觉很糟糕，但是相对比这个更重要是如何帮助用户完成目标，UX的优先级高于UI,如果产品无法满足用户价值，对用户没有意义，那么UI做的再好其实意义也不大。

历史上有很多昙花一现的产品都是如此，比如早期的Path、Paper等产品就是UI视觉交互很都很好，但是在商业层面以及UX上没有那么完美，没有很好的用户价值，最终页难躲过消失的命运。

4 交付的成果不一样

UI和UX的交付产出也有很大的不一样，UX的输出包括UX体验报告、功能定义、功能规划、项目进度、概念设计、需求评估、市场研究、数据研究、可用性测试、用户体验地图、流程图、交互原型图等等。

这是大概一些产物，当然还包括一些通用的比如汇报、提案等。

UI的交付大家都比较清楚，包括视觉和交互、视觉设计、品牌设计、动效设计、组件设计和设计语言等等，当然方案汇报提案也是一样的。

5 职责不同

UX设计师还一个重要角色就是策略制定和内容设定，任何产品内容是核心。

拿电商来说：人、货、场，货就是内容非常的主要，这个内容如何和用户互动，同时被用户接受，和用户互动，这个中间UX设计师扮演着非常重要的角色。

一般来说，UI和UX都会用到这些工具

1 Mason

现如今，视觉稿（Mockup）和原型（Prototype）是网页和 APP 设计过程中最常用的方法。两种方式都很有效，不过也都可能会在时间和花销上对整个项目产生压力，影响团队和项目的整体推进，尤其是在时间和精力都非常有限而项目又非常复杂的情况下。

Mason 提供了一个更好的解决方案，它让你无需设计线框图、原型和视觉稿，而直接拿现成的组件来编辑和设计，并且确保最终输出的产品既具备功能，也是像素完美的，最后通过 Mason 的平台进行部署，甚至你都不需要有代码编写的经验。

Mason 的设计方法看起来很激进，但是实际上非常的易用。无论是调整还是维护，Mason 都能确保控件和元素都很容易处理。在 Mason 中修改、发布，然后就能正常使用。无需亲手编写代码，诸如注册、登录等各种常见的功能都能够正常输出使用。

这款工具并不会限制你将网站投放到特定的平台或者托管环境下，你可以在你最熟悉的服务器或者服务商那边部署。这可以大幅度节省管理费和时间，并且你会发现团队协作更加高效了。

2 Overflow

设计师讲述故事最有效的办法之一，是将故事中的节点连在一起，将用户历程线性地呈现出来。这样的方式会让访客更好的理解他们所看到的内容，同时能够更加专注于细节的呈现，并且构建有效的反馈机制。

作为世界上第一个为设计师量身定制的用户流程图工具，Overflow 可以帮助设计师更好地讲述故事。它为设计师提供了一种全新的方式来更好的呈现作品，讲述故事，以交互式的流程同用户进行沟通，吸引用户的注意力。

Overflow 是一款跨平台的工具，可以与目前最流行的设计工具无缝地集成起来，允许设计师在同一个平台上完成设计、展示、共享和打印他们的用户流程。

3 UXPin

UXPin 可能是目前对于设计团队来说最理想的快速原型工具，尤其是当产品的 UX 设计和研发高度依赖快速反馈循环机制的时候。UXPin 可以让设计团队在向开发交付原型之前，充分地进行设计、共享和测试。

开发人员所需要的数据，实际上在每个项目设计完成之时，就会自动生成。所以，在将设计交付给开发人员之前，甚至可以使用检测工具，验证一下产品的部署是否和设计元素相互匹配。

UXPin 还提供一个完整的设计系统解决方案，帮助你保持整个产品的 UI 元素的一致性。而每个产品的 UI 组件都可以使用一段代码记录下来，因此可以更加轻松快速的扩展产品的功能。

4 Creately

UI/UX 设计当然不仅仅是线框图和视觉稿，它是动态的，系统化的，而这也是 Creately 这款工具的价值所在。这款图标工具适合生成工作流程，支持不同的图表类型，包括流程图、思维导图、UML 图标、线框图等。它所提供的图表功能和协同工作的功能，可以帮助设计师完成一半以上的工作。

使用 Creately 来创建图表，可以轻松创建出足够漂亮的图表，其中配备的1000多个专业的设计图表模板，可以快速地完成各式各样的 UX 设计项目。

5 PowerMockup

有许多 UX 设计师会使用 PowerPoint 来构建交互式原型，有了 PowerMockup 之后，你再也不需要寻找其他的工具来辅助你的工作了，它就可以帮你创建高效可共享的交互式原型。

在构建原型的时候，只需要从 PowerMockup 不断增长的资源库找到对应的形状或者设计元素，拖拽到 PowerPoint 当中，然后进行设计即可。为了实现互动，你所需要调用的也无非是 PowerPoint 当中的幻灯片和动画功能，很简单。

6 Visual Inspector

Visual Inspector 让设计师、开发者和负责维护的人员能够实时地在网站中检查和解决各种 UI 问题，并且同其他的工作人员随时共享信息。

这款工具不需要你懂得代码，只需要几秒钟就可以启用 UI 工具，并且几乎可以任何类型的网站（使用 HTML 代码，或者 WordPress 系统的）进行协同工作。这款工具不是免费的，终身授权的版本只需要付费49美元即可。

7 Fluid UI

Fluid UI 是一款可以用来设计线框图、原型图和视觉稿的综合性工具，它还为项目经理和分布式设计团队提供了非常完善的协作功能。它拥有非常全面的组件库，横跨桌面端、iOS 和 Android 等主流的、必须的平台。

8摹客

这款国产的工具快速易用，Sketch / PS / XD / Figma / Axure / Mockplus设计稿一键上传 ， 设计评审讨论 ， 自动标注一键生成，手动标注自由发挥 。 

1、负责软件界面的美术设计、创意工作和制作工作；

2、维护现有的应用产品；

3、收集和分析用户对于GUI的需求；

4、根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计；

5、对页面进行优化，使用户操作更趋于人性化。

扩展资料

UI设计师职能：

大体包括三方面：

1、图形设计，即传统意义上的“美工”。当然，实际上承担的不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。

2、交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。

一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。

3、用户测试/研究

其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来极大的风险。

一、产品定位与市场分析阶段

1、 目的（UI设计师应了解产品的市场定位、产品定义、客户群体、运行方式等。） 2、 主要执行人员（UI、UE、需求）

3、 需沟通人员（销售）

4、 实现步骤（会议讨论）

5、 UI主要职责：（定义用户群特征、定义最终用户群、定义产品方向）

二、用户研究与分析阶段

1、目的（UI设计师收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。这部分工作有团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析）

2、主要执行人员（UI、UE、需求、技术）

3、需沟通人员（销售）

4、实现步骤（纸搞线稿、黑白稿、原型）

5、UI主要职责（收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。这部分工作有团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析）

三、架构设计阶段

1、目的（这里涉及到比较多的界面交换与流程的设计，根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素）

2、主要执行人员（UI、UE、需求部门）

3、需沟通人员（技术、销售）

4、

实现步骤（UI进行风格设计出界面，和需求部门拿出定稿；UE对原型进行优化，整理出交互及用户体验方面意见，反馈给UI及需求部门；UID等待效果图，

开始代码编制）

5、UI主要职责：（根据可以性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。界面设计、图标设计、风格设计）

四、原型设计阶段

1、目的（根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频几个质量范围） 2、主要执行人员（UI、UE、需求部门）

3、需沟通人员（UID、技术）

4、实现步骤（设计规范；代码及程序开发）

5、UI主要职责：（对前面所以工作以设计方面的实施，根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频几个质量范围，原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性）

五、界面设计阶段

1、目的（根据原型设计阶段的界面原型，对界面原型进行视觉效果的处理）

2、主要执行人员（UI、UE、技术）

3、需沟通人员（UE、销售）

4、实现步骤

5、UI主要职责：（该阶段确定整个界面的色调、风格、界面、窗口、图标、皮肤的表现）

六、界面输出阶段

1、目的（配合好开发人员完成相关的界面结合）

2、主要执行人员（技术）

3、需沟通人员（UI、UE、需求部门、销售）

4、实现步骤

5、UI主要职责：（对界面设计阶段的最后结果配合技术部门实现界面设计的实际效果）

七、可用性测试阶段

1、目的（针对一致性测试；信息反馈测试；界面简洁性测试；界面美观度测试；用户动作性测试；行业标准测试）

2、主要执行人员（程序测试部门）

3、需沟通人员（UI、UE、程序、需求部门、销售）

4、实现步骤

5、UI主要职责：（负责原型的可用性测试，发现可用性问题并提出修改意见）

八、完成工作阶段

1、目的（对于前面七个阶段的设计工作进行细节调整）

2、主要执行人员（UI、UE）

3、需沟通人员（技术、销售）

4、实现步骤

5、UI主要职责：（可用性的循环研究、用户体验回馈、测试回馈、UI人员把可行性建议进行完善）

九、产品上线

1、目的（检验前面界面设计的成果是否符合市场及用户群体）

2、主要执行人员（销售）

3、需沟通人员

4、实现步骤

5、UI主要职责：（收集市场对于产品的用户体验，并记录诚文字说明）

十、分析报告及优化方案

1、目的（了解整个界面设计的优缺）

2、主要执行人员（UI、UE）

3、需沟通人员（技术、销售）

4、实现步骤

5、UI主要职责：（对于前九个阶段的界面设计进行详细系统的整理，为下一次界面设计提供有力的市场及专业论据）

一、产品定位与市场分析阶段

1、目的（UI设计师应了解产品的市场定位、产品定义、客户群体、运行方式等。）2、主要执行人员（UI、UE、需求）

3、需沟通人员（销售）

4、实现步骤（会议讨论）

5、UI主要职责：（定义用户群特征、定义最终用户群、定义产品方向）

二、用户研究与分析阶段

1、目的（UI设计师收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。这部分工作有团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析）

2、主要执行人员（UI、UE、需求、技术）

3、需沟通人员（销售）

4、实现步骤（纸搞线稿、黑白稿、原型）

5、UI主要职责（收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。这部分工作有团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析）

三、架构设计阶段

1、目的（这里涉及到比较多的界面交换与流程的设计，根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素）

2、主要执行人员（UI、UE、需求部门）

3、需沟通人员（技术、销售）

4、

实现步骤（UI进行风格设计出界面，和需求部门拿出定稿；UE对原型进行优化，整理出交互及用户体验方面意见，反馈给UI及需求部门；UID等待效果图，

开始代码编制）

5、UI主要职责：（根据可以性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。界面设计、图标设计、风格设计）

四、原型设计阶段

1、目的（根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频几个质量范围）2、主要执行人员（UI、UE、需求部门）

3、需沟通人员（UID、技术）

4、实现步骤（设计规范；代码及程序开发）

5、UI主要职责：（对前面所以工作以设计方面的实施，根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频几个质量范围，原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性）

五、界面设计阶段

1、目的（根据原型设计阶段的界面原型，对界面原型进行视觉效果的处理）

2、主要执行人员（UI、UE、技术）

3、需沟通人员（UE、销售）

4、实现步骤

5、UI主要职责：（该阶段确定整个界面的色调、风格、界面、窗口、图标、皮肤的表现）

六、界面输出阶段

1、目的（配合好开发人员完成相关的界面结合）

2、主要执行人员（技术）

3、需沟通人员（UI、UE、需求部门、销售）

4、实现步骤

5、UI主要职责：（对界面设计阶段的最后结果配合技术部门实现界面设计的实际效果）

七、可用性测试阶段

1、目的（针对一致性测试；信息反馈测试；界面简洁性测试；界面美观度测试；用户动作性测试；行业标准测试）

2、主要执行人员（程序测试部门）

3、需沟通人员（UI、UE、程序、需求部门、销售）

4、实现步骤

5、UI主要职责：（负责原型的可用性测试，发现可用性问题并提出修改意见）

八、完成工作阶段

1、目的（对于前面七个阶段的设计工作进行细节调整）

2、主要执行人员（UI、UE）

3、需沟通人员（技术、销售）

4、实现步骤

5、UI主要职责：（可用性的循环研究、用户体验回馈、测试回馈、UI人员把可行性建议进行完善）

九、产品上线

1、目的（检验前面界面设计的成果是否符合市场及用户群体）

2、主要执行人员（销售）

3、需沟通人员

4、实现步骤

5、UI主要职责：（收集市场对于产品的用户体验，并记录诚文字说明）

十、分析报告及优化方案

1、目的（了解整个界面设计的优缺）

2、主要执行人员（UI、UE）

3、需沟通人员（技术、销售）

4、实现步骤

5、UI主要职责：（对于前九个阶段的界面设计进行详细系统的整理，为下一次界面设计提供有力的市场及专业论据）

①为创造戏剧感，使用色彩分割背景

分屏式设计并不新鲜，它是一个存在了很长时间的设计趋势了。在桌面端的屏幕上，分屏式设计一直都很有效，宽广的屏幕让设计师有足够的施展空间，但是在移动端上则是个挑战。好在UI设计师们找到了解决方案，对比色是增加视觉吸引力的最佳方式。

在 Tubik Studio 的这个设计案例当中，设计师使用不均等分布的色块来分割屏幕，同时使用白色背景区块来承载主体内容，避免被背景色彩干扰。设计师充分利用了对比色的对抗性，以及和白色之间的对比度，功能完善，但是有趣又漂亮。

②为营造氛围，在背景上叠加辅助性图形元素

虽然在背景中叠加各种图形化的元素听起来很奇怪，但是确实是逐渐流行起来的一种背景设计玩法。不过，这存在一种风险，就是如果叠加太多的图形化元素，会让整体看起来过于杂乱。尽量在丰富视觉和制造视觉污染之间找到平衡，最终的设计效果，能够给你带来意料之外的优质效果。虽然手机越来越大，但是屏幕空间依然很宝贵。通过叠加一些特定的图形元素来创造视觉深度，给用户以空间感。这种背景设计的另外一个好处在于，你可以让整个UI显得更加富有视觉吸引力。在设计的时候，需要注意的是，要保持元素之间的一致性，确保不同的元素在屏幕上呈现的时候，仍然保持协调。

③为保持整体感，使用整图作为背

使用整张作为背景，一直被UI/UX领域的设计师所争论。对，你没看错，这个事情一直存在争议。有人非常喜欢使用背景，有人则完全无法接受这种呈现方式。但是撇开个人喜好，趋势上，这种背景运用方式还是越来越流行了。在APP的UI界面中，如果你能灵活自由地使用全屏背景的化，对于接下来的设计肯定是有所助益的。所呈现的信息量当然是毋庸置疑的，更重要的是如何贴合品牌和氛围，呈现出应有的气场。

当然，最核心的技巧，是在于透明度的控制和内容框的设计。为了避免信息和背景之间的对比度不足，合理的方法是使用内容框将前景的元素承载起来。而为了避免背景喧宾夺主，还可以借助透明度的控制，来确保背景更加平滑自然，不会影响到阅读和使用。

④需要强化感受和情绪，使用渐变色背景

渐变色在几年前回归之后，在设计当中的运用范围越来越广。渐变色不仅赋予设计更加强烈的个性，而且能够和用户之间产生足够的情感共鸣。你可以使用渐变色来营造调性，创造对比，甚至还可以借助渐变色才来作为视觉线索和引导。比如当你在背景中使用蓝色的时候，可以通过深浅渐变来创造方向性，引导用户向特定的地方浏览。但是，渐变色背景流行起来最重要的原因还是它的情感共鸣的能力。许多 UI 设计师已经意识到心理因素在移动端设备中的巨大影响，能否唤醒用户的情感是关键。

渐变色背景的设计玩法有很多，变化幅度的大小，方向，对比度和亮度的变化差异，都会带来不同的影响。当然，渐变背景同样必须遵循一个原则，那就不能喧宾夺主。在设计的时候，同样可以借助透明度的调整，来降低它和CTA按钮之间的对比度。

⑤为了强化故事性，使用插画背景

插画师可以根据需求更加自由地绘制足以满足不同需求的插画，独特，个性，定制化。不过，想要创建足以代表企业、团队、产品或者用户角色的插画，并不能凭空创建，而是需要一个研究过程，通过调研和分析，才能提出需求，再做执行。它是一个机器人，还是一个更加拟真的角色又或者使用动物拟人化的形象更合适许多设计师更加倾向于在APP中使用自定义插画，因为这样更加自由轻松地达成各种目标，从新用户引导，到提供教程。

⑥基础但通用，使用几何图形来构建背景

几何图形本身是非常基础的元素，它们的含义和感觉非常基础，也具有普世性。虽然它们很简单，但是在UI 设计中非常强大。单一的几何形状是简单的，但是结合不同的效果、不同的组合，即使使用简单的几何形状，也能够发挥出多样的变化。当然，具体怎么运用几何图形，还要看你的UI界面上，有哪些东西，作为背景的几何图形和 UI 中的主体元素之间，空间关系要怎么控制，怎样保持优雅简洁，确保品牌信息的传达。