最近在做一款小说APP-指间免费小说，进行阅读器设计时遇到了一些难题，查找调研了很多文章后进行了思考和设计，完成后也算自己工作中一个小思考总结的经历，故记录一下~

文中的引用在文末有署名，也有一些找不到链接的，知道作者后会加上，侵删。

文末两个实验是我们不经常看到的信息，很有趣，请看到最后呦~

文字是整个APP中最核心的元素，是产品传达给用户的主要信息。小说软件内的阅读器中包含大量的文字信息，其中的易读性和易识性如何呈现尤为重要。

页面内的文字字体该如何选择，字号该如何设定，是否加粗，颜色又该如何设置呢。这些问题不仅需要设计师在软件上多次进行尝试，也需要寻找客观理性的规范进行调研整理，双向作用，才能完成最终合理，优雅的阅读器页面。

本文从日间和夜间两种主要模式下的场景分析，来介绍文字在其中的设定标准。

日间阅读

1. 文字角色

文字功用性是决定它们样式的关键因素。在 我们常用的Word 或 PPT 中，含有样式选择列表，这就是文字角色最基本的体现。样式包含标题、二级标题、三级标题、正文、注释等等。

<Keynote中的文字样式表>

根据文字的等级权重来选择其对应的字体参数。指间阅读器中，文字角色分布为书本标题>正文>标签

2. 字号字号

是指文字在屏幕或印刷介质上表现出来的大小。字体的8号或者12号既不是宽度也不是高度，是对文字大小的一个衡量单位。8和12代表字体的磅值，磅值越大字体越大。对用户来说，字号越大其阅读速度越慢，信息的关注度也会增加。文字越小，阅读则会变得更为快速。

在同一页面中，字号的选择总是尽量控制在 3-5 种之间，保持克制的原则。

经过竞品比对及设计比稿，我们最终将阅读器内中文文字定为36号字，再根据裴波纳契数列将标题定为了48号字。

<指间阅读字号表>

3. 字体字体

是文字的外在形式特征，是文字的风格，是文字的外衣。对于小说APP来说，阅读器内文字主要有默认字体和特殊字体之分。

3.1 默认字体

默认字体跟随系统字体使用，Android系统内的中文字体为谷歌公司开发的思源黑体。系统字体具有端内统一，易识别，兼容性好，开源免费等特点，能在不同场景下都保持良好的可读性。

3.2 特殊字体

对于阅读书籍的用户来说，不同风格的特殊字体会带来不同的阅读体验。例如在阅读武侠类小说时，若使用方正颜宋，清刻本悦宋等衬线宋体，可以将阅读人群代入一种身处飘渺江湖，少年侠客行的时代感；而对于喜欢青春校园，霸道总裁文的00后女生来说，可爱俏皮的华康少女体，文鼎甜妞体便更好的贴近了她们现有的年龄和所处环境。具体有兴趣的同学可以深入分析字体的特征。

阅读类APP内常用字体一般在5种以上，包含付费特殊字体包。

<特殊字体使用>

4. 字重

字重是指字体的粗细程度。字重的选择同样基于秩序、稳定、克制的原则。不同的字体包含不同种类的字重，一般根据文字的等级权重来使用。常规来说字重和文字权重成正比关系，但这不是绝对，重点文字加重，非重点文案减轻，从页面整体性考虑字重也是实际应用的常见操作之一。页面常使用字重有：常规（Regular）、中等（Medium）、粗体（Bold）。

<常见字重类型>

5. 字间距

字间距是字体应用在所有字符上的间距。字间距至少应为字体大小的0.16倍。注：不是特殊情况不建议调整固有字距，创作字体时设计师就纳入了固有字距的考量，专业字体的固有间距就是最合理的，调整字间距会加长开发周期和难度。

6. 行高

行高是一行文本垂直方向的高度，文字内容默认处于这个高度的水平居中位置。

<字号与行高的关系>

不管是标题、正文还是注释，行高都不宜过高，过高会导致内容不易阅读，文字之间缺少整体性和连贯性。行高会影响阅读的体验，西文的基本行高通常是字号的1.2em上下，而中文因为字符密实且高度一致，所以行高需要更大，1.5em至 1.8em之间是一个比较好的视觉阅读效果。在指间中，我们使用了60px的行高，约为字号的1.7em【行高=字号*1.7em】。这样的倍数不会过于拥挤给人紧迫感，也不会过于宽松影响整体阅读体验。

7. 行宽和边距

因为拥有大量文字且无图的特性，阅读器内文字通常使用定宽模式，即确定一个固定的文本区域宽度，文字在区域宽度内进行自动换行，直至显示完成，这个宽度也与各手机屏幕尺寸大小成正比。新版阅读器中行宽为612px，配合36号文字，每行可以展示17个字符。保证文本能填充满整个文本范围，避免字符显示不全导致左右边距不平衡。

<行宽612px，距离左右边距各54px>

