实例说明 UI 和 UX 的区别
摘要：UI可以拆解，但是UX不能拆解，UI 是静态的，每个模块的 UI 都可以单独分开来看，而UX则包含了终端用户与企业、该企业的服务以及产品进行互动的所有方面，是一个充满不确定的未知的“X”因素。本文作者作为一个易用性专家，、用实例来说明两者间的区别。
我知道你在想什么：又有个人要来谈那个老掉牙的话题了，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区别的文章。我的这篇文章并没有使用大量的术语和定义，我试图用实例来向你说明两者的区别。
原 文：Difference Between UI & UX – A Practical Example
译 文：SDK.cn
作 者：鲁行云（编译）
关键字：产品经理, UX, UI, 设计
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
