自媒体之道

编者按

报纸是块阅读，PC也是块阅读，而手机是流阅读—刷屏如同瀑布之水，飞流直下。那么，你该如何设计你的自媒体公号，增加流阅读中的美感，留住更多用户呢？

设计一个风格简约、排版精美的自媒体号，需要好的编辑器，更需要了解设计规范，包括文字、标点、色彩、图标、图片、距离，以及整个空间的布局……这些元素组成了用户界面体系。而美的展现，也是一种整体感受。

一、文字排版

（一）字体

字体如人，不同的字体表现出不同的气质。

宋体方正匀称，气韵舒展；仿宋体笔法锐利，结构紧密；黑体端庄敦厚，笔力沉雄；圆体方圆互成，左右逢源……内容决定字体，比如硬新闻与娱乐信息，因为要表达的内容不同，使用的字体也不一样。对所设计界面的内容有大致的了解后，再定字体的大小、样式、重量在界面怎样平衡，才会更加贴切地传达内容。

（二）字号

选择字号时应将读者、内容、目的、版式等因素一并加以考量。对于文字内容多的文章，从内文开始往往是简便的做法，毕竟它们占阅读的部分。一般一篇新闻报道中通常会有大标题、编者按、提要、小标题、内文字体、图说等元素的组合，这些就需要通过不同的字级来区分。以新闻报道中的这些元素使用黑体字为例，要从以下五个级别来考虑。

1.大标题

在一点号和微信号中，大标题的样式是不能修改的。有它固定的格式，包括字体和颜色。但标题排版要杜绝 “单字折行”的现象。

2.小标题

小标题的字体通常用兰亭黑、兰亭中黑、兰亭中粗黑体等，字号大小一般用14～16pt。这些字体结构优美、识别性强，能在短时间内引起用户注意。兰亭中粗黑体在用时可以考虑跟内文同等大小或小一级，文字颜色可用深灰色，也可根据主内容的色调决定。

想要把界面做得更精细，可选编辑器没有的字体，做成图片放进去。这样可选的字体多，设计空间大。小标题只要空间布局合理、笔画粗细得当，标题字同内文字一样或小点也奏效。

3.内文字体

内文字体一般用兰亭纤黑、兰亭刊黑、兰亭细黑体，这几款文字方正、简洁、醒目、运用广泛。即使使用小的字号，仍然字体清晰，阅读起来轻松、舒适。

小号字对人眼球的刺激较弱，所以正文字体大小一般用14～16pt，便于长时间阅读。

文字颜色好用黑色、深灰色。

4.编者按、提要

编者按、提要一般用兰亭刊黑、兰亭细黑体，字体大小14～16pt。跟正文大小、色调都要有所区别，看文字多少决定，提要文字多用14pt，正文用16pt；文字少则反过来。文字颜色好用深灰色，也可看主内容的色调再决定。

例1

提要跟正文都是16pt的字号，只是颜色上做了区分。

5.图说

兰亭纤黑、兰亭细黑体，字体大小12pt，文字颜色好用深灰色。这样与正文有所区别，不干扰内文的阅读。

对于公号里一些不重要的元素，使用的字体不需要多引人注意，可选兰亭细黑、兰亭纤黑体，大小11pt。整个界面小的文字不应小于11pt。打理这些不重要的信息元素，应该能给界面设计增色，又不至于干扰读者的注意力。

例2

左图的图说只是字号小了一号，与图片的间隔及字距跟正文一样。这样的设计干扰了正文的阅读，也影响整个界面的美感。另外，如果图片上有水印，需缩小处理，它是一个非常不重要的信息，在界面上要尽量弱化。

右图则把图片来源用12pt的字体反白放在左下角。这样既有图片来源信息，又不影响阅读。

例3

界面上的字体越少越好，多两到三个。上图两个界面用了同一系列黑体字，通过字级、颜色来区别阅读的重要性。提要、内文、小标题细节处理得不错，特别是小标题的处理，没有随意地居中放，而是靠近了相关的段落，整个界面显得很精致。

下图两个界面上的文字字体过大，内文、图说之间的字级没有区分开来。小标题和段落之间距离不够，加上内文行距太紧，因而无法快速浏览，非常干扰阅读，界面也显得不美观。

（三）字距

定好字体的大小，还得考虑字间距。字间距是指文字之间的距离。内文字间距一般都是默认的，有特殊需求才会拉开距离。在文字多的内文中，字体14pt大小，一行内多不超过26个字，16pt大小的一行多排22个字。

例4

这是14pt的字号，一行26个字的效果。

例5

这是16pt的字号，一行22个字的效果。

例6

这是16pt的字号，一行20个字的效果。文字量大两边留白多一点，阅读的舒适感会更好。

（四）行距

行距，指从一行文字的底部到另一行文字底部的间距。行距可根据字体大小调整，字号加大，行距也要相应加大。14pt大小的字行距一般用1.5倍，16pt大小的文字一般用1.75倍。 

