内文编排5大招!

 

大家好,伴随着阳光明媚的周三夜晚,本猫又和大家见面了,这次给大家带来的是版面中内文编排的技巧。内文编排就是大...







转自:大猫设计(公众号)

作者:大猫Addict



大家好,伴随着阳光明媚的周三夜晚,本猫又和大家见面了,这次给大家带来的是版面中内文编排的技巧。

内文编排就是大段落文字的编排,好的内文编排能够提高观者的阅读体验与效率,坏的编排则会让人产生认知障碍,甚至影响阅读体验。

那我们就来看看内文编排有哪些技巧吧。内文编排大致可分为五个知识点,分别是





第一点顾名思义,简单说就是行的长短与字数的多少都会对阅读观感产生影响。一般每行的字数控制在25-40个字之间。



切忌出现每行字数太多或太短的情况,太短的话每行内容尽收眼底,虽然有“一目十行”的效果,但是却最容易造成跳行的现象,进而影响阅读。举个极端的栗子



上图中一行只有五六个字,阅读起来肯定是极其不舒服的,所以我们在做内文编排时,一定要防止行长过短的情况。

当然,除了行长过短之外,过长的行长也是影响阅读体验的。



上图中一行有六七十个字,远远超出了25-40个字的范围,属于行长过长。行长过长带来的问题视觉疲劳。

正常的行长能够使眼睛在行尾与次行行首之间得到休息,而过长的行长使眼睛停留时间太长,所以特别容易引起视觉疲劳,进而造成阅读性差与影响阅读体验。

与上面两个例子相比,下面这两段行长字数在25-40之间的肯定是最舒服和最利于阅读的。





先来说说字距,字距就是字与字之间的距离。一般来说字号越大字距越小,字号越小字距越大。当然啦,字距的设置要根据实际情况来确定,比如用0.1来举栗子。



上图是软件中默认的,字距为0的样子,但是0与1之间太空了,留得空间太大,这种时候就需要我们给它缩小字距,让它们更有整体感。

下图是字距设置为-60的样子,与上图相比,整体性提高了很多。





看一下调整前后的对比,肯定是右侧调整之后的更具有整体性。

说完字距再来说一说行距。在内文编排中行距的设置一般在1.5-2.0倍行距之间。太小的行距会使文字行与行之间无法区分,进而阅读困难;太大的行距又会因为行距过大而丧失整体感。



上图是软件中默认的1.2倍行距,看上去却非常挤,没有空间感与透气感,必定也是影响阅读的。

而下图这个则用了3倍行距,整个段落完全散掉了,一点整体性也没有。



那么合适的段落间距,就像下图这样,控制在1.5-2.0之间,必定是利于阅读的。



就我个人而言比较常用的行间距为1.618倍、1.732倍与2倍。合适的行间距能为你的内文编排加分,使其更加精致。



再来说一说避头尾。避头尾其实就是标点符号的问题。一般来说标点符号尽量不要出现在行首或行尾,因为这样会使其空出一块空间,影响文字段的规整程度,同时也会很影响阅读体验。



上图中用黄色标注的地方出现了标点符号居于行首或者行尾的情况,这个时候我们就要对其进行避头尾的处理。

一般来说处理避头尾有三种方法。第一种方法为行尾挤压半角。如下



虽然这种方法还是会让标点出现在行尾,但是现在已经是半角字符了,只会占据半个字符的空间,而上面未处理过的却是一个字符。所以行尾将标点挤压为半角的形式也是一种避头尾的方法。

第二种就是绝对的避头尾的了,通过调整标点符号绝对不会出现在行首或行尾,如下



第二种方法比第一种方法更规整一些。

第三种方法叫作标点溢出,标点溢出后位于行首或行尾的标点会独立出来,不会对段落造成影响,如下





两个逗号是完全在段落之外的,这就是标点溢出的形式。三种方法可根据实际情况灵活选用。



复合字体其实就是我们在做编排的时候尽量中文选择一种字体,英文选择一种字体。因为我们国内的大部分中文字体的西文部分设计的并不够好,所以我们尽量中英文字体都选择比较精致的字体。

拿方正风雅宋举例,如图



方正风雅宋里自带的英文与中文的风格差异太大了,在中英文搭配的时候太勉强。



那么像上图这个风雅宋+Didit的复合字体形式明显在风格上更统一,也更适合搭配。



思源黑体自带的英文与中文的风格一致是可以搭配到一起的,只不过英文部分并不是精致美观的,如果我们选用更精致的西文字体会更好,比如Helvetica或者DIN,如下





许多同学可能还没有看出差别,所以将它们放到一起比较比较



显然第一个用默认自带的英文与下面两个相比就不是很精致了。所以这也是我们要用复合字体的原因。

复合字体的搭配原则可以用三点概括:

一是字重要匹配,尽量不要用粗细差别十分明显的字体进行搭配;

二是字体笔画风格特征要一致,就像刚才的风雅宋一样,自带的英文跟中文明显就不是一个风格的,所以不能搭配到一起;

三是尽量选择比较著名并且精致的字体,另外在中英文混搭的时候,英文应该比中文略粗一点。因为英文笔画少中文笔画多,这也是为了弥补字重方面的差距。



段距指的是段落间距,一般来说段落间距为字高的2-3倍。段间距的目的也很简单,跟成组的原理差不多,就是使信息之间有一个区分。



上图段落与段落之间没有区分,阅读上就稍微困难一些,如果第一段最后一字刚好位于行尾,那么段落与段落之间就无法区分了。

与之相比下图这个加上段落间距的就更容易区分,且容易阅读。



当然,除了设置段落间距外也可以采用首行缩进的形式区分段落关系。首行缩进说白了就是我们小学时老师经常强调的空两格。



行首空两格之后已经能够区分段落关系了。除了空两格也有空一格的形式,如下



日本那边的标准就是空一格。

一般来说首行缩进与段落间距只用一种就可以了。但留段落间距的形式要比首行缩进更规整一些。

那么知识点也都说完了,掌握了这五个内文编排的小技巧之后可以非常快速的将段落文字的编排品质提升一个档次,完成下图中的蜕变。



那么到此本期的文章就结束了,咱们下期再见!

学UI网强力推荐购买史上最好的UI设计书
长按下面二维码查看两本书的详细介绍
 直接购买链接 
小红 132元包邮
复制这条信息¥tp3u0lhAVEg¥后打开手淘
小黄148元包邮
复制这条信息¥UFDV0lhAk1f¥后打开手淘


凡是购买了本书的同学可加我们学UI网作业群5群群号:344912310,群文件会有书中的PSD源文件以及有关素材下载。
学UI网26群569558041
学UI网老虎帮
高级UI课程
随到随学包学会
报名咨询
QQ群:236786784
长按识别二维码 快速加群


▼ 点这儿,详细了解老虎帮。


    关注 学ui网


微信扫一扫关注公众号

0 个评论

要回复文章请先登录注册