我想大多数人学习UI都是从最浅显的知识开始，或者无从开始。即使万事开头难，我们仍需要通过众多设计书籍和文章来了解颜色，排版，布局等方面的工作原理。

因此，在本文中，我将分享我从不同设计师那里学到的东西，我在设计用户界面中学到的东西，以及我发现的新发现：

*免责声明：提供的以下“say no”的样品并不一定意味着它们是错的，这只是我们如何从良好的设计解决方案改进到更好的解决方案的基础。

1.

Use color and weight to create hierarchy instead of size

使用颜色和粗细来创建层次结构，而不是大小

当面对需要体现内容层次次结构不同的字体时，使文字更大以强调重要性通常不能解决问题，就像下面这样：

字体层次结构不仅仅是小到大的表现方式，它是关于尺寸，粗细和颜色的恰当组合。产生对比，对比度越大越好。

那么如何创建更好的对比度？

a.不要仅仅使用不同字体大小的一种粗细来创建对比度和层次结构，

最好是对主要内容使用更大胆和颜色更暗的风格，对次要内容使用更小颜色更轻的。

b.创建三种不同的文字颜色，从深色到浅色（参见下面的示例）。通常我使用我的基本颜色作为正文文字颜色。

c.不要害怕将大的字体间距应用于设计中（即24像素标题，16像素正文，10像素等）。更大的差距=更好的对比度。

d.可以查看Modularscale http://www.modularscale.com/,一个用来创建更好的字体层次结构的在线计算器。

e.对比度是=尺寸+粗细+颜色。

f.最后，确保检查其对比度。

可以使用个calculator http://leaverou.github.io/contrast-ratio/检查它的可访问性。

从我的基本颜色来看，我从较暗的标题移动到较亮的辅助内容。

2.

Don’t create multiple shades of black！

不要创建多个黑色色调！

不要在颜色选择器上下移动从而选择你需要的颜色来改变白色背景下不同的黑色文本的色调。

我们大都知道使用黑色文字颜色（＃000）会给读者造成眼睛疲劳，所以应该创建较暗的变体作为替代方案。但最好使用具有不同不透明度的黑色作为解决方案，而不是选择3个或更多的十六进制颜色值。

在上面的示例中，我使用黑色作为我的主要颜色（＃000），并根据其应用的位置（即主要内容，辅助内容等）降低其不透明度。

3.

Don’t use grey text on colored backgrounds

不要在彩色背景上使用灰色文字

使文本变为浅灰色是在白色背景上淡化它的好方法，但在彩色背景上看起来并不太好。

这是因为我们实际上看到白色灰色的效果是对比度降低。

使文本更接近背景色实际上有助于创建层次结构，而不是使它变成浅灰色。

处理彩色背景时有两种方法可以降低对比度：

1.减少白色文字的不透明度

使用白色文字并降低不透明度。这可以让背景颜色渗透一点点，以不与背景冲突的方式减弱文字。

2.手工挑选基于背景颜色的颜色

当你的背景是图像或图案时，或者当减少不透明度会使文字感觉过于枯燥或不适应时，这会比减少不透明度效果更好。

选择与背景色调相同的颜色，调整饱和度和亮度，直到看起来合适。

4.

Do the math for understanding colors

运用数学原理理解颜色

我们大多数人都喜欢挑选正确的颜色组合，每当我们看到一个有精心策划的调色板的设计时，我们都会问自己：“他们是怎么做到的？”（就像下面的那个）：

taken from momoandspirits

直到我了解到理解色彩不仅仅是为了那些从一开始就拥有设计天赋的人，在色调，饱和度，亮度（HSB）上的一个简单的加法和减法将会发挥魔力（我们将使用HSB公式而不是RGB）。你可以很容易地摆脱彩色背景上的无聊白色，并将它变成如下所示的毕加索作品：

那么HSB的加减法在哪里呢？

两种理解颜色的方法

