ui和ux的区别_UX和UI设计之间有什么区别？

ui和ux的区别

by Harshita Arora

通过Harshita Arora

UX和UI设计之间有什么区别？ (What’s the difference between UX and UI design?)

以及一些入门技巧。 (And some tips for you to get started with both.)

A few days ago, I published a post on Typography, a post on Color Theory, and a post on designing mobile apps from scratch. They received a good amount of attention, and people shared with me how helpful the posts were to them in understanding design better.

几天前，我在Typography上发表了一篇文章，在Color Theory上发表了一篇文章，并从头开始设计了移动应用程序 。 他们引起了很多关注，人们与我分享了这些帖子对他们更好地理解设计的帮助。

So, I decided to write another post that’s a quick introduction to two very broad topics: User Interface Design and User Experience Design. The knowledge from previous articles and this one can help you become a better designer.

因此，我决定写另一篇文章，对两个非常广泛的主题进行快速介绍：用户界面设计和用户体验设计。 前几篇文章中的知识以及这篇文章可以帮助您成为更好的设计师。

开始吧！ (Let’s start!)

First off, let’s answer the question: What exactly are UI design and UX design, and what is the difference between the two?

首先，让我们回答一个问题：UI设计和UX设计到底是什么，两者之间有什么区别？

Simply put, UI is how things look, UX is how things work. UX is a process, while UI is a deliverable. Let’s elaborate further…

简而言之，UI是事物的外观 ，UX是事物的工作方式 。 UX是一个过程，而UI是可交付的。 让我们进一步阐述……

用户界面设计 (User Interface Design)

User Interface (UI) design is a large field. In theory, UI is a combination of content (documents, texts, images, videos, etc), form (buttons, labels, text fields, check boxes, drop-down lists, graphic design, etc), and behavior (what happens if I click/drag/type).

用户界面(UI)设计是一个很大的领域。 从理论上讲，UI是内容(文档，文本，图像，视频等)，表单(按钮，标签，文本字段，复选框，下拉列表，图形设计等)和行为(如果发生以下情况的组合)的组合我单击/拖动/键入)。

It takes a good eye, a lot of practice, and a lot of trial and error to get better at it. As a UI designer, your goal is to create a user interface that is engaging, beautiful, and also creates an emotional response from the user to make your products more lovable and beautiful.

要使它变得更好，需要有良好的眼光，大量的实践和大量的反复试验。 作为UI设计师，您的目标是创建一个引人入胜，美观的用户界面，并创建用户的情感响应，以使您的产品更可爱，更美观。

When I started out, something I learned from my mentor is to take a tour guide journey to your product. Imagine your app/website as a journey. Every user that downloads your app right from spotting it in the App Store/web, through using it, achieving goals or completing tasks within the app is taken on a journey. And that journey should be a delightful one.

当我刚开始的时候，我从导师那里学到的东西就是去导游带走您的产品。 想象一下您的应用程序/网站的旅程。 通过在应用程序商店/网站中发现应用程序，使用应用程序，实现目标或完成应用程序中的任务而直接下载应用程序的每个用户都将经历一段旅程。 那个旅程应该是令人愉快的。

And you, as the app designer, are the craftsman that designs this journey. So you don’t want to throw all the information on the screen hoping that the user will pick it up. That’s the very opposite of a good UI.

作为应用程序设计师，您是设计此旅程的工匠。 因此，您不想将所有信息都扔在屏幕上，希望用户将其取走。 这与良好的UI恰恰相反。

Instead, you’re the tour guide that takes the user on a wonderful journey through your app. And in order to this, you have to be able to shift and move their attention from place to place guiding them.

相反，您是一个导游，可以引导用户浏览您的应用程序。 为此，您必须能够将他们的注意力从一个地方转移到另一个地方，以引导他们。

Design isn’t all about learning to use design software —although that’s certainly important. Software is like a designer’s sword. You need the sword to fight the battle, but that’s not all you need to learn to use. You need to learn the strategies, processes, tricks and tips of the fight/game to be able to win it. In UI design, you need to brainstorm, experiment, test, and understand your users and their journey throughout using your product.

