你可曾注意到用户界面设计（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上联系我们。

如果你打算建设一个网站，你可以简单快速地绘制一个线框图，即使你不是平面设计师。

只需一支铅笔和一些白纸就可以动手实践了。如果想要玩点花哨的，也可以像我一样用 iPad 和 iPencil 来做。

我将展示如何快速创建一个可交互的线框图文档，我们可以用它给客户做演示，也可以把它用在开发过程中——先评估设计，再决定是否编码实现。

步骤如下：

1. 规划网站地图
2. 创建主页的线框图
3. 在线框图中使用标记
4. 创建其他组件的线框图（页眉，菜单，页脚）
5. 创建功能介绍页面和联系方式页面的线框图
6. 创建响应式线框图

步骤 #1: 规划网站地图

构建线框图，首先要规划好网站地图。在绘制页面之前，网站地图能让你了解网站结构、需要构建哪些页面以及页面之间的关系。

大部分小型网站也许不需要网站地图，它们通常只有一个登录页或者一些常见页面，如“功能介绍”、“关于我们”、“联系我们”等。

也就是说，一旦网站或者应用变得庞大复杂，就需要有一个网站地图。

网站地图提供了站点内容和功能的概览。

在示例中，我们将会创建一个包含主页、功能介绍页面、联系方式页面的站点地图。

不必为此花费太多时间，只需要画几个框表示不同页面（下面几行表示子页面）就行了。

步骤 #2：创建主页线框图

开始创建第一个页面。过程很简单，我们使用简单的几何图形来表示页面元素，如：

• 带有对角线的方框表示图像
• 横线表示文本段落
• 中间有一个 L 的圆圈表示 logo

我们在主页中添加了图片轮播、菜单和 logo，以及一些说明标签。

将每个版块的相关元素包含在一个矩形框中对于之后复用这些版块很有帮助（尤其是 header 和 footer 部分）。

创建公司介绍版块和赞助商版块（包含赞助商的 logo 或图片），即“关于我们”页面。

随着设计的进展，我们还可以按需在主页中添加一些其他元素，例如在合适的位置加上“立即体验”按钮。

最后再加上 Footer 版块，其中包含了用户信息表单、企业联系方式，并且这里再次复用了 logo。

步骤 #3：在线框图中使用标注

线框图不仅仅是给设计师看的，通常开发者、客户和管理者也可能会查看。所以，为各部分内容添加适当的标注是很有用的，能够为初次查看这个线框图的读者提供一些指引。我通常在即将完成一个页面时为其添加标注。

在示例中，我们标注出主页并使用红色字体标记其中的各部分内容。

这些内容可能需要标注：各个版块、标题、表单以及图片内容。

注意，标注不必指定最终展示的准确内容，只要说明它表示什么就行了。所以，比起标注准确内容，你更应该使用概括性文字来做标注。

步骤 #4：创建其他组件的线框图，如页眉、菜单、页脚等

我们已经创建了页眉和页脚，所以可以在新增的页面中复用它们。如果你用的是电子设备，可以用复制粘贴的方式在新页面中复用元素。（如果你用的是纸和笔，那你可以用小刀和复印机来达到同样的效果）

这样能让你的设计保持一致性。像 Figma 这样的工具允许你创建通用组件，这些组件可以在整个设计中重复使用。通过配置，这些组件实例甚至能够随着源组件的变化动态更新。

示例中，我们将通过复用组件来创建一个“功能介绍”页面。创建一个“功能描述”组件，再将它复制粘贴几次，这样就可以在几分钟时间里构建整个页面结构了。

步骤 #5：“功能介绍”和“联系我们”页面

构建好一些通用组件之后，再构建其他页面就变得越来越简单了。“功能介绍”页面完成之后，可以开始创建“联系我们”页面，我们只需要在其中添加一些通用组件，比如 Google 地图、“联系我们”表单和一些联系方式。

示例中，我给电话号码和邮件地址加上了小图标，用一大块区域来展示访问者所处的地理位置。

“联系我们”表单放在了下方（没有边框），Google 地图放在了右边。

步骤 #6：创建响应式线框图

如今，设计良好的线框图一定要兼容移动端，因为很多人都在移动设备上浏览网页。

最好了解一下如何适配小屏设备，如果有时间的话，你还可以构建一个平板电脑版本的响应式线框图。

示例中，我们逐段地构建主页内容，大部分行和列的内容都折叠起来了，而且由于我们是在移动视口上，很多图片、文字和区块都会缩小。

因此，可能有一些区域的高度还是跟桌面版本的一样。另一方面，一些包含很多图片的区域（比如赞助商列表）的滚动高度会变得很大。

因此，我经常会添加一些额外的标注来说明桌面版本和移动端版本的元素之间的对应关系。

总结

线框图是一个能够让你快速了解网站或应用的视觉效果的方式。建议你在开发下一个项目的时候试试线框图，它能帮你更好地规划功能、设计外观。

绘制线框图是前期规划的理想方式，因为比起让设计师做出一个完整的界面原型，它能够节省许多时间。

作为一个开发者，我为自己的网站构建线框图好多年了，我几乎从来不会在勾画出网站的视觉效果之前就投入开发。

希望你喜欢这篇文章。可能你还不了解我，我是来自澳大利亚的 Adrian。我在 Twitter 和 YouTube 上有个小频道，如果你想了解我的更多信息或者喜欢我创作的内容，欢迎来我的频道看看。

• Youtube
• Twitter

原文：What is a Wireframe? This UX Design Tutorial Will Show You，作者：Adrian Twarog