Point 02　版式设计原理

设计中是有固定理论的，那么有了固定的理论，会不会反而使人受到理论的限制而无法设计出不同的东西呢？当然不是，每个设计都需要我们经过很多细节的调整和努力，所以会产生不同的设计效果，下面我们来介绍在网页中的版面设计，应该如何做才好。

1.版面构图的要点

版面设计是会受到时代影响而体现出时代要求的，当然也会受读者年龄的影响。对于横向与纵向的版面，横向会方便阅读。图片也不能无限填充，因为我们的填充空间是有限的，而且素材不好，同样也不行，下面根据版面构图的要点再进行讲解。

（1）根据版面率调整页面效果

在版面中，随着四周的页面面积扩大，版面会逐渐减小，版面率就会下降。如果缩小也变的空白，版面率就会提高，每一张图片所得的实际空间也会随之增加。很明显，下图（左）所示的版面效果是没有下图（右）所示突出的，所以在设计时最好将版面以最大化显示。

（2）让杂乱的图片井然有序

首先要利用网格系统将版面整齐地呈现，再将页面进行等分，如下图（左）所示。在网格构图基础上，根据表现的主题不同将主体放大显示，同时也使版面更加活跃不显枯燥，如下图（中）所示。最后，还可通过将坚硬的矩形图片以倾斜的方式，让版面变得更加柔和、亲切、有趣，如下图（右）所示。

（3）让琐碎的元素变得有条理

某一些以提供商品信息为目的的版式，往往要在页面中插入许多元素，因此不仅不能有效地整理信息，反而会让版面看起来没有条理。可通过为画面添加底色色块的方式来使画面整洁，下图（左）所示为不同产品添加不同色底图，既能区分产品又不缺统一感。还可使用一个形状元素对产品进行有效的整理分类，让读者对分类一目了然，并增加画面的趣味性，如下图（右）所示。

（4）按照阅读顺序引导视线移动方向

在进行排版设计时，对读者目光的移动方向的预设是非常重要的，要想办法在页面中加入能够顺畅引导读者视线移动的元素就能有效地引导读者。下图（左）所示为最常见的Z字形阅读顺序。下图（右）所示为根据人们习惯性的数字来引导视觉，每一个人在看到1后，都会主动去寻找2在哪里。

（5）让插图令人印象更深刻

如果在版面里插画，会让人觉得过于卡通，但如果插画加上照片后，可以缓和过于稚嫩的现象，同时也使画面显得有艺术感和亲切感，如下图所示。

（6）统一各元素之间的间隔

在进行排版设计时，“间隔”这种概念也是非常重要的版面构成要素，各个元素之间的间隔类型不能太多，应统一起来才能设计出井然有序的页面效果。下图所示中的图片和图片、文字和文字之间的间隔都是相同的，这样使画面看起来显得更加整齐。

2.图片构成的理论

在版面中，图片要如何安排才是最好的呢？这里有一个重要的原则，是将主要的内容空间放大，将不重要的内容空间缩小，但也会根据不同的情况发生变换而进行合理的安排，如个人的主观意见更为重要呢？还是希望读者更了解商品大小，或是更希望传达整体意象效果更为重要，所以考虑内容和意象是图片构成的重要问题。下面来讲解如何根据需要对图片进行整理。

（1）用距离传达出图片的心情

拍摄主体的距离和构图，将很大程度地影响图片所呈现的心理印象。在特写的构图里，由于拍摄主体的距离较近，会给人亲切感，唤起主观的情感意识，特别是人物脸部表情特写，如下图（左）所示。反之，如果是远景构图，表现的是空间和现场状况，如下图（右）所示。

（2）通过留白突出版面设计感

版面编排中的留白，并非只是单纯的空白，它能够突显出与内文等元素的存在感，进而表现出版面中的重点内容，留白有着极为重要的功能性。当版面中的留白越多，同时也会产生高质感的印象。在决定留白的位置时，重点在于不可让版面因留白而显得凌乱。

如下图（左）所示，小的矩形图片周围设置了大量的留白，突出了宁静的氛围感。同时又使用三角形构图制造了不同的比重，分清画面重点的同时又让读者的视线不断流转于左右的页面。而下图（右）所示中，利用网格系统的版面编排方式，避免了版面的散乱，同时又实现了版面平衡。

（3）突显图片中的拍摄主体

