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