网站建设中的设计小技巧增加你的设计层次感
运用分组建立层次
在设计中,相邻的元素比分开较远的元素会更加吸引人注意,在做设计阅读顺序时,利用设计分组是一个非常有效的方法,将不同信息进行视觉间距分组。能提升用户对于内容上的理解。
▲如上图slack的设计,插画引导图和底部按钮上面文字拉开了距离,使得内容更聚焦。第二个界面的顶部头像和下面的文字也是通过分组形成了对比。
▲stadium-live的产品设计上,登录页面按钮为一组,顶部品牌LOGO和slogan一组,人物为一组,每组信息之间分组非常明确,互相都不会对对方视觉产生干扰,后面两张页面也是如此,顶部的导航,和下面表单信息,以及头像和底部按钮,通过分组处理,内容更加符合用户的视觉动线。
▲在球员定制的处理上,最右边那张图,通过卡片和线条分组处理,从视觉上很清晰的看见排名;哪两个球队之间正在进行比赛。
▲当一组信息比较接近时,证明他们是有关联的,如果距离比较远,这意味着这组信息和他们是不同的,简单来说,通过邻近性原则创造这些关系,为信息带来层次。
运用空白建立视觉层次
空白也是视觉设计元素,并不是留白就是空着,如果设计中留白运用合理,可以帮助用户理解很多信息,因此任何设计都需要通过适当的负空间来传递信息。
▲classpass的设计不会使用太多的视觉元素,而是运用留白把内容进行分组,每个页面的留白恰到好处,同时留白本身就是对信息进行区分,所以页面中减少了很多线条使用,会更加干净有品质感。
▲must是一款电影软件,整体设计非常杂志风,页面就是通过图文处理,以及留白空间的处理,增加对比,基本产品使用过程中你不会感觉到视觉负担,元素之间的信息组织的非常清晰。
▲在电影展示页面,信息的处理,以及打分设计上,多次运用留白来处理信息层级,在设计中,当你元素周围留白越多,它产生聚焦注意力的作用也越强,如右边的打分页面,几乎所有焦点都在这个弹窗上。
扫一扫,加微信