编辑导读:在互联网还不发达的年代，很多人都有早起读报的习惯。随着手机的普及，人们更倾向于在手机上获取新闻信息。阅读功能使用如此频繁，我们应该更加注重用户体验。本文以vivo浏览器为例，分析如何优化升级新闻阅读功能，希望对你有所帮助。
阅读与我们的生活密切相关。我们每天早上醒来，会不会打开平时的APP，看看发生了什么，能吃什么瓜？不注意，十几二十分钟就过去了。
对于vivo的用户来说，新闻阅读功能在浏览器这类产品中仅次于搜索模块。根据之前研究生委托的用户流失研究报告，新闻阅读的体验也是用户流失的重要原因之一。
新闻阅读现状:在vivo浏览器产品中，基于阅读模块的相关设计缺乏关注度和方法论。在线新闻阅读格式处理陈旧，视觉体验差，用户在使用过程中障碍重重。归根结底，由于缺乏整体的设计思路，曲面调整一直处于修修补补的状态，阅读体验的问题没有得到根本解决。目的和价值在了解了这个背景之后，我们提炼了这个新闻阅读优化的目的和设计价值:
业务端:提高浏览器阅读时间。提高新闻阅读效率。用户:带来沉浸式的高效阅读体验。设计价值体现在:优化新闻模块有助于提高用户的浏览效率，用户可以在固定时间内阅读更多的内容和信息，从而整体提高浏览时间。对于商业端，可以曝光更多的信息和广告。
第一，研究思路
如何根据我们的现状完成我们的设计方案，帮助我们解决问题，实现我们的预期价值？首先，我们根据预定的优化目标细化了总体设计目标。
1.设计目标
通过强化逻辑和秩序，在易读性和可读性方面优化信息传递和记忆质量，最终为用户创造零干扰的阅读体验。
以下是一些需要解释的概念:
可识别性:针对文本，能让读者准确阅读，不会因为距离太近而产生混淆。可读性:根据版面，阅读的难易程度和文字的组合。0.扰动:可以悄悄地隐藏自己的设计，不会用设计本身分散人们的注意力，达到阅读的沉浸感。好了，设计目标确立后，再来说设计研究框架，这是我们优化方案的总体思路。
2.指导性设计框架
整体设计框架以人为本。本文从用户体验出发，提炼影响沉浸式阅读的因素，结合成熟的版式研究理论，进行细节探索，沉淀新的理论。
研究步骤
步骤说明:
关注用户-明确目标-理论指导-详细修正。
第二，用户端研究
在前面的部分中，我们研究并确定了设计框架，并描绘了设计的范围和方向。那么，事不宜迟，我们进入研究的第一部分:用户研究，看看我们的用户画像是什么样的？他们对新闻模块的阅读有哪些不满？
1.用户属性和流失原因分析
首先，我们来看几张图片:
浏览器用户人口统计属性
选择不同浏览器时要考虑的因素排名
使用vivo浏览器的目的
相关结论:
27 ~ 36岁用户占比相对较高，36岁以下用户占比78%。整体数据显示，用户趋于年轻化。浏览器用户最重要的行为主要是搜索，其次是新闻。新闻是用户选择浏览器的三大考虑因素之一。以上说明了新闻模块对于vivo浏览器非常重要，我们服务的用户很大一部分是中青年，这对于我们后期的设计是有帮助的，比如默认字体大小的选择和确定。
那么我们来看看流失用户的研究中有哪些因素？
对新闻模块不满意的原因
在流失用户的研究中，体验问题在新闻模块的不满意因素中占有一定的比例。
除了内容本身，其他体验问题主要集中在:观感差、操作复杂、功能差。这些问题都反映出用户在阅读时受到功能和视野的干扰，导致满意度不佳。
了解了用户的基本情况和用户流失的原因，我们再来看看在当今时代，如何基于用户的阅读习惯，减少不必要的打扰，实现沉浸式的阅读体验。
2.用户的阅读习惯
1)改善阅读和浏览体验
首先，我们来提一下沉浸式阅读的概念。
用户体验专家艾兰·库伯在《about Face3》中描述，当人们能够专注于一项活动时，他们会忘记外部世界，忽略各种干扰。
用户体验水平
用户体验层次是层层递进的，从有用到可用到好用，最后一步是友好。我们的优化追求是达到最终的体验。从阅读的角度来说，沉浸感是读者阅读时最重要的状态。
2)干扰因素的细分
有很多因素会干扰我们的沉浸式阅读。我们的注意力总是被各种各样的事情扰乱。阅读体验经常被打断，真的让人很烦。让我们来看看影响我们沉浸式阅读的因素。
影响阅读的因素
上图中，我们对干扰阅读的因素进行了细分，有三大模块:外界、自我、文章本身。我们设计师可以优化的点都是和文章本身有关的(字号、字体、字距、写实、行距、段落间距、页面材质等。).
3)拟像体验需求升级。
书籍的出现比电子产品早得多。如今，书籍的格式和可用性都得到了标准化和优化。
模拟读书的产品近年来也很受欢迎。目前阅读产品的界面设计也在不断贴合实体阅读的体验，比如模拟纸张颜色、墨水屏等等。几乎所有的阅读器产品都有改变背景的功能，这与读者追求与书本一致的真实阅读体验密切相关。
市面上各种阅读APP界面
以上研究对我们下一步的优化设计起到了指导作用，下面就来看看具体的设计是如何进行的。
三五理论指导
聚焦用户习惯后，我研究了阅读要素:字号、字体、对齐、颜色、留白，结合各种相关理论，沉淀出适合新闻阅读的规范。
然后详细看每个模块。
1.字体大小的研究
一般来说，老年人对大字体的需求高于年轻人，阅读器相关产品的默认字体大小是根据年轻人的喜好设置为中小字体，功能也有所调整。因为阅读字体大小是一个非常个性化的配置，所以需要增加调整字体大小的功能。
当涉及到字体大小的使用时，设计人员通常会根据前人给出的规范或者与系统相关的基本规范进行设计。但是对于精细化的研究，我们需要有一个强有力的理论基础，用什么字体大小。版式设计早就自成体系，对书中人物的使用方法总结的非常精细科学。我们基于布局设计的结果来研究屏幕特性。
人眼、书本、手机的物理距离
正常的印刷品，我们的眼睛离书有30~35cm的距离，字体大小也要按照这个距离来计算。太大或太小都会影响阅读。版式中的8 ~ 12点是最适合书籍和文字的字号。
距离人眼也有30厘米左右。手持手机比桌上的书离眼睛近5cm左右，更多的人因为习惯问题会靠得更近。
1)计算公式
用文字字号探索，把实体字号转化到手机里。
根据我们的设计文件大小规格和分辨率，我们得到的字体大小范围如下:
最适合标题的字体大小
最合适的文本字体大小
如何缩小最接近阅读习惯的字号范围，最终确定一个合适的字号？接下来我们增加了竞品调研的模块，也就是对目标用户当前习惯的调研。
以及文字中竞品的字体大小:
正文:大部分阅读器app的字体大小都比新闻资讯类app大。资讯类app选择51最合适，54也可以考虑。
标题:大部分新闻标题用72px书写，但69号字在排版上略有偏离标准。就标题大小而言，大部分阅读器app的字体大小都比新闻类app大。
根据产品本身的功能，有三种字体大小有待敲定:主标题、副标题、正文。
为了让用户意识到字体大小的不同带来的文本功能的不同，加快识别反应，三个功能的字体大小不能太接近。最后定义为大标题72px，二级大标题60px，正文51px，大标题以粗体显示。
2.字体研究
说完了，再来说说字体。字体是文章的基本元素，是我们模块的DNA。字体的优化是我们提案的关键部分。
在字体选择方面，我们对比了几十种字体，最终选择了康华钻石黑作为我们的新字体，以取代原来的系统字体韩一奇黑。
让我们来看看新字体的优点:
新旧字体比较
汉旗黑:形制平直，转折复杂。问题:平面字体缺乏精神，复杂的转折会影响单个字体的理解速度，降低整篇文章的阅读速度。康华钻石黑:薄而简单的康华钻石黑。结构简单，直立方正，厚薄均匀。更适合阅读，提高阅读效率。关于细节:
康华金刚黑:敦，体，微弯，符合汉字最基本的笔画风格，字体生动不死板。
每一笔都有该字的特点，如“寒”字中的井，“峰”字中的峰，每一横的长短都不一致。而汉一奇的黑色过于均匀，使得每个字体乍一看都很接近，过于均匀，单个字体的识别度受到影响。
中文金刚黑字体在单字识别上优于汉仪奇黑。
灰度数据分析
报告显示，短时间内，只有字体发生变化，其他都没有变化，所有关键业务指标都是正向提升:人均投放次数、人均新闻点击量、人均时长、广告点击量等。都有积极的改善。
所以我们选择康华钻石黑作为我们阅读新闻的默认字体。
3.对齐研究
研究完字体，研究段落中单词的对齐方式也很重要。
文本对齐有几种类型:左对齐、右对齐、左右对齐和居中对齐。阅读大段文字几乎没有右对齐和居中对齐，这里我们比较一下左对齐和左右对齐的优缺点。
两种对齐方法
让我们来看看利弊:
左右对齐的好处有很多，主要体现在视觉上的舒服感，更重要的是眼睛包裹在一个固定的位置，更容易阅读。
也有不利之处。文章中有两种字距，而左对齐的好处是只有一个固定的字距。
好在新闻阅读文章篇幅不是特别长，篇幅有限，影响不会放大，两个间距大小也在可以接受的范围内。
综上所述，我们认为在新闻阅读中，左右对齐格式明显优于左右对齐格式。
4.色彩研究
越来越多的读者模拟真实的阅读环境，越来越关注屏幕亮度对眼睛的伤害。寻求身临其境的体验已经引起了各行各业的关注，比如之前火起来的黑暗模式。
这种探索主要基于黑、白、灰之间的关系，旨在创造一种身临其境的色彩体验。
到目前的情况
通过研究思路，我们在三个方面做了调整:
页面背景色:模仿纸张，使用淡灰色。无色彩倾向主要是考虑到用户对较大色彩偏差的偏好不同，新闻阅读要尽量避免这类情绪问题。字符的沉浸感:多研究颜色的使用方式，降低颜色的饱和度，解决字符黑块的视觉干扰。做文字透明，模拟沉浸效果。减少其他色块的面积:防止阅读过程受到特殊颜色的干扰，删除页面上多余的颜色。
优化后沉浸感提高
5.探索空白页布局
看完色彩研究，我们来看看版面。行距是决定布局中列宽是否可读的一个重要因素。
很多图形高手都很注重行距和段落间距的设置。行距过窄和过宽都会有意无意地迷惑读者，造成某种心理障碍。
如果行距过大，会打破文字的连续性，每行都是孤立的，缺乏紧凑性，减缓阅读速度。行距过小会使页面灰色过重，读者眼睛负担过重，无法集中精力阅读一行，时间长了会增加疲劳。
1)引入“垂直节奏”的概念
“垂直节奏”是阅读节奏中最重要的，创造一切视觉阅读节奏。行距是垂直节奏的基本属性。
行距的概念
在格式规范中，1.5 ~ 2倍的汉字行距最合适。总体来说，字体越小，行距应该越大，反之亦然。
51号文本在前面讨论的字体中太小。这里适当增加行距和段落间距，可以优化阅读体验。经过多次比较，我们决定将文本设计为1.65倍行距。
经过多次比较，确定1.65倍的行距为各项指标的最佳行距。确定间距后，基本间距有一个值A，然后页面相关元素之间的垂直间距就取决于这个值。
操作规则/说明
多重间距的引用，在整个页面上，所有的空格都有规律可循，形成自己的节奏感。
这样做的好处是用户对规律间隔的理解更高。除了满足自身的功能属性，有节奏的空白在阅读过程中不易被过多的间隔干扰，从而提高可读性。
来看看我们的布局页面，有节奏感~
最后，我们来看看详细的说明，也就是操作规范:
以上是vivo浏览器新闻阅读优化设计的全部内容。欢迎对文章感兴趣或者有自己看法的朋友留言和我讨论。
本文最初由@ VMIC·UED发布。每个人都是产品经理。未经许可，禁止复制。
题目来自Pexles，基于CC0协议。
