現(xiàn)在，每位用戶(hù)幾乎都需要接收大量的信息，這個(gè)時(shí)候，產(chǎn)品要如何做好內(nèi)容建設(shè)，給用戶(hù)提供良好的瀏覽和閱讀體驗(yàn)?zāi)兀勘酒恼吕?，作者結(jié)合實(shí)際案例，總結(jié)了閱讀體驗(yàn)升級(jí)的相關(guān)經(jīng)驗(yàn)和看法，一起來(lái)看看吧，或許會(huì)對(duì)你有所啟發(fā)。

在這內(nèi)容為王的時(shí)代，海量的圖文資訊信息充斥在我們的碎片化時(shí)間中，有駕作為百度生態(tài)體系內(nèi)的汽車(chē)信息服務(wù)平臺(tái)，內(nèi)容建設(shè)尤為重要。那么設(shè)計(jì)有哪些手段為內(nèi)容建設(shè)助力呢？接下來(lái)，我們依據(jù)閱讀體驗(yàn)升級(jí)的設(shè)計(jì)經(jīng)驗(yàn)，從目標(biāo)拆解、痛點(diǎn)分析、設(shè)計(jì)打法等維度來(lái)分享設(shè)計(jì)思路。

一、設(shè)計(jì)目標(biāo)

通過(guò)現(xiàn)狀分析發(fā)現(xiàn)，對(duì)于業(yè)務(wù)而言，產(chǎn)品發(fā)展到了深耕細(xì)節(jié)體驗(yàn)階段，建設(shè)一個(gè)舒適的內(nèi)容瀏覽體驗(yàn)，成為當(dāng)前重要設(shè)計(jì)目標(biāo)。設(shè)計(jì)可從痛點(diǎn)分析、設(shè)計(jì)打法、指標(biāo)驗(yàn)證這3大步驟逐一擊破。

二、痛點(diǎn)分析

口碑詳情作為有駕最典型的內(nèi)容場(chǎng)景，初步搭建上線(xiàn)后，長(zhǎng)期未更新優(yōu)化，閱讀體驗(yàn)不佳，影響用戶(hù)的閱讀效率和舒適度。閱讀體驗(yàn)較好的競(jìng)品，用戶(hù)則能夠流暢的閱讀整篇文章。經(jīng)過(guò)現(xiàn)狀的梳理分析發(fā)現(xiàn)，口碑詳情問(wèn)題集中表現(xiàn)為信息密集瀏覽易疲勞、元素干擾瀏覽易中斷、結(jié)構(gòu)混亂瀏覽不連貫。

三、設(shè)計(jì)打法

針對(duì)設(shè)計(jì)目標(biāo)和用戶(hù)痛點(diǎn)，逐步拆解、梳理、發(fā)散，循序漸進(jìn)的推導(dǎo)出口碑詳情頁(yè)的設(shè)計(jì)方案，沉淀經(jīng)驗(yàn)，橫向賦能全部?jī)?nèi)容性場(chǎng)景的閱讀體驗(yàn)升級(jí)。

1. 痛點(diǎn)拆解，定位影響因素

如何打造舒適的內(nèi)容瀏覽體驗(yàn)？首先是剖析問(wèn)題現(xiàn)狀，找準(zhǔn)痛點(diǎn)影響因素，依據(jù)分析，助力設(shè)計(jì)方案探索。

一款产品无到有，产品经理需要做些什么？

在一个产品从无到有的过程中，要做好产品经理这个角色实在是不容易，除了大家都知道的写需求、写需求、写需求，要做的事多着呢。产品经理不是你眼中的只会找你麻烦，提要求..

查看详情 >

1）痛點(diǎn)拆解

閱讀體驗(yàn)影響元素可拆解為行距、字號(hào)、段距、ICON等11個(gè)元素，這些元素相互關(guān)聯(lián)相互影響，側(cè)重不同。依據(jù)痛點(diǎn)方向可梳理為文本、圖形、結(jié)構(gòu)3種類(lèi)型。

2）優(yōu)先級(jí)定位

在眾多元素中，哪些重要哪些不重要，決定后續(xù)設(shè)計(jì)方向。眼動(dòng)實(shí)驗(yàn)結(jié)論表明 “行距比字號(hào)對(duì)文字排版影響更大”。在眼動(dòng)數(shù)據(jù)中，受到行距變化的影響較為明顯，而字號(hào)的變化對(duì)用戶(hù)的眼動(dòng)影響較小。那么，針對(duì)行距的設(shè)計(jì)探索將成為后續(xù)的重點(diǎn)研究方向。

2. 方案探索，構(gòu)建沉浸閱讀體驗(yàn)

1）文本信息層次調(diào)優(yōu)，打造舒適的瀏覽動(dòng)線(xiàn)

