数字阅读界面视觉设计分析与优化

陈娅雯 许懋琦

摘要：据《2017年度中国数字阅读白皮书》显示，2017年中国数字阅读市场规模达到152亿元，用户规模接近4亿。由此可见，移动阅读市场规模增长稳健，行业高速发展。在这一过程中，众多数字阅读平台应运而生，用户对数字阅读平台的要求也不断变高。阅读界面作为用户体验的表现层，是用户对数字阅读平台首要的具体感知。文章抽取阅读界面的视觉构成部分，结合数字阅读界面特点，对其进行比较探究，为优化数字阅读的视觉体验提出一些建议。

关键词：数字阅读 界面设计 视觉元素

引言

互联网的发展对人们的生产生活产生了重大影响，人们的阅读习惯也因此从传统的纸质阅读逐步拓展到数字化阅读。数字阅读由于其海量化内容和便携性特征，受到用户的广泛青睐。读物内容如何通过新的载体合理呈现出来，并且更方便读者阅读，展现视觉美学，是数字阅读领域需要研究的内容。文章以此为目的，围绕数字阅读界面的视觉呈现进行探究。

一、阅读界面的视觉构成部分

平面设计理论对平面涉及到的元素进行了分类，包括概念元素（点、线、面）、视觉元素（图形的大小、形状、色彩等）、关系元素（方向、位置、空间等）。数字阅读界面在继承了传统阅读界面的文字、图片、色彩、版式等元素的基础上，增加了动态元素和界面导航等实用元素。由此，本文将阅读界面从视觉上具体分为框架结构和视觉元素两个方面进行讨论（如图1）：

（一）框架结构

1.版式结构

页面中排放文字、图片等具体阅读内容的区域是版心，版心的设置对整个页面起着决定性的作用。版心的面积大小和在版面上的位置，對页面的整体美观度、用户的阅读适宜性和页面空间的合理利用都有影响。

页边距也称为周空，指的是版心之外的空间。周空能够衬托版面的主体内容，使读者更易获取信息；同时也能使版面不至于过满，为读者提供可休息的视觉空间。除了周空的空白空间，留白也同样用于营造可休息的视觉空间。

2.目录及导航

目录和导航作为具有功能性的框架结构元素，反映页面内容之间的逻辑关系，起到为读者提供阅读定位和指引的作用，可以直观明确地了解阅读内容架构。

（二）视觉元素

1.文字

在阅读界面中，文字占据了较大的面积，文本区域是主要的视线集中区域，文字表现的好坏直接影响阅读界面的视觉体验。文字的属性包括了字体、文字的规格（字号、粗细等）、文字的排列方式（字距、行距、排头等）。

2.图片

文字与图片能够形成视觉上的对比与互补，给人不同的视觉感受。在阅读了大段文字之后，图片可以给予用户视觉调节和休息；同时，图片能够储存大量的视觉信息，相比文字更加直观。图片的属性包括图片的位置、大小、色彩等。

3.色彩

不同内容的读物其风格是不一样的，也同样对应了不同的色彩风格。页面的色调由其中的文字、图形图片、背景包括导航按钮等所有元素的色彩共同构成，具有很强的表意性，能够给读者传达不同的情绪，引起读者的情感变化，奠定整体的视觉感受。

二、数字读物的阅读界面特点

长期以来，数字读物的开发都试图模拟出传统读物的阅读感受，在这一过程中数字阅读也产生了新的特点。以下从阅读界面视觉构成的几个方面对其界面特点进行分析。

数字读物的视觉界面即为设备的显示界面，通常不大于传统读物的界面大小，约为3.5-9.7英寸。一个版面能够容纳的内容相对来说较少，如果想要查看更多的信息就需要刷屏或者屏幕翻页。数字读物很少使用面积过大的留白，页边距比传统读物小很多，整体更加紧凑而精细。相较于传统阅读的目录结构，数字阅读的导航结构依托于设备优势，简化了读者快速跳页的方式，便于读者高效获取信息。

为了达到清晰易读的文字屏幕显示效果，数字读物通常采用系统默认的字体，或者采用汉仪旗黑、方正兰亭黑、方正悠黑等黑体家族，以及无衬线的适应小屏幕设备显示的英文字体。同时，也会提供其他字体选择，比如微信阅读默认采用汉仪新人文宋，字体秀丽匀称，比黑体更富文化气息。用户可以自行调整数字读物的文字大小，但相对来说字号比传统读物小。传统读物基本遵循文章段首空两格的文字排版规范，而在部分时尚类或者资讯类数字读物中，为了方便用户快速阅读，同时满足一定的视觉美学要求，所有文字均采用左对齐的方式进行排版，并且通过合理设置段间距，使段落结构表现分明。