若想要多张图收纳在同一个页面，或是想要突显出图片中的拍摄主体，最常用的方法就是将主体抠出，去掉背景图。由于去掉背景图后，就能在有限的空间里放入大量的信息，此方法是排版中不可缺少的技巧之一。下图（左）所示为产品图去掉背景图再加工的效果，显得干净突出。下图（右）所示为模特图去背景图再加工的效果，突出展示产品的同时，更换了更加美丽的背景。

（4）整理多图的页面

当需要表现出画面的丰富感或不同类别的分类信息时，可以通过将素材放进相同形状的图形元素中，这样既不会使版面散乱，又可以很好地表现分类情况。下图（左）所示为表现画面的丰富感，下图（右）所示为表现画面的分类信息。

（5）增加画面活跃感

当想要画面不那么生硬，想要表现出活跃的气氛时，可以将画面中的线条变为虚线，无论使用虚线组成什么形状都会增加画面的活跃感。下图所示的婴幼儿产品就特别适合这种风格。

（6）赋予版面节奏感

如果总是将图片放得一模一样，或总是将图片放在一条直线上，往往会让人感到单调。如果能将图片的对角放置或大小不一创造不同的比重，就能自然地引导读者的阅读顺序，同时也赋予了版面动感，使单调的版式加入一些变化，变得丰富起来。

下图（左）所示将图片的大小不一进行放置，下图（右）所示将图片错落有致地进行放置，虽然图片上下错开，但是同组图片高度相同，这就是设计的最高境界，在理论中寻求变化。

（7）传达连续性的画面

当一组图片具有连续性或者关联性时，可以通过添加线条或者底图的方式将它们连接到一起，在表现图与图之间亲密关系的同时，也可以引导读者按线条指引进行阅读。下图（左）所示为展示图片的连续性，下图（右）所示为展示图片产品的关联性。

（8）自然地引导读者视线

无论是希望读者的视线聚焦在大标题上，还是希望引导读者的视线从标题到内文，或是从内文到图片等，都可以利用在版面里制造方向性的方式来排版。最明显的方式就是拍摄人物的视线，使用人物图片中人物的视线方向，来影响版面的视觉顺序。如下图所示，随着模特的视线，我们会有意地去浏览右侧的产品与文案。

（9）将图片放到足够大

人们习惯性地喜欢看放大的图片，当我们想表现某款产品的质感时，要尽量将图片放得足够大。这样看后会让人有一种安定、放心的感觉。下图（左）所示为将产品细节放大，展示产品的质感。下图（右）所示为将产品细节放大，展示产品的防滑功能，这样更为直观并效果显著。

（10）使用图片解释的方式代替文字解释

有时，使用图片表现需要表达的内容比直接用文字表达要直观许多。下图（左）所示为使用硬币来表现鞋底的厚度，下图（右）所示为直接用手拉扯产品表现其产品质量或者弹性。

（11）使用辅助元素增加图片表现力

当需要使用图片来表现出某种功能时，除了可以使用文字直接描述外，还可以通过增加辅助元素使图片更有表现力。如下图（左）所示，使用了多层次旋转的炫光来表现产品的转速。下图（右）所示也是使用了箭头元素和旋转元素来表现产品的除尘方式。

（12）图片与文字的恰当配合

在排版中，图片与文字的组合方式也相当重要，图片通常不是单独出现的，而是往往与文字进行紧密的配合。要注意的是，说明图片的文字不能离图片太远，应保持图文关联性，如下图（左）所示。在图片上插入文字时，采用不会影响文字可辨识度的颜色，最好是白色与黑色，或者将文字放置在不会影响辨识度的画面颜色上，如下图（右）所示。

3.图解图说的理论

即便是传递相同的信息，单纯的文字表现方式与夹杂了视觉要素的表现方式，都会带给读者不同的印象。如果在淡出的文字表现中读者无法迅速地理解信息，则往往可以通过视觉化的处理变得易于把握。下图所示为加上插图表现使内容更加一目了然。

那些用文字方式表现显得很长的说明，一旦换成视觉化的表现方式也会变得简明清晰，让人一看就明白其中的意思。通过对插图的应用可以让生硬的信息看起来更加柔和，为了这个目的应如何做，才能将信息整理出来呢，下面将进行详细讲解。

（1）配合内容区别使用图表

为了使数据变得明白易懂，可将其转化为视觉性的图表，在对数值进行图表表现时，最重要的是决定使用什么样的图表，因为只有选择合适的图表才能表现出需要的主题。图表包括圆形图表、柱状图表等。

