vivo浏览器新闻阅读优化设计
本文4500字，阅读时间约15到20分钟~
新闻阅读是我们生活中息息相关的事儿~我们每天清晨醒来，是不是会打开惯用的app，看看又发生了什么，又有什么瓜可以吃？一不留神，十几二十分钟就过去了。
对于vivo的用户来说，在浏览器这类产品中，新闻阅读功能的重要度仅次于搜索模块。根据之前委托用研同学做的流失用户研究报告，新闻阅读的体验问题也是导致用户流失的重要原因之一。
了解了这样的背景情况后，我们提炼了此次新闻阅读优化的目的和设计价值：
业务侧：提升浏览器阅读时长。提升新闻阅读效率。
用户侧：带来沉浸且高效的阅读体验。
设计价值体现在：优化新闻模块有助于提升用户浏览效率，固定时间用户可以阅读更多内容，资讯，整体提高浏览时长。对于商业侧，能够曝光更多的资讯和广告。
如何去根据我们的现状，完成我们的设计提案，去协助我们解决问题实现我们的预期价值？首先我们根据之前定好的优化目的提炼了整体设计目标。
1、设计目标：
通过加强逻辑与秩序，在易认性和可读性上优化信息传达和记忆质量，最终给用户打造0干扰的阅读体验。
这里解释下几个概念~
易认性：(Legibility)针对文字，能准确无误的让读者阅读，不因为过于接近带来困惑。
可读性：(Readability)针对版式，阅读的容易程度，文字的组合呈现。
0干扰：能将自己的设计不动声色的隐藏起来，不以设计本身分散人的注意力，达到阅读的沉浸状态。
好的，设计目标确立后，我们来聊下设计研究框架，也就是我们优化方案的整体思路。
2、指导性设计框架
整体设计框架思路是以人为本。从用户体验为开始，提炼影响沉浸阅读的因素，结合成熟的版式研究理论，对细节进行探索和新理论沉淀。
▲研究步骤
步骤解说：
聚焦用户(用户阅读习惯探索，主要从人群和竞品方面研究)——明确目标(什么叫沉浸阅读，如何做到阅读0干扰)——理论指导(成熟的版式理论推出屏幕理论，指导优化)——细节修正(落地操作，沉淀)
相关结论：
1、浏览器用户27～36岁占比较高，36岁以下占比高达70%以上，整体数据显示用户年龄偏向年轻化。
2、浏览器用户最重要使用行为主要是搜索，其次是新闻。
3、新闻资讯是用户选择浏览器的前三考虑因素之一。
用户体验专家Alan Cooper在《About Face3》中描述，当人们能够在一个活动上聚精会神时，他们会忘记外面的世界，忽略掉各种干扰。
b、干扰因素细分
c、拟物体验需求升级
1、字号研究
一般来说，年龄较大的人群对大字体需求高于年轻人，阅读器相关产品默认字号基于年轻人喜好设定为 中偏小 的字号，同时也给功能进行调整。因为阅读字号是个非常私人化的配置，所以加调整字号的功能是必备的。
提到字号使用方式，通常设计师会基于前人给的规范或者系统相关的基础规范去做设计。但对于精细化研究，到底用什么字号我们需要有强有力的理论依据，版式设计早已自成体系，书本上文字的使用方法总结非常精细和科学，我们基于 版式设计的成果对 屏幕文字 进行研究。
对于正常印刷品来说我们人眼距离书本30~35cm，字号大小也应该按照这个距离计算，太大太小都会影响阅读。版式规范里8～12点是最适合书籍，正文的字号。（1点=0.376毫米）（也就是3～4.5mm）。人眼离手机距离也差不多30cm，手持手机比书本放桌上要离眼睛会近5cm左右，并且更多人由于习惯问题，会拿近一些。
计算公式（标题和正文）
以正文字号探索，物理尺寸转化到手机上（实际尺寸(英寸)=像素/分辨率; 1英寸=2.54厘米; 如一张图片宽为600像素，分辨率为300，那么实际打印宽度为：600/300=2英寸，约为5厘米）。基于我们设计文件尺寸规范和分辨率，我们得到字号的范围如下图（字号为3的倍数）
最适合 标题 的字号（72px～93px）
最适合的 正文 字号（48px～72px）
得到了最贴近阅读习惯的字号范围（其实还是挺宽泛的）如何去缩小这个数值，最终确定一个合适的字号呢？接下来我们增加了对 竞品研究 的模块，也就是目标用户目前习惯的研究。
正文和标题的竞品字号情况：
正文：大部分阅读器app字号比新闻资讯类app大一些，资讯类字号选在51最为合适，54也可以考虑。
标题：大部分新闻类主标题文字选用69，72px，但69号字在版式中稍微偏离规范。就标题大小来说，大部分阅读器app字号比新闻资讯类app大一些。
结合产品本身功能，需要敲定的字号有主标题，二级标题，正文三个。为了明显让用户感知到字号差异带来的文字功能差异，加快识别反应速度，三个功能各字号不能过于接近。最终定义为大标题72px，二级标题60px，正文51px，且标题加粗显示（如下图）。
2、字体研究
说完字号我们来说下字体，字体是组成文章的基础元素，也是我们模块的DNA，字体的优化是我们提案关键的一部分。字体选择上，我们对比了几十种字体，从识别度为出发点去考虑，最终选定 华康金刚黑 作为我们新的字体代替原来的系统字体汉仪旗黑。让我们来看下新字体的优势：
1、汉仪旗黑（旧字体）：字形扁正，转折处复杂。存在问题：扁正的字体缺少精神气,转折处复杂会影响单个字体的理解速度，降低整篇文章的阅读速度。
2、华康金刚黑（新字体）：偏瘦，结构简单的华康金刚黑。结构简单，方正挺拔，粗细均匀。更适合阅读和提升阅读效率。
细节上：
华康金刚黑：顿，提，略微有弧度，符合汉字最基础的笔画样式显得字体生动，不死板。每一笔画都有该文字的特征，例如“寒”字里的井，“峰”字里的丰，每一横长度都不一致，而汉仪旗黑过于统一，让每个字形一眼看上去非常接近，过于平均，单个字体的 识别度 受到影响。华康金刚黑字体在单个文字识别度上优于汉仪旗黑。
3、对齐方式研究
研究完字体，段落里文字对齐的研究也很重要。
4、色彩研究
通过研究思路，我们沉淀3方面的调整：
1.页面底色：模拟纸质，用 弱灰色。不做颜色倾向主要考虑用户对大面偏色喜好度不同，新闻类阅读尽可能避开这类情感化问题。
2.文字沉浸：用色方式上再做考究，降低颜色饱和，解决文字 黑色块 的视觉干扰。文字做透明度来模拟沉浸效果。
3.减少其他色块面积：预防阅读过程被特殊 色彩干扰，删除页面多余色彩。
过窄与过宽的行距会有意识或无意识的让读者困惑，造成某种 心理障碍。行距过大会打破文本连续性，每一行会被孤立，缺乏紧凑感，会降慢阅读速度。行距太小会让页面灰度过重，读者眼睛承受过多的负担，无法集中阅读单独一行，时间久了会增加疲劳感。
引入概念—「垂直韵律」
版式规范中，中文汉字1.5～2倍的行距是最为适合的。整体来说，字号越小，行间距应该相对越大，反之亦然。51号正文在之前探讨的（48～72）字号里偏小，这里适当增加行间距和段落间距可以优化阅读体验。多次比对后，我们决定正文部分采用1.65倍行距来设计。
行距确定完后，基础间距就有了数值a，之后页面相关的元素纵向之间间距都依赖这个数值（a的n倍）
