版式设计中的万能公式！“三率一例”到底是什么？

“版式设计”的英文是“Layout”，有“规划”和“区域划分”的含义。

版式设计是指设计师根据设计主题和视觉需求，在设定好的版面内遵循形式美法则，将文字、图形和色彩等设计元素有组织、有目的地排列组合起来。

优秀的版式设计能给人带来视觉上的美感和精神上的愉悦，而粗劣的版式设计则不符合美学规律，甚至毫无美感可言。将感性的设计进行理性的归纳和表达，有助于设计师在实际工作中设计出更优秀的作品。

今天数艺君给大家分享的是，版式设计中最重要的概念“三率一例”。“三率”是指版面率、图版率和跳跃率，“一例”是指黄金比例。

在具体介绍和分析“三率一例”这一概念之前，先来介绍什么是版面。

版面是指在页面中主要呈现图文信息的区域。

在印刷设计中，大家可以将版面理解为去除天头、地脚、切口和订口后的中间区域。在版式设计中，版面的地位非常重要，因为无论大家设计哪一类作品都需要先规划好版面的大小。

版式设计是在有限的版面内进行有目的、有规划的设计，使版面内的图文信息编排得更加科学、合理，并符合美学规律，这也是版式设计的基本前提。

天头：页面中顶部页眉留白区域。

地脚：页面中底部页脚留白区域。通常将页码和脚注设置在地脚区域。

订口：页面靠近书脊将要装订的留白区域。

切口：页面最外侧将来要被裁切的留白区域。

在网页设计中，版面可以理解为网页的主视觉区域。一般网站主视觉区域的宽度范围为1000px~1200px，而垂直方向上的内容可以是无限长的，因此不限制网站界面的高度。

在设计网站界面时，只需要将图文信息排布在主视觉区域内，而超出主视觉区域的信息则不易被人重视。

版面率

版面在开本中所占的比例叫作版面率。版面率越小，页面留白越大，这样会令人感到高级、雅致；

版面率越大，页面留白越小，给人的感觉是内容丰富、信息量大。

增大版面率可以让版面更实用一般资讯类、工具类、产品宣传类和购物网站的版面率比较大，因为这些类型的版面设计要传递很多信息，如果版面太小则不能容纳较多的图文信息。

这里需要强调，版面所承载的信息量与版面率没有绝对关系，大版面率的版面所承载的信息可能是一张满底的图片和少量的文字，而小版面率的版面所承载的信息可能是很多图片和文字。

在这个购物网站的产品界面中，其版面率几乎达到100%。与印刷刊物相比，网站的界面展示受到多种因素的限制，因此每一个像素都很珍贵。一般电商类网站会充分利用版面， 以传递更多的商品信息。

减小版面率可以让版面更精致

高品质刊物一般采用小版面率，将主要信息内聚，并且页面中有大面积的留白，使整个页面看起来清新、简约、高雅和精致。

虽然前面讲到版面率与信息量没有绝对关系，但通常小版面率的版面可展示的信息较少，这避免了信息过度拥挤，不会破坏版面的设计风格和定位。

这是一张杂志内文页面，通过大面积的留白和简短的文字降低版面率，从而在视觉上营造出一种简约、高雅的效果。

版面率是否合理，可直接考验设计师对刊物内容的理解是否到位，以及把控设计风格的能力是否够强。

在实际工作中，设计师接到设计需求后，通常先对设计风格进行明确定位，确定设计风格是实用性的还是艺术性的。一般实用性的版面可以采用较大的版面率，而艺术性的版面可以采用较小的版面率。

图版率

在版面中，图片所占版面的比例叫作图版率。

图片数量越多，图片尺寸越大，图版率越大；图片数量越少，图片尺寸越小，图版率越小。图版率大的版面令人感到丰富、热闹，图版率小的版面则令人感到低调、沉稳。

提高图版率可以增加版面的可视性和跳跃率，但一味增加图版率就会忽视文字的作用，使版面显得空洞、乏味。总之，设计师应该根据版面的风格定位来灵活调整图版率。

版面左侧直接使用一张满底图，其图版率为100%，而版面右侧是裁剪后的图片，其图版率为30%。将左右两侧的图版率进行对比，形成视觉差异，使版面张弛有度，具有视觉张力。

