UI设计高端经验小技巧，高薪UI设计看这里！

我们大多数人开始接触 UI 设计的时候，只是知道很少或者根本不懂任何设计理论。尽管万事开头难，我们还是需要通过许多设计类的书籍和文章来学习如何配色、排版、布局等。

设计不是简单可以用颜色，形状和文字表示的，应该是一个「言之有物」的过程，即每当我们改变字号、添加阴影或改变颜色时，一定要有必须这样做的理由。在本文中，我将分享一些我在设计用户界面时学到的东西，以及我在学习过程中的新发现。

用颜色和字重来设计层级，而不只是字号的大小

当面对需要信息层级结构的内容时，放大字号表示强调和重要性通常不能解决问题，如下图所示：

编辑

信息层级并不仅仅是不同尺寸字体的组合，而是由字体尺寸，字重，字体颜色形成对比的正确组合。对比差异越大，层级关系表现越明显。

编辑

1. 如何创建更好的对比度？

不要仅用大小不同，但是字重相同的文字来创建对比度和层次结构。

主要内容使用更粗更黑的字体样式，次要内容使用更小更细的字体样式。

从深到浅创建三种不同的文字颜色（参见下图的示例）。

编辑

通常我使用我的基色作为正文的文字颜色。

在设计中敢于运用大的字间距（比如标题24px，正文16px，标签文字10px等）。

更大的间距=更好的对比度

对比度=尺寸+字重+颜色

最后，请务必检查其对比度。

不要创建多种色调的黑色

我们都知道使用黑色文本颜色会导致读者眼睛疲劳，所以我们的解决方案是创建更黑的变体作为替代。我们可以使用不同的不透明度的黑色作为解决方案，而不是选择 3 个或更多的颜色值。

在下图的例子中，我使用黑色作为主要颜色（000），并根据应用的位置（即主要内容、次要内容等）降低了不透明度。

编辑

运用数学原理理解颜色

我们大多数人都不太擅长选择正确的颜色组合，每当我们看到具有精心配色的设计时，我们都会问自己：「他们是怎么做到的？」

编辑

直到我了解到在色相、饱和度、亮度（HSB）上进行简单的加法和减法就能发挥魔法，在这个公式里我们将使用 HSB 的色彩模式，而不是 RGB 模式。你可以轻松摆脱彩色背景上无聊的白色，并把它变成毕加索的作品。（如下图）

编辑

1. 那么HSB中的加法和减法怎么算呢？

实际上有两种方法，如下图，两种方法都具有相同的基色#B9F4BC（圆形背景色），但图标中文件夹和装饰条的颜色则不同。在我们开始时，记住第一个字母相当于色相，其次是饱和度，然后是亮度。

编辑

方法A

在方法A中，我们可以看到在整个图形（圆形背景，文件夹，装饰条）中，色相H值保持 123 不变，而饱和度S和亮度B是变化的。

编辑

现在，当我们关注基色的饱和度S值是 24，亮度B值是 96 时，当我们为文件夹创建更深的绿色时，这两个值都会改变。饱和度从 24 变为 40（增加+16），亮度从 96 变为 82（减少-14），这表明为了形成良好的对比度，饱和度的变化需要与亮度成反比例调整。装饰条也是一样的，使用文件夹的饱和度S值和亮度B值作为基础值，饱和度从 40 移动到 44（增加+4），亮度从 82 变为 75（减少-7）。因此，我们得到了这个公式：