版式设计中的点线面、黑白灰
（一）版式设计中的点线面
设计师大部分时间就是排布点线面在版面中的大小比例及位置关系，他们可以在不理解文案内容的情况下，依然能通过这些法则来将文字和图片进行合理的布局。我们将点、线、面称为设计三元素，一个文字或标点，可以抽象成一个点，一行文字可以抽象成一条线，那么一段文字就是一个面，一张图片也可以被看作一个面，如图5-17所示。
图5-17 点、线、面
1.版面中的点
点的效果并不是由自身大小决定的，而是取决于与其他元素的比例。点不仅仅指圆点，所有细小的图形、文字，以及任何能够用“点”来形容的元素都可以被称为点。
点可以聚焦视线，可以让人们把注意力聚焦在想重点表达的信息上面。图5-18（a）中只有一个点，我们的视觉焦点会不自觉地落在这个点上。图5-18（b）中心位置只有一个天猫的Logo，实际上就是起到聚焦用户眼球的作用，从而加深对品牌的认知和记忆。有的同学可能会觉得天猫这样的亿级用户量产品，怎么可能浪费这么大的广告位（banner）却只放一个Logo呢？因为天猫这个品牌更需要人们记住。
图5-18 App开屏设计中点的作用
图5-19中将字母、珍珠和彩色的圆点疏密有致地混合排列，可以起到活跃版面的作用。当画面内容较少时，可以采用加入点的方式，以起到丰富画面、烘托氛围的作用。
图5-19 点在版面中能烘托氛围
2.版面中的线
点动成线，线在版面中的构成形式比较复杂，分为实线、虚线，以及肉眼无法看见的视觉动线。线可以划分空间、建立联系、引导视线和美化排版，具有不稳定、动态、冲击感和运动感。线可以用来分割设计元素，将版面划分成不同的信息区块，方便用户阅读；线还起到版面骨骼的作用，能够撑起版面，如图5-20所示。
图5-20 线在版面中的作用
（a）相隔较远的英文该按照什么顺序浏览呢，那么线这个时候就起到引导视线的作用；（b）线增加了画面的动感，是对设计的补充美化
图5-21运用了蜿蜒曲折的线条，穿插于版面中，可以让版面更加生动灵活。
图5-21 曲折的线
3.版面中的面
线动成面，根据面的形状和边缘不同，面的形态会产生很多变化。面是版面中面积最大的部分，可以是视觉中心，也可以将版面进行区域的划分。我们说一段文字，或一张图片就是一个区块。
图5-22的灰色块将版面进行了区域的划分，在版式设计中将这种手法称作垫色区域划分法。假想，如果版面中没有灰色块和黄色块，只有三个酒瓶页面效果会显得空洞，整个版面也立不住。所以，通过垫色的处理手法，可以使版面更加富有变化，同时衬托出主体产品——酒瓶的视觉重量。
图5-23所示杂志对版面中的图片都可以理解为面的应用，图片是一个面，段落文字同时也可以理解成面的变体。这样版面中图片和文字的区域性便显得条理清晰，在阅读的时候会有暗示性的区域划分。在整个版面当中，设计师还运用了点的穿插。面不一定都是规则的，在商业广告中，经常使用不规则的图形、照片作为底面衬托产品主体，如图5-24所示。
图5-22 面的垫色区域划分法
图5-23 杂志版面中的面
图5-24 凸显产品的不规则的面
（二）版式设计中的黑白灰
黑白灰的概念是在素描的基础上延伸的，白色体现高光，灰色体现中间调，黑色体现阴影。这三种层次的对比，就可以体现出作品的空间层次感，版面设计中的黑白灰原理也是如此。在版面编排中，黑白灰体现为色相和明度带来的视觉差异，如图5-25所示，无论是有色还是无色的版面，均可以分为黑白灰的视觉层次。编排版面中的黑白灰不仅可以通过纯粹的色彩关系表现，而且可以由版面元素的构成形态来体现，文本块的排列在大多数情况下是可以看作灰色的视觉体现，这种灰色随着排列的疏密可以形成色度级别上的不同变化，如图5-26所示。
图5-25 色相和明度形成的黑白灰（源氏木语海报）
图5-26 文字疏密形成的黑白灰
在整体的版面视觉中，高对比度的版面具有明晰的版面层次和强烈的视觉感受，而低对比度的版面具有细腻的版面层次和微妙的视觉感受，在版面中尝试着以黑白灰关系进行视觉分析，合理分类和简化版面的色彩关系可以形成清晰的视觉层次。