这是一张食品宣传海报。版面采用标准的满版型构图，没有留白，其图版率达到了100%。通过大面积红色激发人们的食欲，同时红色是极具穿透力的颜色，识别度较高，容易吸引人们的视线。

这张海报的图版率约为50%，将图片和文字进行组合设计，图片能够向外界传达情感和故事，文字能够对主题进行辅助说明。在日常生活中，这类图文结合的海报设计非常多。

这张艺术海报的图版率约为20%，重要的艺术图案位于版面右上方的黄金分割处，使人们的视线能够聚焦。另外，版面中没有过多的文字干扰视线，起到了“Less is more（少即是多）”的效果，给人留下深刻的视觉印象。

这个文摘类杂志页面没有运用任何图形或图片，因此图版率为0%。整个版面显得非常单调、乏味，长时间阅读容易给读者造成视觉疲劳和厌倦感。

观察上面4 张图例可以发现，在版面中图片所占的比例直接影响版面的设计风格。在实际工作中，要根据版面的基调和定位灵活调整图片的数量和大小，使版面在视觉上富有变化。

通过垫色处理增大图版率

在实际设计工作中，有时会遇到图片素材数量有限，但又必须提高图版率的情况。这时可以增加色块或给图文信息进行垫色，使版面更加具有层次感。

这是一个产品杂志页面。在版面中，通过垫色增大图版率，不同的色块构成了大小不同的块面，这些块面既能分割版面和划分区域，又能丰富版面，使版面轻松、活泼，并且更加年轻化。

通过重复图片素材增大图版率

在实际工作中，经常会遇到素材尺寸小和画质低的情况。这时可以用重复图像的方法来解决。这种重复变化不仅可以增大图版率，使版面看上去更加灵活、富有节奏和韵律变化，还可以使版面不再空洞、呆板。

在这张产品宣传海报中，设计师将不同大小和质感的圆进行随机分布，从而增大图版率，使版面更加丰富、饱满，具有时尚的艺术气息。

跳跃率

跳跃率是指版面中的设计元素通过大小和位置变化在视觉上营造出的一种对比关系。跳跃率大的版面令人感到生动、活泼，并且富有节奏感和韵律感；而跳跃率小的版面则令人感到沉稳、宁静和高雅。

在实际工作中，跳跃率应该根据版面的设计风格和定位进行灵活调整，以营造出更好的视觉效果。在版式设计中，跳跃率主要分为文字跳跃率和图片跳跃率。接下来根据影响版面跳跃率的3个主要因素，综合介绍文字和图片的跳跃率。

第1个因素——大小对比形成跳跃感

在设计版面时，调节文字或图片的大小可以增大或减小跳跃率。

跳跃率大的版面，文字有明显的大小、粗细和角度变化，整个版面看起来更加丰富、活泼，并且亲和力更强；

跳跃率小的版面，文字基本上大小相同，并按照一定的次序分栏排列，整个版面显得安静、典雅，令人感到稳重，但又略显呆板。

在这个以文字为主的版面中，文字跳跃率较大。设计师刻意将标题文字加大、加粗，并将角度进行倾斜变化，从而与正文文字形成鲜明的对比。

在这个以文字为主的版面中，文字的跳跃率较小。虽然标题文字的字号和正文文字有大小变化，但差异不明显，版面整体看上去略显呆板，视觉表现力不强，难以激发读者的阅读兴趣。

上面只说到文字对跳跃率的影响。实际上，图片对版面跳跃率的影响也很大，甚至在某种情况下比文字对跳跃率的影响更大。总之，可以通过调整图片的大小、位置和方向改变版面的跳跃率。

在这张招贴中，设计师将图片的大小、位置和方向进行调整，形成强烈的视觉对比，令人感到设计理念大胆、前卫。

这是一张建筑宣传海报，版面以满版型为主。设计师将版面划分成若干个方格，并作为填充背景。在视觉上，图片没有主次之分，这使版面的跳跃率大大减小，从而给人带来一种平稳、安定的心理感受。

第2个因素——位置对比形成跳跃感

在版面设计中，调整图片或文字的位置可以使版面具有跳跃感。例如，调整设计元素的远近、疏密和方向。总之，灵活调整设计元素的位置，可以使版面更具有活力，并提高了版面的阅读趣味性。

