用户界面设计的7个方法

想学习ps基础的朋友们能够去学习一下《PS网页前端设计基础》这是一套彻底免费的教程~

我可能会假设咱们中的大多数人都是从一开始就对UI设计一无所知，可是，尽管开始的时候咱们遇到了困难，咱们仍是经过大量的设计书籍和文章来理解颜色、排版、布局等是如何工做的。这是一个背后有一个“为何”的过程，每当咱们建立一个更大的文本，添加一个阴影，或者改变颜色，都必须有一个缘由来解释为何事情必须是这样的。

所以，在本文中，我将分享我从不一样的公司、设计师、设计用户界面时学到的东西以及我在这一过程当中发现的新发现！

免责声明：如下提供的样本并不必定意味着它们是错误的。这只是咱们如何从一个好的设计方案改进为更好的方案的基础。

1、这个文字很重要，让它更大？

当面对须要字体层次结构的内容时，使文本更大以给予重点和重要性一般不能解决问题，就像下面的问题同样：

字体层次结构不是小到大的字体大小，它是关于字体正确的大小，粗细和颜色的混合，创造对比，对比度越大越好。

那么，如何建立更好的对比度呢？

1.不要使用一种不一样字体大小的权重来建立对比度和层次结构。

2.相反，主要内容使用粗体和深色样式，次要内容使用较小和较浅样式。

3.建立三种不一样颜色的文本（见下面的示例）。

4.不要惧怕在项目上应用大的字体间隙（即24px标题、16px正文文本、10px meta等）。间隙越大=对比度越好。

5.记住，对比度=字体大小+字体粗细+颜色

6.最后，必定要检查它的对比度。

2、不要使用纯黑色

咱们都知道使用黑色文字颜色（＃000）会给读者带来眼睛疲劳，所以咱们的解决方案是建立深色变体做为替代方案。可是，咱们可使用具备不一样不透明度的黑色做为解决方案，而不是选择3个或更多十六进制颜色值：

在上面的示例中，我使用黑色做为个人主颜色，并根据应用层次（即主内容、辅助内容等）下降其不透明度。

3、用公式学颜色

咱们中的大多数人都不擅长选择正确的颜色组合，每当咱们看到一个精心编排的调色板设计时，咱们都会问本身“他们是如何作到的？”“（就像下面的那个同样）：

直到我了解到，了解色彩并不只仅是为了那些从一开始就有设计天赋的人，在Hue，饱和度，亮度（HSB）上进行简单的加法和减法就能发挥做用（咱们将对这个公式使用HSB而不是RGB）。以下所示：

那么，HSB中的加减法在哪里出现呢？

实际上，咱们能够采用两种方法，正如咱们所见，这两种方法的基色都相同，但在文件夹和条带颜色方面有所不一样。当咱们开始时，老是记住第一个数字对应于色调，而后是饱和度，最后是亮度。

选项A

在选项A中，咱们能够看到色调值123一直保持在形状（圆形、文件夹、条带）以外，而饱和度和亮度是发生变化的地方。

如今，当咱们关注的是24的基底饱和度和96的亮度时，当咱们为文件夹建立深绿色时，这两个值都发生了变化。从24的饱和度变成40（增长+16），从96的亮度变成82（减小-14），这代表不管增长仍是减小，饱和度的变化都须要与亮度成反比调整，以产生良好的对比度（反之亦然）。一样的事情也发生在纸条上，以文件夹的饱和度和亮度为基值，咱们从40移到44（增长+04），亮度从82减小到75（减小-07），由此得出公式：

较暗值=饱和度增长是亮度的下降

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

每当我想知道在个人设计中应该使用什么颜色时，这个公式就帮助了我。我了解到最好的开始点是有一个基色，从那里开始调整饱和度和亮度，同时保持色调值不变。

选项B

在选项B中，一样的原理仍然适用（咱们上面的公式），可是色调值会改变。

RGB表明红色、绿色和蓝色，而CMY表明青色、洋红和黄色。这些术语在我刚开始的时候并无对我有任何重要性，直到我发现使用RGB和CMY进行颜色组合时。

如今在选项B中，若是咱们想要基色的颜色有一个更暗的变化，咱们须要作的就是将颜色选择器移动到调色板中最近的RGB所在的方向，或者将其移动到CMY的方向以得到更亮的变化。例如：

因为咱们想要建立一个更暗的基础颜色b9f4bc（圆形背景），这将应用于咱们的文件夹图标，咱们须要移动咱们的颜色选择器到最近的RGB所在的方向（在本例中是蓝色）。可是若是咱们想要一个更轻版本的文件夹，咱们将把选择器移到左边，靠近CMY（在本例中是黄色）。

*更常见的是，RGB会致使较暗的变化，而CMY会致使较浅的变化。

将颜色选取器移动到所需的变体后，如今咱们将在选项A中应用公式，这将致使咱们具备此颜色组合：

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

青色、洋红、黄色（CMY）+选项A公式=较浅的变化

4、使用间距分隔组

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

彼此接近或接近的物体每每被组合在一块儿

从上面的例子中，个人目标是经过在标题和它的做者之间使用一个24像素的大空间间隙来建立一个分离。

5、使用颜色分隔行

除了使用线条外，在行中添加颜色背景对用户阅读很是有帮助，并且对咱们的设计师来讲也会更享受。

6、使用品牌颜色做为强调

尽可能保持咱们界面的整洁

7、注意对齐

最后，若是您要建立一个像上面这样的列表设计，请将项目符号、标志符号或数字放在空白处以突出显示列表。这将使用户的可读性流不间断，更清晰。

最后欢迎加入咱们的设计群：801466587，咱们能够交流学习更多的设计及内容！