UI排版四部曲,从此告别页面杂乱

作者:Sky

 

我们在做设计的时候,很大一部分时间都花在排版上,再精美的配图,再犀利的文案,没有好的排版维持也是浪费,今天就给大家讲一讲几个重点排版规则。个别词语大家可能觉得有些陌生,但其实也就是我们做设计时经常会用到的几个设计原则:

轴是什么?

轴是一种最常用排版方式,它在页面中是一条看不见的虚线,当我们把元素围绕轴去环绕的时候,会更加井然有序。

比如我们喜欢去MUJI购物不仅仅是因为质量好,同时他们的布局有序,能让我们很快找到我们想要的东西。

 

轴的使用原则

1.对称轴心

虽然轴是个虚线,但是我们同样需要和轴心进行对齐、对准。

上图列表设计常用左侧轴心对齐,图中采用的左侧垂直对齐轴心方式来排版,所有的元素都围绕着左侧头像对齐,垂直轴整齐对对齐屏幕左侧的头像。

2.增强轴心,制造平衡

轴虽然是虚线看不见,但是如果已经被周围对内容区分了,那我们可以通过强轴心,使整个设计更加平衡。在页面中增强轴心是设计排版常用的一个技巧,需要我们在排版好层级后,通过增强页面中轴心,来达到视觉层次的突出和强调,在很多经典设计中,都运用了这个增强轴心的方法。

城市街道就是很好的案例,用建筑来加强马路的轴线,假如左侧缺少一排建筑,那么街道的轴心就没有那么坚固了。

在产品设计中,为了使整个页面的平衡感更好、区分更明显,我们需要在页面中间去增强这个轴心,一般来说我们需要营造一条虚线来保证页面平衡。

如图,通过增强图像和内容之间的轴心,使页面更加平衡,并增强呼吸感。

在页面中增强轴心是设计排版常用的一个技巧,需要我们在排版好层级后,通过留白去营造一个设计的轴心,在很多经典设计中都运用了这个增强虚线轴心的方法。

3.轴心重复

如果一个页面没有拉到终点,我们的内容将会跟随着轴,直到用户找到感兴趣的内容,就好像公路一样,如果我们没有到达我们要去的终点,我们将会一直跟着这条路走下去。

举几个最经典的例子,在此设计中,垂直轴从上到下无限延伸,没有终点。包括淘宝的页面也是,可以一直往下翻,看了又看,直到我们捕捉到自己想要的商品为止。

对称

对称在设计中运用的非常多,当页面中的元素、零件、内容相同的时候,完美的对称性可以让页面更加和谐一致,对称分为完全对称不对称两种,下面会给大家一一讲到。

1.完全对称

页面元素完全一致,采用对称性来增强平衡感。当元素在轴的两侧相同时,可以理解为镜像,通过这种方式来营造和谐一致感觉。

2.不对称

如果元素在轴的两侧不相同,则设计是不对称的。不对称的案例也有很多,同样如图,尽管左列和右列的宽度相同,但每列中元素的高度不同。差异感使得视觉很难从左到右进行扫视,不对称对于一些应用需要营造差异性的时候很有帮助。

韵律

经常有人说自己的页面缺乏节奏感,那么节奏是个什么东西呢。节奏可以理解为由重复的形式组成的运动,了解节奏的最好方法就是听一首歌。当一首歌重复时,歌曲就有节奏感。当听着有节奏的歌曲,我们会不由自主的意识到这种韵律,歌曲后面的部分我们也自然能掌握到节拍。

1.重复

如图,在feed列表里面每个列表都会显示图片、价格、英文名字、以及评价、星星评级等,当你在浏览的同时,视线扫描列表的时候你就已经熟悉了它的节奏,并能很确切的在后面的页面中去关注价格、评价等。

所以,如何在设计里面加强节奏感,就是把一些既有的规则,不断的去重复排列,从而形成节奏感。

如图,同样采用了类似的方法,页面中头像位置、点赞、评论发消息、以及收藏等,都是在固定位置重复排列出现,让用户的潜意识形成一种认知。

2.停顿

突然的节奏中断会让设计显得更有层次化。想像我们在听一首歌曲,当一首歌有节奏的重复播放着,突然出现一段RAP,我们会觉得很特别,所以制造停顿,也是常用一种排版方式。

在有节奏的feed流里面会经常出现一些卡片式的推荐,以及顶部的圆形模块,这些模块在页面浏览过程中会营造一些停顿,这种停顿是抓住你注意力的一个很好的方法。

,在有节奏的feed流里面会经常出现一些列表式的推荐,这种停顿也是抓住你注意力的一个很好的方法。

层级

层级这种方法,我想大家每天在工作中都会运用到,层级是指通过视觉来让信息突出重要和不重要之分,层级也有几种形式来体现:

1.尺寸大小

如果页面中的某个元素大于其他元素,那么它的层级是高于其他元素的,在自然界中,我们最先看到的是大的元素,比如我们面前有3块玻璃。我们最先注意到的肯定是最大的那一块。

在这个页面中,明显顶部图片大于下面卡片,那么他的信息优先级就一定是大于下面3张卡片的。

同样的原理,左侧的banner图大于右边卡片形式的图,那么它的视觉优先级就一定是大于右侧的。

2.形状差异

如果页面中的某个元素和其它元素不同,那么这个不同的元素优先级也会高于其他都相同的元素。同理,如果面前有3块玻璃,里面有一个是门,我们的视觉也会优先集中在门上面。

在照片墙的个人页面中,里面的头像形状和底部相册形状一个是方形、一个是圆形,形状上是完全不同的。如此便可以很直观的将它们区分开。

如图,页面中的电影封面比下面电影缩略图尺寸更大,形状也有差异化,所以它的优先级也更高。

3.位置

一个页面中,我们可以将元素放置到一些固定的位置,比如左下图图中的圆圈里面,表示信息层级更高。这个一般是用在有轴心的地方,如图就有使用到这个方法。

在一个圆圈内,中心是最高层级的。头像是优先级最高的区域。

 

总结

看了这么多,是否都记清楚了呢?下面给大家总结一下!

 

 

 

 

本文转载来源:我们的设计日记

顶部图片来源:http://cliparts.co/lines-clipart

 

 


推荐阅读

听说你要做视觉改版?
视觉内容营销,你必须知道的四十二章经【UXRen译#163】
亿万好评的QQ国际版,今年可能会用这两个新的视觉设计方案
视觉设计从哪几个方面影响用户体验?
如何做一份视觉竞品分析

 

 
UXRen公众账号 关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。


版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

您可能还喜欢...

发表评论

电子邮件地址不会被公开。