下图（左）所示为圆形图表，表现各项内容的比率。下图（右）所示为柱状图表，表现各项内容的差别。

下图（左）所示为雷达图表，通过某种形状来表现各项内容的性质或平衡，对多项数据进行比较。下图（右）所示为折线图表，可以表现因某些内容不同而产生变化的数据。

（2）便于比较的表格制作

对于要制作包括多项相同范畴内容的文本时，最好将它们整理成表格的形式，这样就很容易展示出各项内容，也便于各项内容的对照和比较。当需要对各项内容的数值等进行比较时，相对于单纯的文字排列方式而言，用横纵边框制成的表格的方式更便于读者了解其中的内容。

在表格设计中，要注意表头部分的区分，表头的颜色一般要比表格中内容的颜色更加明显，这样才能突出表头的作用，如下图所示。

同时，表头颜色设置完成后，也可通过对每一行表格进行配色，使各项表格的内容更加明确。一般最常用的颜色设置方法是一深一浅，就是将表格底色按颜色深浅的方式来进行循环设置，下图所示的这种方式不会使人产生疲倦感。也有的数据在不多的情况下，可以将每行表格的颜色都设计得不一样，以此来突出信息的不同。

4.文字组合的理论

文字的组合同样需要理论来支撑，如果我们不懂理论，有很多时候文字看起来都会感到很奇怪，我们需要掌握文字的易读性，并且理解文字需要表达的意思，在理论中加以变化，这样就能很好地处理文字之间的关系。字体是会对画面的效果产生重大影响的因素，如果选择不当，往往会导致与主旨偏离的结果。

（1）选择效果相称的字体

设计中所使用的字体有许多不同的种类，数量非常庞大，根据不同的字体，为了向读者展示不同的形态，需要仔细地体会各种字体的特点。而我们最常用的只有两种字体，即宋体和黑体。

宋体更像是用笔写出来的，手写体的感觉更强烈，多用于阅读量大又希望读者平静阅读的地方，它被誉为具有历史感的字体，它也可以用于大标题排版，因为会产生味道不同的高雅趣味，如下图（左）所示。

黑体是没有“提顿”的字体，竖画与横画的粗细一致，常被用于表现时尚的效果和力量较强的效果，会给人带来较强烈的印象，如下图（右）所示。

技能拓展

设计字体的使用

除宋体和黑体两种常用的字体外，还有很多与各类设计效果相配合的设计字体。当需要传达某种独特的效果时，如果灵活使用设计的字体效果是很好的。

（2）文字的统一和突出

在页面中，有很多时候会包括许多功能相同的文字内容，在这种情况下，对每组一样功能的文字都设定相同的字体是一条基本理论，这样能保证画面的统一性。如下图所示，圆形图标和文字大小组合都是相同的，表现为它们都属于活动内容。

对于表现内容的不同，如果要明确地表现出标题与其他内容的区别，可以通过加粗加大字体、使用不同颜色、拉开标题与正文间的距离、为文字加边框等方式来处理。下图所示为使用加大加粗字体并添加描边来突出表现的主要内容。

（3）文字的对齐和距离

文字对齐是文字组合中最基本的理论，只有将相关联的文字与文字之间对齐，才能突显出文字组合的统一感和整齐性，如下图（左）所示，正文内容部分以左对齐的方式来排，显得非常整齐。

控制好文字与文字之间的距离，是增强文字易读性的标准。以行距的安排来说，一般阅读量稍多的内容要保持约为文字大小的1.5～2倍，行的长度越短则行距可越小，随着行的长度的拉长，行距也最好随之扩大。如果是阅读量低的文字组合，最好将行距或字距稍微设置得近一点，因为更近则统一感会更强，如下图（右）所示。

技能拓展

字间距的设置

对于字间距来讲，所占面积较小的字体，字间距看起来会较大。而相反所占面积较大的字体，字间距看起来会较小。所以，要根据所选字体的大小来设置字间距。

（4）巧妙地强调文字与阅读顺序

当文字放置的图片底图较为复杂时，可在底图上添加一个白色底图，再在白色底图上添加文字，这样就算在杂乱的背景中也能将文字突出显示，如下图（左）所示。

当文案中有大量的内容需要展示时，无论以图文结合的方式展示还是以纯文字展示，我们都可以先将内容进行分类整理，然后在每一个分类内容前加上数字序号1、2、3……，或者英文字母A、B、C…，这样当读者看到1或者A时，就会主动地去浏览下一个内容，如下图（右）所示。