編輯導(dǎo)讀：在互聯(lián)網(wǎng)還不發(fā)達(dá)的年代，很多人都有早起看報(bào)的習(xí)慣。隨著手機(jī)的普及，人們更傾向于在手機(jī)上獲取新聞資訊。新聞閱讀功能使用頻率如此之高，更要注重用戶體驗(yàn)。本文以vivo瀏覽器為例，分析如何對(duì)新聞閱讀功能進(jìn)行優(yōu)化升級(jí)，希望對(duì)你有幫助。

新聞閱讀是我們生活中息息相關(guān)的事兒。我們每天清晨醒來，是不是會(huì)打開慣用的APP，看看又發(fā)生了什么，又有什么瓜可以吃？一不留神，十幾二十分鐘就過去了。

對(duì)于vivo的用戶來說，在瀏覽器這類產(chǎn)品中，新聞閱讀功能的重要度僅次于搜索模塊。根據(jù)之前委托用研同學(xué)做的流失用戶研究報(bào)告，新聞閱讀的體驗(yàn)問題也是導(dǎo)致用戶流失的重要原因之一。

新聞閱讀的現(xiàn)狀：vivo瀏覽器產(chǎn)品中，基于閱讀模塊的相關(guān)設(shè)計(jì)在關(guān)注度和方法論上都有所欠缺。線上的新聞閱讀版式處理較陳舊，視覺體驗(yàn)較差，用戶在使用過程中障礙較多。歸根究底，由于整體的設(shè)計(jì)思路缺失，表面的調(diào)整一直是修修補(bǔ)補(bǔ)狀態(tài)，沒有根本解決閱讀體驗(yàn)的問題。目的和價(jià)值了解了這樣的背景情況后，我們提煉了此次新聞閱讀優(yōu)化的目的和設(shè)計(jì)價(jià)值：

• 業(yè)務(wù)側(cè)：提升瀏覽器閱讀時(shí)長(zhǎng)。提升新聞閱讀效率。
• 用戶側(cè)：帶來沉浸且高效的閱讀體驗(yàn)。
• 設(shè)計(jì)價(jià)值體現(xiàn)在：優(yōu)化新聞模塊有助于提升用戶瀏覽效率，固定時(shí)間用戶可以閱讀更多內(nèi)容，資訊，整體提高瀏覽時(shí)長(zhǎng)。對(duì)于商業(yè)側(cè)，能夠曝光更多的資訊和廣告。

一、研究思路

如何去根據(jù)我們的現(xiàn)狀，完成我們的設(shè)計(jì)提案，去協(xié)助我們解決問題實(shí)現(xiàn)我們的預(yù)期價(jià)值？首先我們根據(jù)之前定好的優(yōu)化目的提煉了整體設(shè)計(jì)目標(biāo)。

1. 設(shè)計(jì)目標(biāo)

通過加強(qiáng)邏輯與秩序，在易認(rèn)性和可讀性上優(yōu)化信息傳達(dá)和記憶質(zhì)量，最終給用戶打造0干擾的閱讀體驗(yàn)。

這里解釋下幾個(gè)概念：

• 易認(rèn)性：(Legibility)針對(duì)文字，能準(zhǔn)確無誤的讓讀者閱讀，不因?yàn)檫^于接近帶來困惑。
• 可讀性：(Readability)針對(duì)版式，閱讀的容易程度，文字的組合呈現(xiàn)。
• 0干擾：能將自己的設(shè)計(jì)不動(dòng)聲色的隱藏起來，不以設(shè)計(jì)本身分散人的注意力，達(dá)到閱讀的沉浸狀態(tài)。

好的，設(shè)計(jì)目標(biāo)確立后，我們來聊下設(shè)計(jì)研究框架，也就是我們優(yōu)化方案的整體思路。

2. 指導(dǎo)性設(shè)計(jì)框架

整體設(shè)計(jì)框架思路是以人為本。從用戶體驗(yàn)為開始，提煉影響沉浸閱讀的因素，結(jié)合成熟的版式研究理論，對(duì)細(xì)節(jié)進(jìn)行探索和新理論沉淀。

