网站建设中的设计小技巧增加你的设计层次感发布者：本站     时间：2021-02-04 11:02:50

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

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

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


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

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

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


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


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

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