学习ui设计_在5分钟内学习基本的UI设计

学习ui设计

If you have a basic understanding of HTML and CSS and want to create great-looking user interfaces in the browser, look no further! In this article, you'll boost your UI design skills by learning about the following seven fundamentals:

如果您对HTML和CSS有基本的了解，并希望在浏览器中创建美观的用户界面，那就别无所求！ 在本文中，您将通过了解以下七个基本知识来提高UI设计技能：

• white space
  空白空间
• alignment
  对准
• contrast
  对比
• scale
  规模
• typography
  版式
• color
  颜色
• visual hierarchy
  视觉层次

This article builds on a free Scrimba course created by the brilliant Gary Simon, also known as DesignCourse. The course offers a set of interactive tutorials that you can take at your own pace and even redo to really embed your learning.

本文基于由杰出的Gary Simon(也称为DesignCourse)创建的免费Scrimba课程 。 本课程提供了一系列交互式教程，您可以按照自己的进度进行学习，甚至可以重做以真正地嵌入您的学习。

So if this article leaves you with wanting more, be sure to check out the course. Now let's jump into it!

因此，如果本文对您有更多的要求，请务必查看本课程。 现在开始吧！

空白空间 (White Space)

The first design fundamental we'll look at is White Space, also known as negative space. As the name suggests, it is the space between elements on the page.​Elements which are squashed up on a page with no white space not only look unattractive but are also difficult to navigate and tricky to read.

我们要看的第一个设计基础是空白 ，也称为负空间。 顾名思义，这就是页面上元素之间的空间。被压缩在页面上而没有空白的元素不仅看起来没有吸引力，而且难以导航且难以阅读。

We can adjust white space in various ways including padding, margin and line-height. Check out the before and after image below to see what a difference effective white space can make.

我们可以通过多种方式调整空白，包括填充，边距和行高。 查看下面的前后图像，看看有效空白可以带来什么不同。

对准 (Alignment)

Next up is Alignment. This is the process of ensuring that every element is positioned correctly in relation to other elements, for example by ensuring that columns are aligned down the page.​As you can see from the following images, the first page with elements in numerous different columns (weak alignment) is far less attractive and readable than the second, which has strong alignment

接下来是Alignment 。 这是确保每个元素相对于其他元素正确放置的过程，例如通过确保各列在页面上向下对齐。正如您从下图中看到的那样，第一页中的元素在许多不同的列中(对齐方式较弱)比第二种方式(具有较强的对齐方式)吸引力和可读性低得多

对比 (Contrast)

It's important to also consider Contrast when building a page or application. Contrast is the difference between colors which appear next to each other on the page.​As you can see from this example, pages with poor contrast are difficult to read and the elements do not stand out.

在构建页面或应用程序时也必须考虑对比度 。 对比度是页面上相邻显示的颜色之间的差异。从本例中可以看出，对比度差的页面难以阅读，元素也不突出。

Pages with good contrast, like the one below, not only look much better but are more user-friendly and accessible.

具有良好对比度的页面(如下面的页面)不仅看起来更好，而且更加用户友好和可访问。

To help you get your contrast just right, the WCAG (Web Content Accessibility Guidelines) suggest a minimum (AA) contrast ratio of at least 4.5:1, or 3:1 for large text, or an enhanced (AAA) contrast ratio of 7:1 or 4.5:1 for large text. There are a range of plugins or websites to check this.​

为了帮助您正确地获得对比度，WCAG(Web内容可访问性指南)建议最小(AA)对比度至少为4.5：1，或者大文本为3：1，或者增强(AAA)对比度为7 ：1或4.5：1(大文本)。 有很多插件或网站可以对此进行检查。

规模 (Scale)

Scale is also an essential part of the UI, so consider the size of every element carefully. For example, elements should be big enough in relation to the page (so no large gaps). Also, elements with higher importance, such as headlines, should be larger than those of less significance.​Take a look at the before and after images below, and notice how much better the page looks when it is scaled correctly.

