网站建设中的设计小技巧增加你的设计层次感

发布时间:2021-03-30 13:31:17 作者:厚德网络 来源:本站 浏览量:(30) 点赞:(320) 收藏:(320)
摘要:运用分组建立层次 在设计中,相邻的元素比分开较远的元素会更加吸引人注意,在做设计阅读顺序时,利用设计分组是一个非常有效的方法,将不同信息进行视觉间距分组。能提升用户对于内容上的理解。 ▲如上图slack的设计,插画引导图和底部按钮上面文字拉开了距离,使得内容更聚焦。第

运用分组建立层次 

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

网站建设

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


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



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


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


运用空白建立视觉层次 

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



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



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


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


厚德网络微信

扫一扫,加微信



感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

您身边的【网站建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,营销型网站,手机网站,响应式网站,SEO优化,小程序开发

立即咨询 155-6200-1135