实例说明UI和UX的区别

我知道你在想什么：又有个人要来谈那个老掉牙的话题了，UI和UX之间有什么区别？

没错。

但是我和其他人有一点不同，作为一个易用性专家，我将会结合我的经验，用实例来说明两者间的区别。

UI可以拆解，但是UX不能拆解

为了说明这一点，我将会使用我们网站的图标集功能来举例，它能帮你创建图标集。

我创建了一个新的图标集，并且把它们拖到想要的地方。

下面是图标集的UI： 

什么是UI？上面你看到的所有东西都是UI。

UI可以被轻松的分成多个部分。下面是Icons8的UI，但是你可以把他们分成多个子部分，例如类别UI、图标集UI和搜索栏UI等。

那什么是UX呢？

“用户体验”包含了终端用户与企业、该企业的服务以及产品进行互动的所有方面。

– Don Norman

换句话说，图标集只是我们网站总体用户体验的一个小的组成部分，因为它只是我们网站众多功能中的一个。

我们接着来举例子:

John是Icons8的用户。他现在使用图标集的体验，与此前使用我们网站的体验，以及使用其他图标制作网站的体验相互关联，这些体验不能独立考虑。

在使用图标集功能之前，他使用过我们网站的其他一些功能，例如调色功能。因此在使用图标集功能的时候，他希望图标集也有让他对图标进行调色的功能。

这就是第一个关键点：

UX不能被拆解，而UI可以。

我很谨慎的没有说“图标集UX”这个词，因为它与Don Norman对UX的定义相违背。图标集只是我们整体UX中的一小部分。

你不能孤立的考虑“图标集UX”，因为没有人只使用这个功能。使用图标集功能的用户，此前很可能在我们的网站上使用过其他功能。

第二个关键点：

UI对每一个人来说都是一样的，而UX对每个人来说都是不同的。

我采访过我们的三个用户，John、Alicia和Steve。我们没有对UI进行A/B测试，因此他们看到的图标集UI完全一样。然而你，他们的整体使用体验却完全不一样。

John是通过我们的营销邮件得知图标集这个功能的，鉴于他订阅了我们的邮件，因此他以前肯定用过我们的网站。他是一个经验丰富的用户，刚刚发布的图标集功能解决了他的一个老问题——一次性下载多个图标。他对此很满意，获得了良好的使用体验。

Alicia是通过谷歌搜索找到的我们，她是第一次访问这个网站。她只下载了一个图标，然后就离开了，根本就没有看到图标集这个功能。她的使用体验如何？可以说，她根本就没有使用体验，至少没有过图标集这个功能的使用体验。她可能和John有着相同的问题——一次性下载多个图标，但是她却没有发现我们提供的解决方案，这是一个坏的UX。

Steve每天都会使用图标集功能。但是在添加第500个图标的时候，他遇到了错误信息。Steve对我表示，使用其他图标设计网站的时候，它可以添加几千个图标。这也是个糟糕的UX。

看到了吧，每个人获得的UX都不一样。

UX除了不能拆分之外，也不能针对单个用户独立考虑。

我们发现两个人有两种不同的UX，我们要对他们区别对待吗？不可以。

John的用户体验很好，而Alicia和Steve的用户体验不好。我们一定要注意，不能为了优化Alicia和Steve的体验，而降低John的体验。在做UX优化的时候，这一点要特别注意。

但是Alicia和Steve都是我们的用户，因此他们的体验还是要优化的。

我们先从Alicia开始，她代表了很多人，那些根本没有发现右上角图标集tab的人。为了让人们看到它，我们在它边上发了一个通知小红点。：

现在用户在下载了任一图标之后，我们就会自动创建一个名叫“已下载”的图标集，并且显示这个通知红点。这样一来Alicia的用户体验就得到了改善。

而解决Steve的问题，可能会更复杂一些，他所遇到的问题需要技术的支持。我们将图标集总数量限制在500以下，是因为我们发现只有0.001%的用户图标数量超过了500个。解除这个限制，会让我们的服务器负载剧增，拖慢所有用户的响应时间。如果放开限制，虽然Steve的体验变好了，但是有可能会影响其他用户的体验。

简单说，我们无法在不伤害其他用户体验的前提下改善Steve的体验。但是我们找到了一个迂回的方法。之前Steve在添加了500个图标之后遇到了一个错误信息，这个错误信息会让用户感到困惑，于是我们之后把这个错误信息调整了一下：

“我们的图标集目前只能添加500个图标。若要添加更多图标，请创建一个新的图标集，或是联系我们的支持团队。”

这样一来问题就解决了，改善了Steve的体验，也没有破坏其他人的体验。

我想再重申一遍：每个人有着不同的UX，但是这些人却是彼此关联的。绝对不可以为了满足一部分用户而牺牲其他用户的体验。

另一个例子

我曾经做过一次可用性调查：

我的目标是要对3种搜索模式进行测试：

我在对两种UI进行测试，一种是单图标模式，一种是图标+文字标签模式。

关于UX

我对接受测试的用户进行了调查。对话越深入，下面两点就越清晰：

•  每个人的UX都不一样
•  UX不能被分解成不同的部分

再说一次，每个人获得的UX都不一样（请一定记住我唠唠叨叨一直重复的这句话）。

每一个接受测试的用户都遇到了不同的问题，每个人使用产品的方式也不一样。

例如，一名设计师觉得但图标模式更方便，而一名产品经理认为图标+文字标签的模式能帮她更轻松的找到想要的东西。

UX不能被拆分成不同的部分。

我曾让受测用户尝试不同的搜索模式，我发现他们的使用体验，很大程度上取决于他们第一次搜索是使用的哪种模式。

例如，我曾让他们搜索list图标。

之后我让他们搜索结果中是否存在不准确的结果。结果显示，对于第一次使用的是图标+文字标签模式，用户会觉得有更多的结果不够准确。

后记

互联网上有很多讨论UI和UX区别的文章。我的这篇文章并没有使用大量的术语和定义，我试图用实例来向你说明两者的区别。

原文来自:SDK.cn

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com