实际上我们可以做两种方法，正如我们所看到的，两种选项都具有相同的基本颜色——圆圈背景颜色＃B9F4BC，但文件夹和条纹颜色方面有所不同。

（括号内容数字第一个数字对应于色相，其次是饱和度，最后是亮度。）

Option A

Option A

在选项A中，我们可以看到，饱和度和亮度是数值发生变化的地方，我们保持色调值123不变。

现在，当我们专注于基础的饱和度为24，亮度为96时，当我们为文件夹创建较深的绿色时，这两个值都会改变。从24的饱和度开始，它变成了40（增量+16），而从96的亮度变为82（减少了-14），这表明饱和度的变化无论增量还是减量都需要按照与亮度成反比的调整创造出良好的对比（反之亦然）。同样的事情发生在Strip，使用文件夹的饱和度和亮度作为基础值，我们从40增加到44（增量+04），并从82到75（减去-07）的亮度。因此，我们得出公式：

较暗值=饱和度增量是亮度的递减

较轻的值=饱和度下降是亮度的增量

每当我想知道我的设计应该使用什么正确的颜色时，这个公式帮助了我。

我了解到，最好的出发点是有一个基本颜色，并从那里开始饱和度和亮度的调整，同时保持色调值相同。

Option B

Option B.

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

RGB代表红色，绿色和蓝色，而CMY是青色，品红色和黄色。当我第一次开始时，这些术语对我来说并没有什么重要性，直到我遇到了使用RGB和CMY进行颜色组合的发现。

现在在选项B中，如果我们想要使底色变暗，我们需要做的就是将我们的拾色器移动到最接近的RGB位于我们的调色板中的方向，或者将其移动到CMY的方向变异较轻。例如：

选色器

由于我们想要在我们的文件夹图标中创建基本颜色＃B9F4BC（圆形背景）的较暗变体，我们需要将我们的拾色器移动到最接近RGB所在的方向（在此为蓝色案件）。

但是，如果我们想要使用较轻版本的文件夹，我们将把选择器移动到CMY附近（在本例中为黄色）左侧。

在将颜色纠偏移动到我们想要的变化之后，我们现在将选项A中的公式应用于此，结果我们得到了以下颜色组合：

红色，绿色，蓝色（RGB）+选项公式=较暗变化

青色，品红色，黄色（CMY）+选项A公式=更轻的变化

5.

Use spacing to separate groups

使用空间/间距来分隔不同的组

除了在两组之间添加一条线以显示分隔之外，在两个组之间使用宽松的空间是更好更简单的解决方案。

正如接近法则the Law of Proximity states所述：

Objects that are near, or proximate to each other,

tend to be grouped together.

彼此靠近或接近的对象倾向于分组在一起。

从上面的例子来看，我的目标是通过使用24px之间的大的空白间隙，在我的标题和作者之间创建一个分隔。

6.

Use colors to separate rows

使用颜色分隔行

颜色作为分隔符

做衔接口有时可能无聊，因为它只需要复制n次组件。

但在用户方面，如果一行与另一行之间没有很大的区别，阅读它们可能会很困难。

因此，除了使用线条之外，在行中添加颜色背景对于阅读中的用户可能会有很大帮助，而且对于我们的设计师来说也会更加享受。

7.

No large blur and spread values to make box shadows more noticeable,

add a vertical offset.

不要使用较大的模糊和扩散值来使框阴影更明显，

添加垂直偏移。

它看起来更自然，因为它模拟了像我们以前在现实世界中看到的那样从上方照射下来的光源。

这适用于插入阴影，就像您可能在井上使用或形成输入一样：

如果您有兴趣进一步了解阴影设计，

《 材料设计指南》

https://material.io/guidelines/material-design/elevation-shadows.html

是一本很棒的入门指南。

8.

Multiple instead of Drop shadow text

正片叠底代替阴影文本

Header design

如果图像背景是动态的（或者可以随时更改），那么设计标题组件或在图像上添加文本是非常具有挑战性的。