缩放也是UI的重要组成部分，因此请仔细考虑每个元素的大小。 例如，元素相对于页面应该足够大(因此没有大的间隙)。 此外，标题等具有较高重要性的元素应大于重要性不高的元素。看看下面的前后图像，注意正确缩放页面后页面的外观更好。

​

版式 (Typography)

Typography also has a big impact on the UI. There are many ways to adjust this, including font choices, font size, alignment, letter spacing, line height, font styles, color and contrast.​As a general rule, use no more than 2 font families on a single page and ensure the different aspects work together in order to establish the order of importance. This is known as visual hierarchy, which we'll cover in more detail below.​If you follow these tips, your page will look as good as this:

印刷术也对用户界面有很大的影响。 有很多调整方法，包括字体选择，字体大小，对齐方式，字母间距，行高，字体样式，颜色和对比度。一般来说，在一个页面上使用不超过2个字体系列并确保不同方面共同努力，以建立重要性顺序。 这被称为视觉层次结构 ，我们将在下面详细介绍。如果您遵循这些技巧，您的页面将看起来像这样：

And not confusing and unreadable, like this:​

而不是令人困惑和难以理解，像这样：

颜色 (Color)

The UI design fundamental which first shapes a user's experience is color. Color psychology means that each color elicits a meaning to certain people - for example, red can signify danger, while white can evoke cleanliness and serenity.

首先影响用户体验的UI设计基础是color 。 颜色心理学意味着每种颜色都对某些人产生了意义-例如，红色可以表示危险，而白色可以唤起清洁和宁静。

Be careful with color, though. Meanings vary across cultures, so always do your research and consider your target audience when selecting colors.​It's also important to remember that too many colors can create a bad UI and colors you choose to use should complement each other. As a rule of thumb, you can't go wrong with using lighter or darker variations of the same hue next to each other. Just look at how much easier on the eye the second image below is compared to the first!

不过要注意颜色。 含义因文化而异，因此在选择颜色时请务必进行研究并考虑目标受众。同样重要的是要记住，太多的颜色会造成不良的UI，并且您选择使用的颜色应相互补充。 根据经验，将相同色调的较浅或较暗的变体彼此相邻使用不会出错。 只需看看下面的第二张图片与第一张相比，眼睛就容易多了！

​

视觉层次 (Visual Hierarchy)

The final item on our Design Fundamentals list is Visual Hierarchy. Some elements of a UI are more important than others. Visual hierarchy allows us to establish this importance.

“设计基础知识”列表上的最后一项是“ 视觉层次结构” 。 UI的某些元素比其他元素更重要。 视觉层次结构使我们能够确立这种重要性。

This can be done with position, contrast, color, scale, style or a combination of the above, as shown in the second image below, which has a much better visual hierarchy than the first.

可以使用位置，对比度，颜色，比例，样式或以上各项的组合来完成此操作，如下面的第二个图像所示，该图像具有比第一个图像更好的视觉层次。

结语 (Wrap up)

In this article we have covered the seven main design fundaments: white space, color, contrast, scale, alignment, typography and visual hierarchy. They are all equally important to the UI - if one of these elements is lacking, the entire user experience will suffer. So make sure you consider them all when creating your UI designs.

在本文中，我们介绍了七个主要的设计基础：空白，颜色，对比度，比例，对齐方式，版式和视觉层次。 它们对于UI都同样重要-如果缺少这些元素之一，则会损害整个用户体验。 因此，请确保在创建UI设计时都考虑了它们。

UI设计基础课程 (The UI Design Fundamentals course)

If you'd like to drill down into these subjects more, please check out the free UI Design Fundamentals course at Scrimba. In it, you'll learn about the fundamentals in much greater detail.

如果您想进一步研究这些主题，请查看Scrimba的免费UI设计基础课程。 在其中，您将更详细地了解基础知识。

Good luck, and happy coding :)

祝您好运，并祝您编程愉快：)

翻译自: https://www.freecodecamp.org/news/learn-ui-design-in-5-minutes-tutorial/

学习ui设计