研究步驟

步驟解說：

聚焦用戶（用戶閱讀習(xí)慣探索，主要從人群和競(jìng)品方面研究）——明確目標(biāo)（什么叫沉浸閱讀，如何做到閱讀0干擾）——理論指導(dǎo)（成熟的版式理論推出屏幕理論，指導(dǎo)優(yōu)化）——細(xì)節(jié)修正（落地操作，沉淀）

二、用戶側(cè)研究

上一節(jié)內(nèi)容里，我們研究并確認(rèn)了設(shè)計(jì)框架，圈定了設(shè)計(jì)的范圍和方向，那么不多說，讓我們進(jìn)入第一部分的研究：用戶研究環(huán)節(jié)，來看看我們的用戶畫像是什么樣子？他們對(duì)新聞模塊閱讀不滿意的在哪些方面呢？

1. 用戶屬性和流失原因分析

首先我們來看幾張圖：

瀏覽器用戶人口屬性

選擇不同瀏覽器時(shí)考慮的因素排名

使用vivo瀏覽器的目的

相關(guān)結(jié)論：

• 瀏覽器用戶27～36歲占比較高，36歲以下占比高達(dá)78%，整體數(shù)據(jù)顯示用戶年齡偏向年輕化。
• 瀏覽器用戶最重要使用行為主要是搜索，其次是新聞。
• 新聞資訊是用戶選擇瀏覽器的前三考慮因素之一。

以上說明了新聞模塊對(duì)于vivo瀏覽器來說非常重要，我們服務(wù)的用戶很大一部分是中青年，對(duì)我們之后設(shè)計(jì)有指導(dǎo)性幫助，例如在默認(rèn)字號(hào)的選擇確定上。

那接下來讓我們來看一下流失用戶研究中都是哪些因素？

對(duì)新聞模塊不滿意原因（點(diǎn)擊查看大圖）

在流失用戶研究中，新聞模塊不滿意因素中，體驗(yàn)問題有一定的占比。

除去內(nèi)容本身的吐槽，其他體驗(yàn)問題主要集中為：觀感差，操作復(fù)雜，功能不好用。這幾項(xiàng)問題都側(cè)面反映出用戶在閱讀時(shí)候受到功能與視覺的打擾，導(dǎo)致了滿意度較不好的情況。

了解了用戶的基本情況以及流失用戶原因，我們來看下在如今時(shí)代里，基于用戶的閱讀習(xí)慣，怎么做才能減少不必要的打擾，達(dá)到沉浸的閱讀體驗(yàn)？

2. 用戶閱讀習(xí)慣（思考與研究如何做到0干擾）

1）提升閱讀瀏覽體驗(yàn)

首先，我們提一下沉浸閱讀這個(gè)概念。

用戶體驗(yàn)專家Alan Cooper在《About Face3》中描述，當(dāng)人們能夠在一個(gè)活動(dòng)上聚精會(huì)神時(shí)，他們會(huì)忘記外面的世界，忽略掉各種干擾。

用戶體驗(yàn)層次

用戶體驗(yàn)層次是一層一層遞進(jìn)的，從有用到可用再到易用，最后一步是友好，我們優(yōu)化追求的是達(dá)到最后的體驗(yàn)。從閱讀角度上來看，沉浸是讀者在閱讀時(shí)的一個(gè)最重要的狀態(tài)。

2）干擾因素細(xì)分

干擾我們沉浸閱讀的因素很多，我們的注意力總是被各種各樣的事物干擾，頻繁的打斷閱讀體驗(yàn)確實(shí)讓人惱怒。讓我們來看下影響我們沉浸閱讀的因素有哪些？

干擾閱讀的因素

