四个小技巧增制作加设计层次感

2022-02-09 点击量：

运用分组建立层次 

在设计中，相邻的元素比分开较远的元素会更加吸引人注意，在做设计阅读顺序时，利用设计分组是一个非常有效的方法，将不同信息进行视觉间距分组。能提升用户对于内容上的理解。

▲如上图slack的设计，插画引导图和底部按钮上面文字拉开了距离，使得内容更聚焦。第二个界面的顶部头像和下面的文字也是通过分组形成了对比。

▲stadium-live的产品设计上，登录页面按钮为一组，顶部品牌LOGO和slogan一组，人物为一组，每组信息之间分组非常明确，互相都不会对对方视觉产生干扰，后面两张页面也是如此，顶部的导航，和下面表单信息，以及头像和底部按钮，通过分组处理，内容更加符合用户的视觉动线。

▲在球员定制的处理上，最右边那张图，通过卡片和线条分组处理，从视觉上很清晰的看见排名；哪两个球队之间正在进行比赛。

▲当一组信息比较接近时，证明他们是有关联的，如果距离比较远，这意味着这组信息和他们是不同的，简单来说，通过邻近性原则创造这些关系，为信息带来层次。

运用空白建立视觉层次 

空白也是视觉设计元素，并不是留白就是空着，如果设计中留白运用合理，可以帮助用户理解很多信息，因此任何设计都需要通过适当的负空间来传递信息。

▲如上图我喜欢的一个应用classpass设计非常极简，页面中大量运用留白来凸显内容。

▲classpass的设计不会使用太多的视觉元素，而是运用留白把内容进行分组，每个页面的留白恰到好处，同时留白本身就是对信息进行区分，所以页面中减少了很多线条使用，会更加干净有品质感。

▲must是一款电影软件，整体设计非常杂志风，页面就是通过图文处理，以及留白空间的处理，增加对比，基本产品使用过程中你不会感觉到视觉负担，元素之间的信息组织的非常清晰。

▲在电影展示页面，信息的处理，以及打分设计上，多次运用留白来处理信息层级，在设计中，当你元素周围留白越多，它产生聚焦注意力的作用也越强，如右边的打分页面，嘉瑞广告，几乎所有焦点都在这个弹窗上。

▲Artsy是一款艺术品电商网站，整个app的设计也充满了艺术气息，每次我设计找不到感觉的时候就会去打开看看，里面的排版、还有设计的细节处理，都值得我学习，但我喜欢的还是他对于板式和留白空间的处理。

▲在首页设计，我最喜欢他相框的设计，就像欣赏美术馆的一幅画，页面留白也非常大，衬线体和非衬线体的对比也运用的非常好。

▲整个APP的设计被大量留白包围，虽然现在流行各种质感，光感，C4D的设计，但是大量视觉元素会让页面过于饱和，如果没有很好的视觉引导，用户会感到不知所措。这种简单的返璞归真，也能让人视觉不容易产生疲劳。

运用氛围建立层次 

▲每个纹理的运用，有设计感的纹理从视觉感受上比简约主义更能吸引用户注意力，但是背景纹理的运用不能为了设计而设计，而是需要和产品内容有关系。比如纹理和文字内容、和信息是密切相关的。如上图，是一款打车软件，背景结合了打车的地图，公路线路，用车场景；让页面对比和设计层次更加突出。