新聞型產(chǎn)品列表設(shè)計(jì)分析

3 評(píng)論 19664 瀏覽 31 收藏 6 分鐘

有天下班,我和公司另外兩個(gè)產(chǎn)品在閑聊,你知道,產(chǎn)品嘛總會(huì)吐槽A公司又有新動(dòng)作,B公司又出新產(chǎn)品,吐槽產(chǎn)品C體驗(yàn)糟糕···,這天,我們聊的是內(nèi)容型產(chǎn)品的體驗(yàn)問題。

內(nèi)容型產(chǎn)品的核心競爭力一定是內(nèi)容,比如我們普遍認(rèn)為QQ音樂的播放體驗(yàn)優(yōu)于網(wǎng)易云音樂,但網(wǎng)易云音樂勝在歌曲豐富,所以體驗(yàn)上的瑕疵也是可以接受的。但是作為需要消耗大量時(shí)間的app來說,好的體驗(yàn)確實(shí)能夠增加舒適度,讓你不會(huì)覺得特別“累”,從而增加消費(fèi)時(shí)長。

問題發(fā)現(xiàn)

首先我們發(fā)現(xiàn)的是微信,同一個(gè)app不同層級(jí)的產(chǎn)品設(shè)計(jì)存在差異,聊天主界面→訂閱列表,均是圖片+文字的形式,而到了內(nèi)容展示頁面,變成了文字+圖片,為什么會(huì)這樣?

然后我們又找了內(nèi)容型app的兩個(gè)同類產(chǎn)品,網(wǎng)易新聞和今日頭條,發(fā)現(xiàn)是兩種相反的設(shè)計(jì),那么那種方式更好呢?

sdfsqfe134

問題分析

從元素和用戶兩個(gè)角度分析:

1、元素的感知程度

可視化元素的感知程度排序:動(dòng)畫>圖片>文字,這也是PC上很多小網(wǎng)站放滿動(dòng)畫廣告的原因,它太能吸引大家的注意力了。具體到手機(jī)上,圖片比文字更能吸引大家的眼球。

同時(shí),圖片包含的信息量更大,易讀性更高。

從這個(gè)角度來說,圖片應(yīng)該至于文字前方,主要目的是快速獲取你的注意力,并傳遞宏觀信息,關(guān)注繼續(xù)閱讀,否則直接跳過。

2、人類的閱讀習(xí)慣

正常情況下,人類的閱讀習(xí)慣是從左到右,從上往下(為何古書從右到左?有興趣的看官可以自行了解)。所以在網(wǎng)頁時(shí)代,人類的眼球熱力圖是“F”型。

在小屏終端時(shí)代,個(gè)人覺得“F型”不太實(shí)用,我個(gè)人更傾向于優(yōu)先關(guān)注屏幕中央。未找到移動(dòng)端的相關(guān)分析報(bào)告,但這不影響我們分析問題。

eqwe123

(圖片來源于網(wǎng)絡(luò))

同時(shí),要注意的是,眼睛的閱讀速度快于大腦的分析速度,也就是當(dāng)你在閱讀內(nèi)容的時(shí)候,眼睛(余光)要提前去看下文才能保證閱讀的快速性和內(nèi)容的連貫性。

當(dāng)你在快速閱讀文字的時(shí)候,你肯定不希望突然出現(xiàn)了一張圖片,你需要停下來,大腦從“文字解析方式”切換到“圖片解析方式“”,造成閱讀的卡殼。這樣看來,文字應(yīng)該在圖片后方,你可以略過圖片,一馬平川的閱讀文字。

優(yōu)化方案

綜上,圖片+文字似乎是更合理的排版方式,以新聞?lì)惍a(chǎn)品為例,可以嘗試從以下角度優(yōu)化:

wqrewfq123

1、框架=圖片+標(biāo)題+摘要

圖片盡量貼近內(nèi)容,標(biāo)題清晰,一句話說明問題,摘要簡潔,對(duì)標(biāo)題合理補(bǔ)充。

2、合理展示相關(guān)信息

網(wǎng)易通過評(píng)論來吸引用戶,今日頭條需要在列表說明內(nèi)容來源,新聞講究時(shí)效性,合理的時(shí)間說明能夠幫助用戶快速篩選信息。來源、時(shí)間和評(píng)論數(shù)可能是需要在列表中標(biāo)明的元素,可以合理排版展示。

那么微信公眾賬號(hào)內(nèi)容頁為何會(huì)以文字+圖片的形式展示呢?我的猜測是微信公眾賬號(hào)的編輯者是個(gè)人,在配圖方面并不專業(yè),比如我有時(shí)配圖特別意識(shí)流,僅從圖片很難揣摩出作者的真正意思,因此微信優(yōu)先展示了文字。

看吧,我們常犯的錯(cuò)誤:當(dāng)一個(gè)產(chǎn)品成功之后,無論它的功能或設(shè)計(jì)是否合理,我們總是會(huì)不由自主的給它找一個(gè)合理的理由來證明他的偉大?;蛟S,它這里的設(shè)計(jì)確實(shí)不合理。

#專欄作家#

無邪,微信公眾賬號(hào):devillnote,人人都是產(chǎn)品經(jīng)理專欄作家,迅雷產(chǎn)品經(jīng)理。關(guān)注移動(dòng)互聯(lián)網(wǎng),聚焦產(chǎn)品策劃、運(yùn)營和用戶分析。文章不追熱點(diǎn),以產(chǎn)品經(jīng)理相關(guān)為主。

轉(zhuǎn)載請(qǐng)保留上述作者信息并附帶本文鏈接

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 內(nèi)容型產(chǎn)品列表設(shè)計(jì)總結(jié):
    根據(jù)具體業(yè)務(wù)選擇對(duì)應(yīng)設(shè)計(jì):
    1、當(dāng)內(nèi)容圖片能體現(xiàn)內(nèi)容時(shí):圖片+內(nèi)容形式;
    2、當(dāng)內(nèi)容圖片不一定體現(xiàn)內(nèi)容時(shí):內(nèi)容+圖片形式;

    來自廣東 回復(fù)
  2. “我們普遍認(rèn)為QQ音樂的播放體驗(yàn)優(yōu)于網(wǎng)易云音樂,但網(wǎng)易云音樂勝在歌曲豐富”,這句話說反了吧 ?? 。。。

    來自北京 回復(fù)
  3. 如果突然有一篇新聞并沒有配圖,那界面就不整齊了???

    來自北京 回復(fù)