数字化的杂志图书中，为了使篇幅不至于过长，除了封面图片、强调话题的插图、反映数据的可视化图表等会占据整个视觉界面，其他插图的尺寸大小和数量都会得到适度控制。少部分时尚类、摄影类的数字读物则以图片为主，文字让位于图片。数字读物页面的视觉元素通常按照网格系统进行排布，相较于传统读物的页面排布，具有很强的规律性和结构性。

为了防止过于艳丽的色彩造成视觉疲劳、干扰用户阅读，数字阅读界面的色彩通常采用弱饱和度、对比度适中的配色方案；同时，满足色彩上统一性、情感性、生动性的基本要求。数字阅读试图模拟传统阅读视觉感受的设计初衷，从色彩方面明显表现出来，比如，将接近纸张的色彩或者肌理作为阅读背景；再比如，Kindle阅读器通过电子墨水屏技术，还原阅读纸质书籍自然、不伤眼的视觉体验。

三、数字阅读界面视觉体验分类比较研究

数字阅读自产生至今已有超过十年的发展历史，从初始时单调的纯文本读物发展到如今的综合性阅读，视觉元素随着技术的支持不断增多。以下基于5.5英寸屏幕大小、1920x1080屏幕分辨率的手机视觉效果，将数字阅读界面从视觉元素构成上分为纯文字与图文两大类，分别进行比较分析。

（一）纯文字类

纯文字类数字读物的视觉元素单一，主要需要注意区分文字层级，设计易读的文字版面。以下以QQ阅读和掌阅的纯文字类小说读物为例进行分析（如表1）。

QQ阅读的阅读界面提供七种配色方案选择，同时支持自定义设置背景颜色。自定义设置通过光谱图滑动选色，自由度高，但是过于个性化，用户难以选择出适宜阅读的颜色，功能供给过度。日夜模式切换功能的使用频率较高，模拟拉线开关式的切换按钮十分形象、便捷，功能按钮醒目。阅读界面的周空不可调节，整体版面居中。行间距有松散、适中、紧凑三种可选，但是用户不能实时观察到行间距的调整状态。三种模式中，间距越松散，段间距与行间距的差别越小，段落的区分度越不明显。字间距不可调整，每页可容纳70-1280个字符。1000字的每页字符容纳数对于传统纸质读物A4大小版面来说绰绰有余，但是在手机端满屏显示略太过拥挤。平台提供了28种字體可选，包括了手机界面常见的黑体系列字体，也有宋体、楷体、隶书、卡通体和手写体，部分字体提高了页面视觉质感、强化了视觉风格的同时，也提高了文字的辨识难度。

掌阅提供选择的界面色彩搭配较多，并且色调均适合阅读，整体视觉感受舒适。调整阅读设置时，可以实时观察到调整后的状态。行间距与字间距都可以通过滑动条精细调整。周空同样也可以精细调整，整体比例保持上松下紧。左右两端可以设置为紧贴界面边缘，以容纳更多的内容，但也会过于满屏而显得不透气。平台提供文字排式调整功能，文字可以调整为竖排从最右列开始阅读，这—功能有助于古文、诗歌等文学作品的呈现，但并不适合现代人的阅读习惯，比较鸡肋。正文的字号调节范围和QQ阅读相比又有所扩大，但过大或者过小的字符都不满足可读性和易读性的基本要求，提供过大和过小的字符设置并没有多大意义。在掌阅阅读平台上，用户只要有充足的时间，版面的视觉元素都可以通过调整达到自我感觉最舒适的状态。

（二）图文类

图文类读物的视觉元素具有一定多样性，不仅需要满足文字的易读性，还需要考虑图片的先后顺序、主次关系，以及版面的图文比例、色彩对比调和等，确保版面美观。以下以掌阅平台上的杂志类读物以及中国国家地理杂志、VOGUE MINI杂志为例进行分析。

掌阅在展现图文类杂志时，依然保留了部分字号、间距等参数用户可调的功能。与纯文字读物不同的是，杂志在进入用户书库前会经过后台排版，版面视觉效果较为精致。章节及栏目标题单独设扉页显示，采用底纹背景以及简单的矢量图形元素加以装饰。在区分文字层级上，除了通过调整文字粗细大小、段间距留白，还加入了色彩区分的维度。部分标题以及需要用户重视的文字会锁定与正文文字大小的比例、采用特殊颜色或者字符底纹突出显示，确保视觉等级梯度不会因为用户后期调整而丧失。大部分图文读物采用图文上下型环绕或者分页放置图片的方式。但是部分图文界面没有体现细致的编排，体现为：图片格式不统一，角版、挖版混杂，版式散乱；图片缩在界面中央，尺寸过小，不能起到图片说明表意的作用，并且导致左右两边留空过多；由于图文的串联关系，当用户对文字调节不当时，会出现图片缩放过小或者挤压变形，以及页面大部分无端留白的情况，严重影响版面的视觉感受（如图2）。

