开发人员的 7 个 UI 设计基础知识

大家好，我叫 Vansh，是一名前端开发人员。很多人问我这个问题：“我需要学习设计才能成为前端开发人员吗？”

在我回答这个问题之前，你需要先了解一下，很多公司都有内部的UX/UI设计师，他们会负责设计部分并构建模型，而你则可以专注于开发部分。我们的任务是赋予模型生命力，使其具有交互性。

但是，如果你没有设计师，或者你正在为自己做一个业余项目，即使有设计师，他们也不一定能来，因为他们工作繁忙，或者缺少一些模型。
所以你不能总是依赖设计师对设计进行细微的修改。
拥有设计感对你和你的团队来说都非常重要。

我不是说你必须成为一名设计师，我们也不是来取代他们的。
但学习一些设计技能对你来说也无妨。
这绝对有助于培养创造性的眼光和审美素养。

因此，在这篇博文中，我将分享如何仅遵循这 7 个 UI 基本原则来构建美观的界面/应用程序。

让我们加入吧！

1. 空白
2. 颜色
3. 对比
4. 规模
5. 结盟
6. 排版
7. 视觉层次

1. 空白

我们要讨论的第一个 UI 基础是空白。

空白是 UI 中元素之间的空白区域。
它只是一个空白空间，但它为 UI 提供了一个结构。

让我们看一个例子

我们可以看到右侧容器的可读性更强，并且与左侧容器相比看起来更好。

只需使用 3 个 CSS 属性，即填充、边距和行高，您就可以显著改善文本的外观。

2. 对齐

对齐是确保每个元素相对于其他元素正确定位的过程。

视觉对齐是设计的基础之一，我们人类更喜欢视觉对齐的物体。

首先，我们来看一下这个 UI

我们可以看到这里有 4 个元素，徽标、标题、文本和按钮，
它们在对齐方面似乎都有点偏离。

同样，只需 3 个属性：margin、transform 和 text-align，我们就可以解决这个问题。

我们现在可以看到它看起来好多了，因为一切都对齐了。

3. 对比

对比度被定义为与其他事物“明显”不同的状态。
在构建 UI 时，我们应该考虑用户是否能够清晰地看到并区分屏幕或页面上所有必要的细节。

看第一张图片，其中有一个灰色的副标题和按钮上的灰色文字，我们可以看到几乎没有与背景的对比，很难阅读文字，尤其是按钮上的文字。

现在，如果我们增加对比度，使用较深的文本颜色和白色按钮顶部，我们可以看到它更具可读性。

即使产品很吸引人，缺乏可读性也是无法留住用户的一个重要原因。

4.规模

比例是指必须仔细考量元素的大小。利用不同元素的比例，可以显著提升设计质量。

我们来看这个例子，我们可以在这个 UI 上进行缩放。

首先，卡片对于这个布局来说太小了。而且，标题和下面的副标题之间没有太大区别。另外，我们可以增加十六进制颜色代码的大小。

在我们的第二个 UI 中，我们的卡片看起来更加饱满，周围的空间也更加充足，我们还增加了标题和副标题的大小，看起来比以前的好多了。

5.排版

排版不仅仅是字体，它还是一门涉及以各种字体、大小和间距的组合排列字体的艺术。

排版需要了解其他基础知识，以及其他一些考虑因素，例如如何有效地选择字体、字体大小、间距等等。

如果我们看一下我们的第一个 UI，就会发现排版方面有很多问题。首先，使用了三种不必要的字体。其次，我们不确定应该看哪里，或者哪些文本真正重要，所以我们还需要调整比例。

在我们的第二个 UI 中，我们坚持使用 1 种字体系列，增加了标题的字体大小，并减小了“John Doe”的引用大小，这并不重要，现在看起来好多了。

6. 颜色

色彩是塑造用户体验的首要UI设计基础。
当你访问任何网站或应用程序时，你的眼睛在能够处理甚至阅读任何内容之前都会接触到色彩，因此色彩在UI设计中至关重要。

不同的颜色可以具有不同的含义，例如绿色可以与成长和财富相关，红色可以与失落或温暖相关，黑色可以与优雅和奢华相关等等。

在构建 UI 之前，请先了解此特定应用的目标受众，以及需要投射哪些情感

另一个需要注意的点是，UI 设计中要避免使用过多的颜色。过多的颜色会破坏 UI 的质量。此外，还要避免使用那些彼此之间协调性不好、相互不协调的颜色。

7.视觉层次

用户界面上的每个元素都有其重要性。有些元素比其他元素更重要。视觉层次结构就是建立这种重要性的方法。我们利用上面讨论过的 UI 基础知识来实现​​这一点。

如果我们看一下这个用户界面，就会发现它缺乏视觉层次，因为我们不确定首先要看哪里，而且我们的号召性用语按钮也缺乏足够的联系。

通过缩放标题并突出号召性用语来解决这个问题，我们改善了视觉层次。
看起来比以前好多了？对吧？

结论

UI 基础没有哪一项比另一项更重要。
为了确保设计正确，它们都同等重要。如果设计中缺少了其中任何一个方面，就很容易察觉到设计质量的缺陷。
所以，下次构建用户界面时，务必考虑所有这些基础原则。

祝你好运

叽叽喳喳

GitHub