5分钟学习基本的UI设计

如果您对 HTML 和 CSS 有基本的了解，并且想学习如何在浏览器中创建美观的用户界面，那就不用再犹豫了！在本文中，您将通过学习以下七个基础知识来提升您的 UI 设计技能：

• 空白
• 结盟
• 对比
• 规模
• 排版
• 颜色
• 视觉层次

本文基于才华横溢的 Gary Simon 创建的免费 Scrimba 课程（也称为 DesignCourse）。该课程提供了一系列交互式教程，您可以按照自己的节奏学习，甚至可以反复练习，以巩固所学内容。

因此，如果这份简短的指南让您想要了解更多，请务必点击此处或下图查看课程。

如果您喜欢免费课程，您还可以将您的电子邮件留在即将举行的10 小时以上的 UI 设计训练营的候补名单上。

但首先，让我们看看能否以创纪录的速度教会你七个 UI 设计基础知识！👇

空白

我们要探讨的第一个设计基础是留白，也称为负空间，顾名思义，就是页面上元素之间的空间。 如果 。
元素

结盟

接下来是对齐——这是确保每个元素相对于其他元素正确定位的过程，例如，确保页面的列向下对齐。
​从
下图可以看出，第一页的元素分布在许多不同的列中（对齐程度较弱），其吸引力和可读性远不及第二页，因为第二页的 对齐

对比

在构建页面或应用程序时，对比度也至关重要。对比度是指页面上相邻颜色之间的差异。
从
本例中可以看出，对比度低的页面难以阅读，元素也不突出。 对比度高的 页面
为了 帮助您获得合适的对比度，WCAG（Web 内容可访问性指南）建议最低 (AA) 对比度至少为 4.5:1，大文本对比度为 3:1，增强 (AAA) 对比度为 7:1 或大文本对比度为 4.5:1。市面上有各种插件或网站可以检查对比度 。

规模

比例也是用户界面 (UI) 的重要组成部分，因此请仔细考虑每个元素的大小。例如，元素相对于页面应该足够大（避免出现过大的空隙），并且重要性较高的元素（例如标题）应该比重要性较低的元素更大。
​查看
下面的前后图片，您会发现正确缩放后页面的外观明显更好 。

排版

排版对用户界面 (UI) 也有很大影响。调整字体排版的方法有很多，包括字体选择、字体大小、对齐方式、字母间距、行高、字体样式、颜色和对比度。
一般来说
，一个页面上不要使用超过两种字体系列，并确保不同方面协调一致，以建立重要性顺序。这被称为视觉层次结构，我们将在下文中详细介绍。
如果
您遵循以下技巧，您的页面将看起来像这样美观： 而且
不会像下面这样令人困惑和难以阅读 ：

颜色

塑造用户体验的首要基础是色彩。色彩心理学认为，每种颜色对特定人群都有其特定的含义——例如，红色可能代表危险，而白色则代表洁净和宁静。

不过，颜色的选择要谨慎。不同文化中的含义各不相同，所以在选择颜色时，务必做好研究，并考虑你的目标受众。
同样
重要的是要记住，过多的颜色会造成糟糕的用户界面，你选择的颜色应该相互补充。根据经验，使用相同色调的较浅或较深的变体并排使用不会出错。看看下面的第二页比第一页看起来舒服多了 ！

视觉层次

我们设计基础清单上的最后一项是视觉层次结构。UI 中的某些元素比其他元素更重要。视觉层次结构使我们能够确立这种重要性。这可以通过位置、对比度、颜色、比例、样式或上述元素的组合来实现，如下图第二张图所示，它的视觉层次结构比第一张图更好得多 。

包起来

在本文中，我们介绍了七个主要的设计基础：空白、颜色、对比度、比例、对齐、排版和视觉层次，这些对于 UI 来说都同样重要 - 如果缺少其中一个元素，整个用户体验就会受到影响，因此请确保在创建 UI 设计时考虑所有这些元素。

即将推出：UI 设计训练营

如果您想在这个领域达到专业水平，我们将于三月在 Scrimba 推出一个完整的UI 设计训练营。请将您的电子邮件地址添加到候补名单中，即可在训练营上线时获得独家抢先体验和最优惠的价格。

训练营将提供数小时的教程和互动挑战，帮助您建立所需的肌肉记忆，帮助您成为一名优秀的 UI 设计师，从头开始创建新的设计并改进现有的设计。
​同时
，祝您设计愉快！:)