新聞閱讀是我們生活中息息相關(guān)的事兒~我們每天清晨醒來，是不是會打開慣用的app，看看又發(fā)生了什么，又有什么瓜可以吃？一不留神，十幾二十分鐘就過去了。
對于vivo的用戶來說，在瀏覽器這類產(chǎn)品中，新聞閱讀功能的重要度僅次于搜索模塊。根據(jù)之前委托用研同學(xué)做的流失用戶研究報告，新聞閱讀的體驗問題也是導(dǎo)致用戶流失的重要原因之一。
新聞閱讀的現(xiàn)狀
vivo瀏覽器產(chǎn)品中，基于閱讀模塊的相關(guān)設(shè)計在關(guān)注度和方法論上都有所欠缺。線上的新聞閱讀版式處理較陳舊，視覺體驗較差，用戶在使用過程中障礙較多。歸根究底，由于整體的設(shè)計思路缺失，表面的調(diào)整一直是修修補補狀態(tài)，沒有根本解決閱讀體驗的問題。
目的和價值
了解了這樣的背景情況后，我們提煉了此次新聞閱讀優(yōu)化的目的和設(shè)計價值：
業(yè)務(wù)側(cè)：提升瀏覽器閱讀時長。提升新聞閱讀效率。
用戶側(cè)：帶來沉浸且高效的閱讀體驗。
設(shè)計價值體現(xiàn)在：優(yōu)化新聞模塊有助于提升用戶瀏覽效率，固定時間用戶可以閱讀更多內(nèi)容，資訊，整體提高瀏覽時長。對于商業(yè)側(cè)，能夠曝光更多的資訊和廣告。
一、研究思路
如何去根據(jù)我們的現(xiàn)狀，完成我們的設(shè)計提案，去協(xié)助我們解決問題實現(xiàn)我們的預(yù)期價值？首先我們根據(jù)之前定好的優(yōu)化目的提煉了整體設(shè)計目標。
1、設(shè)計目標：
通過加強邏輯與秩序，在易認性和可讀性上優(yōu)化信息傳達和記憶質(zhì)量，最終給用戶打造0干擾的閱讀體驗。
這里解釋下幾個概念~
易認性：(Legibility)針對文字，能準確無誤的讓讀者閱讀，不因為過于接近帶來困惑。
可讀性：(Readability)針對版式，閱讀的容易程度，文字的組合呈現(xiàn)。
0干擾：能將自己的設(shè)計不動聲色的隱藏起來，不以設(shè)計本身分散人的注意力，達到閱讀的沉浸狀態(tài)。
好的，設(shè)計目標確立后，我們來聊下設(shè)計研究框架，也就是我們優(yōu)化方案的整體思路。
2、指導(dǎo)性設(shè)計框架
整體設(shè)計框架思路是以人為本。從用戶體驗為開始，提煉影響沉浸閱讀的因素，結(jié)合成熟的版式研究理論，對細節(jié)進行探索和新理論沉淀。
▲研究步驟
步驟解說：
聚焦用戶(用戶閱讀習(xí)慣探索，主要從人群和競品方面研究)——明確目標(什么叫沉浸閱讀，如何做到閱讀0干擾)——理論指導(dǎo)(成熟的版式理論推出屏幕理論，指導(dǎo)優(yōu)化)——細節(jié)修正(落地操作，沉淀)
二、用戶側(cè)研究
上一節(jié)內(nèi)容里，我們研究并確認了設(shè)計框架，圈定了設(shè)計的范圍和方向，那么不多說，讓我們進入第一部分的研究：用戶研究環(huán)節(jié)，來看看我們的用戶畫像是什么樣子？他們對新聞模塊閱讀不滿意的在哪些方面呢？
1、用戶屬性和流失原因分析
首先我們來看幾張圖：
相關(guān)結(jié)論：
1、瀏覽器用戶27～36歲占比較高，36歲以下占比高達70%以上，整體數(shù)據(jù)顯示用戶年齡偏向年輕化。
2、瀏覽器用戶最重要使用行為主要是搜索，其次是新聞。
3、新聞資訊是用戶選擇瀏覽器的前三考慮因素之一。
以上說明了新聞模塊對于vivo瀏覽器來說非常重要，我們服務(wù)的用戶很大一部分是中青年，對我們之后設(shè)計有指導(dǎo)性幫助，例如在默認字號的選擇確定上。那接下來讓我們來看一下流失用戶研究中都是哪些因素？
在流失用戶研究中，新聞模塊不滿意因素中，體驗問題有一定的占比。除去內(nèi)容本身的吐槽，其他體驗問題主要集中為：觀感差，操作復(fù)雜，功能不好用。這幾項問題都側(cè)面反映出用戶在閱讀時候受到功能與視覺的打擾，導(dǎo)致了滿意度較不好的情況。了解了用戶的基本情況以及流失用戶原因，我們來看下在如今時代里，基于用戶的閱讀習(xí)慣，怎么做才能減少不必要的打擾，達到沉浸的閱讀體驗？
2、用戶閱讀習(xí)慣（思考與研究如何做到0干擾）
a、提升閱讀瀏覽體驗
首先，我們提一下沉浸閱讀這個概念。
用戶體驗專家Alan Cooper在《About Face3》中描述，當人們能夠在一個活動上聚精會神時，他們會忘記外面的世界，忽略掉各種干擾。
用戶體驗層次是一層一層遞進的，從有用到可用再到易用，最后一步是友好，我們優(yōu)化追求的是達到最后的體驗。從閱讀角度上來看，沉浸 是讀者在閱讀時的一個最重要的狀態(tài)。
b、干擾因素細分
干擾我們沉浸閱讀的因素很多，我們的注意力總是被各種各樣的事物干擾，頻繁的打斷閱讀體驗確實讓人惱怒。讓我們來看下影響我們沉浸閱讀的因素有哪些？
▲干擾閱讀的因素
上圖中我們對干擾閱讀的因素進行了細分，一共三個大模塊：外界，自我，和文章本身。我們設(shè)計師能加以優(yōu)化的點都和文章本身相關(guān)。(文字字號，字體，字間距，真實感，行距，段落間距，頁面材質(zhì)等）
c、擬物體驗需求升級
書籍產(chǎn)生的年代比電子產(chǎn)品早得多，如今書籍的版式規(guī)范，易用性已經(jīng)優(yōu)化的很完善。模擬書本閱讀的產(chǎn)品也在這幾年非常流行，目前閱讀產(chǎn)品在界面設(shè)計上也在不斷貼合 物理閱讀 相關(guān)體驗，比如模擬紙張顏色，墨水屏等。幾乎所有閱讀器產(chǎn)品都有改換背景的功能，這與讀者們追求與書本一致真實感的閱讀體驗密切相關(guān)。
以上的研究對我們接下來做的優(yōu)化設(shè)計起到指引性作用，那讓我們來看下具體的設(shè)計是如何展開的。
三、五項理論指導(dǎo)
聚焦用戶的習(xí)慣之后，我對閱讀要素：字號，字體，對齊，用色，留白規(guī)律分別進行研究，結(jié)合各個相關(guān)理論沉淀出適合新聞閱讀的規(guī)范。那就具體來看下每一個模塊：
1、字號研究
一般來說，年齡較大的人群對大字體需求高于年輕人，閱讀器相關(guān)產(chǎn)品默認字號基于年輕人喜好設(shè)定為 中偏小 的字號，同時也給功能進行調(diào)整。因為閱讀字號是個非常私人化的配置，所以加調(diào)整字號的功能是必備的。
提到字號使用方式，通常設(shè)計師會基于前人給的規(guī)范或者系統(tǒng)相關(guān)的基礎(chǔ)規(guī)范去做設(shè)計。但對于精細化研究，到底用什么字號我們需要有強有力的理論依據(jù)，版式設(shè)計早已自成體系，書本上文字的使用方法總結(jié)非常精細和科學(xué)，我們基于 版式設(shè)計的成果對 屏幕文字 進行研究。
▲人眼距離書本和手機物理距離
對于正常印刷品來說我們?nèi)搜劬嚯x書本30~35cm，字號大小也應(yīng)該按照這個距離計算，太大太小都會影響閱讀。版式規(guī)范里8～12點是最適合書籍，正文的字號。（1點=0.376毫米）（也就是3～4.5mm）。人眼離手機距離也差不多30cm，手持手機比書本放桌上要離眼睛會近5cm左右，并且更多人由于習(xí)慣問題，會拿近一些。
計算公式（標題和正文）
以正文字號探索，物理尺寸轉(zhuǎn)化到手機上（實際尺寸(英寸)=像素/分辨率; 1英寸=2.54厘米; 如一張圖片寬為600像素，分辨率為300，那么實際打印寬度為：600/300=2英寸，約為5厘米）。基于我們設(shè)計文件尺寸規(guī)范和分辨率，我們得到字號的范圍如下圖（字號為3的倍數(shù)）
最適合 標題 的字號（72px～93px）
最適合的 正文 字號（48px～72px）
得到了最貼近閱讀習(xí)慣的字號范圍（其實還是挺寬泛的）如何去縮小這個數(shù)值，最終確定一個合適的字號呢？接下來我們增加了對 競品研究 的模塊，也就是目標用戶目前習(xí)慣的研究。
正文和標題的競品字號情況：
正文：大部分閱讀器app字號比新聞資訊類app大一些，資訊類字號選在51最為合適，54也可以考慮。
標題：大部分新聞類主標題文字選用69，72px，但69號字在版式中稍微偏離規(guī)范。就標題大小來說，大部分閱讀器app字號比新聞資訊類app大一些。
結(jié)合產(chǎn)品本身功能，需要敲定的字號有主標題，二級標題，正文三個。為了明顯讓用戶感知到字號差異帶來的文字功能差異，加快識別反應(yīng)速度，三個功能各字號不能過于接近。最終定義為大標題72px，二級標題60px，正文51px，且標題加粗顯示（如下圖）。
2、字體研究
說完字號我們來說下字體，字體是組成文章的基礎(chǔ)元素，也是我們模塊的DNA，字體的優(yōu)化是我們提案關(guān)鍵的一部分。字體選擇上，我們對比了幾十種字體，從識別度為出發(fā)點去考慮，最終選定 華康金剛黑 作為我們新的字體代替原來的系統(tǒng)字體漢儀旗黑。讓我們來看下新字體的優(yōu)勢：
▲新舊字體比對
1、漢儀旗黑（舊字體）：字形扁正，轉(zhuǎn)折處復(fù)雜。存在問題：扁正的字體缺少精神氣,轉(zhuǎn)折處復(fù)雜會影響單個字體的理解速度，降低整篇文章的閱讀速度。
2、華康金剛黑（新字體）：偏瘦，結(jié)構(gòu)簡單的華康金剛黑。結(jié)構(gòu)簡單，方正挺拔，粗細均勻。更適合閱讀和提升閱讀效率。
細節(jié)上：
華康金剛黑：頓，提，略微有弧度，符合漢字最基礎(chǔ)的筆畫樣式顯得字體生動，不死板。每一筆畫都有該文字的特征，例如“寒”字里的井，“峰”字里的豐，每一橫長度都不一致，而漢儀旗黑過于統(tǒng)一，讓每個字形一眼看上去非常接近，過于平均，單個字體的 識別度 受到影響。華康金剛黑字體在單個文字識別度上優(yōu)于漢儀旗黑。
報告里看出在較短時間的灰度測試中僅僅字體變化，其他都不改變，關(guān)鍵業(yè)務(wù)指標都有正向提升：人均啟動次數(shù)，人均新聞點擊，人均時長，廣告點擊等都有正向數(shù)據(jù)提升。所以我們選擇了用華康金剛黑作為我們新聞閱讀的默認字體。
3、對齊方式研究
研究完字體，段落里文字對齊的研究也很重要。
文字對齊方式有：左對齊，右對齊，左右對齊，居中對齊這幾種，大段落文字閱讀右對齊或者居中對齊幾乎沒有，所以這里我們對比 左對齊 和 左右對齊 的優(yōu)劣。
來看下優(yōu)劣對比：
左右對齊的優(yōu)勢較多，主要體現(xiàn)在視覺感受舒服（規(guī)規(guī)整整的版式），更主要是眼睛在固定位置換行，在易讀性上做得比較好。缺點也是有的，文章存在2種字間距，而左對齊優(yōu)勢在于只有一個固定字間距。好在新聞閱讀文章長度并沒有特別長，篇幅受限，影響也就不會擴大，且2個間距尺寸也是在可接受范圍里。綜上對比，我們認為 左右對齊 的版式在新聞類閱讀里，是明顯優(yōu)于左對齊版式。
4、色彩研究
越來越多閱讀器模擬真實閱讀環(huán)境，屏幕的亮度對眼睛的傷害受到越來越多的重視，尋求一種沉浸的體驗在各行各業(yè)都受到關(guān)注，比如之前火起來的暗黑模式。本次探索主要從黑白灰的關(guān)系角度出發(fā)，意在打造一個 沉浸的色感體驗。
▲現(xiàn)狀到思路
通過研究思路，我們沉淀3方面的調(diào)整：
1.頁面底色：模擬紙質(zhì)，用 弱灰色。不做顏色傾向主要考慮用戶對大面偏色喜好度不同，新聞類閱讀盡可能避開這類情感化問題。
2.文字沉浸：用色方式上再做考究，降低顏色飽和，解決文字 黑色塊 的視覺干擾。文字做透明度來模擬沉浸效果。
3.減少其他色塊面積：預(yù)防閱讀過程被特殊 色彩干擾，刪除頁面多余色彩。
5、頁面版式留白探索（行間距，段落間距等）
看完色彩研究，我們來看一下版式。行間距是決定版面中的欄寬是否具有閱讀性的重要因素。許多平面大師都非常注重行距，段落間距的設(shè)置。
過窄與過寬的行距會有意識或無意識的讓讀者困惑，造成某種 心理障礙。行距過大會打破文本連續(xù)性，每一行會被孤立，缺乏緊湊感，會降慢閱讀速度。行距太小會讓頁面灰度過重，讀者眼睛承受過多的負擔(dān)，無法集中閱讀單獨一行，時間久了會增加疲勞感。
引入概念—「垂直韻律」
「垂直韻律」是閱讀節(jié)奏感的重中之重，打造一切視覺閱讀節(jié)奏。行距，是垂直韻律的基礎(chǔ)屬性。（同版式中的網(wǎng)格概念接近）
版式規(guī)范中，中文漢字1.5～2倍的行距是最為適合的。整體來說，字號越小，行間距應(yīng)該相對越大，反之亦然。51號正文在之前探討的（48～72）字號里偏小，這里適當增加行間距和段落間距可以優(yōu)化閱讀體驗。多次比對后，我們決定正文部分采用1.65倍行距來設(shè)計。
行距確定完后，基礎(chǔ)間距就有了數(shù)值a，之后頁面相關(guān)的元素縱向之間間距都依賴這個數(shù)值（a的n倍）
倍數(shù)間距的引用，整體頁面來看，所有的留白都有規(guī)律可循，形成自己的韻律感。這么做的好處就是用戶對規(guī)律間隔的理解度更高，有節(jié)奏的留白除了滿足了它本身需要的功能屬性，用戶閱讀過程中不容易受到來自間隔過多的干擾，這樣易讀性就提升了。
來看下我們版式頁面樣子，自帶韻律感~
聯(lián)系客服