边距也就是我们所理解的左右留白。传统刊物中，传统刊物印刷版面的边距设定通常是按照1:1.2:1:1.7的比例来进行设计。这样在阅读器设计时会留有一定的余地，不至于视觉占满。当文字过多时，合适的边距留白会减轻纯文字带来的压迫感，使文字与文字之间留有空隙，版面留有呼吸感。

8. 段间距

段间距就是段落与段落之间的距离。根据亲密性的原则，段间距应该大于行间距以提升文本的阅读体验。且段落间距若设定狭窄的间距，会给读者带来视觉压力。新版阅读器中选用的段间距为48px。

9. 对齐模式

对齐模式，即文本的对齐方向，有居左，居中，居右三种对齐方式。根据阅读习惯，文本信息一般采用居左对齐的方式。对于小说文来说，经常会出现标点多，文字少的情况，面对这样一行文字，在阅读器设计时常会使用两端对齐的方法，增加文字的字间距，使文本的左右两端看起来很平整，不出现强烈的凹凸感。

10. 句尾标点排列

在现代汉语中，所有的点号，包括句号、问号、叹号、逗号、冒号、分号、顿号等，都不能放在行首；间隔号也不能放在行首——杨权编著《出版物标点符号用法规范》这是中文排版中约定俗成的习惯。这种习惯导致在行尾遇到标点时，我们必须选择末尾标点是突出去【标点悬挂】还是占末尾最后一个字符位【标点挤压】的问题。这两种方式各有优劣，我们在新版中依据国家标准选择了标点挤压的方法。

11. 页面背景

研究发现，饱和度和亮度高的颜色容易受到视觉关注，这些颜色在吸引注意力方面比色调更为重要。明亮，饱和度高的背景色会吸引用户的注意，但不会保持用户的注意力。对于阅读器来说，文本内容是整个页面的重中之重，页面背景仅是作为它的衬托出现，不抢文字的风彩，不造成视觉干扰，使用户更容易的阅读就是页面背景的主要设计目的。针对这个目的，新改版中我们决定使用一个明度低，饱和度低的颜色作为背景。颜色变暗需要减少白色，而淡化颜色需要增加灰色，这可以缓和颜色对眼睛的刺激。

从这几个特性出发，经过多种颜色的测试稿对比，我们选出#F7F7F7作为背景色值。

12. 文字颜色

WCAG 2.2 中将颜色对比等级分为3种：A级，AA级，AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大：

A级：采用3:1的对比度，是普通观察者可接受的最低对比度。字号大，字重高的文字在较低的对比度下也易于阅读，这时就可以选择3:1的对比度。

AA级： 采用4.5:1 的对比度，是普通视力损失的人可接受的最低对比度。这个数据来自80岁老人的典型视力。

AAA级：采用7:1的对比度，是严重视力损失的人可接受的最低对比度，超出这种视力损伤的用户就需要借助辅助技术帮助其进行信息识别了，所以不再考虑范围内。根据这3个颜色对比等级可得出：字色和背景色的对比度最低不小于4.5:1，最佳对比度不小于7:1。这样可以保证最大的用户群体对内容进行识别。

对比度可使用网站https://hexnaw.com/直接测试得出结论。通过已知背景色和多种文字色值进行测试计算，我们最终选出了#222222作为文字颜色。它与背景色#F7F7F7的对比度为14.85，属于AAA级。

<页面背景色与文字颜色的对比度计算>

13. 最终定稿

根据一系列的资料整理及多稿尝试，我们确定了最终稿。

<新版优化参数>

夜间阅读

1. 文字构成

日常生活中，人们在白天多进行工作，学习，社交等行为方式，深度阅读和长时间阅读往往在深夜发生。睡前和熄灯后是阅读较为集中的时间段，若日间的APP版本仍在深夜使用，很容易因为页面过于“闪耀”而造成眼睛舒适度的下降，影响阅读行为。因此，合理的设计阅读器夜间模式，提高夜间阅读行为的舒适度是极为重要的。

相较于日间阅读，夜间模式的页面背景和它与字色的对比度是影响夜间阅读舒适度的最大更改属性，字号行距等参数应和日间阅读保持一致。

2. 字体颜色

新版夜间模式中，我们将阅读器内文字颜色设为了带有透明度的白色，这是因为考虑到阅读器里拥有多种多样的页面背景，将文字由纯色变成带透明度的的色值，也能更容易适配其他颜色的背景。

多稿测试后我们选出了正文45%#FFFFFF，辅助文字30%#FFFFFF的文字颜色。

3. 页面背景

夜间背景色主要从亮度、彩度、护眼三个方面入手。

亮度：亮度是指单位面积的发光强度，单位是nit（尼特）：1nit=1cd/M²（坎德拉/平方米，光强单位，即亮度值）根据人眼细胞特性得出负责夜晚视觉的杆状细胞的作用范围是0.034cd/m²，所以我们屏幕亮度应在0.034cd/m²左右较为合适【理想状态，还和手机自身亮度，分辨率等参数相关】

亮度公式：0.299*R + 0.587*G + 0.114*B = 亮度市面上APP亮度位于0.034~34之间【腾讯动漫数据】

