UI界面设计 ·

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

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

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

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

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

 

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

 

7 Practical Tips 18

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

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

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

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

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

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

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

主要内容用深色(不是全黑色)(如文章的标题)
次要内容灰色(如文章发表日期)
辅助内容的浅灰色(可能是页脚中的版权声明)

7 Practical Tips 4

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

大多数文本的正常字体粗细(400或500取决于字体)
较重的字体粗细(600或700)用于您要强调的文字

7 Practical Tips 9

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

 

 

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

 

7 Practical Tips 10

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

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

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

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

7 Practical Tips 21

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

7 Practical Tips 13

 

 

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

 

7 Practical Tips 19

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

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

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

7 Practical Tips 23

推荐拓展阅读:Material Design Guidelines

 

4.使用更少的边界线

 

7 Practical Tips 15

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

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

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

7 Practical Tips 22

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

7 Practical Tips 7

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

7 Practical Tips 5

 

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

 

7 Practical Tips 8

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

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

7 Practical Tips 14

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

7 Practical Tips 20

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

 

 

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

 

7 Practical Tips 25

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

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

7 Practical Tips 17

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

7 Practical Tips 6

或者整个页面的顶部:

7 Practical Tips 26

 

 

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

 

7 Practical Tips 24

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

像Bootstrap这样的的框架,通过点选这样的语义样式菜单按钮来进行选择。7 Practical Tips 3

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

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

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

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

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

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

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

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

 

取消按钮要怎么设计呢,它们不应该总是红色吗?

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

7 Practical Tips 2

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

7 Practical Tips 12

 

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

参与评论