设计不仅仅涉及学习使用设计软件，尽管那当然很重要。 软件就像设计师的剑。 您需要剑来打仗，但这不是您需要学习使用的全部。 您需要学习战斗/游戏的策略，流程，技巧和窍门，才能赢得比赛。 在UI设计中，您需要集思广益，进行实验，测试并了解用户以及他们在整个产品使用过程中的经历。

The benefits of having a well-designed product is that you’ll have a higher user retention rate.

拥有设计良好的产品的好处是您将拥有更高的用户保留率。

创建令人愉悦的UI时要记住的事情 (Things to remember about creating delightful UI)

1. On a screen, people will always read the biggest, the boldest, and the brightest first.
   在屏幕上，人们将始终阅读最大，最大胆，最聪明的书。

This is human nature. Our attention is programmed in such a way where we see the biggest, the boldest, and the brightest first. And then it moves to smaller, less bold, and less bright things.

这是人的本性。 以这样的方式来安排我们的注意力：首先看到最大，最大胆，最聪明的一面。 然后它移到较小，较不大胆且较不明亮的地方。

As a designer, you can use this information to curate the experience of your user.

作为设计师，您可以使用此信息来策划用户的体验。

2. The Importance of Alignment.

2.对准的重要性。

Alignment is a fundamental aspect of UI Design. And an important design principle is: minimize the number of alignment lines. It improves readibility and makes the design more pleasing to the eye.

对齐是UI设计的基本方面。 一个重要的设计原则是：减少对齐线的数量。 它提高了可读性并使设计更悦目。

In the images above, the image on the left has 1 alignment line. While the image on the right part has 4 alignment lines.

在上面的图像中，左侧的图像具有1条对齐线。 而右侧的图像有4条对齐线。

Here’s another example of how fewer alignment lines can make a great difference in improving the design.

这是另一个示例，说明较少的对齐线如何对改进设计产生很大的影响。

There are two fundamental types of alignment: Edge alignment and Center alignment.

对齐有两种基本类型：边缘对齐和中心对齐。

• Edge alignment is where you have all the elements having one side or edge lining up with a single line.
  边缘对齐是指所有元素的一侧或边缘都以一条直线对齐的位置。
• Center alignment is where you line up all the elements by their midpoint.
  中心对齐是将所有元素的中点对齐的位置。

Depending on the usecase, you’ll choose one or the other. Usually, edge alignment is considered better. It’s quite easy to align elements in design software like Photoshop. Most design software will usually provide a ruler/guide to edge align all the elements.

根据用例，您可以选择其中一个。 通常，边缘对齐被认为更好。 在诸如Photoshop之类的设计软件中对齐元素非常容易。 大多数设计软件通常会提供标尺/指南，以使所有元素边缘对齐。

3. Become an attention architect.

3.成为关注设计师。

Here’s two ways to interpret this: 1) You need to grab the user’s attention with your design. 2) You need to pay attention to every little thing in your designs. To be a great designer, you need to do both. The latter lets you achieve the former.

这有两种解释方法：1)您需要用设计吸引用户的注意力。 2)您需要注意设计中的所有小事情。 要成为一名出色的设计师，您需要同时做这两项。 后者使您可以实现前者。

UI Design is about tailoring the experience for your users by guiding their attention towards different important things.

UI设计旨在通过引导用户将注意力转向不同的重要事物来为用户量身定制体验。

Ways to use text to grab user’s attention:

使用文本吸引用户注意力的方法：

• Make its size larger or smaller.
  使其尺寸更大或更小。
• Bolder or brighter in color. Or make it muted.
  颜色更大或更亮。 或将其静音。

• Use a typeface with a heavy weighting versus something that is thin or light.

  使用权重较大的字体，而不要使用轻薄的字体。

• Italicize words. Capitalise or lowercase some words.

  斜体字。 大写或小写一些单词。

• Increase the distance between each of the letters to make the overall size of the words take up more space.
  增加每个字母之间的距离，以使单词的整体大小占用更多空间。

The most important thing when designing is testing! Make sure you try out different everything: colors, fonts, tones, angles, alignment, layout, etc. Experiment with different designs so that you can architect a user journey using various ways of commanding attention.

