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国际版，今年可能会用这两个新的视觉设计方案
视觉设计从哪几个方面影响用户体验？
如何做一份视觉竞品分析