很多设计师在设计UI时,都会思考UI界面如何设计;如何区分层级;需要添加哪些细节等问题,下面就来聊聊UI设计区分层级的特点吧!

界面大多都是由字体,图形,色彩构成的,UI也是围绕这三大要素进行。

字体是有重量的,不同的字重可以体现界面层级。在APP界面设计中,更加强调通过字重对比来提升视觉效果,我们可以运用字重和颜色去做层级区分,提高UI作品的视觉效果。

很多设计师在UI设计中,某一段文字比较重要,就加大,后面的文字按照重要性依次缩小,虽然可以达到显示层级的效果,但还是不要过多依赖大小对比去区分层级比较好。

在这里可以通过加大字重,使得下面的UI界面可以达到同样效果。

当视觉字重变化时,整体版面的层级区分,如下图:

在平面设计,版式设计中使用字重比较多。

在品牌设计中,不同字重带来视觉效果也不一样。


我们可以看到很多的UI界面作品,里面使用了大量的投影,这使得我们也想要在UI设计中使用投影。但在使用投影时尽量保持干净,不要采用过大的投影值和扩散范围,并使用柔和投影或者垂直投影。


在UI排版中,除了字体层级,颜色也是很重要排版方法。做UI界面时可以运用多个颜色进行设计。
下图界面排版的次要颜色是灰色,辅助颜色为浅灰,在这里结合字重对比,可以与信息相结合,形成一种视觉节奏。

界面中的线条和色块都是区分层级的一个方法,我们可以按照界面调性调整。

在白色背景上可以让文字变成浅色,在彩色背景上可以让文字变成灰色,但不能够让色彩背景和灰色一起使用,这样会显得界面特别脏,识别度变低。

通过对图片,彩色背景通过降低透明度,可以增加视觉效果。

降低文字透明度也能拉开视觉层级。

选择与背景相同的色相与饱和度。