中国国家地理杂志采用宫格式导航（如图3），导航页面相当于目录，呈现了每篇文章的主题图片和文字说明，便于读者了解主题、挑选阅读。但是每篇文章阅读完后需要返回目录才能选择下一篇文章跳转，不便于频繁切换文章页面。阅读界面背景仅有日、夜间两种阅读模式可选，但足以满足用户阅读的基本需要。左右边距2.79mm，相比于纯文字读物略小。文字提供大、中、小三种方案可选，每中字号方案都有一定比例可寻，保持统一的视觉尺度。文章篇幅不长，插图较多，文字调整时不会影响到图片的显示。插图多为摄影照片，图片左右两端贴边，突出了静物摄影中的主体形象，也使得风景摄影的空间延伸感更强、更有意境。

VOGUE MINI展示了每个月纸质版的VOGUE杂志内容，电子杂志采用长文类精排版方式，每篇文章通过一个长篇幅页面表现，左右滑动切换文章。文章的起始页面，以吸睛的主题图片引入文章：主题图片占据界面的上四分之三部分，文字信息占据下四分之一。正文段落均采用左对齐的方式，左右边距约为3.24mm，行间距约为3.24mm，段间距约为9.46mm，由此可见各间距之间存在比例关系。平台不提供用户自主调节页面版式的功能，保证文字内容层级分明：大标题60px，正文48px，图注及说明性小字38px，同时文字颜色明度弱化为B60，由此可见正文大小（48px，3.24mm）与各间距同时也存在比例关系。页面中的各视觉元素严格遵循比例关系，使得该平台的阅读界面较上文提到的其他读物来说，视觉感受最为协调（如图4）。读物中插图数量较多，但是图片质量较高，具有视觉艺术美感。所有图片与文字段落左右两端统一对齐，图片高度各不一致，避免了页面的平淡死板。目录导航采用抽屉式，点击页面中央导航即从下栏呼出，以每篇文章的主题图片作为缩略图在导航栏中显现，直观形象。VOGUE MINI整体留空相对较多，版面比较通透舒适。虽然降低了用户调整版面的自由度，版面却更显精致，富有节奏与韵律，不会出现由于文字调整压缩了图片面积或者无端留白的情况。

四、数字阅读视觉体验优化对策

数字阅读在处理版面排版时，应遵循基本的可读性、易读性原则，保持各元素之间的逻辑性和系统性，在此基础上再考虑提升视觉美感。对各阅读平台界面对比分析后发现，部分数字阅读视觉界面还存在问题，下面从阅读界面视觉构成的几个部分分别讨论优化对策。

（一）框架结构

不管是纯文字的文学读物还是图文类的期刊杂志，内容导航以及相关的阅读设置都是有必要的。导航主要用来展示篇章栏目，阅读设置给予用户视觉调整的自由度。用户通常在刚接触到数字读物时会调整阅读设置，以适应自己的阅读习惯，确定版面设置之后用户就不会经常使用这一功能。所以，相对来说导航的使用频率比阅读设置更高，在同时显示导航和阅读设置功能时，应更直观地突出导航功能。导航的表现形式有很多种，标签式、抽屉式、宫格式等都在各数字阅读平台上有所应用。在这些导航形式中，抽屉式导航不会妨碍用户阅读，给用户沉浸式的阅读体验；浮层式切换方式支持直接显示跳转后的页面，方便用户选择页面。所以，浮层式抽屉导航能够充分释放屏幕空间，呈现更多内容，较为适合数字阅读界面显示需求。导航是基于文字还是基于图片，需要根据读物的性质而定。对于内容偏重图片展示的数字读物来说，在导航中显示图片信息比显示标题文字更能直观交代栏目内容。

阅读设置选项应根据各项设置的重要性，确定功能的表现程度。比如，文字是用户浏览的主要内容，围绕文字元素的各项指标中，文字的大小设置是最主要的方面。所以，在阅读设置的各选项中应体现出这—功能的重要性。另外，周空以及各种留白空间的设置作为界面框架结构的一部分，可以给予用户一定的调整自由度，但是调整的范围过大也容易造成页面版式崩坏。鉴于VOGUE MINI舒适的版面视觉效果，阅读界面中周空大小与字号、各间距之间应保持一定的比例关系，并能够灵活適应用户调整。

