为更沉浸的阅读体验 - 正文重构 - 图1

    雪球正文页在呈现上越来越丰富,除文字内容主体外,逐渐增加了更多的内容形式和关联扩展等更为丰富的元素。设计在满足业务扩展的同时,也需要保障和愉悦用户阅读体验,从而使用户使用时长及黏性得到提升

    为更沉浸的阅读体验 - 正文重构 - 图2

    为更沉浸的阅读体验 - 正文重构 - 图3

    为更沉浸的阅读体验 - 正文重构 - 图4

    从用户的角度出发,协同产品梳理业务逻辑,将抽象的需求转化为具体的解决方案,做出设计,既满足用户需求,又满足产品目标。


    为更沉浸的阅读体验 - 正文重构 - 图5


    小组以业务的目标” 提升用户阅读体验 “为前提,分步讨论拆解,更切实的落实设计方案。

    通过明确”正文停留时长 “” 互动发帖量“的衡量指标,业务侧重方向,内容布局优化,交流互动的激励,发掘评论价值,充分解读后,进行设计上的发散。

    为更沉浸的阅读体验 - 正文重构 - 图6

    ( 放大图看~ 为更沉浸的阅读体验 - 正文重构 - 图7

    为更沉浸的阅读体验 - 正文重构 - 图8


    为更沉浸的阅读体验 - 正文重构 - 图9

    文章内容是吸引阅读的基础,而舒适的排版,合理的布局是能够影响用户长时间阅读的最主要因素。

    所以需要正文页对内容的合理规划,让用户在有限的时间里,快速获取和理解感兴趣的信息并产生下一步行为,进而促进停留时长提升。

    “ 那么,

    如何建立 有效的 信息层级?


    1)信息的组织与整合 - 为页面内部建立良好的信息浏览秩序

    正文底部互动区域元素不断累积叠加,一直以来没有从整体进行组织归纳, 首要做的是 - 将相同属性的信息组织在一起,搭建秩序。

    为更沉浸的阅读体验 - 正文重构 - 图10

    股票,打赏,赞的列表等共存于文章底部,缺少逻辑及类别划分,经过梳理后, 整合为”激励操作 “及” 来源信息”类。

    为更沉浸的阅读体验 - 正文重构 - 图11

    打赏,分享激励用户行为的操作聚合,置于正文底部,符合用户的阅读习惯(浏览后对于文章产生的认同感- 自然的激励行为),同时良好的信息秩序 也可以避免用户在浏览信息的时候耗费过多的精力。

    2) 强化对比 - 捕捉视觉焦点,提升阅读效率

    明确主导雪球信息层级对比因素:字号,字重,间距的合理性留白等。 现雪球短贴转发区域内,一直以来仅用 “底色” 区分主体内容与引用内容, 造成浏览者对于文章信息获取存在部分障碍:文字对比不够明显,不能快速的获取视觉焦点,引用区域大量的侵占其他模块的高度。

    为更沉浸的阅读体验 - 正文重构 - 图12

    基于现状问题的考虑后,通过对内容模块化处理(区分长文,短贴类型),字号调整,降低引用文字占比等手段,有效的拉开信息层级对比。

    为更沉浸的阅读体验 - 正文重构 - 图13

    3)对齐原则 - 整体清晰的文本显示

    雪球一直以来是左对齐方式,带来一个问题 “右侧显示参差不齐, 左侧视觉偏重”。现正文由左对齐改为两端对齐可以保证段落的整齐划一,成规整的块状,并且通过优化字间距,标点挤压等方式有效的处理了间隙留白较大的问题。

    为更沉浸的阅读体验 - 正文重构 - 图14

    为更沉浸的阅读体验 - 正文重构 - 图15

    雪球用户对 “原创” 有一种额外的“归属感”,那么激励用户间的的互动交流可以进一步促进内容的创作生产。

    基于这个目标,在评论区增加“回复 Ta” 明确的操作提示,并且改变评论详情页的交互方式, 由底部弹出,在当前页面交互,使互动更沉浸。

    为更沉浸的阅读体验 - 正文重构 - 图16

    由于消息量过大的问题,用户很容易错失或不及时收到提醒,为了促成用户继续参与讨论等行为, 降低用户获取消息的成本,新增贴合用户场景的 “收到评论” 消息提醒

    “雪球属性” 的正文- 股票信息融入

    增加股票关联性设计,关联的重要意义是让流量继续往里走,通过列表式的关联设计,希望用户可以更直接的了解到文章相关股票,从而添加自选 访问更多页面。

    为更沉浸的阅读体验 - 正文重构 - 图17

    写在最后:

    正文页重构,是一个细致而庞大的工程。在设计过程中,我们不仅重新审视了整个页面框架,也在细节处精益求精~ 期待上线后的正文页可以给用户带来更好的阅读体验, 同时我们也会继续打磨正文页的设计,让阅读更沉浸!

    为更沉浸的阅读体验 - 正文重构 - 图18

    \ be happy /


    为更沉浸的阅读体验 - 正文重构 - 图19
    为更沉浸的阅读体验 - 正文重构 - 图20
    https://mp.weixin.qq.com/s/dsu4PLqBIEbvm9_iOeNs6w