ui和ux的区别_UX和UI之间的区别

怼烎@ 2022-12-07 13:21 161阅读 0赞

![3e8625b9cf7e1571699491d04a811db0.png][]

ui和ux的区别

Here you will learn about UX vs UI i.e. difference between UX and UI.

在这里，您将了解UX vs UI，即UX和UI之间的区别。

Today, we are going to shed some light on one of the hottest topics in IT world. There always exist a lot of buzz on whether the UX (User Experience) and UI (User Interface) are both the same, if not then how are they different.

今天，我们将阐明IT世界上最热门的主题之一。 关于UX(用户体验)和UI(用户界面)是否相同，总是存在很多争论，如果不相同的话，它们又有何不同。

![Difference between UX and UI][]

[Image Source][]

[图片来源][Image Source]

These two are the terms that nearly every one of us must have heard, either we share a technical background or we don’t belong to it. It is obviously not only the case with the commons but highly respected developers and designers are often spotted struggling while demonstrating any of the two. Let us break this article down into chunks and try to understand the whole concept behind the two tech-jargons, UX and UI practically. Obviously with some examples when required.

这两个词是我们几乎每个人都必须听过的，或者我们拥有共同的技术背景，或者不属于这个背景。 显然，不仅是公地的情况，而且备受尊敬的开发人员和设计师经常在展示两者的同时感到挣扎。 让我们将本文分为几部分，并尝试实际理解UX和UI这两个技术术语背后的整个概念。 显然在需要时提供了一些示例。

We have observed this situation quite a lot times and almost every one among us can relate to this, we all must have witnessed a product launch of some tech gadgets live or on the television at some point of time. If anyone of us ever paid attention to the details then we could have very easily spotted that the chairperson or the president of the company when giving demonstration about the product’s UX describe a lot about the UI features (unknowingly obviously). So, why people not get confused (we can’t even blame the officials though). The two terms are so closely related and too because of several sources, are often misunderstood.

我们已经观察到这种情况很多次了，而我们当中几乎每个人都可能与此有关，我们都必须目睹某个科技产品在某个时间点现场直播或在电视上发布。 如果我们中的任何人曾经关注细节，那么我们很容易发现公司董事长或总裁在演示产品UX时描述了很多UI功能(显然是在不知不觉中)。 所以，为什么人们不感到困惑(不过，我们甚至不能怪官员)。 这两个术语是如此紧密地联系在一起，并且由于多种原因，常常被误解。

As of now think of UX as the experience you get while using a product ( that is either good, average or bad), while an UI can be thought of as the graphic appearance of a website (which you may like or not).

到目前为止，您可以将UX视为使用产品(无论是好是坏)时获得的体验，而UI可以看作是网站的图形外观(您可能会喜欢或不喜欢)。

### 首字母缩略词怎么说？ **(**What do Acronyms say?**)** ###

We have to admit the truth that both the terms are working closely for a product, but despite this similarity in the professional run, if we talk about their roles, we will observe them as possessing different capabilities when talking in reference to process and design discipline. Where we can think UX as more of technical and analytical process, the UI should be thought of as the way of expressing the summary of the product to the users with the help of visuals (graphics). We know it is not that easy to understand as looks, but no worries we have got you covered. I was going through a website and got this really cool example to understand the concept of UX and UI in a more practical way.

我们必须承认一个事实，即这两个术语在产品中都紧密合作，但是尽管在专业领域存在相似之处，但如果我们谈论它们的角色，则在参考过程和设计规范进行讨论时，我们会发现它们具有不同的功能。 。 在我们可以将UX视为更多的技术和分析过程的地方，应该将UI视为借助视觉(图形)向用户表达产品摘要的方式。 我们知道，从外观上看并不容易理解，但我们为您提供的服务无后顾之忧。 我正在浏览一个网站，并得到了一个非常酷的示例，以更实际的方式了解UX和UI的概念。

*Let’s suppose human body as a product (digital) for a while, the code of the product which gives it a robust structure are bones. If there is a body then there must be the organs within, these organs are the UX design: functions of the life are supported by optimizing and measuring against input. Now the UI is the aesthetics and appearance of the body: that is how the body structure is presented to the world, how it reacts to the inputs and the senses of the body.*

