全屏图片配文阅读体验优化思考
设计驱动产品，可从小处着手，去完善小功能，逐步推进。这是关于设计推动产品的过程分享，希望对大家有点启发。
天天说设计驱动产品，让世界更美好......然鹅，现实是产品驱完，开发驱，开发驱完测试驱......
设计呢？改改改。
设计驱动产品，可先从小处着手，去完善小功能，逐步推进。
接下来是工作上关于设计推动产品的过程分享，希望对大家有点启发，给点建议。
背景：
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
