UI设计中一个重要的方面就是排版，从小了说排版影响是否美观，从大了说排版可以直接反映出一个设计师的综合素质，和对作品的整体把控能力。版面率越高，版面就越活泼；留白率越高，版面就更安静典雅。
01/什么是版心和版面率
谈到排版，有必要向大家介绍一下什么是版心和版面率。如下图：
版心就是除去天头、地脚和左右页边距余下的区域，也是我们页面内容的摆放空间。 版面率就是版心所占页面的比例，通俗一点讲就是版面的利用率。
02/版面率如何影响版面气质
一般来说版面率越高，视觉张力就越大，版面也会更活泼与热闹；反之，版面率越小，给人感觉就越典雅与宁静，版面也会更有格调。
↑↑↑高版面率的海报(左)更热闹更活泼，低版面率的海报(右)更典雅。
画册同样也适用,右边低版面率的作品更安静和典雅。所以在实际工作中要根据项目的特点安排合适的版面率。
03/什么是留白率
留白 = 版面负空间。
空版留白最多，满版留白最少。当然这也不是绝对的，有的作品中虽然是满版，但空间广阔，比如天空什么的，都可以当作留白来看待。
04/留白率怎么影响画面气质
以下几个作品我们可以看出留白少的信息更丰富，版面更有活力，也更热闹，亲和力也更强。而留白多的更雅致，更安静典雅，更有格调跟品质感，但亲和力稍弱。
我们再来看一个案例，下图是文案：
这一步我们需要把文案的层级关系拉开，大中小区分的明显一点。这个文案的层级关系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是无尽的森林 ＞ 小文字信息的。
首先我们做一个有张力的版面，首先版面率要大，其次留白要小，让版面中的信息紧凑一点。如下图：
上图就是对版面的布局，可以看到图片是出血版的，没留天头与左右页边距。这样做的目的也是使版面率更大。
布局做好之后我们把图片与编排好的文字放置上去就可以了，如下图：
上图可以看到留白比较少，符合留白率低的理论，虽然具备张力，但不是很明显。这种情况下我们可以改变一下底色使之感觉留白率更低，如下图：
下面我们再来做一个典雅一点的。
一定是低版面率和较多留白的版面更能体现典雅与安静感。所以我们在版面安排上要使其留白更多，同时版面率要小一点。下图就是一个基本布局。
最后我们再根据版面布局置入图片微调一下就可以了，如下图：
总结：版面率跟留白率都能够影响版面的气质，我们做项目的时候具体问题具体分析，根据项目气质去设定版面率跟留白率的大小。
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問
