全屏圖片配文閱讀體驗優化思考
天天說設計驅動產品，讓世界更美好......然鵝，現實是產品驅完，開發驅，開發驅完測試驅......
設計呢？改改改。
設計驅動產品，可先 從小處著手 ，去完善小功能，逐步推進。
接下來是工作上關於設計推動產品的過程分享，希望對大家有點啟發，給點建議。
背景：
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的版本中，以下是改版前後的對照：
前：
後：
寫在最後：
這是我在工作中的一點小嚐試，也很感激老大給了我這個機會，試著從不同的角度去優化產品，更加廣度地去思考設計，而不單是直接做產品的需求，設計在一個產品發展中也是很重要的，這個也是我碼的第一個總結文章，希望以後繼續加油喲，一起努力~！
參考資料：