彩度：就是颜色的鲜艳程度。夜间主要是人眼中的杆状细胞起作用，杆状细胞对光敏感，容易看到微弱的光，可辨识的颜色种类较少，且夜晚长时间注视高饱和色彩会刺眼。所以夜晚页面应使用低彩度色值，并尽量减少端内的颜色种类。

护眼：手机里的HEV蓝光会对眼睛造成伤害，夜间人眼距离手机更近，阅读时间更长。护眼模式往往通过降低亮度来控制蓝光，而蓝黄为互补色，如果从色温上降低蓝色，则黄色增强，达到护眼效果。

根据以上依据得出，夜间模式的背景色应采用亮度低，彩度低，偏黄色的背景色，经过多种颜色的测试稿对比，我们选出#1D1C1B作为背景色值，它的亮度值为28.185。

4. 与文字的对比度

夜间模式的对比度应降低，更柔和一些。

热门且夜晚模式舒适度较高APP数据【腾讯动漫研究所得】：文字与背景对比度3 : 1 ~ 5 : 1

新版中字色与背景色对比度为4.45：1

5. 最终定稿

<书封和内页>

外部因素对阅读的影响

1. 环境光和屏幕光对阅读舒适度的影响

游戏娱乐、信息查询、阅读学习、便捷支付等丰富的功能，使手机在办公室、教室、商场、等各个场景中都有不可替代的作用。在大部分生活场景中，手机阅读总时间已经远远超过纸质材料的阅读时长。研究发现合理的照明光环境可提高阅读舒适性，保护视力 。天津大学对此进行了人工照明环境下手机阅读舒适型的相关实验。使用主观评价实验的方法 ，以阅读面照度、光源色温、阅读背景面反射系数等参数作为实验变量，使用不同屏幕亮度级别的手机进行图文阅读，而后实验人群对当前工况给出1～10分的舒适性主观评价。

实验过程：搭建光环境实验舱用以模拟生活中常见的人工照明环境，【如办公空间的阅读面照度在300lx左右，色温以5000~6500k的冷白光为主；咖啡厅等强调格调的餐饮店的月读面照度只有50~100lx，色温在2700~3300k；部分便利店的阅读面照度将近1000lx；而卧室、宿舍等居住空间熄灯后全黑环境下手机阅读面照度为0.1x】，使用三部相同型号，相同屏幕色温手机，选择12位18~45岁的青年作为被试对象参与实验。实验对象阅读相同PDF文档，对在不同环境光照下的阅读体验舒适型打分，分值0~10，0为非常不舒适，10为非常舒适。

实验结论: 通过该主观评价实验共得到11352次舒适性评价结果，通过四分位法去掉异常值，计算得出照度、色温、手机屏幕亮度、桌面亮度、手机屏幕与桌面的亮度、对比度、桌面反射系数几个因素的重要性系数分别是 0.1 4 、0.0 6 0、0 . 3 9 5、0 . 1 1 2、0 . 2 2 8、0 . 0 5 9。

实验得出：

• 手机屏幕亮度和亮度对比度对舒适性影响较大，光照度是影响阅读舒适性的主要照明指标，手机阅读舒适性随阅读面光照度的不断增加而先升高后下降。

• 
  

阅读面反射系数对阅读舒适性有一定影响，在光照度较高或手机屏幕亮度较高的情况下，背景面反射系数与舒适性成反比。

                                  <环境光和屏幕光对阅读舒适度的影响实验>

2. 动态颜色变化对阅读舒适度的影响

通过实验不同文字颜色与背景颜色的变化对用户的感受进行测试，得出高对比度可以帮助用户首先集中精力阅读，这样的对比值在视觉上很舒适。然而，如果使用者持续很长时间，则会感到视力疲劳。因此，亮度对比度开始在150秒后变化；因为通常在这段时间后，人们更多的集中精力于当前阅读当的内容上。

建议：在180s以后，背景色进行变化，从#F7F7F7变为#E3E3E3

<动态颜色变化>

改版前后对比图

参考文献

· 武童瑶，王立雄，于 娟 ，全孝莉，毛希凯《人工照明环境下手机阅读舒适性的主观评价》http://qikan.cqvip.com/Qikan/Article/ReadIndex?id=7001050581

· 腾讯动漫《夜间模式（感性设计的理性考量）》https://www.ui.cn/detail/384701.html

· 超人的电话亭《关于文字，UI设计师需要知道这些》https://www.ui.cn/detail/495805.html

· 等等《文字与背景间对比度的选择》http://www.xueui.cn/experience/app-experience/selection-of-contrast-between-text-and-background.html

· W3C《Web内容可访问性指南（WCAG）2.2》https://www.w3.org/TR/2020/WD-WCAG22-20200227/#section-headings

· 李中原，李爽爽《基于人因工程学的交通信息显示屏设计方案研究》https://wenku.baidu.com/view/2121e3d5360cba1aa811da54

· Ant Design设计规范https://www.sohu.com/a/137871524_760150

· 25学堂《UI设计中的页面背景色要怎么选？》https://www.25xt.com/appdesign/21755.html

· 其他相关文献

Powered by Froala Editor