*让我们假设人体作为一种产品(数字)已经有一段时间了，赋予其坚固结构的产品代码就是骨头。* *如果存在身体，那么内部必须有器官，这些器官就是UX设计：通过优化和对照输入来支持生命的功能。* *现在，UI是人体的美学和外观：那就是人体结构向世界呈现的方式，它如何对人体的输入和感觉做出React。*

Don’t worry if you don’t get the explanations yet, there are many. We will provide a detailed elaboration for both the terms. Also we will come up with a set of differences in the end of this article. Get tuned.

如果您还没有得到解释，请不要担心，这里有很多。 我们将为这两个术语提供详细的说明。 在本文的最后，我们还将提出一系列不同之处。 调优。

### 什么是用户体验(UX) **(**What is User Experience (UX)**)** ###

![What is User Experience (UX)][What is User Experience _UX]

[Image Source][Image Source 1]

[图片来源][Image Source 1]

As we have talked earlier in this post, despite all buzz, we still are with our words that UX and UI are not the very same and of course we will get to this conclusion as we proceed towards the end of this post. Okay, so we are going to provide you with an intuitive intro of the UX and will leave it to you to differentiate between the two. We can say about the UX that it primarily focuses on how the product is going to respond to the calls, it spreads out to an interactive portion of the product. It includes how better is the structure of the product and how well it handles the user requests. Obviously most of us do not hesitate to add ‘UX’ to our daily vocab in technical world, but we need to understand this thing for sure that when we are talking about how the things are been portrayed, what should be the background colour, clicking button should perorm what animation, etc., then stop for a while and think whether we are really talking about the UX only. Let me tell our readers, these are all the part of the interface and thus should be treated as under the roof of UI itself (not UX). And this provides our discussion one firm proof to facilitate differentiate between the terms UI and UX.

正如我们在本博文前面所说的那样，尽管有很多嗡嗡声，但我们仍然会说UX和UI并不完全相同，当然，在继续本博文结尾时，我们将得出这个结论。 好的，因此我们将为您提供有关UX的直观介绍，并将其交给您来区分两者。 我们可以说到UX，它主要关注产品如何响应呼叫，并扩展到产品的交互部分。 它包括产品的结构如何更好以及如何处理用户要求。 显然，我们大多数人都会在技术世界的日常词汇中毫不犹豫地添加“ UX”，但是我们需要了解这一点，以确保当我们谈论事物的描绘方式时，背景色应该是什么，按钮应该显示什么动画等等，然后停下来一会儿，考虑我们是否真的在谈论UX。 让我告诉我们的读者，这些都是界面的一部分，因此应被视为UI本身(而不是UX)的底层。 这为我们的讨论提供了一个坚定的证据，可以促进区分UI和UX。

If we put ‘tech’ aside for a while, the UX designing is a process inclined towards providing a better usability and easy interaction of user with the product, which in turn result in loyalty of the users for respective product. So, the conclusion here is, at any moment if anyone is talking about the UX, then we immediately will have to understand that he is inclined more towards a quality product and product-human interaction rather than aesthetics and outer appearances.

如果我们暂时搁置“技术”，则UX设计是一个倾向于提供更好的可用性和用户与产品轻松交互的过程，从而导致用户对相应产品的忠诚度。 因此，这里的结论是，在任何时候，如果有人在谈论UX，那么我们将立即必须理解，他更倾向于优质的产品和产品与人的互动，而不是美学和外观。

### 什么是用户界面(UI) **(**What is User Interface (UI)**)** ###

![What is User Interface (UI)][What is User Interface _UI]

[Image Source][Image Source 2]

[图片来源][Image Source 2]

As of now we’ve talked about the UX,  now heading towards the most prominent word misunderstood with UX, that is UI. UI only focuses on the beauty and appearance of the product. Suppose if we are talking about a webpage, then UI’s responsibility is to ensure in what better way the webpage can be displayed to the users, what should be the size and color of the button, which animation will look good, how should the dropdown will respond to clicks, etc. Moreover where the button and dropdowns should be placed so that the user will love, is the responsibility of the UX designer.

