图文资讯阅读体验优化指南

经验·团队博客

by 猪猪

2019-01-29

开灯

文章的内容是吸引你阅读的基础，但舒服整齐的排版会让你更愉悦的进行阅读。

背景

有一次在谷歌搜索问题关键字点开搜索结果后，发现不少页面内容排除参差不齐，阅读起来实在是痛苦。
这时候我就不由思考到：我们的官网文章用户阅读的时候是什么的感受呢？是舒服的呢还是哎呀怎么乱糟糟的，get不到重点？
然后就随便打开了一些官网的详情文章来看看：

发现不少详情文章都有一些排版问题，感觉对阅读体验都有所影响，最后不禁思考：

怎样才能让用户在文章阅读时有良好的阅读体验呢？

伴随着这个疑问，我开始进行关于排版优化的研究以及进行对官网文章阅读体验的优化。

图文排版通用优化建议

通过查阅Web内容无障碍指南以及一些设计规范，大概归纳成以下几点优化建议：

1. 选取字体编码utf-8
2. 选取合适且统一的字体
3. 使用14~16px的正文字号，以及一定比例的子标题设置
4. 使用字号的1.5~2倍的行高
5. 保证35-45个文字的行宽
6. 居中显示图片，视频宽度与行宽保持一致
7. 使用行高的66%~75%的段距
8. 使用16~24px的页边距
9. 使用与背景对比度大的字体颜色，对色盲人士更友好的设计处理方案
10. 衡量删除一些富文本生成的冗余代码
11. 增加阅读进度提示
12. 增加移动端图片预览功能
13. 增加多种可选的高级样式

1.选取字体编码utf-8

 <meta charset="utf-8"/>

当使用utf-8编码时，会减少不少在使用GBK出现乱码方面的问题，而担心的宽带问题的话，其实对于中文，utf-8和gb2312在gzip压缩后都差不多，还不如多压缩几个图片。

2.选取合适且统一的字体

根据不同的操作系统推荐对应使用以下的字体：

系统	英文常用字体	中文常用字体
Windows	Tahoma和Arial	微软雅黑（Microsoft yahei）
Mac OS和IOS	Helvetica	华文细黑（STXihei）、冬青黑体（Hiragino Sans GB）和苹方（PingFang SC）
Android	Droid Sans	Droid Sans Fallback
Linux	Tahoma和Arial	文泉驿微米黑

根据font-family的匹配规则，以下是适合各个平台的font-family设置：

.content{
    font-family:Helvetica, Tahoma, Arial,"PingFang SC",STXihei,"Microsoft yahei",  "WenQuanYi Micro Hei",sans-serif;
}

尽量在同一篇文章里不出现超过三种的字体，可以中文一个字体，英文一个字体，如果中文想尝试多使用一种字体来创造出对比反差时，可以先通过改变同一字体的字号、颜色、大小写、字重及位置等方法来实现。

3.使用14~16px的正文字号，以及一定比例的子标题设置

目前主流PC端和移动端设备都往分辨率越来越高发展，提高字号，可以让高分辨率低设备尺寸的机子有个更好的浏览体验，且在主流的尺寸和分辨率下都能接受的字号大小，并参考其他大型网站所使用的正文字号，推荐使用14px-16px的正文字号。为了让低分辨的设备显示小一点的字号，在样式中主要响应式来调整字号大小。

同样在参考苹果和安卓的设计规范下，他们主标题设置的均值是正文字号的1.625倍，二级子标题为1.375倍，三级子标题为1.25倍。

.content h1{font-size:1.625em;}
.content h2{font-size:1.375em;}
.content h3{font-size:1.25em;}
/**对屏幕在320~420px的设备做响应式的字号调节**/
@media only screen and (min-width: 320px) and (max-width: 420px) and (orientation: portrait) {
    .content { font-size: calc( (14*1px + (16 - 14) * (100vw - 320px) / (420 - 320))/0.32*16*2/100); }
}
/**...等其他设备**/

4.使用字号的1.5~2倍的行高

行高控制了文章中行与行之间的留白，各行文字应该给人水平线的感觉，而不是像块紧紧编织在一片的布料。行高太小的话，上下挨得过紧影响了视线的移动，让人不知道正在阅读哪一行；行高太大的话，上下之间距离大，视线移动距离过长增加了阅读难度。设置字号的1.5倍到2倍的行高更易于阅读。

前端样式设置行高使用缩放因子，可以解决继承的计算问题。

.content{
  line-height:1.65;
}

5.保证35-45个文字的行宽

保证每一行文字的字符数量是文本可读的关键。太宽，单行文字太长，读者眼睛难以专注于文字，容易串行，而且回头寻找关键字时很难找到正确的行；太短，会使得用户眼睛经常跳到下一行，打破读者的阅读节奏，长时间阅读容易造成视觉疲劳。理想的行宽是45-75个字符，35-45个中文。

.content{
    width:45em;
}

以上主要是争对当前屏幕宽大于理想行宽的设备，但是在移动端竖屏下，行宽可能会少于理想行宽，这时一般选择当前竖屏的宽度就是行宽，左右两边给予一定的页边距（页边距可查看第8条建议）。

6.居中显示图片，视频宽度与行宽保持一致

在文章中展示的图片和视频等多媒体的选取：居中显示，内容不环绕周围。最大图片的宽度不超过行宽，视频宽度与行宽保持一致。

.content img{
    width:auto;
    max-width:100%;
    display:block;
    margin:0 auto;
}
.content iframe{
    width:100%;
    display:block;
    margin:0 auto;
    height:25em; /*根据视频是长宽比例，例如比例为16:10，得出height=40em*10/16*/
}

7.使用行高的66%~75%的段距

段落内部是自成一体的观点或者思想。同时段落之间彼此支撑，描述事务，推进情节，或者形成争论。于是，段落需要在视觉上彼此分离，但仍要放在一起阅读。66%至75%的行高是比较好的在线段落分隔高度。图片与视频采用跟正文段落一样的行高。

.content p{
    margin:1.2375em 0; /*正文字号1em,行高1.65,得出段距=1em*1.65*0.75*/
}

8.使用16~24px的页边距

参考苹果和安卓的设计规范时可看到边距一般设置为16~24(pt/sp)之间，移动端竖屏采用的16(pt/sp)，横屏采用的20~24(pt/sp)，PC端一般单栏或者两栏显示，两栏显示时设置跟横屏的边距20~24(pt/sp)，注意行宽控制在35-45个文字。

.content{
    padding:0 16px;
}

9.使用与背景对比度大的字体颜色，对色盲人士更友好的设计处理方案

文本和背景尽量避免使用相同或相似的颜色。文本越明显，用户能够扫描和阅读的速度越快。保持文本和背景对比度最好为4.5:1以上，标题应该保持与背景3:1以上的对比度。颜色使用安全的配色方案，提高信息图形的识别性和易读性。避免用颜色单独传达信息,可多加上图案，下划线，浮层提示条等元素来描述内容。

10.富文本生成的冗余代码

多个运营经理在编辑文章会有不同的编辑方式，而且有时在富文本编辑器还会使用word方式导入文档，带入不少冗余的代码到页面中，虽然富文本应该尊重发布者的编辑，但是对目前的官网业务来说，官方的文章统一的排版方式会显得更整洁和官方。通过Javascript去除另外设置的字体，保持使用默认的字体；同时去除多余的换行符，直接通过段距进行分隔。