（二）视觉元素

1.选择适合屏幕阅读、符合内容风格的字体

数字阅读界面需要一定的个性化设置，手写体、卡通体、花式字体可以产生惊艳的视觉效果，但由于笔画过细、粗细不匀、衬线过多，大面积的这种字体相比于易读的黑体对阅读流畅度有一定影响。当文章变得不易读，用户就会倾向于选择易读的字体。挑选符合阅读平台特点和读物风格的字体，加以合理利用，可以使得文字层级关系明显，版面活泼有生气。比如：对于历史读物或者纪传类读物，选择具有古朴质感的隶书或者魏碑体作为标题，在页面中作为点缀，可以衬托内容的历史感。对于主要阅读的正文部分，尤其是文字内容较多的读物，鉴于可读性、易读性以及迅速识别阅读的要求，建议多提供黑体家族或者改良版的宋体、楷体等字体。

2.设定合理的字号

阅读平台考虑到了不同阅读环境和视力情况的需要，提供调整字号大小的功能。部分阅读平台字号调整的跨度很大，用户难以迅速调整到位。“与其给用户提供改变文字大小的工具，不如直接采用让用户感到舒适的字体和字号。”建议字号大小在提供分大类选择的基础上，再设置数值微调功能，提高用户调整效率。过大的字号在有限的屏幕上显示时，段落间区别性变弱，文章结构和页面版式被打破。用户仅仅只能识别文字，逐字阅读，难以成句阅读，造成了一定阅读障碍。而过小的字号提高了文字辨识难度，版面也因为内容变多而显得密密麻麻（如图5）。建议适当控制字号调整的范围，对于5.5英寸的显示设备（iphone6 plus），正文字号42-54px较为适宜；对于4.7英寸的显示设备（iphone6），正文字号28-36px较为适宜。

3.筛选精良图片

期刊类读物近年来在发行纸质版的同时也逐步推出数字期刊，读物数字化前需对读物内容重新整合编排，其中的内容，特别是图片，需要进行进一步筛选，统一图片风格，保证图片质量。掌阅平台上部分时尚类杂志版面常常呈现为一张图片，一行文字的布局，这是由于图片数量较多、相互之间主题相近，未经筛选精简，导致了内容堆叠、图文关系单调重复。在对插图进行筛选后，需统一图片形式，确定采用角版、羽化版还是挖版；明确图片之间的关系，同主题如有多张图片，则将图片编组归类，确定单张排版还是多张拼版；再进一步明确图文关系，利用聚焦点原理和视觉平衡对图片和文字进行合理安排，发挥图片说明表意的作用，吸引用户视觉关注，在有限的阅读界面中突显最重要的内容。

4.易于阅读的编排方式

当阅读的文字内容过长时，特别是对于纯文字类的读物，读者容易产生视觉疲劳或者厌烦情绪。建议将阅读内容合理分块，通过留白或者插入图形、装饰性图片等其他视觉元素把长篇文字分为几部分，有意识地引导读者分多次阅读，注意休息。把文内关键信息用单独的图形文字或者加粗呈现，有助于读者捕捉资讯，也增加了版面细节，提高了版面生气。借鉴表单隔行染色的表现方式，对大篇幅文字进行底色区分或者染色区分，同样也能方便读者进行阅读定位，丰富视觉感受。

5.色彩搭配

控制好背景与文字的色彩对比，是阅读页面整体视觉感受良好的重要保证。白底黑字的配色虽然符合人们传统阅读习惯，但是数字阅读通常不会采用完全白底黑字的颜色搭配。为了缓和阅读界面显示中黑白两色的强烈对比，“白底”需是带了灰度的白色，同时为延缓视觉疲劳，最好略微偏黄暖调；“黑字”也需是比黑色略微缓和的深灰色。大多数阅读平台多采用有彩色系的配色方案，常见的有绿色系的护眼模式和黄色系的仿古模式。为确保版面色彩的统一和谐，有彩色系配色方案中的背景与文字色彩最好来自同一色系，通过明度拉开区分。

总结

目前，中国数字阅读已进入高速发展期，逐步走向成熟。随着内容的不断丰富，数字阅读从通篇的文字快餐向图文并茂的精排版读物过渡。为了顺应数字阅读的发展需要，文章以平面设计理论为基础，解构阅读界面，提取研究元素；对典型的阅读平台进行比较研究，发现其中的缺陷和不足；提出部分细节方面的可行性建议，以期能优化数字阅读界面，给读者带来更好的视觉体验。