上圖中我們對(duì)干擾閱讀的因素進(jìn)行了細(xì)分，一共三個(gè)大模塊：外界，自我，和文章本身，我們?cè)O(shè)計(jì)師能加以優(yōu)化的點(diǎn)都和文章本身相關(guān)(文字字號(hào)，字體，字間距，真實(shí)感，行距，段落間距，頁面材質(zhì)等）。

3）擬物體驗(yàn)需求升級(jí)

書籍產(chǎn)生的年代比電子產(chǎn)品早得多，如今書籍的版式規(guī)范，易用性已經(jīng)優(yōu)化得很完善。

模擬書本閱讀的產(chǎn)品也在這幾年非常流行，目前閱讀產(chǎn)品在界面設(shè)計(jì)上也在不斷貼合物理閱讀相關(guān)體驗(yàn)，比如模擬紙張顏色，墨水屏等。幾乎所有閱讀器產(chǎn)品都有改換背景的功能，這與讀者們追求與書本一致真實(shí)感的閱讀體驗(yàn)密切相關(guān)。

市面各類閱讀APP界面

以上的研究對(duì)我們接下來做的優(yōu)化設(shè)計(jì)起到指引性作用，那讓我們來看下具體的設(shè)計(jì)是如何展開的。

三、五項(xiàng)理論指導(dǎo)

聚焦用戶的習(xí)慣之后，我對(duì)閱讀要素：字號(hào)，字體，對(duì)齊，用色，留白規(guī)律分別進(jìn)行研究，結(jié)合各個(gè)相關(guān)理論沉淀出適合新聞閱讀的規(guī)范。

那就具體來看下每一個(gè)模塊。

1. 字號(hào)研究

一般來說，年齡較大的人群對(duì)大字體需求高于年輕人，閱讀器相關(guān)產(chǎn)品默認(rèn)字號(hào)基于年輕人喜好設(shè)定為中偏小的字號(hào)，同時(shí)也給功能進(jìn)行調(diào)整。因?yàn)殚喿x字號(hào)是個(gè)非常私人化的配置，所以加調(diào)整字號(hào)的功能是必備的。

提到字號(hào)使用方式，通常設(shè)計(jì)師會(huì)基于前人給的規(guī)范或者系統(tǒng)相關(guān)的基礎(chǔ)規(guī)范去做設(shè)計(jì)。但對(duì)于精細(xì)化研究，到底用什么字號(hào)我們需要有強(qiáng)有力的理論依據(jù)，版式設(shè)計(jì)早已自成體系，書本上文字的使用方法總結(jié)非常精細(xì)和科學(xué)，我們基于版式設(shè)計(jì)的成果對(duì)屏幕文字進(jìn)行研究。

人眼距離書本和手機(jī)物理距離

對(duì)于正常印刷品來說，我們?nèi)搜劬嚯x書本30~35cm，字號(hào)大小也應(yīng)該按照這個(gè)距離計(jì)算，太大太小都會(huì)影響閱讀。版式規(guī)范里8～12點(diǎn)是最適合書籍，正文的字號(hào)（1點(diǎn)=0.376毫米，也就是3～4.5mm）。

人眼離手機(jī)距離也差不多30cm，手持手機(jī)比書本放桌上要離眼睛會(huì)近5cm左右，并且更多人由于習(xí)慣問題，會(huì)拿近一些。

1）計(jì)算公式（標(biāo)題和正文）

以正文字號(hào)探索，物理尺寸轉(zhuǎn)化到手機(jī)上（實(shí)際尺寸(英寸)=像素/分辨率；1英寸=2.54厘米；如一張圖片寬為600像素，分辨率為300，那么實(shí)際打印寬度為：600/300=2英寸，約為5厘米）。

基于我們?cè)O(shè)計(jì)文件尺寸規(guī)范和分辨率，我們得到字號(hào)的范圍如下圖（字號(hào)為3的倍數(shù)）：

最適合標(biāo)題的字號(hào)（72px～93px）

最適合的正文字號(hào)（48px～72px）

得到了最貼近閱讀習(xí)慣的字號(hào)范圍（其實(shí)還是挺寬泛的）如何去縮小這個(gè)數(shù)值，最終確定一個(gè)合適的字號(hào)呢？接下來我們?cè)黾恿藢?duì)競(jìng)品研究的模塊，也就是目標(biāo)用戶目前習(xí)慣的研究。

正文和標(biāo)題的競(jìng)品字號(hào)情況：

