10个提升设计细节的实用小技巧(2)

理解两种颜色模式的方法

实际上有两种方法，我们可以看到，两个选项都有相同的基础颜色#B9F4BC(圆圈背景)，但在文件夹和条带颜色上有不同。在我们开始的时候，请记住第一个数字对应于色相，其次是饱和度，最后是亮度。

选项A

选项A

在选项A中，我们可以看到色相值123在全部形状(圆、文件夹、条带)上始终未变，而饱和度和亮度则都发生了变化。

现在，以饱和度24和亮度96为基础值去改变。当我们为文件夹设计深绿色时，这两个值都会变化。从饱和度24变到40(增加+16)和从亮度96变到82(减少-14)，这说明饱和度在变化，无论是递增还是递减的，都需要与亮度成反比例调整，以设计出良好的对比(反之亦然)。同样的事情也发生在条带中，使用文件夹的饱和度和亮度作为基本值，饱和度从40递增到44(增加+04)，亮度从82降到75(减少-07)。从而引出公式：

深色色调=饱和度增加亮度减少

浅色色调=饱和度减少亮度增加

每当我想知道我的设计应该使用什么正确的颜色时，这个公式帮助了我。我认识到，最好是有一个基本色，并从那里开始调整饱和度和亮度，同时保持色相值不变。

选项B

选项B

在选项B中，同样的原理仍然适用(我们上面的公式)，但这次色相值会改变。我们在各种设计材料中适用的术语RGB和CMY，现在对我们来说是有意义的。

RGB代表红色，绿色和蓝色，而CMY代表青色，品红色和黄色。当我第一次开始时，这些术语对我没有任何意义，直到我发现了可以使用RGB和CMY进行颜色组合。

现在在选项B中，如果我们想要使底色变暗，我们需要做的就是将我们的拾色器在调色板上移动到最近的RGB方向，或者将它移动到CMY方向，从而得到更轻的变化。例如：

颜色拾取界面

因为想要设计一个更深的底板背景颜色#B9F4BC(圆形背景)，并应用到文件夹图标中。这个时候就需要把颜色选择器移动到最近的RGB方向(在这个例子中是蓝色)。但是如果想要一个更浅的文件夹，就需要把颜色选择器往左边移，靠近CMY方向(在这个例子中是黄色)

常见的情况是，RGB方向选择颜色会让颜色变得更深，而CMY方向则会让颜色变得更浅

在将颜色选择器移动到想要的结果后，我们现在应用选项A中的公式，结果我们得到了下面这个配色：

红色，绿色，蓝色(RGB)+选项A公式=深色色调

青色，品红色，黄色(CMY)+选项A公式=浅色色调

4. 使用留白对内容进行分组

留白要大胆

除了在两个组之间添加一行表示分离以外，使用更大的留白是一个更好的方案。

就像临近原则所说的那样：

彼此靠近或接近的对象会被看成是一个组的内容。

以我上面的例子来看，我的目标是要把标题和作者区分开，用一个更大的24px作为间隔会更加合适。

5.使用颜色分隔行

颜色作为区分

在设计时，做列表界面可能会很无聊，因为只需要不断复制组件即可完成。但是在用户看来，阅读这些列表就会很困难，特别是如果在一行与另一行之间没有很大区别的时候。因此除了使用线，添加颜色背景对可读性来说也会有很大帮助，对于设计师来说也更有有成就感。

6. 渐变填充代替文字的投影