对于每个设计师而言，在工作中总会遇到需要作出设计决策的时候。

也许你的公司并没有全职的设计师，你需要自己完成一个新需求的UI设计。又或者你正在开发一个自己的项目，你希望它的视觉体验要比Bootstrap的默认效果更好。

这个时候很多人都会嘀咕：“我不是一个艺术家，没法子让它看起来更棒啊！”但事实证明即使你没有系统的艺术功底，只要合理地运用一些设计技巧，也会大大提升产品体验。

今天的文章会介绍7个简单的技巧，来帮你提升你的设计。

一、除了字体大小你还可以使用颜色、粗细（重量）来凸显层次

在设定UI字体样式时，我们经常会过渡使用不同的字体大小来表示不同的层次。

“这些文字重要吗？把它们放大点吧。”

“这些文字是次要的吗？把它们缩小点吧。”

单纯使用字体大小做比对是不够的，试试用字体的颜色和粗细（重量）。

“这些文字重要吗？把它们加粗吧。”

“这些文字次重要吗？那就把它们变细一点。”

尝试并采用两到三种颜色

·主要内容（比如标题）使用深色（但不要用黑色）

·次要内容（比如文字的发布日期）使用灰色

·辅助内容（像页脚中的版权声明）使用浅灰色

同样的，在UI设计中使用两种字体粗细（重量）就够了

·大多数文本使用正常的字体粗细（重量）（根据字体一般使用400到500之间）

·对于需要强调的文本使用更粗的字体（600或者700）

在UI设计中，正文的字体粗细（重量）不要小于400.

过于纤细的字体可以用在标题文字上，但使用在较小的内容文本上就不易于阅读了。

二、不要在有色的背景上使用灰色的文本

在白色背景下，将黑色的文本改成灰色，是淡化其视觉效果的好办法，但是在彩色背景下这么做，效果看起来就不是很好。

这是因为灰色的文本减弱了与白色背景的对比度。

但是在彩色背景下，想要降低对比度就应该让文本的颜色接近背景色，而不是增加灰度。

想要降低文本与背景色的对比度，通常有两种办法：

1.增加白色文本的透明度

增加白色文本的透明度。可以将背景色稍微体现出来，更加柔和地显示文本。

2.根据背景色来挑选文本颜色

当背景是图片或者纹理的时候，半透明的文本让人觉得模糊而不够锐利，这个时候最好是根据背景色来挑选相应的文本色。

选用与背景色相同色相但不同饱和度，不同亮度的颜色，使得文本看起来效果更好。

三、偏移你的投影

相比于使用大范围的模糊和扩散加强边框的阴影，不如增加垂直的偏移阴影。

这样会更加自然，因为这是模拟了一束光从上面照射下来，就像我们现实世界中看到的一样。

这就像你在输入框中使用内嵌阴影一样：

如果你有兴趣想要学习更多关于阴影的设计细节，MD设计规范是一个不错的入门资料。

四、减少使用边框

当你需要分割两个元素时，尝试避免立刻就去使用边框。

虽然边框是分割两个元素的绝佳方式，但也不是唯一的选择，过多的使用边框会让人觉得页面拥挤、杂乱。

当你下次考虑使用边框时，可以尝试使用下面的方式来替代：

1.使用（box shadow）盒子阴影

盒子阴影和边框一样可以营造出边界，而且更加微妙，也不会分散用户的注意力。

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

通常，相邻元素的背景色只需稍微有所差别，就可以让人区分两者。所以你不一定非要使用边框，大可以考虑为不同的模块填充不一样的背景色。

3.增加额外的留白

除了以上的方法，你还可以通过增加留白替代边框来区分元素。

五、不要随意放大图标（icon）

当你设计页面需要使用icon时，也许会从免费的图标集中找寻，将它们放大或者缩小来满足所需要的尺寸。

由于时矢量元素，所以可以自由无损地放大缩小。

虽然放大尺寸无损矢量图片的质量，但将一个通常只有16*16px或者24*24px的图标放大三四倍，固然无损，但在视觉上就显得颇为不专业了：缺乏细节，总感觉过于“矮胖”。

如果只有小图标，你可以将它放入一个有背景色的图形之中。

通过扩充填充面积，这样可以让你的icon放大到预期的尺寸，

如果你有充足的预算，可以使用专业的icon集。

六、使用有色的强调边框可以增添设计感

如果你不是一名平面设计师，如何使你的作品更具视觉吸引力。

最简单的办法就是使用一个有强调色块的边框，这能让平淡无奇的界面一下子变的鲜活起来。

 比如警告框弹窗的侧边色条：

或者选中导航项的底部高亮显示：

或者在整个页面的顶部：

这并不需要什么平面设计的天赋，只需要为你的界面元素增添色块，就可以时使你的作品更具“设计感”。

但如何选取颜色仍是一个难题。试试从像dribble这样的颜色搜索配色库中挑选，

七、并非每个按钮都需要背景色

当一个页面有多个按钮需要用户操作时，容易使人陷入迷惑。

像Bootstrap这样的框架通过为您提供一系列语义菜单样式菜单供您新增按钮。

“这是一个积极的操作？让这个按钮填充绿色吧。”

“这会删除数据吧？将这个按钮填充成红色吧。”

语义是按钮设计的一个重要部分，但是有一个更的重要维度：层次结构。

页面上每个操作都处于功能层级网络之中，大多数页面都只有一个主要操作，和一些次要的操作，少数的三级操作。

在设计这些按钮的时候，位置与层级的对应是很关键的。

基础按钮应该更加凸显。实体按钮和高对比的背景色会更有效果。

次要按钮应该明显，但不应突出。线框样式或者低对比度颜色是更好的选择。

三级按钮应该可见，但不宜明显，最好设计成链接样式。

“破坏性操作的按钮怎么办呢？难道不应该设置为红色码？”

不一定，如果这个破坏性按钮不是页面的主要操作，就以次级按钮或三级按钮来处置。

当消极操作作为页面的主要操作时，应该使用明显的样式。