正文：大部分閱讀器APP字號(hào)比新聞資訊類APP大一些，資訊類字號(hào)選在51最為合適，54也可以考慮。

標(biāo)題：大部分新聞?lì)愔鳂?biāo)題文字選用69，72px，但69號(hào)字在版式中稍微偏離規(guī)范。就標(biāo)題大小來說，大部分閱讀器APP字號(hào)比新聞資訊類APP大一些。

結(jié)合產(chǎn)品本身功能，需要敲定的字號(hào)有主標(biāo)題，二級(jí)標(biāo)題，正文三個(gè)。

為了明顯讓用戶感知到字號(hào)差異帶來的文字功能差異，加快識(shí)別反應(yīng)速度，三個(gè)功能各字號(hào)不能過于接近。最終定義為大標(biāo)題72px，二級(jí)標(biāo)題60px，正文51px，且標(biāo)題加粗顯示（如下圖）。

2. 字體研究

說完字號(hào)我們來說下字體，字體是組成文章的基礎(chǔ)元素，也是我們模塊的DNA，字體的優(yōu)化是我們提案關(guān)鍵的一部分。

字體選擇上，我們對(duì)比了幾十種字體，從識(shí)別度為出發(fā)點(diǎn)去考慮，最終選定華康金剛黑作為我們新的字體代替原來的系統(tǒng)字體漢儀旗黑。

讓我們來看下新字體的優(yōu)勢(shì)：

新舊字體比對(duì)

• 漢儀旗黑（舊字體）：字形扁正，轉(zhuǎn)折處復(fù)雜。存在問題：扁正的字體缺少精神氣,轉(zhuǎn)折處復(fù)雜會(huì)影響單個(gè)字體的理解速度，降低整篇文章的閱讀速度。
• 華康金剛黑（新字體）：偏瘦，結(jié)構(gòu)簡(jiǎn)單的華康金剛黑。結(jié)構(gòu)簡(jiǎn)單，方正挺拔，粗細(xì)均勻。更適合閱讀和提升閱讀效率。

細(xì)節(jié)上：

華康金剛黑：頓，提，略微有弧度，符合漢字最基礎(chǔ)的筆畫樣式顯得字體生動(dòng)，不死板。

每一筆畫都有該文字的特征，例如“寒”字里的井，“峰”字里的豐，每一橫長(zhǎng)度都不一致，而漢儀旗黑過于統(tǒng)一，讓每個(gè)字形一眼看上去非常接近，過于平均，單個(gè)字體的識(shí)別度受到影響。

華康金剛黑字體在單個(gè)文字識(shí)別度上優(yōu)于漢儀旗黑。

灰度數(shù)據(jù)分析（點(diǎn)擊查看大圖）

報(bào)告里看出在較短時(shí)間的灰度測(cè)試中僅僅字體變化，其他都不改變，關(guān)鍵業(yè)務(wù)指標(biāo)都有正向提升：人均啟動(dòng)次數(shù)，人均新聞點(diǎn)擊，人均時(shí)長(zhǎng)，廣告點(diǎn)擊等都有正向數(shù)據(jù)提升。

所以我們選擇了用華康金剛黑作為我們新聞閱讀的默認(rèn)字體。

3. 對(duì)齊方式研究

研究完字體，段落里文字對(duì)齊的研究也很重要。

文字對(duì)齊方式有：左對(duì)齊，右對(duì)齊，左右對(duì)齊，居中對(duì)齊這幾種，大段落文字閱讀右對(duì)齊或者居中對(duì)齊幾乎沒有，所以這里我們對(duì)比左對(duì)齊和左右對(duì)齊的優(yōu)劣。

兩種對(duì)齊方式

來看下優(yōu)劣對(duì)比：

左右對(duì)齊的優(yōu)勢(shì)較多，主要體現(xiàn)在視覺感受舒服（規(guī)規(guī)整整的版式），更主要是眼睛在固定位置換行，在易讀性上做得比較好。

缺點(diǎn)也是有的，文章存在2種字間距，而左對(duì)齊優(yōu)勢(shì)在于只有一個(gè)固定字間距。

