专业的ui设计师也要看的7个界面设计实用技巧

明明可以靠天赋做出好设计，却偏偏要技巧。

每个开发团队都不可避免的需要有做界面设计的人，毕竟当下都是靠颜值打天下啊！

但是很多小的团队没有全职的ui设计师，或者只能请资历比较浅的ui设计师，当你需要一个好看又好用的界面时，一定很抓狂，也常抱怨：我不是搞艺术的，不知道怎么做才好看啊！

但其实，有很多实用的技巧可以让你的界面更好看，不需要非常专业的平面设计教育背景就能做到。对于已经从事界面设计多年的ui设计师，这些技巧也可以审视自己的设计，是否更接地气，不是仅仅停留在酷炫的概念设计上。

1.通过改变字体的颜色和粗细来区分层次结构，而不是字体的大小

界面设计中，设计文本样式时常犯的一个错误是，过于依赖字体大小来控制层次结构。

“这段文字重要吗？让我们做得更大一点吧。”

“这段文字比较次要？让它变小一点咯。”

不要一做设计就想着改变字号的大小上，要多尝试使用颜色或字体粗细来完成相同的工作。

“这段文字重要吗？让我们做得更大胆吧。”

“这段文字比较次要？让我们使用更浅的颜色咯。”

尝试并坚持两种或三种颜色：

主要内容用深色（不是全黑色）（如文章的标题）

次要内容灰色（如文章发表日期）

辅助内容的浅灰色（可能是页脚中的版权声明）

类似地，两种字体粗细通常足以应付所有的界面设计：

大多数文本的正常字体粗细（400或500取决于字体）

较重的字体粗细（600或700）用于您要强调的文字

用于界面设计的字体粗细不要低于400（细或极细） ; 细体或极细体可以作为大标题，但在较小的屏幕尺寸下，阅读起来非常困难。如果您正在考虑使用细体来淡化某些文字，请改为使用较浅的颜色或较小的字体。

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

在白色背景上使用浅灰色的文本可以起到淡化的效果，但在彩色背景上使用灰色文本看起来并不理想。

这是因为，我们实际上在白色背景上看灰色的效果是对比度降低。所以，既然是这样的目的，我们应该使文本更接近背景色，创建层次结构，而不再继续使用灰色。

如何在彩色背景上降低对比度呢？这边分享2种方法：

方法A，使用白色文本，然后调整透明度，让背景颜色渗透出来，不再与背景形成冲突。

方法B，寻找与背景色同色系的颜色。如果背景是单色，方法A没有问题。如果碰到的背景是图片或者有纹理时，方法A会使文字过于枯燥乏味，这时，挑选与背景相同色调的颜色就是更理想的选择，不要忘记多调整一下饱和度和亮度，直到最佳。

3.让您的阴影带一点偏移

不要使用较大和扩散的模糊值来让阴影变得更明显，一定要记得添加垂直方向的偏移值。

带偏移的阴影模拟了现实世界中的从上照下来的自然光照，让界面看上去更自然。

除了外框用这种方式外，输入框也适用这样的方式。

推荐拓展阅读：Material Design Guidelines

4.使用更少的边界线

当您需要在两个元素之间创建分割时，请立即停止想用分割线的念头！虽然分割线是一个好办法，但不是唯一的方法，使用太多的分割线会让设计变得繁复和混乱。

这边提供3个好的设计思路：

思路A，使用阴影来替代，阴影在表现卡片式信息条方便更加出色，不容易用用户分散注意力。

思路B，使用两种不同的背景颜色，通常两种相邻的元素背景颜色略微不同就可以了，不需要有强烈的对比。如果已经使用了两种颜色做区分，同时又添加了分割线，这样就显得多余啦，真的可以把分割线删了！

思路C，调节额外的间距。让元素离的远一点能够区分两个元素，那如何区分不同类别的元素呢？答案很简答，那就让这两类元素离得更远一点吧！！

5.不要原本就小的图标放大使用

如果您设计的页面（比如着陆页的“功能”部分）需要用到大的图标，你可能会调用一些免费的例如Font Awesome图标库，然后放大使用，毕竟这些都是矢量的图形，尺寸放大了也很清晰嘛！

但是！！！虽然这些矢量图标放大了不会模糊，然而它们原本是为16-24像素而“生”的，人为的放大3-4倍绝对会显得不专业，缺少细节设计。

如果只有小图标可以使用，没有找到原生的大图标，请尝试将这个小图标放在另外一个带背景颜色的形状中。

这样可以让图标的尺寸不会人为放大，同时又能满足大尺寸的需求。当然，最理想的方案是使用原生设计的大图标，可以在如Heroicons或Iconic上找到。

6.使用多彩的粗边框线为平淡的设计加点点缀

如果您不是专业的ui设计师，如何才能让自己的界面也能有高大上的视觉风格，看上去像设计过的一样？

一个小技巧就是在某个边框添加多彩的粗边框线条，例如，在警报消息的旁边添加：

或者导航条的底部突出激活的栏目：

或者整个页面的顶部：

7.并非每个按钮都需要背景颜色

当用户在页面上可以有多个选择按钮时，很容易让用户陷入理解语义的选择动作。

像Bootstrap这样的的框架，通过点选这样的语义样式菜单按钮来进行选择。

“这是一个积极的行动？让按钮变绿。”

“这是否删除数据？将按钮设为红色。”

这样设计并不是说不对，但是还有一个更重要的纬度不要忽略了：层次结构。

界面设计上的每个触发动作在位于金字塔的某个位置，大多少页面只有一个真正的一级动作，一些不太重要的二级动作，还有几个很少使用的三级动作。

在设计这些动作时，要充分考虑它们的层级结构，要传达给用户正确的层级信息。

一级动作：非常明显的显示，用实心填充，并用高对比的背景色。

二级动作：明天但不突出。可以采用轮廓线，或者较低对比度的背景色。

三级动作：可以发现但不显眼。将这些按钮设计为链接是比较合适的做法。 

“取消按钮要怎么设计呢，它们不应该总是红色吗？”

其实不一定，如果取消按钮不是页面上的主要动作，那么用二级或三级按钮可能会更好。

当指引和导向按钮是一级动作时（例如确认对话框），应该使用红色背景的按钮，而取消则用三级按钮。

如果你喜欢这篇文章，欢迎继续关注25学堂。