你可曾注意到用户界面设计（UI）和用户体验设计（UX）的区别？

不少人都有这种疑问。

当下设计潮流和设计工具日新月异、推陈出新。前端开发越来越受到重视，而越来越多的前端开发者也开始涉足 UI/UX 设计。UI设计和UX设计常常被他们混为一谈。两者有本质上的区别，初学者应该充分了解两者区别。

鉴于此，我和来自Creative Tim的团队伙伴做了很多研究，为大家提供了这份综合指南，展示了这两个大领域的核心内容与区别：

1. UI设计——界面外观如何
2. UX设计—— 产品效果如何
3. UI设计和UX设计有何主要区别?
4. UI设计师和UX设计师分别做什么?
5. 将UI和UX工作混淆有什么弊端?
6. UI/UX设计师如何协作?
7. UI/UX设计师收入水平如何?
8. 如何成为一名UI/UX专家？哪里找到相应的设计课程或教程？
9. 你应该专攻哪一个领域？UI还是UX设计？

1.UI 设计---界面外观如何？

UI关注软件图形界面，包括按钮、布局、动画、转场、微交互等。简而言之，UI关于界面外观。

UI设计包括以下界面:

• 用户图形界面 (GUI): GUI设计用户与系统控制工具之间的视觉交互。电脑桌面就是一种GUI。
• 语音控制界面 (VUI): VUI设计用户与系统的语音交互。三星的Bixby和苹果的Siri智能助手就是VUI例子。
• 手势识别界面: 这种界面主要面向与虚拟现实（VR）以及其他基于手势的系统交互。用户面对的是3D空间。这是我们创建的可编辑Soft UI VR控制面板。

来源

• 优秀的UI设计，需要考虑以下几点：
  • 设计致力于帮助用户以最小的努力完成任务。
  • 设计赏心悦目，令人愉悦。
  • 设计传达企业或组织品牌价值。

2. UX设计---产品效果如何？

UX设计关注用户与系统全生态的交互。符合逻辑的导航和自然丝滑的体验都属于UX范畴。简而言之，UX设计使用户拥有积极的体验。

UX设计流程主要包含以下步骤：

• 交互设计涉及用户如何使用系统交互组件（包括页面转场、动画、按钮等），以便完成任务。
• 用户研究涉及广泛的调研，包括从新老用户收集意见反馈， 理解用户需求，并根据调研结果进行设计。
• 信息架构涉及信息内容的组织安排。为了便于用户完成任务，UX设计师需要厘清不同内容的类别关系，合理安排内容层级。

优秀的UX设计，需要达到以下标准：

• 产品易上手，易于理解。
• 产品能解决用户问题。
• 产品能满足不同用户群体的需求。
• 产品能为用户带来积极体验，使用户轻松操作各项功能。

认知偏差

优秀的UX设计师需要时刻注意人类与生俱来的认知偏差。这些偏差会影响用户的使用体验。许多营销策略就是利用了这些认知偏差：:

来源

3. UI设计和UX设计有何主要区别？

UI设计和UX设计这两个词常常被混淆使用。

尽管终端产品同时获益于这两种设计方法，但它们两者的设计过程却大相径庭。

UX设计关注用户解决问题的全旅程，而UI设计则注重产品的外观。

以下是UX和UI设计的主要区别：

• 关注点不同：UI设计师的主要关注点是终端产品的视觉呈现，所以他们制作的是高保真的产品原型。UX设计师则更关注终端产品的目的和功能，以及产品的内在逻辑。此外，UI设计师处理产品的微观设计细节，UX设计师则更关注宏观的项目管理和分析。
• 原型细节程度不同：UI设计师设计彩色的产品原型，而UX设计师只绘制黑白的产品草图。
• 使用工具不同：UI设计师使用 Sketch、Flinto、 Principle等绘图工具，以及InVision等设计协作工具。UX设计师使用线框图工具，比如 Mockplus。
• 艺术成分不同：UI设计师需要在设计中加入艺术成分，因为产品关系到终端用户的视听体验。而UX设计师需要更多的社会属性，因为他们需要理解用户想要获得何种体验。

这是同款产品UX线框图（左）和UI设计图（右）：

来源

UI设计师和UX设计师分别做什么？

想成为UI设计师需具备以下技能：

• 适应敏捷工作模式。
• 能够绘制交互流程图、线框图、原型图等。
• 熟悉 InVision、 Sketch 、Photoshop 、Figma 等绘图工具。关于选择哪款绘图工具，可参看我们的这篇文章：InVision vs Sketch vs Figma vs Photoshop。
• 能够使用HTML5、CSS3和JavaScript三种前端语言。
• 能够完成从构思到交付视觉设计整套流程。
• 与UX设计师、开发、测试人员和产品经理合作，为产品从设计到生产提供视觉创意。
• 通过设计将公司的品牌和风格传达给用户。
• 通过用户分析和研究，改进产品外观效果。
• 根据不同设备尺寸，进行产品响应式设计，保证产品交互动画的一致性。

