良久没有动笔更新文章了，之前写过一篇《设计干货：点、线、面在版式设计中的浸染》，那么书接前文，本日黑马PM想和大家聊一聊版式设计中的三率一界的观点。相信绝大多数的朋友都没有听说过这个观点。三率指的是版面率，图版率和跳跃率；而一界指的是视觉界线，简称视界。
版面是什么？
版面是指印刷好的页张，包括图文、余白全体部分。这个观点看下图图就很好理解了。
上图是一张书本杂志的对页文件demo，我们说中间这片灰色的区域便是版面。也便是说我们紧张的设计内容将要在版面中进行排版设计。我们常日在排版软件建立设计文件的时候先要方案好版面的大小并画出赞助线，由于版面可以约束设计的内容大小区域。
在版式设计中有天头，地脚，订口和切口的观点：
天头，是指我们常常说的页眉位置。地脚，是指我们常常说的页脚位置。订口，是指靠近书脊侧将要装订的一侧。切口，是指将来要被裁切的一侧。也便是最外侧一周。这里须要特殊把稳的一个地方便是常日情形下，天头的部分要小于地脚的高度。
为什么呢？
由于地脚部分常日要设置页码，以是页码要占用一部分空间；而订口和切口呢常日可以设置成一样宽度。
也有的书本上认为全体设计文件是一个版面，中间灰色的区域叫版心，当然也可以这么理解。实在无论是叫版面也好还是版心也好，其目的都是要方案出设计信息的主视觉区域。不只是印刷设计，网页设计也有版面的观点。
一、版面率
版面大小在开本中所占的比率叫版面率。版面率越小，页面留白越大，给人的觉得是更高等文雅；版面率越大，页面留白就相对越小，版面给人呈现出的觉得是内容很丰富热闹信息量大。看下图：
常日情形下，资讯类的杂志或者网站版面率都很大。由于这种类型的产品本身要通报的信息量就很大，以是小版面是容纳不下的。比如超市的商品宣扬单等等（见上图）。
而一些哀求高品质的产品，比如说文摘类，一些非常感性的产品（见上图）。就须要小版面，让内容更清新简约，页面大面积留白；让紧张信息内聚之后看起来很精细高雅。
以是说我们设计师在接到设计需求的时候常日先要给设计风格定一个基调。是更倾向实用性还是精神性，如果是实用性的设计那版面就可以大一些，而精神性哀求品质的就可以将版面设置的小一些。这就开始磨练一个设计师对设计风格的把控能力了。
二、图版率
图版率从字面意思上我们也能大概猜出图版率便是版面中所有图片所占版面的比率叫图版率。
当图片尺寸及分辨率较小还想增加页面图版率可以通过重复及色块来添补页面，见下图：
上图是一张汽车杂志内页的对页文件。
首先我们说这个页面的图版率已经达到了100%，由于四周没有留白，是一整张满地的超广角图片直接放在版面中。
这种大图版率的图片给人的觉得就是非常具有视觉冲击力，让人第一印象便是视野很开阔；后面的背景建筑代表着静态美，前面的宝马车象征着动态美；这种一前一后一静一动的比拟，营造出的视觉感想熏染便是产品很大气很高端。
我们再来看这张图，这是一个居家产品的杂志内页，图版率也达到了100%，也是满地的一张厨房一角的实景图片。
通过利用这张大图版率的实景图，能够给你一种仿佛你就悄悄的伫立在这面墙前面。统统景物都是静态的，连一点风都没有，给人一种宁静的美。让你悄悄的思考着生活大概原来就该当是这样宁静安逸，不要太暴躁。
再合营这种朴实的字体和少量的笔墨；垂直版面的围裙和抹布让全体画面更加平衡，很有一种代入感。
这是一个家具的网站首页。首先一开屏，便是一张图版率100%的满舆图。也很有视觉冲击力和代入感，现在很多网站都这样设计；由于以前我们的电脑屏幕都很小，但是随着屏幕越来越大，这种全屏的大图越来越受设计师的青睐。
这是一张腕表的杂志内页，首页我们来看这个页面的图版率大概有70%旁边，然后下面30%的留白，配上产品图片和品牌LOGO。
这种大图版率的图片紧张是向你讲述一个故事，my first love 我的初恋，然后男女主人公激情亲切相拥，仿佛是在传达一段美好的爱情。
实在现在很多奢侈品你比如说珠宝，腕表，喷鼻香包等等，无论是电视广告还是纸媒广告，都采取这种大图版率的有故事内容的情境图。
产品本身在版面上霸占的位置实在并不起眼，设计师紧张是想通过一段故事让你记住这个品牌，从而记住这个产品。
这张图的图版率是五五开的，颜色紧张以黑白灰这种中性色搭配，让页面显得很高雅。
有趣的是图片中的人物仿佛是从墙后面探出身子来偷拍你，人们都有一种生理便是有人在给你拍照的时候都会格外的把稳。以是设计师也是通过人们的这种生理让页面捉住你的眼球。
这张图的图版率就更小了，估计也就10%吧。紧张要宣扬的产品图片位于版面的正中央，我们可以抽象成是一个点；让视觉更加聚焦。
Less is more，少即是多，没有太多的视觉滋扰。
说到这我想起郭德纲的一段相声。
郭德纲去一家公司口试，口试官说：“让我在1分钟之内记住你”! 郭德纲想了想，抡圆了胳膊给口试官一嘴巴之后扭头就跑；到家后接到公司电话：请你务必立时到公司宣布。
这段相声实在便是在见告我们大略粗暴的最能给人留下深刻的印象，版式设计也是如此。
三、跳跃率
还有一种版式叫自由型版式，自由型版式会让页面看上去很跳跃，很热闹！
要让版面中所有的设计元素看上去很随机但又条理清晰是很难的。看上去彷佛没有什么规律，实在内在的规律就隐蔽个中。
以是说自由型版式是最磨练设计师对版面的把控能力的，没有之一。
见下图：
四、视界
什么是视界？视是视力的视，不是大千天下的世。
相传在远古时期男人们卖力外出打猎，常日会很专注的盯着猎物而忽略周围的风吹草动；而女人们则卖力四处探求野果野菜，照顾乱跑的孩子。
以是经由永劫光的进化，在视野上，女性会比男性更宽广一些。
如上图所示，人类眼睛高下的视野范围是120度。而旁边呢，是190度。最清楚的视野范围是70度。30度就属于非常专注的范围了。
以是我们在进行书本杂志排版的时候一定要把稳行宽不能太宽，由于太宽会造成视觉串行，而且永劫光阅读也很随意马虎产生视觉疲倦。见下图：
我们在实际设计事情中只管即便避免这种排版形式，否则会让读者阅读起来很怠倦。
以上是版式设计中的三率一界的观点及剖析，希望正在从事设计或者想学设计的朋友对三率一界的观点有所理解。后续将连续更新关于产品和设计的干系文章，感谢您的支持！
本文由 @黑马PM 原创发布于大家都是产品经理。未经容许，禁止转载
题图来自 Unsplash ，基于 CC0 协议