此外，标题与图片的距离、图片与图说的距离、图说与正文的距离，以及小标题与正文上段和下段的距离，都是有讲究的。

例7

上面这两张图是同一个公众号两个版本的界面，左边是旧的界面，右边是新的界面。新的界面缩小了行距以及正文和图说的距离，阅读感觉就大不一样了。文字排版越紧凑，条理越清晰，阅读速度会越快。行距过大，文字块会显得松散；所有行距平均，留白也相对平均，则不利于引导用户阅读重要信息。图说缩小行距以靠近图片，可以让图片、图说在视觉上形成一个整体，更有节奏感。

（五）分段

为了文字的想法得以清楚地传达，设计者会按排版的惯例区隔段落。其中包括插入空行、段首缩排、首行突排、插入符号、图案、不同颜色的文字穿插段落间等方式。

例8

由于界面宽度有限，段落的处理方式中插入空行、插入符号用得比较多。

在阅读过程中，读者可能需要更多的时间思忖文章中所包含的复杂概念，运用插入空行分段法，就可以将整段同主题的内容分割成数个较短的、容易读的段落。

（六）正文“头部关注”和结尾“阅读原文”的设计

很多公号会在正文头部制作“点击蓝字，轻松关注”，以引导用户关注。这几个字设计得好不好，直接影响到接下来的阅读。如果有好的想法，还可打个广告。如果没有好的设计，就在结尾“阅读原文”上下功夫吧。

例9

左图这个公众号的关注处换了字体，配上一个不太美的卡通形象，跟正文关系不大。而右图公众号则花了点心思，用了与公众号统一的风格，配了插画，写了一段有趣的文字作为引导，让阅读者产生强烈的下拉欲望。

例10

左图这个公众号的关注栏改变了字体、字号、颜色，并配上卡通心形图案，想引起用户注意，可结果却适得其反。过多的设计使人的视觉很不舒适。右图的公众号的做法则不同，把关注栏做成了一个小形象广告，还配上卡通动态图。这样一来，用户对它是做什么的一目了然。

例11

“利维坦”公号的结尾处，设计非常精致。用了一张动态的圆形图，里面不停地旋转它的主题：脑科学、哲学……并把一句有趣的话做成醒目的图标，指向“阅读原文”。而《南方周末》公号的结尾处，设计非常简洁，用它惯用的视觉符号，强化品牌的烙印。

二、色彩

在某种情况下，对颜色控制的好坏直接影响用户在页面的停留时间。不懂设计的人，一般都会随意增加颜色突出重要信息，而不考虑整体传递信息的准

确性。

（一）定主色调

“行动派”.主色调＋辅助色

例12

黑色主色调＋亮色的运用案例

通过对比“行动派”和“阿司匹林博物馆”这两组图的颜色可以看到，两者的界面设计都采用了黑白灰作为主色调。“行动派”使用亮黄色为辅助色，“阿司匹林博物馆”使用红色为辅助色。我们也可以看出，辅助色实际上是这个公号的标准色，在每期的小标题中偶尔出现一下，起到对上下文字做间隔的作用，增加了阅读的舒适度。有时候辅助色还会使用在部分文字上，来强调部分信息的重要性。

“阿司匹林博物馆”.主色调＋辅助色

（二）同类色的运用

例13

从“利维坦”和“ONE文艺生活”的公号的排版可以看出，一个好看的界面，颜色越简单越好，好不要超过三种。为了能拉开阅读层级，可以采用同一色系、不同明度的方式，这样识别性强，阅读起来视觉也舒适。

“ONE文艺生活”纯文字的界面使用黑色和灰色调引导阅读，给人一种非常干净、简约的感觉，把文字变成界面设计的一种元素，再加上不规则的留白，能让人有种透气感。“代青手作”两个界面将图片的色调延伸到整篇文字，给人以清新、雅致的阅读感受，在淡淡的绿色中体味到美食的精致。

（三）明度和饱和度的运用

例14

公号的界面在色彩方面还要注意统一明度和饱和度。图中的明度和饱和度都非常协调，不觉得哪个颜色过亮，哪个颜色过暗。

例15

图中界面的文字处理成灰色，图片用柔和淡雅低明度的色调衬托色彩亮丽的产品，让阅读者的视线被产品吸引过去，使产品凸显出来。

三、图片

要让界面有冲击力，图片也是很重要的一部分。设计者首先要会选择图片、剪裁图片，处理图与文字的关系。各种编辑器让图文排版和浮夸修饰变得轻而易举，以至于人们经常忽视了“大创意”的本意，使图片丧失了本身的感染力。

此外，手机上的图片比平面媒体上的有更多的优势—可以放动图、视频，所以，图片的周围更需简洁的环境，以减少干扰。

例16

左图这款健康首饰产品，局部图展示了在不