面對(duì)文本信息密集導(dǎo)致瀏覽易疲勞的問(wèn)題。我們選取了7款主流的內(nèi)容型產(chǎn)品，針對(duì)字號(hào)行距、字重段距按照四個(gè)象限劃分。發(fā)現(xiàn)內(nèi)容型產(chǎn)品的文本信息排版節(jié)奏（規(guī)律）主要集中在B象限，即圖文詳情字號(hào)57px，字重常規(guī)，行距1.7倍，段距集中在2.7—3.3倍?？沙醪脚袛?，在此區(qū)間的信息層次閱讀體驗(yàn)較好。

2）視覺(jué)降噪，建立專(zhuān)注的瀏覽環(huán)境

面對(duì)圖形信息設(shè)計(jì)語(yǔ)言不一致導(dǎo)致瀏覽受到干擾的問(wèn)題。通過(guò)元素整理收斂，統(tǒng)一ICON風(fēng)格、文字顏色、刪減表情和符號(hào)元素，建立統(tǒng)一的視覺(jué)語(yǔ)言。

3）結(jié)構(gòu)收斂，結(jié)合輕運(yùn)營(yíng)設(shè)計(jì)，營(yíng)造流暢的瀏覽視效

面對(duì)版式結(jié)構(gòu)混亂導(dǎo)致瀏覽不連貫的問(wèn)題。經(jīng)過(guò)結(jié)構(gòu)整理收斂，統(tǒng)一段落標(biāo)題樣式、去掉段落縮進(jìn)、去掉標(biāo)題。融入亮點(diǎn)設(shè)計(jì)方案，結(jié)合輕運(yùn)營(yíng)設(shè)計(jì)和評(píng)分?jǐn)?shù)據(jù)，吸引用戶(hù)瀏覽。

3. 方案產(chǎn)出，經(jīng)用戶(hù)調(diào)研篩選最終方案

為了初步驗(yàn)證方案的合理性，設(shè)計(jì)依據(jù)三個(gè)方向產(chǎn)出設(shè)計(jì)方案，通過(guò)用戶(hù)采訪，驗(yàn)證最符合目標(biāo)的設(shè)計(jì)方案。

1. 降噪+結(jié)構(gòu)收斂方案：降噪+結(jié)構(gòu)收斂方案瀏覽更順暢，完成瀏覽速度更快。
2. 字號(hào)方案：字號(hào)54px、行距1.7倍方案，完讀率最高，用戶(hù)反饋瀏覽更舒適。
3. 段間距方案：段間距2.9倍時(shí)，瀏覽中斷最少。

4. 場(chǎng)景拓展，橫向賦能

1）口碑詳情，上線(xiàn)后數(shù)據(jù)實(shí)現(xiàn)超預(yù)期漲幅，具備橫向賦能價(jià)值

單篇口碑人均消費(fèi)時(shí)長(zhǎng)：+102.9%人均完讀率：+78.4%，數(shù)據(jù)實(shí)現(xiàn)超預(yù)期大幅增長(zhǎng)，表明閱讀體驗(yàn)升級(jí)設(shè)計(jì)方案有一定的助力作用，具備橫向拓展賦能的價(jià)值。

2）橫向拓展全內(nèi)容場(chǎng)景，數(shù)據(jù)均正向增長(zhǎng)

復(fù)利APP口碑詳情的成功經(jīng)驗(yàn)，橫向賦能APP及小程序端各內(nèi)容場(chǎng)景，數(shù)據(jù)均正向增長(zhǎng)，助力多場(chǎng)景閱讀體驗(yàn)的提升。

本次的閱讀體驗(yàn)升級(jí)設(shè)計(jì)方案，通過(guò)對(duì)全局思考和細(xì)節(jié)深耕，使用信息層次調(diào)優(yōu)、視覺(jué)降噪、結(jié)構(gòu)收斂等設(shè)計(jì)手段，打造舒適的瀏覽視覺(jué)動(dòng)線(xiàn)、建立專(zhuān)注連貫的瀏覽環(huán)境，橫向賦能全內(nèi)容場(chǎng)景，提升閱讀體驗(yàn)，助力內(nèi)容場(chǎng)景建設(shè)。

四、寫(xiě)在最后

我們對(duì)內(nèi)容場(chǎng)景的設(shè)計(jì)還在不斷的探索和實(shí)踐。伴隨著時(shí)代發(fā)展變化，用戶(hù)需求和行為習(xí)慣也在轉(zhuǎn)變，對(duì)于體驗(yàn)設(shè)計(jì)而言，必須保持敏感度，用設(shè)計(jì)給用戶(hù)帶來(lái)更舒適、更高效的使用體驗(yàn)。