想成为优秀的UX设计师需具备以下技能：

• 适应敏捷工作模式。
• 对用户体验过程有深刻的理解。
• 能够使用原型设计工具，如 Adobe Creative Suite、Sketch、InVision、Axure等。
• 解决问题的能力，以及保持对设计、人、生活和技术的好奇心。
• 对相关利益方的管理和保持与客户的互动。
• 创建流程图、线框图、网站地图、原型图及其他用户体验交付产品。
• 与开发人员、产品经理、UI设计师、外部利益相关方和测试工程师紧密合作，根据市场动态、用户反馈和技术限制来迭代设计。
• 分析客户需求、竞争对手、产品结构，制定产品体验策略。
• 为移动端、网络端、桌面端和其他硬件终端创造无缝式的设计和交互策略。

5. 将UI和UX工作混淆有什么弊端？

同时承担 UI/UX 的角色有点像同时戴着两顶不同的帽子。

尽管许多组织都将UI/UX当作相同工种，但其实两者需要不同的技能。两者的关注点、思维方式和产品原型设计方法都大相径庭。

将两个角色混淆就要求设计师不断地在概念和视觉之间不断切换。这不仅十分困难，还消耗了向两方面各自投入的时间精力。

6. UI/UX设计师如何协作？

尽管UI/UX设计师技能要求不同，但他们需要通力合作，为用户提供最佳体验。

UI设计需要具有美感，但如果没有一个好的UX设计，它的导航可能笨拙混乱。另一方面，一个产品的用户体验就算完美无缺，但如果没有一个好看的用户界面，就吸引不了用户。

任何前端开发和设计过程都应该从了解用户需求开始。UX和UI设计师应该与开发者、产品经理和老板一道，共同确定最终产品的功能、外观和效果。

UX设计师通常参与产品设计的早期阶段，因为他们需要设计活动，帮助用户解决问题。这些活动包括用户分析和项目管理等。

之后，UI设计师根据UX设计师提供的草图进行美学和交互设计。

可以这样说，UI设计师和UX设计师携手并进，共同创造产品。即使有人身兼两职，也必须遵循不同的设计准则。

7. UI/UX设计师收入水平如何？

UI设计师在全世界的平均收入为5万元，美国的平均工资为9.1万，德国为5.7万，法国为4.7万，英国为6.7万。

UX设计师的收入略高，全球平均为5.2万。美国的UX设计师平均收入为10.2万，德国为5.3万，法国为4.9万，英国为6.8万。(来源： Glassdoor)

注：上面列出的所有工资都是该地区的平均水平，并且以美元为单位。

8. 如何成为一名UI/UX专家？哪里找到相应的设计课程或教程？

要想成为一名UI/UX专家，首先要对UI/UX设计非常感兴趣。确认了自己的兴趣，就应该找到相应资源，并参加设计课程，为就业市场做好准备。

有一些在线课程可以帮助你入门UI设计， 如 UI设计课程 和学习UI设计。

对于UX设计，可以选择网上自学，报名网络课程。你可以参考这里介绍的学习UI/UX的最佳在线课程，里面介绍了哪些网站提供免费课程，以及课程评价。

还有许多大学公开的UX设计付费课程，或者来自在线大学的课程。同样可以参考这里介绍的学习UI/UX的最佳在线课程，里面介绍了哪些网站提供免费课程，以及课程评价。

假设你已经具备了成为UI/UX设计师所需的一些技能。在这种情况下，你也可以看看诸如UX设计行为模式、常用用户体验方法、世界上最好的设计师的启发式图形设计、以及设计师应该阅读的学术研究论文等文章。

9. 你应该专攻哪一个领域？UI还是UX设计？

专攻UI还是UX设计既取决于个人偏好，也要看自身特定技能组合。

然而，有大量的公司招聘身兼两职的UI/UX设计师。

虽然这两者的角色和职责各不相同，但UI/UX设计仍是一片蓝海，因此最好对两者都有足够的了解。

虽然两者很难平衡，但身兼两职当然报酬也更高，也利于提升自己在公司的重要性。

尽管如此，在两个角色之间来回切换十分困难，最好还是专攻一个领域。

比如，你有艺术细胞，了解色彩组合搭配，知道如何提升产品视觉美感，那你更适合UI设计。

而如果你善于管理用户和相关利益方，具备出色的分析能力，并且了解如何改善用户体验，那么UX设计会更适合你。

10. 结语

UI和UX设计都需要理解用户。

只要同用户有同理心，前端开发和设计并非十分复杂--有很多现成的组件、工具和套件可以使设计更高效。

Creative Tim为你提供了大量的免费、优质、可编辑的UI工具，如模板、仪表板和设计体系。

如果想用手绘组件的方式绘制插图，请关注Creative Tim的产品：IRA Design。

欢迎在Twitter上联系我们。