先来看这样一组对比照，网上超火的妆前妆后照，你喜爱哪个？相信答案应该是一致的。人们对于美和丑的认识是这样，美，可能比较难描述到底哪里美，但是丑却能一眼指出。
化了妆的妹子就好像是排了版的文章，给人一眼看去非常舒服的感觉。假如说标题能引导读者点开文章，好的排版就留住读者继续阅读，从而才会达到内容想要的效果，保持优美的排版也会增加用户粘度。
排版的目的？
为了辅助阅读
使内容更容易、更条理清晰地被读者接收，更容易传达作者意图。
哪些的排版能够辅助阅读？
总结起来大概是这几点：
容易理解、可以扫读、整洁有序、段落清晰和重点突出。
为了辅助体验
给读者带去愉悦、舒适的视觉盛宴，带来视觉体验的美感。
了解排版目的，有益于在排版实践中做到心中有 理 。
马上进入咱们本期的排版干货实战教学。
文章主要分为两大版块：
一、图文排版基本技巧 npsp; npsp;
二、图文排版的细节处理
图文排版基本技巧
排版基本技巧-字体
● 选择合适的字体
● 同一一篇文章的字体种类
● 同一种字体的不同处理方法
①选择合适的字体
不同类型的文章风格需要不同的字体表达，比如古诗文，用手写体或者楷体，微软雅黑或者黑体就不搭配的。
②同一一篇文章的字体种类
字体种类不宜过多，一般不超过三种。如需要变换，尽量采用同一字族，如叶根友钢笔行书、毛笔特色、刀锋等。
③同一种字体的不同处理方法
一般采用加粗、颜色、大小、斜体（通常为英文）。
为何中文不能用斜体，斜体实际上是西方一些文字的手写体，中文是汉字，斜体是变形的，中文的手写体通常为书法体。
补充说明：
字体样式选择事，建议正文字色75%灰、注释字色50%灰、这两种颜色视觉好感度高，纯黑有些刺眼，灰色温和些，黑灰白三色，是最安全也最有逼格的颜色。
当然，标题颜色可适当区分开。
排版基本技巧-字号 npsp;
字号过大或过小都影响阅读，太小需要高倍放大镜，太大比较适合老年群体。
选择合适的字号：
●标题：16px、18px、20px；
●正文：14px、16px
●注释：12px、14px
一般来说，标题，正文，注释应有层级大小区分。
举例说明：
排版基本技巧-行距
行距
什么叫行距？就是正文中每行文字之间的距离。行距控制好可让大脑更轻松文字扫描内容 这也符合我们的阅读习惯。
经过很多的测试，目前最多见的是行距选择的数值是
1.5
1.75
，而1显得太拥挤，如果文字很少则可以设置为2倍。
注意：文本字体越小，两行的行距应该越大，确保字与行呼吸的空间。
行距调整操作平面图：
排版基本技巧-行宽
行宽是指一行文字的宽度。行宽对阅读的记忆是有影响的，我们的视线移动呈 Z 字形，合适的行宽可以有效避免大脑对多余信息的处理。
比如咪蒙的每一篇文章都有设置左右留白，行宽值小，简单易读，形成独特的清新自然风格。
留白操作平面图：
排版基本技巧-首行缩进和段间距
区分段落与段落之间，可以采用首行缩进和段间距两种方式。
首行缩进
利用首行缩进来区分段落，适合传统、正式、适合传统印刷读物。
段间距
手机小说有别于纸媒，段落的开始一般不用首行缩进，段落之间通过空行调大段间距。
排版基本技巧-常用对齐方式
左对齐
右对齐
居中对齐
菱形对齐
排版基本技巧-标点
中英之间需要加空格
示例：IOS 是个不错的电脑操作系统
中文与数据之间需要加空格
示例：已经到了 11 月了。
专业名词使用特定英文大小写
示例：我刚买了台 iPhone 7
除了标点外，我们用线条和图书符号引导阅读。如图：用线条和符号领着读者的眼睛，看你想让他看的地方。
排版基本技巧-图片
大家不清楚有木有这样的体会，有时网络不稳定，打开一一篇文章，半天图片都显示不出来，那便是你的图片太大。
选一张好图片
封面图片大小大小：宽900px 高500px , 显示效果最好。
图片尺寸： 静态图100k , 动态图片500k
图片的格式：GIF格式更清晰
压缩照片网站：推荐腾讯「智图」
现135在线编辑器拥有图片集，内有大量在线高清图片
图片的处理方法
缩放、裁剪、旋转、翻转、锐化、图片滤镜、多图拼贴
人像处理（美白、磨皮 ）加圆角、加边框、加阴影
135在线编辑器直接链接了手机美图秀秀，可以进行上述操作。
图文排版方式
上图下文、下图上文、左图右文、右图左文、图文叠加、图文环绕多行、多列图文穿插排列。
135在线编辑器里有大量图文样式可提供选择
图文排版细节处理
细节处理-清除格式
微信的编辑后台是一个网页在线编辑器，就是如果直接拷贝粘贴的话，会带着原来的格式过来。
无论你的原文是放在Word文档，还是网站上，文本里的每个字都指定了大小、粗细、颜色、字体。你如果不看代码，是不清楚的。但是，一旦你直接拷贝粘贴过来，会带着原本的所有格式过来。而那些格式，极可能根本不宜手机，也不宜微信。
135在线编辑器有一个清除格式按钮，可以一键清除文章格式。
清除格式操作示意：
细节处理-排版简洁，忌花哨
大家能看到这两种排版，其实做得也是很用心的，这些五颜六色的设置做起来也是很麻烦的。
但是相信大多年青人应该是讨厌这样的版式的，因为没有辅助阅读的作用，相反太多的点缀还影响了阅读。
这里给到大家的建议是：
排版整体颜色不超过三种，没有特定的要求，就不能用很复杂很花的边框，不能用奇怪颜色的字体。
全篇颜色最好同类色，但是深浅度不同。
最有用的方法是，把重点用彩色（暗红c00000、深蓝0070c0、橙色f79646）加粗。
一个三四种字体，七八种颜色的页面，那是丐帮的制服。而一个简洁、紧凑、漂亮的页面，如同一个人洗脸刷牙浆洗衣服一样，是对观者的尊重。
细节处理-突出主题
之前提到视线是Z字形移动的，但是我们可以人为改变视线的顺序，比如加粗，下横线，黑体，符号突出，颜色等。
还可以通过图标和特殊字符来突出主题，我给大家列出了135在线编辑器里一部分符号的样式，可根据文章的风格和时下的热点选择合适的图标。
再者，对于每段的副标题，我们还可以用标题样式来突出，这样会让文章的层次更加鲜明。
细节处理-配色流程
第一步：整体定调
给整篇图文确定一个大概的色彩基调，做这一步可以有效防止在接下去的配色步骤中出现色彩混乱的情况。
第二步:确定主色
主色决定着整体色彩趋向，是一个整体的色彩基调。在所有出现的色彩中占比往往不少于75%。
第三步：确定辅助色
辅助色主要起到辅助主色的作用。辅助色可使色彩更加丰富完美。辅助色的占比往往在20%左右。
第四步：确定点缀色
点缀色，有时也称作点睛色，取画龙点晴之意。往往具有引导阅读，装饰油画面，营造具有特色的画面风格的作用。整体占比常常在5%左右。
个人见解是：你能搞不懂到底如何去判断一篇图文里面什么样是主色、什么样是辅助色。但你一定要懂得利用点缀色。图文的本质终究还是阅读。黑底白字永远是最好的阅读搭配。所以学会用点缀色。克制的使用色彩。5%是一个很小的数字。
如此丰富实用的排版干货，各位宝宝们看的一定很爽吧？
温馨提醒，一遍不过瘾再看第二遍，正所谓读书百遍，其义自现~
好产品记得要奔走呼号~
我们的服务
我们提供设计创意、企业网站建设、微信推广、微官网、移动APP开发、运营及开发等多方位服务
顶酷互联二零零三年创立于武汉 以企业网站建设、移动互联网产品、微信推广服务为核心业务 致力于设计创意和传播应用 探索并实现经济收益利润最大化 为所有谋求长远发展的企业机构贡献全力
点击查看 >>