设计时最重要的是测试！ 确保尝试各种不同的方法：颜色，字体，色调，角度，对齐方式，布局等。尝试不同的设计，以便您可以使用各种吸引眼球的方式来设计用户旅程。

Read much more about UI Design here. Behance and Dribbble are great platforms to find good design to get inspired from.

在此处阅读有关UI设计的更多信息。 Behance和Dribbble是寻找优秀设计灵感的绝佳平台。

用户体验设计 (User Experience Design)

User Experience (UX) design is about creating pain-free and enjoyable experiences.

用户体验(UX)设计旨在创建无痛且愉快的体验。

Here are 7 questions to ask yourself to know if the UX of your product is good:

以下是7个问题，要求您自己了解产品的用户体验是否良好：

1. Usability: What is the user using my app for? What is the core functionality of my app? What is it that I need to get right in order for my app to be used?

   可用性 ：用户将我的应用用于什么用途？ 我的应用程序的核心功能是什么？ 为了使用我的应用程序，我需要做些什么？

   Now how can I minimise the number of steps that it takes for the user to achieve it within my app? What is the main thing my users want to achieve with my app? How can I make the experience of achieving that as smooth, quick, and enjoyable as much?

   现在，如何才能最大程度地减少用户在我的应用程序中实现该步骤所需的步骤？ 用户希望通过我的应用实现的主要目标是什么？ 我如何才能使实现这一目标的体验既流畅，又快捷又令人愉快？

2. User Profiling: You have to know who your users are and what they want to achieve using your app. The best way to do this is by profiling your users.

   用户配置文件 ：您必须知道您的用户是谁，以及他们希望使用您的应用程序实现什么。 最好的方法是对用户进行性能分析。

   You have to do a few thinking exercises to understand your market. Narrow down your target/user audience.

   您必须做一些思考练习才能了解您的市场。 缩小目标/用户的受众范围。

   The main question to keep asking yourself is: What is the core functionality of my app? Profile your users to continually reevaluate that question.

   不断问自己的主要问题是：我的应用程序的核心功能是什么？ 分析您的用户以不断重新评估该问题。

3. Asking for permissions: If your mobile app has push notifications, needs location services, integration with social media, email, etc, you know you need user’s permission on an alert message that pops up on the screen when they’re using your app. Instead of asking all at once which would overwhelm the user, use The Benjamin Franklin effect. Before asking someone for a big favour, ask them for a small favour. And slowly nudge the user towards a certain direction.

   要求权限 ：如果您的移动应用程序具有推送通知，需要位置服务，与社交媒体，电子邮件等的集成，则您知道您需要用户许可才能获得警报消息，该消息在用户使用您的应用程序时会在屏幕上弹出。 使用本杰明·富兰克林(Benjamin Franklin)效果，而不是立即询问所有会使用户不知所措的东西。 在要求某人大帮助之前，先请他们帮一个小忙。 并慢慢将用户推向某个方向。

   Make sure your app sends the permission notification only when the user is about to use that feature and not when they just launch the app.

   确保仅当用户将要使用该功能时，您的应用才发送许可权通知，而不是仅在他们启动应用程序时，才发送许可权通知。

4. Form vs Function: Design is not always about the form — beautiful color scheme, the fonts, the layout, and such. It’s also about the functionality. Always go for function over form.

   形式与功能：设计并不总是与形式有关–美丽的配色方案，字体，布局等。 这也与功能有关。 始终追求功能胜过形式。

5. Consistency: Am I being consistent throughout my app? Is my app consistent with my brand? Inconsistency in design creates confusion. A confused user is an unhappy user.

   一致性：我在整个应用程序中都一致吗？ 我的应用与我的品牌是否一致？ 设计不一致会造成混乱。 困惑的用户是不满意的用户。

   Think of consistency, not just in terms of appearance, but also in terms of functionality.

   不仅要从外观上考虑一致性，还要从功能上考虑一致性。