截至目前，我们已经讨论了UX，现在正朝着UX被误解的最突出的词，即UI。 UI仅关注产品的美观和外观。 假设如果我们谈论的是网页，那么UI的职责是确保可以以更好的方式向用户显示该网页，按钮的大小和颜色应该是什么，哪种动画看起来会很好，下拉菜单应该如何。 UX设计者应负责将按钮和下拉菜单放置在什么位置，以便用户喜欢。

One more thing is need to be said today that the scripting languages like HTML or CSS or JQuery or whether it is Silverlight, are responsible for designing beautiful interfaces only, neither user experience. With this being said, let us now see a comparative study of the two for a more vivid understanding.

今天还需要说一件事，诸如HTML或CSS或JQuery之类的脚本语言，或者它是否为Silverlight，仅负责设计漂亮的界面，而没有用户体验。 如此说来，让我们现在看一下两者的比较研究，以更生动地理解。

## UX和UI之间的区别 **(**Difference between UX and UI**)** ##

Though there are not much, but we can list out some of the differences which makes the two terminologies stand apart. Let’s have a look.

尽管数量不多，但是我们可以列出其中的一些差异，这使这两种术语脱颖而出。 我们来看一下。

<table> 
 <tbody> 
  <tr> 
   <td><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;UX</strong></td> 
   <td><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; UI</strong></td> 
  </tr> 
  <tr> 
   <td>It makes the interfaces useful.</td> 
   <td>It is used for making the interface beautiful.</td> 
  </tr> 
  <tr> 
   <td>It helps the users to accomplish their goals.</td> 
   <td>These are useful for attaching the users&nbsp; emotionally to the product.</td> 
  </tr> 
  <tr> 
   <td>Most probably is done first.</td> 
   <td>Is usually carried out second.</td> 
  </tr> 
  <tr> 
   <td>Finds use in products, interfaces and services.</td> 
   <td>Confined to the interfaces only.</td> 
  </tr> 
  <tr> 
   <td>Provides usability.</td> 
   <td>Provides aesthetics.</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <strong>用户体验</strong> </td> 
   <td> <strong>用户界面</strong> </td> 
  </tr> 
  <tr> 
   <td> 它使接口有用。 </td> 
   <td> 它用于使界面美观。 </td> 
  </tr> 
  <tr> 
   <td> 它可以帮助用户实现他们的目标。 </td> 
   <td> 这些对于使用户情感上附着到产品上很有用。 </td> 
  </tr> 
  <tr> 
   <td> 最有可能首先完成。 </td> 
   <td> 通常是第二次进行。 </td> 
  </tr> 
  <tr> 
   <td> 可用于产品，界面和服务。 </td> 
   <td> 仅限于接口。 </td> 
  </tr> 
  <tr> 
   <td> 提供可用性。 </td> 
   <td> 提供美学。 </td> 
  </tr> 
 </tbody> 
</table>

I hope this article provides a clear understanding about difference between UX and UI.

我希望本文能对UX和UI之间的区别有一个清晰的了解。

> 翻译自: [https://www.thecrazyprogrammer.com/2018/09/difference-between-ux-and-ui.html][https_www.thecrazyprogrammer.com_2018_09_difference-between-ux-and-ui.html]

ui和ux的区别

[3e8625b9cf7e1571699491d04a811db0.png]: /images/20221123/0bd74fc900d74bec8f34d1908e452775.png
[Difference between UX and UI]: /images/20221123/051e6064490f4a06bc37e8cb4972663d.png
[Image Source]: https://icons8.com/articles/difference-between-ui-ux-a-practical-example/
[What is User Experience _UX]: /images/20221123/757d38cdfe55456e89d1d1abf09b45a5.png
[Image Source 1]: https://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/
[What is User Interface _UI]: /images/20221123/fbab32ec15074ebeb04ca688843ddcfc.png
[Image Source 2]: https://medium.muz.li/ux-is-not-ui-what-is-the-difference-between-ux-and-ui-design-80a6e1968af4
[https_www.thecrazyprogrammer.com_2018_09_difference-between-ux-and-ui.html]: https://www.thecrazyprogrammer.com/2018/09/difference-between-ux-and-ui.html