2023年vivo瀏覽器新聞閱讀的優(yōu)化設(shè)計

vivo瀏覽器新聞閱讀的優(yōu)化設(shè)計新聞閱讀是我們生活中息息相關(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è)，能夠曝光更多的資訊和廣告。討論步驟

步驟解說：

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

掃瞄器用戶人口屬性

選擇不同掃瞄器時考慮的因素排名

使用vivo掃瞄器的目的

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

掃瞄器用戶27～36歲占比較高，36歲以下占比高達78%，整體數(shù)據(jù)顯示用戶年齡偏向年輕化。掃瞄器用戶最重要使用行為主要是搜尋，其次是新聞。新聞資訊是用戶選擇掃瞄器的前三考慮因素之一。以上說明白新聞模塊對于vivo掃瞄器來說特別重要，我們服務(wù)的用戶很大一部分是中青年，對我們之后設(shè)計有指導(dǎo)性關(guān)心，例如在默認字號的選擇確定上。

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

對新聞模塊不滿足緣由（點擊查看大圖）

在流失用戶討論中，新聞模塊不滿足因素中，體驗問題有肯定的占比。

除去內(nèi)容本身的吐槽，其他體驗問題主要集中為：觀感差，操作簡單，功能不好用。這幾項問題都側(cè)面反映出用戶在閱讀時候受到功能與視覺的打攪，導(dǎo)致了滿足度較不好的狀況。

了解了用戶的基本狀況以及流失用戶緣由，我們來看下在如今時代里，基于用戶的閱讀習(xí)慣，怎么做才能削減不必要的打攪，達到沉醉的閱讀體驗？

用戶體驗層次

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

2）干擾因素細分

干擾我們沉醉閱讀的因素許多，我們的留意力總是被各種各樣的事物干擾，頻繁的打斷閱讀體驗的確讓人憤怒。讓我們來看下影響我們沉醉閱讀的因素有哪些？

干擾閱讀的因素

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

3）擬物體驗需求升級

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

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

市面各類閱讀APP界面

以上的討論對我們接下來做的優(yōu)化設(shè)計起到指引性作用，那讓我們來看下詳細的設(shè)計是如何綻開的。

人眼距離書本和手機物理距離

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

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

1）計算公式（標題和正文）

以正文字號探究，物理尺寸轉(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，且標題加粗顯示（如下圖）。

新舊字體比對

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

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

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

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

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

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

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

兩種對齊方式

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

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

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

好在新聞閱讀文章長度并沒有特殊長，篇幅受限，影響也就不會擴大，且2個間距尺寸也是在可接受范圍里。

綜上對比，我們認為左右對齊的版式在新聞類閱讀里，是明顯優(yōu)于左對齊版式。

現(xiàn)狀到思路

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

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

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

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

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

行距概念

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

51號正文在之前探討的（48～72）字號里偏小，這里適當增加行間距和段落間距可以優(yōu)化閱讀體驗。多次比對后，我們打算正文部分采納1.65倍行距來設(shè)計。

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

操作規(guī)范

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

這么做的好處就是用戶對規(guī)律間隔的理解度