全屏图片配文阅读体验优化思考

213 阅读4分钟
原文链接: www.zcool.com.cn

天天说设计驱动产品,让世界更美好......然鹅,现实是产品驱完,开发驱,开发驱完测试驱......

设计呢?改改改。


设计驱动产品,可先从小处着手,去完善小功能,逐步推进。

接下来是工作上关于设计推动产品的过程分享,希望对大家有点启发,给点建议。

                                                                                                                          


背景:

WPS画报旨在给用户打造一个优质的内容平台,启动后充当屏保,保护用户隐私,此外,作为美图平台,供用户欣赏大量优质图片,逐渐往内容消费社区方向发展的平台,提高内容质量,在增加多渠道运营的情况下,优化现有的焦点图运营入口。




首先

我在后台翻了下关于焦点的用户反馈:

(不同背景不一样颜色??????就不怕被开发哥哥打死?)


比较突出的问题是

杂乱

看不清


于是我打开了画报,确实像用户反馈说的那样,文字跟图片叠在一起看着乱,阅读起来也吃力,都没心思看下去了;运营姐姐也诉苦说焦点文字编辑限制多,任有天大的脑洞也无处可施。


Emm......

怎样才能让用户在各种图片上阅读文章时有良好的阅读体验呢?


带着这个想法,决定试着在不改变功能架构下从视觉的角度去解决这个问题,推动产品的优化。(驱动!驱动!)


然后,列个问题:


(1)阅读体验差:展开文字排版乱、不清晰、提示不明确

(2)运营模式少:只能插入文字图片,不能编辑

(3)外链乱:单一外链模式,链接不明显

(4)后台录入限制大:不能对文字进行段落编辑




通过查阅一些无障碍设计和竞品分析,总结出以下几个优化方向


(1)增加焦点标题,提高焦点交互率,

(2)调整文字展示结构,区分概述、正文排版

(3)改白底黑字




1、增加焦点标题,提高焦点交互率:


原焦点未做交互前只是一小圆点,虽有呼吸灯动效,但若图片内容过于含蓄,就会错过运营姐姐辛苦码出的有趣小故事还有甲方爸爸给你发的红(guang)包(gao)链接了!


加小标题后,能第一时间让用户知道焦点的内容曝光,增加运营的玩法,刺激交互率,同时为了减少对图片的观感,标题限制在10个字符以内。


改版上线后(8月第1周灰度上线),点击焦点UV从平均10w,焦点点击率2.4%(截止7月第4周数据),上升到平均焦点UV 22w,点击率4.8%(数据取于8月第四周全量发布后)。



2、调整文字展示结构,区分概述、正文排版:


旧版:文字样式多,常用的正文部分反而不明显,层次混乱,


新版:

(1)使用16px的正文字号

为有更好的体验,让目前主流的尺寸和分辨率的设备有更好的浏览体验,减少之前字号样式,增大至16px,wps用户使用的显示设备种类较多,为适应低分辨率的设备,根据不同屏幕比例做响应式来调整字号大小。


(2)保证文本易读性和可控性

让用户去选择能一下子看完的3行60个字符以内的文字概述,如感兴趣就可查看更加详细(但不超过300字)的文章。


(3)使用字号的1.5行高


3、改白底黑字


从生理层面上,之前的版本是黑底白字,侧抑制的现象会使聚焦的白色字体变得更加炫目,视觉刺激强烈,但长时间会产生视觉疲劳感,跟运营姐姐了解过,未来想要在文字内容方面做更多的尝试。白底黑字因侧抑制的现象,聚焦不反射光的黑色字体时,视觉刺激并不强烈,所以长时间阅读造成的视觉疲劳感较弱,也更符合人类长期以来的阅读习惯。


从产品特性上,这些文字会出现在多种复杂图片上,白色能更多地cover到大部分的情况。


按照上述的改动,实现并运用到了6.1的版本中,以下是改版前后的对照:


前:

后:


写在最后:


这是我在工作中的一点小尝试,也很感激老大给了我这个机会,试着从不同的角度去优化产品,更加广度地去思考设计,而不单是直接做产品的需求,设计在一个产品发展中也是很重要的,这个也是我码的第一个总结文章,希望以后继续加油哟,一起努力~!






参考资料:

Web Content Accessibility Guidelines (WCAG) 2.1

夜间模式设计(ISUX)