这是一个汽车配件宣传册内页。设计师将部分图片素材进行去底处理，并将图片的位置、大小和方向进行调整，使其具有跳跃感。另外，成组的文字通过前后、远近和疏密处理，使版面具有层次感。

在这张杂志页面中，图片的跳跃率较小。图片大小相同并进行规则排列，图片在版面中的跳跃率几乎为零，这使版面看上去与图中的自然环境一样安稳、平静。

第3个因素——颜色对比形成跳跃感

在版式设计中，颜色与图片、文字共同构成了版面的主视觉元素。不同的色彩被人们赋予了不同的情感，例如，红色象征着热情、恐惧，绿色象征着生命、和平，蓝色象征着纯洁、科技等。

颜色对版面的跳跃率有很大的影响，大家可以通过对不同色相、明度和纯度的颜色进行搭配，使版面看起来生动、活泼或沉稳、高雅。

这是一个时尚购物网站的首页，通过颜色对比形成很强的跳跃感。设计师运用大面积的留白、随机的色块造型和撞色，增大界面跳跃率，彰显年轻时尚的设计风格。

这是一个建筑材料招贴设计，版面的整体色调以灰色为主，跳跃率几乎为零，在视觉上显得沉稳、高雅。

黄金比例

黄金比例这一概念源自毕达哥拉斯学派。黄金比例具有比例性、艺术性和和谐性三大特点。

黄金比例蕴藏着丰富的美学，也是一种古老的数学方法。黄金比例揭示了自然界中的一种美学规律，在艺术和设计中也非常受人青睐，大家可以在大量的艺术作品中找到黄金比例的身影。

下图AC线段与AB线段的比值等于CB线段与AC线段的比值，比例约为0.618∶1或1∶1.618，这一比例被称为黄金比例。黄金矩形的长宽之比为黄金分割率，一个黄金矩形可以无限生成等比例的黄金矩形。

这是一家马戏团的官方网站首页。3个男人连成的竖线在整个版面的黄金分割线上，使整个版面非常协调。

在这张音乐海报中，最突出的设计元素是渐变圆环。渐变圆环是版面的视觉重心，在黄金分割点处，再通过黑色背景的烘托，使版面更加醒目，可充分表达出音乐能够带给人们丰富的视觉享受。

九宫格是黄金比例的经典体现。我国古代有九宫格构图法，主要用于皇家园林布局。九宫格构图也叫井字格构图，运用横向的两条线和竖向的两条线将版面平均分成9块，4条线相互交叉的4个点就是版面的黄金比例分割点。

在国外的摄影理论中，这4个黄金比例分割点也作“趣味重心”，因为在这4个黄金分割点上排布设计元素会使版面更加优美。

这是一张灯具招贴，采用了标准九宫格构图，使版面看起来井然有序，犹如陈列于商场的橱窗中，设计元素彼此独立又互不影响。

这是一个旅游杂志内页，版面构图采用了标准的九宫格构图。在视觉上，格与格之间没有大小、主次之分，因此使用序号引导阅读顺序。

好书推荐

《版式设计从入门到精通：基础理论+图文编排+网格运用+色彩搭配+商业实训》

作者： 潘建羽

本书共9章，集合了100多个版式原理讲解、200多个案例分析和7个商业项目分析。

第1章主要介绍点、线、面的基本概念和“三率一例”，以及它们在版式设计中的实际运用；第2章主要介绍元素之间的视觉关系对排版布局的影响；第3章从构图和情感方面介绍版式的基本类型；第4章主要介绍如何选择和运用字体，以及文字对版面的影响和排版技巧；第5章主要介绍图片素材的选择方法和排版技巧；第6章主要介绍版面的几种常见网格系统及其作用；第7章主要介绍色彩在版式设计中的搭配方法，并从色彩的基本原理和色彩的心理效应两个方面进行分析；第8章和第9章主要分析平面设计和网页/App设计的商业项目，同时通过修改前和修改后对比分析的方法帮助读者了解商业设计的工作流程和注意事项。

本书适合作为艺术设计专业的教材，也适合作为平面设计方向的入门及进阶教程。

这条旧短片将会是你，

回到快乐旧时光的秘密隧道！

关注新设计视频号，

看更多有趣设计。

点击“阅读原文”可以直接购买

《版式设计从入门到精通：基础理论+图文编排+网格运用+色彩搭配+商业实训》