6. Simplicity: Can I make it simpler?

   简单性 ：我可以简化一下吗？

   Make sure your app is grandma-proof, i.e., older people can understand it and use it.

   确保您的应用程序不受奶奶的侵害，例如，老年人可以理解和使用它。

   A bad confusing app would be rows upon rows of buttons, lots of different colors, and a tightly packed user interface.

   一个令人迷惑的应用程序将是一排排的按钮，许多不同的颜色以及紧凑的用户界面。

7. Don’t make me think: Am I making things difficult for my user?

   不要让我想 ：我会让我的用户感到困难吗？

   Humans don’t like to be confused.

   人类不喜欢被混淆。

   When we’re programming, we’re trying to make our code as lightweight and as efficient as possible.

   在进行编程时，我们试图使我们的代码尽可能轻巧高效。

   When we’re designing, we’re trying to make the interface as clear and as least confusing as possible. And beautiful!

   在设计时，我们试图使界面尽可能清晰，并尽可能避免混淆。 又漂亮！

   Try to make your wording as clear as possible.

   尝试使您的措词尽可能清晰。

出色的UX的注意事项： (Points to note for a great UX:)

1. Don’t have long tutorials at app launch explaining how to use the app. Instead you want to give your users tidbits of information as and when it’s needed. Make it contextual. Give tips and hints. Try to build design where the user figures out the app within a few seconds without needing an explicit tutorial. That’s where intuitive design principles come!
   在应用启动时没有过多的教程介绍如何使用该应用。 相反，您想在需要时向用户提供一些信息。 使它与上下文相关。 提供提示和提示。 尝试构建设计，让用户在几秒钟内找出应用程序，而无需明确的教程。 这就是直观设计原则的来临！
2. When something is so ingrained in mobile users’ minds such as pull to refresh, or pinch to zoom — stick to those rules for your app. And do NOT use those actions for some other goal. Like pull to add a new journal entry, it gets super confusing. A journal app I was using did that and it was confusing.
   当移动用户的想法变得根深蒂固时，例如拉动刷新或捏动缩放，请遵循适用于您应用程序的那些规则。 并且不要将这些动作用于其他目标。 就像拉动以添加新的日记帐分录一样，它变得超级混乱。 我正在使用的日记应用程序做到了，这令人困惑。

3. Don’t treat your users like idiot boxes. Don’t give a popup/alert to the user to confirm a frequent action. Ask for confirmation only for harmful actions users might regret — like deleting something, or making a purchase.

   不要将您的用户当作白痴盒子。 不要向用户提供弹出窗口/警报以确认频繁的操作。 仅针对用户可能后悔的有害行为(例如删除某些内容或进行购买)要求确认。

   Unnecessary popups and alerts interrupt the flow and result in a bad user experience. Do not make your customers feel stupid.

   不必要的弹出窗口和警报会中断流程，并导致不良的用户体验。 不要让客户感到愚蠢。

Read more about UX Design here and here.

在此处和此处阅读有关UX设计的更多信息。

最后的想法 (Final thoughts)

I hope the article helped you understand basic concepts in UI and UX design. I’d love to hear any feedback or any thoughts on the post. You can send me an email at harshita@harshitaapps.com!

我希望本文能帮助您了解UI和UX设计中的基本概念。 我希望听到任何关于该帖子的反馈或想法。 您可以给我发送电子邮件至haritata@harshitaapps.com！

You can also download my app here. All of these learnings were only possible because I wanted to build a beautiful and useful app for cryptocurrency price tracking, alerts, and portfolio management. The journey of building that app taught me important lessons and improved my skills, and I’ve been sharing about that in my posts a lot. :)

您也可以在此处下载我的应用程序。 所有这些学习都是可能的，因为我想为加密货币价格跟踪，警报和投资组合管理构建一个漂亮而有用的应用程序。 开发该应用程序的过程教会了我重要的课程并提高了我的技能，我在自己的帖子中分享了很多。 :)

Ending the post with one of my favourite quotes about design…

以我最喜欢的关于设计的名言之一来结束帖子……

“Design is not just what it looks like and feels like. Design is how it works”

“设计不仅是外观和感觉。 设计就是它的工作方式”

翻译自: https://www.freecodecamp.org/news/whats-the-difference-between-ux-and-ui-design-2ca8d107de14/

ui和ux的区别