通过这门免费的一小时课程学习 UI 设计基础知识

第一章：空白

第二章：对齐

第三章：卡牌挑战

第四章：对比

第五章：规模

第六章：修复丑陋的用户界面

第七章：排版

颜色

第 8 章：色彩挑战

第九章：视觉层次

第 10 章：视觉层次挑战

第11章 最后的挑战

结束语

我很高兴地宣布，我们刚刚推出了由出色的 Gary Simon 讲授的有关 UI 设计基础的免费 Scrimba 课程。

过去 20 年来，Gary 一直担任 UI 设计师和前端开发人员，他还运营着广受欢迎的 YouTube 频道DesignCourse。

在短短一个小时内，Gary 将帮助您掌握所有优秀用户界面的七个最重要的构建块，从而提升您的 UI 设计技能：

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

本课程包含讲座和交互式编程挑战，这意味着你将在浏览器中实际构建 UI。因此，在注册之前，你需要对 HTML 和 CSS 有基本的了解。不过，如果你刚刚入门，不用担心，Scrimba 上有一个很棒的HTML 和 CSS 速成课程，可以帮助你打下一些基础。

至于本课程的初始设置，没有任何先决条件！课程在 Scrimba 上进行，因此您可以在课程进行过程中与代码进行交互！

单击此处立即开始课程，或者如果您想了解课程结构，请继续阅读。

第一章：空白

在第一课中，你将学习如何使用留白。留白是指 UI 元素之间的空白区域。

Gary 将展示如何仅使用 3 个 CSS 属性：padding，margin即可line-height显著改善文本的外观。

第二章：对齐

在本章中，Gary 将展示如何用最少的代码实现对齐。对齐是确保每个元素相对于其他元素正确定位的过程。同样，对齐仅需三个属性：margin、transform和text-align。

第三章：卡牌挑战

欢迎参加本课程的第一个挑战。本课程及后续挑战的设计理念是，你需要编写一个解决方案，并尝试挑战自己一些极限。之后，Gary 会展示他的成果供你比较。

在这个挑战中，他会给你几张卡片，你需要用它们来改善空白和对齐。

完成后，请随意加入演员阵容并看看 Gary 对解决方案的看法。

第四章：对比

在这个截屏视频中，你将学习对比度。对比度的定义是与其他事物“截然不同”的状态。Gary 将讲解“对比度指南”，以及如何确保你的设计能够方便视障人士使用。

第五章：规模

现在该谈谈比例了。Gary 会演示如何利用不同元素的比例来显著提升设计。

第六章：修复丑陋的用户界面

干得好，你已完成课程的第二个挑战。在这个挑战中，你将首先设计一个更丑陋的作品。

到目前为止，您已经学习了 4 个设计基础：空白、对齐、对比度和比例。

这道题显然四个方面都存在问题。请尽力解决，并务必查看我的挑战解决方案。

第七章：排版

排版需要理解其他基础知识，以及其他一些考量。在本期节目中，Gary 将就如何有效地选择字体、字体大小、间距等提供建议。

颜色

颜色是塑造用户体验的首要UI设计基础！Gary 介绍了为目标受众选择颜色时的一些关键考虑因素、一些常见的注意事项，以及一些颜色组合的基础知识。

第 8 章：色彩挑战

色彩是设计中如此重要的一个方面，你需要完成一项挑战来巩固你的色彩技巧。你将获得下面的设计图。它特意采用灰度，以便你可以练习仅使用右下角的颜色来创作一些设计图。

尽量准备多个方案，这样你才能真正探索各种可能的选项和组合。准备好几个方案后，可以比较一下你和Gary在解决方案设计上是否有任何相似之处。

第九章：视觉层次

视觉层次结构是确定用户界面上元素重要性的方式。有些元素比其他元素更重要。

在本章中，Gary 使用一个简单的电子邮件注册表单来展示如何通过突出显示一些关键方面并改善其视觉层次来改善相当平淡的设计。

第 10 章：视觉层次挑战

现在让我们练习并运用所学知识。你将获得一张简单的卡片，它唯一的问题是视觉层次混乱。

尝试尽可能地改进它，并务必查看 Gary 对解决方案的看法。

第11章 最后的挑战

欢迎来到我们最后一章的挑战，一个设计挑战。你的布局在视觉层次、留白、颜色和对齐方面存在问题。你的挑战是解决这四个问题，尽可能地改进这个设计。

完成后，您可以观看 Gary 的解决方案。

结束语

如果你读到这里，恭喜你完成了这门课程！你可以为自己感到骄傲，因为大多数人只是开始学习课程，并没有完成。现在，你已经对这些 UI 设计基础知识有了基本的了解：

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

为了确保设计正确，所有这些要素都同等重要。如果设计在其中一个方面有所欠缺，很容易就会发现设计质量存在问题。所以，下次构建出色的 UI 时，请务必考虑所有这些基本要素。

祝你好运 ：）