在版式设计中对比其实就是差异化。若两个元素有所不同，那就让他们截然不同，不要拖泥带水。
比如我用两个圆表达大小对比，那么下图则是拖泥带水的反面教材。
因为此图中的大小对比并不明显，看不出要强调哪个圆形，主次不明，对比含糊不清。
对比上图，此图大小对比明显，更能够有效的传递出重要信息，所以要用对比的话，就让元素差异化强烈一些。
对比的分类有很多种，比如：
除了这些还有字体类型的对比、距离对比、虚实对比、远近对比等，可以说存在差异的地方就存在对比。而在版式设计上，我们要将这种对比最大化，以达到吸引眼球、方便阅读的效果。
对比能简化画面，使版面主题更明确，更直观。
运用对比能使视觉冲击力更大，更抓人眼球。
对比使版面层级清晰，能够突出重点，从而更有效的传达信息。
通常一个作品中不会只用一种对比，而是多种对比方式组合使用的。比如上面左图用强烈的大小对比出标题与正文的层级，同时加入光影对比为主体打造立体感，更抓人眼球。右图使用方向对比与位置对比使版面更活跃，更有视觉张力。
几乎所有的作品都会用到对比原则，在设计中我们也要善用对比原则。
对齐原则是让版面中的元素有一种视觉上的联系，以此来打造一种秩序感。
此版面中没有运用对齐原则，各元素间没有联系，凌乱而没有秩序感。
使用了对齐原则之后，整个版面规整又美观，建立了一种秩序感而更利于阅读。
左对齐：版面中的元素以左为基准对齐。左对齐是最常见的对齐方式，简洁大方，利于阅读。
右对齐：版面中的元素以右为基准对齐。相对于左对齐来说不太常见，给人一种人为干预的感觉，阅读比率慢一些。
居中对齐：版面中的元素以中线为基准对齐。居中对齐给人一种严肃与正式感。
两端对齐：版面中的元素拉伸或缩放与同一元素两端对齐。两端对齐通常用于大段落文字编排中，利于阅读。
顶对齐：与左对齐相似，版面中的元素以顶部为基准对齐。
底对齐：版面中的元素以底部为基准对齐。
轴线对齐：轴线对齐是以版面中心线为对齐基准，而不是元素的中线。
除了上图的案例为轴线对齐外，下图的这几种也都是轴线对齐的形式。
轴线对齐能给人正式感，同时各个部分又富有变化，比较灵活。
对齐的作用总结下来其实只有一点，就是能够使版面统一简洁更有条理，能够引导视觉流向。
这是一个同学的名片作品，给人感觉凌乱、没有秩序，信息传达也不清晰。那么问题出在哪儿呢？
首先，绿点部分的文字大小差不多，缺乏对比，导致层级关系不分明。
其次对齐方式不统一，没有秩序感。
那我们运用两个原则修改后是什么样子呢？
我们强调名片持有人的名字，将联系方式等其余信息左对齐，LOGO与二维码则置于右边，是不是整洁规整了不少，信息的传达性更强了。
同样的，我们也可以将联系方式与二维码移到版面右边，LOGO置于左下方，同样很规整，简洁美观，利于传播。
对齐与对比的组合会有多种变化，运用好了会使版面规整美观不少。
接下来看一下修改前后的对比图。
这是某同学的周练的海报作品，可以看到她对齐是统一的左对齐，没有问题。但是画面中却缺乏对比，主次感不强。另外图片选择也不美观。
同个主题下，另外一个同学的作品：
这个同学的作业突出了主标题，对比也非常明显，其余的信息层级也有对比变化，视觉上比较丰富，统一的左对齐也非常有条理。
同样的内容与主题，对比与对齐原则应用的好坏会直接影响版面的美观性与易读性。大多数情况下，对比与对齐是缺一不可的。
当然版式设计中有四大基础原则，「对比」、「对齐」、「组合」、「重复」，一般情况下这四个基础原则都是组合使用的。「对比」与「对齐」只是一部分，「组合」与「重复」我们以后再细说吧。
作者：大猫404 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
我们在翻阅杂志的时候，总是会惊叹杂志里的图片怎么会这么好看。其实杂志里的图片一方面是由摄影师专门为杂志的编排而拍摄的，另一方面，也是因为杂志对图片的处理手法十分巧妙，今天这节课我们将给大家讲解一下关于杂志里的图片都是如何处理的。
在课程开始之前，我们先来看一些杂志的图片。这三张是以一张大图片为主体的杂志页面，我们将图片用红色的色块标记，文字则用蓝色的色块标记。我们可以发现，红色部分的面积远大于蓝色部分的面积。
我们换成小图片的页面看看。同样的，图片的面积也远大于文字的部分。我们可以发现，现在杂志的大多数页面其实都是以图片作为画面的主体，或者说图片所占比重会比文字大得多。
为什么会出现这种现象呢？那是因为图片与文字相比，图片的视觉冲击力和对人的吸引力远大于文字。为了能够吸引读者的购买和阅读，所以杂志页面中会加入丰富的图片。
那么我们接着先来了解一下关于图片分类的小知识。
图片可以分为点阵图和矢量图，点阵图就是以像素组成的图，放大之后可能会造成模糊等失真的效果。矢量图则是由线条、几何图形等构成，可以随意放大缩小也不会失真。
也可以分为摄影图片和手绘图片，顾名思义，摄影图片是用照相机拍摄出来的图片，而手绘图片则是通过笔或者手绘板画出来的图片。
矩形图片和去底图，矩形图片是指外轮廓是矩形的图片，而去底图则是把环境都除去，只保留主体的图片。
因为手绘的图片本身就会比实物的摄影图更加具备张力，也更容易给人提供想象，修饰的需求并没有摄影图来的这么高，而且手绘的或是矢量图在杂志中出现的概率相对比较少一些，所以本篇教程所针对的图片是左边的这两种，矩形或者是去底的摄影图片。
这节课我们虽然讲解的是如何去修饰一张图片，可是对于图片的修饰我们应该要把控好一个度，因为如果我们一味的追求效果而对图片进行过度的处理，很可能会削弱了图片想表达的东西，甚至让版面过于繁杂而凌乱不堪。而且在某些情况下，图片不需要进行修饰也能让版面足够有张力和美观，那么在什么情况下我们可以不对图片进行修饰呢？我们来看看吧。
第一种情况是当我们使用的图片本身就足够的好，足够有质感和张力，无需进行修饰便能够撑起整个版面。
第二种情况是我们可以通过两张以上的图片排列，让图片之间产生对比或是关联，从而让画面产生张力。
那么第三种情况就是当我们想要强调文字部分时，并且文字组合做得足够的精致或者有表现力时，那么图片也可以省略掉修饰的环节。
最后一种情况是我们要刻画简约风格的画面时，就要尽量避免对图片进行太多的修饰和刻画，否则图片会使画面产生巨大的违和感。
接下来正式进入本次教程的核心部分，杂志中对图片都是如何刻画的呢？我们第一种要讲解的方法就是前面提到的去底图。
为什么说去底也算是一种修饰图片的手法呢？我们来看看这张图片，这张图片是我从一个电商网站上保存的图片。我们可以看到这张图片虽然十分的美观，但是模特的裙子和背景色调很接近，比较不容易展示裙子的细节。
我们把他做成一页杂志，可以发现这个页面从版式结构上来说并没有什么问题，整体画面也十分美观。
但是如果我们想要做一版能够展示裙子细节的版面，那么我们可以尝试把这个模特抠出来，裙子在纯色的背景上就足够清晰和亮眼了。
把去底的模特放进版面中，这两个版面对比一下，是不是右手边的版面更加简洁有力呢？
另外，去底的图片相比起矩形图片也会显得更加灵活。我们用这样一个多张矩形图片整齐排列的画面来作为例子。这个版面排列十分整洁美观，信息都一目了然。
但是如果我们想要让版面变得更加活泼和有张力一些呢？我们就可以通过去底来实现。利用图片去底之后所形成的负空间进行排列图片，让图片错落有致地排列在版面里，这样灵活处理出来的画面，会更加热闹和有张力。
这些都是杂志中使用去底图片的案例。
刚刚我们讲的只是去底图片的基础玩法，接下来我们要讲解一下去底图的另外两种高阶一些的玩法。首先是粗糙去底。粗糙去底就是大致地沿着主体的轮廓将主体抠下来，并不需要严丝合缝地抠图。
还是用这个模特当做案例，如果我们觉得刚刚做的这个版面有些单调的话，那么我们不妨尝试一下粗糙去底的方法。粗糙去底的方式能让图片的形式感更加强烈。
很多时候粗糙去底还会在图片底下加一个小小的投影，让图片有种不规则的小纸片的感觉。
在杂志中这样的处理方式是非常常见的，它适合用在偏时尚潮流或者是偏文艺的版面中。
第二种进阶玩法是半去底，也可以叫做局部去底，意思就是沿着图片主体的外轮廓将主体的局部抠出来。
在这里给大家介绍两种比较常用的局部去底的小技巧。第一种是主体背后有轮廓明显的物体的话，我们可以将主体沿着主体背后物体的轮廓进行抠图，例如这个模特背后的门。
当主体背后没有什么明显的物体让我们进行局部抠图的时候，那也没关系，我们可以使用第二种小技巧，将主体踩着的地面抠出一部分来，这样也能一定程度上展示主体所在的环境。
我们同样将这两个抠好的模特放进版面里，比起最初的版本，这两稿的形式感会更强一些。
这个杂志作品就用到了我刚刚介绍的小技巧。这样的去底方式能让版面更加活泼有趣。
另外将去底图和矩形图片放在一起，能够产生强烈对比，表现力也会很强。
例如这些杂志页面都存在着矩形图片和去底图片的对比。
我们很多时候都会自嘲自己只是抠图的，可是听了这些之后，有没有发现自己连抠图都不配，抠图远远没有你想得这么简单，去底的图片比矩形图片灵活得多，也更具有活泼热闹的属性，将去底图处理得好，可以给版面带来非常大的气质上的提升。那么我们接着来看，除了去底之外，还有什么别的处理图片的技巧吧！
接下来给大家讲解一下第二种比较常见的图片处理方式——叠加色块。
叠加色块的方式有两种，分别为半叠色块和全叠色块。我们先来讲讲半叠的。
好吧，又是这个模特。我们在他的背后叠加一个色块，一方面可以一定程度上填补留白，另一方面也能让图片更具有形式感。
除了叠加这种矩形色块，还可以尝试叠加不规则的色块，不规则的色块相比矩形色块能更灵活的处理负空间，也可以根据主体的轮廓进行灵活调整。
看看这些案例，通过加入了色块是不是让画面更饱满和有张力了呢？
接下来来讲讲全叠色块，全叠色块的处理手法一般是用在这种多图片并列排列的版面中，因为如果是一张大图片使用全叠的手法就会显得有些呆板了。
我们用个案例来展示一下吧，例如这样一个版面，整齐地排列着九种不同的蔬菜，可是由于这些蔬菜的形状各异，导致了负空间特别的零碎，画面显得有些散。
最快的解决方式就是给他们叠加一些色块，那么版面就变得规整许多了。
如果我们觉得这样有些不够灵活的话，我们可以将个别的蔬菜放大，让蔬菜的局部或者是投影超出色块，这样的版面就会显得灵活而不零碎了。
第三个手法是使用描边或者边框。
刚刚我们用去底的方式来让这个版面更加活泼有张力，其实通过添加边框是一个更加简单快捷的方法。
我们不需要改变版面的结构，只需要在矩形图片的边缘添加一圈描边，或者是将图片的边框处理成拍立得，版面就会立即显得更加活泼有趣了。
边框的形式有很多，例如在图片的内部加边框，两条粗细不同的线组成的边框，或者是手绘的线条作为边框。我们可以通过多看杂志总结出更多的边框形式。
刚刚我们讲的都是矩形图片，其实去底图片也是可以添加描边的。例如这页杂志，通过描边的使用，使得深色的产品在深棕色的背景中能够凸显出来。
字叠图是在杂志中可以说是最常见的修饰手法了，非常的简单粗暴但是超级实用。字叠图的方式大概也有三种，分别为标题叠图，段落文字叠图和手写体叠图。
首先讲讲标题叠图的使用。我们来看看这个版面，他的主体是一个大草原的大场景图片，图片中没有明显主体。那么我们就可以通过将标题叠在图片上的方式，使得图片上产生视觉焦点。
如果将两张图片的位置换一换，上方的大图片变成了这张以蒙古包为主体的草原图片，那么我们叠加文字的时候就需要注意到叠加的位置要与主体相呼应了。
这两个都是将标题组叠压在图片上的例子，将标题组合叠加在图片上，能让标题和图片都得到凸显和强调。
接下来是叠加段落文字，将段落文字叠压在图片上，能让版面更加灵活，也能让大段的段落文字显得没这么枯燥。一般来说，因为识别度的原因，段落文字不会完全叠加在图片上，只会叠压局部。
我们同样用大草原的文案来做一个段落文字的叠压。由于是段落文字，特别需要注意文字的可读性，所以我们将段落文字都叠压在了色调比较浅的天空上，尽可能地保证阅读的流畅。
最后是叠压手写体的处理方式，手写体的叠压与标题一样，同样需要注意叠压的位置。
手写体的叠压能将手写体自带的属性带给图片，例如想让图片更文艺一些可以用细一些的手写体，更潮流一些则可以叠压粗的涂鸦感觉的手写体等等。
我们刚刚讲解的都是在矩形图片上叠加文字，那么在去底图片上能不能叠加文字呢？其实是可以的，像一些装饰的手写体，或者字号比较大的标题，在不影响识别性的情况下进行字叠图的手法都是没有问题的。但是！我们是非常不建议在去底图上叠加段落文字，因为一般去底图可以用来叠压文字的地方不多，如果要大面积的叠压段落文字，必定会产生识别度不足的问题，所以在去底图上叠加段落文字需要非常谨慎。
那么除了字叠图之外，利用文字进行修饰的方式非常的多，我在这里给大家介绍几种比较常用的。
将文字绕着图片主体排列是在杂志中非常常见的一种手法，能让画面变得更加活泼热闹。
我们也可以将文字处理成发射状，模拟出一种喷口而出的感觉，使得图片更具有动感。
添加对话框，能让图片变得十分生动，让静止的图片也有一种会思考或者会说话的感觉。
类似的方式还有非常多，例如文字加指向性的箭头、个性的字体、数字，甚至是竖排的文字等等，都可以变成装饰图片的元素。
还是用一个案例来示范一下吧。这次换一个鞋子的案例，我们看这个版面构图啥的都没什么问题，就是缺乏了一些活泼的氛围，那么我们加入文字的装饰性元素，版面就瞬间变得活跃了。
如果我们想要添加装饰元素又缺少文案的时候，那我们就可以用下一种修饰手法，添加手绘的元素。
装饰性的手绘小元素，能够模拟出人物或者是物体的运动趋势，让图片和版面具备运动感。
同样这双鞋，我们给他添加一些手绘的小元素，也同样能够塑造出活泼生动的画面。
接下来要讲的是添加投影
我们来看看这些添加投影的例子，投影可以让图片变得更加真实，更具备细节，使得画面更加具备质感。
这一个案例添加投影也可以一定程度上解决画面单调的问题，但是他具备的气质并不是添加装饰性元素的活泼热闹，添加投影带来的是使画面更具备质感。
添加投影除了刚才使用的真实投影外，我们还可以用这种假的投影，其实就是一个叠在主体下方的，与主题轮廓相似的几何色块。这种方式更注重的是表达一种形式感，而非真实感。
第8种的修饰手法是倾斜。
倾斜的手法能让图片具有不平衡感，从而产生强烈的动感。关于倾斜我们之前已经有别的教程详细说过了，那我们就直接看看案例吧。
我们将这双鞋子进行倾斜摆放之后，感觉画面就不那么单调了，产生了一定的张力。
最后一种方式是出血和跨页处理的手法。
也许你们会想怎么出血也算是修饰手法呢？不就是放大而已么？没错，放大也能算是一种修饰手法。在图片足够高清的情况下，放大能让读者留意到许多我们平时不注意的细节，增添了版面的细节感。相对于完整的图片，经过出血的处理的图片遭到了裁切，会产生一种陌生感，也能够让读者觉得更新鲜。
最后我们还是用这双鞋子来示范一下，因为鞋子放大出血之后，版式结构会遭到破坏，所以我们得换一个新的构图。由于经过出血处理之后的鞋子并不完整，所以我们在上方加入了一双小的完整的鞋子作为信息的补充。
好啦，我们给大家总结的杂志里处理图片的小技巧已经全部讲完啦，不知道大家都学会了没。虽然说我们是从杂志的设计中总结出来的设计技法，但是并不意味着这些手法就只能应用在杂志设计中，设计其实都是共通的，并没有说某些技法就只能被用在某些领域中。下面我们就给大家带来一个海报的案例，给大家演示一下如何将杂志中的骚操作带到别的设计中。
因为我们使用的是杂志的编排技巧，比较适合时尚、潮流或是文艺的风格，所以我们选择做一个潮牌的宣传海报，这样在气质上会比较相符合。
首先建立一个版面并确定好页边距。接着我们把画面的主体，也就是这个潮牌的创始人陈冠希欧巴放在画面中间。
然后将标题文字放在版面右上角，标题文字我们做了一个投影的效果增强标题的形式感。对应的，我们在版面的左下角编排二级信息的文字，做一个对角线的呼应。
接着将其余的文字安排在左上角和右下角，我们整个版面的大体框架就出来了。我们可以看到现在这个版面的留白太多，形式感不够强烈，缺乏氛围感。接下来我们就要用我们今天教程所讲的手法来一一解决这些问题。
先来一个叠加色块的手法，在欧巴的身后叠一个黄色的圆形色块，那么上半部分负空间零碎的问题就一定程度上得到了解决。接着再来添加一个投影，这个投影我们选用了高明度和高纯度的青蓝色，这样更加有时尚有趣的感觉。
然后使用字叠图，从文案中的slogan里提取出It’s Movement的英文放大叠在人物身上，这里我们选用了一款比较有趣的粗无衬线字体。
剩下的负空间我们用添加文字装饰元素和手绘装饰元素的手法填满。最后的最后，再给版面上加一层点元素背景，增加版面形式感。我们这一张海报就最终成型了。
文章来源：优设
给大家看两张图，这两页的文字内容相同，你更想看哪本？
不出意外的话，大家应该会选右手边的吧（选左边的请自觉去面壁）。（所拍书籍为《西文字体》，高冈昌生 ）
虽然大家不是专业做文字排印的，但对文字排版的感知力，其实是生而有之的。
中文也是如此，优秀的出版社（译林出版社、广西师范大学出版社等），为了让阅读体验顺畅、版面舒适，在文字排印上做了许多工序。
正是这些工序，提升了书籍正文的阅读体验。想要在阅读软件上打造优秀的阅读页，这些工序正是我们需要借鉴的。
通过设计师与开发的共同努力，我们最近完成了这一文字排版能力的建造，让阅读页的效果能够更上一层楼。
最终效果如下：
本文将从以下几个部分说明这些工序存在的理由、实现的逻辑等。
细致的来看，文章包括以下内容：
通过前期的大量学习与调研（专家观点：小林章先生、鸟海修先生、刘庆先生等人关于字体排印 or 字体设计的讲座、W3C 中文排版需求（强烈建议大家看这个）、孔雀计划的文章、字体排印的专著：《平面设计中的网格系统》、《字体排印》、《西文字体》等；本次改版几乎所有的功能与逻辑都参照了以上专著与文章。）
我们把文字书排版时的工序，总结为「文字排印要遵循的三个原则」：
原则说明
中文排版中，字与字之间的间距被称为「字间距」。
文字间距会影响阅读节奏。字间距大的文章，阅读速度会变慢。因此，散文、诗歌在排版时，会刻意调大字间距。
下面的图，仅凭自己感受，选一张更好的:
不出意外的话，应该是觉得下图更好看。
尝试默读一下，你会发现，上边的图片，最后两行字间距被拉大，阅读速度放慢；而这不是作者的本意，换言之，这会破坏阅读节奏。
因此，我们把「保证字间距恒定」作为首要原则，来保障阅读节奏感。
备注（建议第二次看文章的时候再读）：需要说明的是，部分字面较大的字体（方正博雅宋、兰亭黑等）在书籍排版时为了契合书籍内容的调性，有时会刻意设置字间距，这与「字间距保持恒定」的原则并不冲突。在电子阅读软件中，由于无法针对特定书籍进行调整，因此本次设计实际上是保持「密排」(字与字之间没有额外添加字间距，保留字体原始的间距)。
工序
行长是字号的整数倍。相同字号下，汉字字宽固定（就是字号本身），汉字标点的字宽同样也是字号本身（除了个别标点之外，例如破折号）
汉字排版时，没有额外字间距的情况下，是上图所示的字面框依次密排。
因为中文书籍的正文排版常用两端对齐，如果行长不是字号的整数倍，则汉字之间会有异常的行间距出现。
更严重的是：阅读软件字号可变的情况下，行长不可能做到适应所有字号且字间距不会被拉大。
行长是字号的整数倍是中文字体排印中标点挤压等的前提。
——《孔雀计划》，原文链接：https://thetype.com/2017/07/12513/
在阅读软件中，随着字号调整，如果沿用「版心宽度固定」的思路，难免存在字间距被拉大的情况。
对此，我们调查了国内外知名中文阅读软件，发现：KindleAPP 能随着字号变化自由变动，但这会导致：改变字号大小时，版心宽度略微变化。
有此顾虑，我们做了一个测试。结果证明，大家不会发现版心宽度有变化。这说明用户投入到阅读当中、调整字号时，并不会因为版心宽度变化而有不适，甚至不会感知。通过测试，打消了我们的顾虑。
最终我们大胆采取了「版心宽度跟随字号调整而变化」，来确保「行长是字号的整数倍」。
虽然「版心宽度跟随字号变化」并没有不适，但我们需要保证在多种屏幕尺寸、字号下，版心占据屏幕的区域都舒适。
面对这个问题，我们制定了一个公式，可根据屏幕大小、字体大小等，自动调整版心宽度。确保「行长是字号的整数倍」的同时，保证页面美观。
标点符号「优先推入式避头尾」。如图所示，为宋抄本《孙子算经》；在古代，书籍排版可以做到字间距恒定，原因是古代不存在「标点」，也就没有「标点避头尾」导致的种种问题。
而现代汉语存在标点符号，有的标点不能放在行首，有的不能放在行尾。
我们把不能放在行首的标点叫做避头标点，如逗号、顿号、句号等；把不能放置在行尾的叫做避尾标点，如前引号、前括号等。
「推出式」避头尾是大部分阅读软件的做法：
以避头标点为例，若此标点被排到了行首，「推出式」 的做法是从上一行拉一个字放在本行。如下图所示：
然而这么做的话，上一行的字间距被拉大，打断了阅读节奏（阅读节奏放慢）。
我们发现专业的排版软件（Indesign）和出版社（广西师范大学理想国系列、人民文学出版社、译林出版社等知名出版社）的做法是「优先推入式避头尾」，这种方式可以很好地解决「仅推出式」造成的问题。如下图所示：
△ 《少数派报告》译林出版社
通过「优先推入式避头尾」，上图中标出的双引号的宽度被挤压了一半，如果它保留为「全宽」，就没办法排在这一行，这就是「优先推入式避头尾」的最终效果。
以避头尾标点为例，「优先推入式」避头尾在这种情况下会将本行内标点宽度挤压，为避头尾的标点腾出空间，如下图所示：
上面的图可以看到：通过「优先推入式标点挤压」，第一行的字间距没有被拉大，保持了密排。
通过将本行内的标点宽度进行挤压后，腾出了空间给本来排不到的逗号，确保了字间距的恒定。然后只有在本行内标点无法压缩出足够空间时，才会选择「推出式」的处理方式。
因此这种处理方式叫做「优先推出式」标点避头尾。
行内标点挤压。因为相邻标点挤压、行首段首挤压，会出现部分标点符号占据半宽的情况。这种时候，一行的末尾可能正好有汉字或标点轧在了边框上，如下图所示，为汉字轧在边框的情况：
遇到这种情况，通过挤压行内标点宽度，从而腾出空间给最后一个字。这种做法叫做「行内标点挤压」
标点悬挂的逻辑和配套内容。存在另外一种处理方式来避头，叫做「标点悬挂」，即将标点悬挂在文本框外。
然而这种采用「标点悬挂」，需要配套做「行尾强制半宽」，如下图所示：
然而行尾强制半宽带来的问题是字间距被拉大，违反了原则一（尽量保证字间距恒定），对于宽度有限的手机屏幕，尽量不要改动。因此最终我们没有采用标点悬挂的处理方式。
Type is Beautiful 网站中对此有详尽的思考，如有兴趣请看：https://thetype.com/kongque/
原则说明
书籍排版中，文字所在的范围称为「版心」。
经验老道的文字排印设计师，检查正文排版效果时，最常用的方法是：离远看页面，就像蒙上一层磨砂玻璃一样，检查整个页面是否疏密均衡（《字体排印》，高冈昌生先生），也叫做「灰度均衡」（龟仓雄策先生称之为「浓淡匀称」，from《疾风迅雷》）。灰度均衡的版心可以让整个页面美观的同时，也保证了读者阅读中不会被突然的空白打断。
如下图所示，第一张图因为一些原因导致了页面中有许多「窟窿」，显得零碎，灰度明显不均衡。而第二张图，通过「标点挤压」将这些「窟窿」填上，整个版面更像是一个整体，灰度更均衡。
看倒数第二行的「乃跪地罪曰：‘大人何故’」两个标点连续的地方，从整体的角度看，会不会觉得这里有一个窟窿？
总的来说，灰度均衡的版面整体感更强、视觉上更舒适，因此也是相当重要的原则。
工序：
相邻标点挤压
众所周知的，汉字是方块字，在字体设计时会被放在一个方形里；中文标点同样也会被放置于同等大小的方框之中，如下图所示。
如上图所示，中文标点所占体积一般远小于汉字，因此当多个标点符号连续排列时，会让版面在这里好像有一个窟窿。专业的中文排版中会做的事情是「相邻标点挤压」。如下图所示：
如上图所示，有连续标点存在时，通过压缩标点所占的宽度，从而补上「窟窿」。
原则说明
与西文书籍的左侧对齐不同，中文书籍（横排）传统而言是讲究两端对齐。这是被大多数国人认可的中文排版方式，因此不再赘述。
工序
行首段首标点挤压。当行首出现标点符号，会感觉左侧不齐：
可以看到，处理前版心左侧因为有单引号，看起来第一行没有和第二行左对齐，处理后效果回归正常。同样的，段首的标点也需要挤压。
知道了以上内容，我们需要把它变成开发需要的逻辑。具体如下：
1. 相邻标点挤压逻辑
在 W3C 的《中文排版需求》中，对相邻标点挤压的具体做法为：
通过梳理，我们将其简化描述为 4个逻辑（实际逻辑与 W3C 基本一致）：
备注：成对出现的标点叫做夹注符，如双引号、书名号等；其中细分为开始夹注符与结束夹注符。
此外，我们注意到，一些出版书在以上逻辑之外，把问号与叹号与[顿、逗、句]归为一类，实际效果良好，因此出于问号与叹号同样占据字面不多的逻辑，采用了这种分类法。然而随后在走查阶段发现线上部分字体的问号与句号占据字面的位置不同。
这促使我们关注到标点在字面中占据的位置，我们梳理了客户端所有字体的中文标点。
发现汉仪乐喵、方正兰亭黑、汉仪启体等几款字体的问号字面占据异常，如果进行相邻标点挤压可能会造成标点粘连的情况，因此最终我们决定保持问号与叹号不参与相邻标点挤压。
2. 避头、避尾标点汇总表：
以上逻辑实施需要首先让程序判定哪些标点是避头尾标点，因此我们梳理了所有汉字标点并分为避头、避尾两类（部分标点即避头又避尾）。
汉字标点符号与西文的标点符号许多时候仅凭肉眼难以分辨（如,与，前者是西文标点中的逗号，后者是中文标点中的逗号），因此我们使用Unicode 码为每一个标点精准划分，确保不会造成错误。
3. 行内标点挤压与「优先推入式避头尾」逻辑：
「行内标点挤压」与「优先推入式避头尾」其实本质上都是对行内标点宽度进行压缩，因此在逻辑上归为一类。根据具体解决逻辑的不同将其分为以下四类：
针对这四种情况要做的具体事项补充在右侧：
至于推出逻辑，则稍简单些，书籍中有时候会遇到连续几个标点符号都是避尾标点的情况（或连续避头标点），因此对推出的逻辑设定为：
备注：国内知名的字体设计与排印网站 Type is Beautiful 中有介绍，行内标点挤压的方式有多种，「开明式」「全部半宽式」「平均式」等等…我们选择了「平均式」（有权重），开发难度会稍小些、效果也更可控制，不再赘述。
4. 整体逻辑流程图
但是仅仅通过文字性质的描述还不够，我们需要能让程序理解的逻辑。
由于部分处理方式之间互相干扰，因此根据这四种方式影响的内容不同，以「对其他处理方式的干扰程度」从高到低排序，并串联成整整体的逻辑图，以保证整体逻辑简单、不重复，如下图所示。
在此基础上，我们将文章中第二部分所梳理的逻辑细节填充进流程图内，并合并重复流程，最终获得如下流程图，方便开发理解和工作：
5. 小结
通过「避头尾标点列表」「可挤压标点与挤压空间」「广义的推入逻辑具体说明」「整体逻辑流程图」四个文件，我们可以顺畅的将设计要求传达给开发。
最终，通过这些工序，我们可以在最大限度上保证字间距恒定、版面齐整和内容灰度均衡。提升阅读流畅性和阅读页的体验。
文字排印作为一个古老的技艺，从排版工人操作实体字模的时代，经历了照排时代，来到了数字排版的当下，排版的自由度和效率已然成倍提高，然而由于许多原因至今这些排版的工序只在出版社等专业领域流通。
相对于纸质书籍，电子阅读在易携带性、阅读方便性、多媒体辅助阅读上有得天独厚的优势，然而最基础的阅读体验有时候不如纸质书籍，我们希望通过我们的努力，电子阅读在未来，能够让读者获得全面超过纸质书籍的阅读体验。
当然，文字在移动端的体验上限远不止如此，一些产品仅靠网格系统与字体排印加上优秀的字体，已经做出了令人惊艳的体验。
如上图所示，通过优秀的明朝体、网格系统，物书堂出品的几个词典 APP 的界面让人惊艳，文字之美还有很多可能，这也是我们的努力方向。我们也知道，当前客户端内中英混排、英文排版等方面，依然有进步空间，未来也会进一步完善。
文章来源：优设
目录页主要出现在一些篇幅比较长的书籍（画册）中，其位置一般被安排在扉页之后，目录虽然不是正文，却概括了一本书的所有内容，具有便于读者快速了解及查阅书本内容的作用，所以，即使说目录页是一本书中最重要的页面也不为过。
既然如此，那么目录页的设计自然也是十分重要，于是乎，葱爷整理了 8 个很不错的目录设计技巧分享给大家。
直线在目录设计中的作用主要有以下三个。
1. 连接
即把每节内容的标题与其对应的页码连起来，这是比较常规的一种做法，可以使目录更加清晰，重复排列的线条会形成统一、规整的美感。采用这种排版方式时，标题与页码一般会设置成两端对齐，这样的效果更加整洁、清晰。
2. 创造形式
对于一些文字内容比较少的目录页，如果像上面的例子一样排列会显得比较单调和小气，所以可以借助直线来增加其趣味性和张力。由于内容不多，所以即使不严格对齐也不会影响阅读。
3. 信息区隔
比如在下图的例子中，直线起到了两个信息区隔的作用，一是区隔页码与大标题；二是使七个大章节的内容独立开来。
这种形式也适合内容比较少的目录页，当有了图片后，目录页似乎也变成了一个内页版面，更加丰富、饱满。图片在目录设计中主要有两个用法。
1. 概括章节的主要内容
其功能与标题一样，所以如果要使用这种方式，那么就需要为目录中的每个大标题都搭配对应的图片。
2. 装饰
这里的图片不是与标题一一对应的，其目的是为了消除纯文字目录的单调感，使版面更丰富、更好看。
即将目录中的元素（页码、标题、图片）用表格的形式来排列，这么做也可以使信息更加清晰，更有秩序。由于这种做法在目录设计中并不常见，所以显得很特别。
页码或者序号是目录页必不可少的元素，章节细分比较多的目录都会标明页码，而分类比较少的目录一般会采用序列号，用来区分几个大板块。把页码或序号拉大并使用笔画比较粗的字体，除了可以使其更明了、醒目以外，还可以增加版面的大小对比，提升设计感。
把页码裁切一下，会更有设计感。
即把文字信息竖向等分成两份或两份以上，适用于文字比较多的版面，所以如果目录页的内容比较多时也适合分栏排版。由于每一栏的内容都严格对齐，且页码比较大，所以栏与栏之间即使错位排列也不会影响阅读。
除了文字还可以用图片来分栏。
即把目录信息沿着某条轴排列，这种形式在目录设计中也比较少见，适用于内容比较少的目录页。轴的形式一般为竖轴和横轴，排列的形式通常为错位排版。
上图并不是以线为轴，而是以图片和色块为轴。
我们都知道网格系统是画册设计的常用工具，可以有效组织版面信息，使其更有序、更整洁，所以内容比较多的目录页也可以用网格系统来排版，为了避免单调和无趣，通常会加入图片元素。
如果目录的文字比较少，版面就容易显得很空、很单调，常见的做法是增加图片或者把文字拉大，其实主动保留大量空白也是一种解决办法，比如把内容集中排列在版面的顶部、底部、左下角、右下角等位置，留出其他位置的空白。这么处理的版面虽然有一种不平衡感，但动感和设计感更强，大面积的留白还可以适当缓解眼睛的疲劳。
无论做什么设计我们都要以它的最终目的为设计准则，由于目录是为了方便浏览和查阅书本内容，所以设计时一定要注意视觉的整洁与信息的清晰，所以可以发现对齐和统一是最常被用到的两个技巧。
前言：一直以来，我们都认为“点线面”是画面构成最基础的组成部分，而从广义的角度来说并不完全是这样。传统的说法中，画面最小面积是“点”，若干个“点”组成了“线”，若干条“线”组成了“面”，但真的是这样吗？假设我们把点放大，它其实也是一个面，而同样的，我们把线放大，它同样其实也是一个面，其实“点线面”在述说的是一个方块（区域），而在一个画面中，方块与方块之间是相互作用的，而使各个方块达致平衡的理论，我称之为“方块理论”。
排版的基本功大家掌握多少呢，那么今天蓝蓝设计就和朋友们分享一下收集到的排版的10个基本功，希望对朋友们的ui设计有所帮助！
挑选合适的字体需要花费大量时间。但是不要一遍又一遍地让自己陷入对同一类型的字体挑选中。因为人们往往习惯于从自己熟悉的字体或者偏爱的字体开始。多花些时间去发现探索新的类型，这样你才能慢慢地发现自己对一种字体的细微差别的敏锐度，真正地让字体自己告诉你合适不合适。
如果你的一个页面里有十种不同的字体，那么你的排版一定会很难看。控制自己使用越少的字体，将会让你的页面脱颖而出。同时你也可以在字体的大小、重量和其它方面创造更多的对比变化。
蓝蓝 http://www.lanlanwork.com