洛阳达内教育分享如何从零开始设计UI界面

　　1、视觉层次的一致性

　　怎么让我们的设计看起来柔和圆润呢？下面开始准备工作：

　　1）选择想要使用的配色（想想使用柔和的粉彩构成的背景主色调，搭配一个给人精致感的次要色，以及一个抓人注意力的强调色。）

　　2）选择合理的字体（我用的是Brandon Grotesque，这是我较喜欢的字体，它足够友好，能够营造有趣的氛围，且具有良好的可读性）。接下来，给字体设计不同大小和字重（较好不超过5种不同的样式）。其中，标题字体应该较大，正文字体较小，较小的字体用于细节呈现。注意，尽量不要在长句子里面使用全大写。

　　3）确定你所需要的阴影的高程（Height）和模糊度。

　　4）如果使用的是图标，确定使用填充样式还是描边样式。尽量不要混用。

　　至此，一个小型的设计系统就已经确定了。挺好看的！

　　2、给UI元素营造柔和梦幻的氛围

　　在设计界面的时候注意，锐利的边缘会让界面看起来严肃而专业，圆角则会显得充满亲和力。

　　自然弥散的阴影也会让设计看起来足够精巧，所以当我们向元素添加阴影的时候，会强化视觉层次。不同的阴影效果，给人的「高程」上的感觉也不一样。

　　阴影较深的元素会显得距离背景更近一些，阴影较浅，弥散范围更大，则显得高程更高，距离底部背景更远。这就是为什么很少会有元素产生较深的阴影，因为太多就会显得不够自然。

　　选择元素并赋予它们以一定的模糊效果是一个需要不断尝试的过程。不过不要害怕，这就是一个调整参数的小游戏。下面是我设计界面的时候的一些参数设置。

　　如果要让阴影看起来更加独特，尽可能让阴影和前景元素使用同色相的颜色，然后降低不透明度。理想情况下，背景也应该有类似的色调。

　　3、让渐变看起来更加平滑细腻

　　为了让渐变看起来更加舒适，我们可以从同一个配色方案中选择对比强烈的颜色，甚至也可以是同一色系的颜色，稍微调节一下它的亮度就可以了。

　　然后重新拉伸一下渐变，让颜色过渡变得更加平滑。虽然这样的渐变几乎看不清楚，但是元素看起来会有明显的凹凸感。

　　对于白色的元素，你可以选取和背景相近的颜色来制作阴影，只要确保对比度，不会相融就可以了。

　　4、选择和背景匹配的正确字体

　　在字体配色上，黑色和灰色是较经典的选择。但是如果要让字体和整个设计在视觉上保持同一协调，你还需要往其中注入一些别的颜色，让它和整体融合度更高。比如这里用的绿色的背景，那么可以在其中加入一点绿色的色调，这样就协调了很多。

　　5、增加让项目更具吸引力的细节元素

　　有些细节可能是没有必要的。但是对我个人而言，我非常喜欢引人入胜的小细节，通过这些「额外」的设计细节，让人感受到不一样和愉悦感。