2023年vivo浏览器新闻阅读的优化设计

vivo浏览器新闻阅读的优化设计新闻阅读是我们生活中息息相关的事儿。我们每天早晨醒来，是不是会打开惯用的APP，看看又发生了什么，又有什么瓜可以吃？一不留神，十几二非常钟就过去了。

对于vivo的用户来说，在扫瞄器这类产品中，新闻阅读功能的重要度仅次于搜寻模块。依据之前托付用研同学做的流失用户讨论报告，新闻阅读的体验问题也是导致用户流失的重要缘由之一。

新闻阅读的现状：vivo扫瞄器产品中，基于阅读模块的相关设计在关注度和方法论上都有所欠缺。线上的新闻阅读版式处理较陈旧，视觉体验较差，用户在使用过程中障碍较多。归根究底，由于整体的设计思路缺失，表面的调整始终是修修补补状态，没有根本解决阅读体验的问题。目的和价值了解了这样的背景状况后，我们提炼了此次新闻阅读优化的目的和设计价值：

业务侧：提升扫瞄器阅读时长。提升新闻阅读效率。用户侧：带来沉醉且高效的阅读体验。设计价值体现在：优化新闻模块有助于提升用户扫瞄效率，固定时间用户可以阅读更多内容，资讯，整体提高扫瞄时长。对于商业侧，能够曝光更多的资讯和广告。讨论步骤

步骤解说：

聚焦用户（用户阅读习惯探究，主要从人群和竞品方面讨论）——明确目标（什么叫沉醉阅读，如何做到阅读0干扰）——理论指导（成熟的版式理论推出屏幕理论，指导优化）——细节修正（落地操作，沉淀）

扫瞄器用户人口属性

选择不同扫瞄器时考虑的因素排名

使用vivo扫瞄器的目的

相关结论：

扫瞄器用户27～36岁占比较高，36岁以下占比高达78%，整体数据显示用户年龄偏向年轻化。扫瞄器用户最重要使用行为主要是搜寻，其次是新闻。新闻资讯是用户选择扫瞄器的前三考虑因素之一。以上说明白新闻模块对于vivo扫瞄器来说特别重要，我们服务的用户很大一部分是中青年，对我们之后设计有指导性关心，例如在默认字号的选择确定上。

那接下来让我们来看一下流失用户讨论中都是哪些因素？

对新闻模块不满足缘由（点击查看大图）

在流失用户讨论中，新闻模块不满足因素中，体验问题有肯定的占比。

除去内容本身的吐槽，其他体验问题主要集中为：观感差，操作简单，功能不好用。这几项问题都侧面反映出用户在阅读时候受到功能与视觉的打搅，导致了满足度较不好的状况。

了解了用户的基本状况以及流失用户缘由，我们来看下在如今时代里，基于用户的阅读习惯，怎么做才能削减不必要的打搅，达到沉醉的阅读体验？

用户体验层次

用户体验层次是一层一层递进的，从有用到可用再到易用，最终一步是友好，我们优化追求的是达到最终的体验。从阅读角度上来看，沉醉是读者在阅读时的一个最重要的状态。

2）干扰因素细分

干扰我们沉醉阅读的因素许多，我们的留意力总是被各种各样的事物干扰，频繁的打断阅读体验的确让人愤怒。让我们来看下影响我们沉醉阅读的因素有哪些？

干扰阅读的因素

上图中我们对干扰阅读的因素进行了细分，一共三个大模块：外界，自我，和文章本身，我们设计师能加以优化的点都和文章本身相关(文字字号，字体，字间距，真实感，行距，段落间距，页面材质等）。

3）拟物体验需求升级

书籍产生的年月比电子产品早得多，如今书籍的版式规范，易用性已经优化得很完善。

模拟书本阅读的产品也在这几年特别流行，目前阅读产品在界面设计上也在不断贴合物理阅读相关体验，比如模拟纸张颜色，墨水屏等。几乎全部阅读器产品都有改换背景的功能，这与读者们追求与书本全都真实感的阅读体验亲密相关。

市面各类阅读APP界面

以上的讨论对我们接下来做的优化设计起到指引性作用，那让我们来看下详细的设计是如何绽开的。

人眼距离书本和手机物理距离

对于正常印刷品来说，我们人眼距离书本30~35cm，字号大小也应当根据这个距离计算，太大太小都会影响阅读。版式规范里8～12点是最适合书籍，正文的字号（1点=0.376毫米，也就是3～4.5mm）。

人眼离手机距离也差不多30cm，手持手机比书本放桌上要离眼睛会近5cm左右，并且更多人由于习惯问题，会拿近一些。

1）计算公式（标题和正文）

以正文字号探究，物理尺寸转化到手机上（实际尺寸(英寸)=像素/辨别率；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种字间距，而左对齐优势在于只有一个固定字间距。

好在新闻阅读文章长度并没有特殊长，篇幅受限，影响也就不会扩大，且2个间距尺寸也是在可接受范围里。

综上对比，我们认为左右对齐的版式在新闻类阅读里，是明显优于左对齐版式。

现状到思路

通过讨论思路，我们沉淀3方面的调整：

页面底色：模拟纸质，用弱灰色。不做颜色倾向主要考虑用户对大面偏色喜好度不同，新闻类阅读尽可能避开这类情感化问题。文字沉醉：用色方式上再做讲究，降低颜色饱和，解决文字黑色块的视觉干扰。文字做透亮     度来模拟沉醉效果。削减其他色块面积：预防阅读过程被特别颜色干扰，删除页面多余颜色。

优化后样式沉醉感提升

1）引入概念—「垂直韵律」

「垂直韵律」是阅读节奏感的重中之重，打造一切视觉阅读节奏。行距，是垂直韵律的基础属性（同版式中的网格概念接近）。

行距概念

版式规范中，中文汉字1.5～2倍的行距是最为适合的。整体来说，字号越小，行间距应当相对越大，反之亦然。

51号正文在之前探讨的（48～72）字号里偏小，这里适当增加行间距和段落间距可以优化阅读体验。多次比对后，我们打算正文部分采纳1.65倍行距来设计。

在多次比对后，确定1.65倍行距最符合各项指标行距确定完后，基础间距就有了数值a，之后页面相关的元素纵向之间间距都依靠这个数值（a的n倍）。

操作规范

倍数间距的引用，整体页面来看，全部的留白都有规律可循，形成自己的韵律感。

这么做的好处就是用户对规律间隔的理解度