通常，带有动态图像背景的文本的常见解决方案是添加投影，但它无助于用户的可读性。它在字母和单词周围增加了更多的视觉混乱，因为它们填满了它们之间的空间。

对于某些人来说，黑/白色覆盖是对这些设计有帮助的解决方案。

但最近，我发现使用正片叠底作为渐变填充的混合工具。

规格为正片叠底混合选项

这样做比在图像上创建黑色背景并减少其不透明度要容易得多。

另外，使其变为灰色使得图像的其他部分保持其自然色，并使文本所在的部分变得更深，以便于文本的可读性。

9.

Line Length

线长

大多数设计师所做的常见事情是使内容的长度更长，以便它可以适合其容器。但这样做会给我们的用户造成眼睛疲劳，而不像每行45-65个字符是理想的。

如果你遇到了缩短长度以达到理想的困境，但会在右侧产生一个如下所示的白色空间：

右边有很大的空白空间

不要犹豫，就这样做。并使整个文本列中心对齐其容器，以便您可以删除空白。

中心内容

10.

Don’t reinvent the wheel

不要无谓地重复，做无用功

在同一级菜单或者说界面中，不要使用太多的不同的元素，这样会使其视觉效果不佳，且显得繁冗。

当一个设计不仅仅是基本组成的时候会导致它整体效果看起来不一致，也就是当你意识到你已经制作了5种卡片界面，10个按钮，5个标题标题样式......的时候。

在开始为特定内容创建界面之前，请尝试查看以前创建的设计，因为您可能会看到可以回收和使用的模式。

我们可以使用Article卡并将其替换为Art Group的内容，而不是重复以上操作并为Art Group创建另一张卡片（上面的示例）。

这将为设计人员节省时间并使界面保持一致。

11.

Use brand colors as accents

使用品牌颜色作为重音

通常，品牌颜色必须占据我们界面设计颜色的很大一部分。但事实上，我们很难在清洁和简约的布局中向客户展示我们客户令人震惊的霓虹黄色，橙色和粉红色品牌颜色。

怎么解决呢？

将它们用作重音颜色。

12.

Use accent borders to add color to a bland design

使用重音边框为平淡的设计添加色彩

如果您不是平面设计师，那么您如何将其他设计从美丽的摄影或色彩丰富的插图中获得的那种视觉风格添加到您的用户界面中？

一个可以产生巨大差异的简单诀窍是在界面的某些部分添加多彩的重音边框，否则会感觉有点平淡。

例如，在警报消息的旁边：

或突出显示活动的导航项目：

甚至是整个布局的顶部：

它不需要任何平面设计人才为您的用户界面添加彩色矩形，并且可以使您的网站更加“设计”。

如果您觉得难以挑选颜色，可以尝试从Dribbble的颜色搜索等受限调色板中进行选择，以避免被传统颜色选择器的无穷可能性所淹没。

13.

Use fewer borders

无框设计

当你需要在两个元素之间创建分隔时，尽量抵制使用线框。

虽然边界是区分两个元素的好方法，但它们并不是唯一的方式，而使用它们太多会让你的设计变得繁忙和混乱。

下一次你发现自己到达边界时，请尝试下列其中一个想法：

1.使用盒子阴影

箱形阴影在绘制像边框这样的元素方面做得非常出色，但是可以更加微妙并且完成相同的目标，而不会分散注意力。

2.使用两种不同的背景颜色

通常只需将相邻元素的背景颜色略有不同就可以在它们之间进行区分。如果您已经在边框上使用不同的背景颜色，请尝试删除边框; 你可能不需要它。

3.添加额外的间距

什么更好的方法来创建元素之间的分离，而不是简单地增加分离？将事物划分得更远是一种在不引入任何新UI的情况下创建元素组之间区别的好方法。

以上内容整理于Medium上的两篇文章

Riel M《7 Practical Tips for Cheating at Design》

https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

Adam Wathan & Steve Schoger《10 cheat codes for designing User Interfaces》

https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9

有翻译不到位的地方还请多多包涵，另外感谢您的观看:)