建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

0 評(píng)論 4618 瀏覽 29 收藏 9 分鐘

現(xiàn)在,每位用戶幾乎都需要接收大量的信息,這個(gè)時(shí)候,產(chǎn)品要如何做好內(nèi)容建設(shè),給用戶提供良好的瀏覽和閱讀體驗(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)的汽車信息服務(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大步驟逐一擊破。

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

二、痛點(diǎn)分析

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

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

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

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

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(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種類型。

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

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

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

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

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

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

面對(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)較好。

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

2)視覺降噪,建立專注的瀏覽環(huán)境

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

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

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ù),吸引用戶瀏覽。

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

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

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

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

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

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

1)口碑詳情,上線后數(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à)值。

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

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)的提升。

建設(shè)舒適的瀏覽體驗(yàn),設(shè)計(jì)可以做什么?

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

四、寫在最后

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

作者:MEUX

來(lái)源公眾號(hào):百度MEUX(ID:baidumeux),百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心,負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。

本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權(quán)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!