好在新聞閱讀文章長(zhǎng)度并沒有特別長(zhǎng)，篇幅受限，影響也就不會(huì)擴(kuò)大，且2個(gè)間距尺寸也是在可接受范圍里。

綜上對(duì)比，我們認(rèn)為左右對(duì)齊的版式在新聞?lì)愰喿x里，是明顯優(yōu)于左對(duì)齊版式。

4. 色彩研究

越來越多閱讀器模擬真實(shí)閱讀環(huán)境，屏幕的亮度對(duì)眼睛的傷害受到越來越多的重視，尋求一種沉浸的體驗(yàn)在各行各業(yè)都受到關(guān)注，比如之前火起來的暗黑模式。

本次探索主要從黑白灰的關(guān)系角度出發(fā)，意在打造一個(gè)沉浸的色感體驗(yàn)。

現(xiàn)狀到思路

通過研究思路，我們沉淀3方面的調(diào)整：

1. 頁面底色：模擬紙質(zhì)，用弱灰色。不做顏色傾向主要考慮用戶對(duì)大面偏色喜好度不同，新聞?lì)愰喿x盡可能避開這類情感化問題。
2. 文字沉浸：用色方式上再做考究，降低顏色飽和，解決文字黑色塊的視覺干擾。文字做透明度來模擬沉浸效果。
3. 減少其他色塊面積：預(yù)防閱讀過程被特殊色彩干擾，刪除頁面多余色彩。

優(yōu)化后樣式沉浸感提升

5. 頁面版式留白探索（行間距，段落間距等）

看完色彩研究，我們來看一下版式。行間距是決定版面中的欄寬是否具有閱讀性的重要因素。

許多平面大師都非常注重行距，段落間距的設(shè)置。過窄與過寬的行距會(huì)有意識(shí)或無意識(shí)的讓讀者困惑，造成某種心理障礙。

行距過大會(huì)打破文本連續(xù)性，每一行會(huì)被孤立，缺乏緊湊感，會(huì)降慢閱讀速度。行距太小會(huì)讓頁面灰度過重，讀者眼睛承受過多的負(fù)擔(dān)，無法集中閱讀單獨(dú)一行，時(shí)間久了會(huì)增加疲勞感。

1）引入概念—「垂直韻律」

「垂直韻律」是閱讀節(jié)奏感的重中之重，打造一切視覺閱讀節(jié)奏。行距，是垂直韻律的基礎(chǔ)屬性（同版式中的網(wǎng)格概念接近）。

行距概念

版式規(guī)范中，中文漢字1.5～2倍的行距是最為適合的。整體來說，字號(hào)越小，行間距應(yīng)該相對(duì)越大，反之亦然。

51號(hào)正文在之前探討的（48～72）字號(hào)里偏小，這里適當(dāng)增加行間距和段落間距可以優(yōu)化閱讀體驗(yàn)。多次比對(duì)后，我們決定正文部分采用1.65倍行距來設(shè)計(jì)。

在多次比對(duì)后，確定1.65倍行距最符合各項(xiàng)指標(biāo)行距確定完后，基礎(chǔ)間距就有了數(shù)值a，之后頁面相關(guān)的元素縱向之間間距都依賴這個(gè)數(shù)值（a的n倍）。

操作規(guī)范

倍數(shù)間距的引用，整體頁面來看，所有的留白都有規(guī)律可循，形成自己的韻律感。

這么做的好處就是用戶對(duì)規(guī)律間隔的理解度更高，有節(jié)奏的留白除了滿足了它本身需要的功能屬性，用戶閱讀過程中不容易受到來自間隔過多的干擾，這樣易讀性就提升了。

來看下我們版式頁面樣子，自帶韻律感~

最后來看下細(xì)節(jié)指導(dǎo)，也就是操作規(guī)范：

以上就是vivo瀏覽器新聞閱讀優(yōu)化設(shè)計(jì)的全部?jī)?nèi)容，對(duì)文章感興趣或者有自己看法的小伙伴們，歡迎留言和我一起探討。

?

作者：謝寶樹，微信公眾號(hào)：VMIC UED

本文由 @VMIC UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Pexles，基于 CC0 協(xié)議