百度智能小程序 流落地頁(yè)體驗(yàn)

2020-08-28 15:57 更新

如何提升信息流落地頁(yè)體驗(yàn)

如何提升信息流落地頁(yè)體驗(yàn)

信息流是小程序獲取流量、凸顯內(nèi)容差異化價(jià)值的重要渠道,智能小程序官方針對(duì)信息流落地頁(yè)的主流呈現(xiàn)形式,提供了豐富詳盡的體驗(yàn)指引。

遵循體驗(yàn)指引提升小程序信息流落地頁(yè)體驗(yàn),小程序可達(dá)成以下目標(biāo):

  • 提升用戶(hù)體驗(yàn): 實(shí)驗(yàn)證明,用戶(hù)在信息流連續(xù)瀏覽時(shí),閱讀到小程序落地頁(yè)內(nèi)容時(shí)跳出感普遍強(qiáng)烈,心理上會(huì)產(chǎn)生不安全感。依據(jù)本文體驗(yàn)指引規(guī)范小程序在信息流落地頁(yè)的樣式,有助于降低用戶(hù)瀏覽信息時(shí)的跳出感,獲得更加流暢一致的瀏覽體驗(yàn),從而促進(jìn)閱讀時(shí)長(zhǎng)增長(zhǎng)。
  • 獲得更多流量: 符合智能小程序信息流落地頁(yè)體驗(yàn)規(guī)范的開(kāi)發(fā)者,有機(jī)會(huì)在信息流中獲得更好的分發(fā)和流量。

一、長(zhǎng)圖文落地頁(yè)

長(zhǎng)圖文類(lèi)型小程序落地頁(yè)是在信息流分發(fā)中最常見(jiàn)的資源類(lèi)型,長(zhǎng)圖文類(lèi)型小程序落地頁(yè)在信息流分發(fā)中具體體驗(yàn)規(guī)范如下:

1. 整體框架結(jié)構(gòu)規(guī)范

圖文落地頁(yè)建議按照如圖結(jié)構(gòu)布局,符合用戶(hù)對(duì)信息流圖文落地頁(yè)文章的結(jié)構(gòu)和認(rèn)知,降低跳出感。頁(yè)面從上至下是一個(gè)固定的結(jié)構(gòu),模塊位置是不可以變更的,除了固定的框架、標(biāo)題、來(lái)源和正文是必不可少的,其他部分模塊可根據(jù)實(shí)際情況進(jìn)行進(jìn)行插拔。


2. 頂部框架內(nèi)容規(guī)范

框架選擇: 建議使用默認(rèn)白色框架??蚣軜?biāo)題: 展示小程序名稱(chēng)。字?jǐn)?shù)限制: 標(biāo)題文字不超過(guò)8個(gè)字, 否則會(huì)截?cái)囡@示,影響用戶(hù)閱讀。

正確

標(biāo)題字?jǐn)?shù)合理,小程序名稱(chēng)一目了然。

注意

標(biāo)題字?jǐn)?shù)過(guò)長(zhǎng),截?cái)鄬?dǎo)致信息丟失,容易困惑。

3. 正文內(nèi)容區(qū)規(guī)范

3.1.正文標(biāo)題: 正文內(nèi)容區(qū)規(guī)范 字號(hào)72px,行距36px,中粗體。

3.1.正文標(biāo)題: 正文內(nèi)容區(qū)規(guī)范 字號(hào)72px,行距36px,中粗體。

3.2.信息來(lái)源: 作者頭像大小105x105px;名稱(chēng)字號(hào)48px,字色#000000;發(fā)布時(shí)間等輔助信息字號(hào)36px,字色#999999。

3.3.正文文字: 字號(hào)57px,行距33px,中粗體。

3.4.圖片樣式: 圖片通欄展示,寬度=屏幕寬度,高度根據(jù)寬度自適應(yīng)。

3.5.頁(yè)邊距: 文字距離兩邊51px,圖片距離兩邊0px。

3.6.模塊間距: 正文段落之間108p,正文與圖片間距90px,圖片與圖片間距60px。

4. 相關(guān)推薦區(qū)規(guī)范

排版樣式: 左文右圖列表樣式,圖片比例為3:2。列表文字: 列表標(biāo)題字號(hào)57px,字色#000000;輔助信息字號(hào)36px,字色#999999。

為了降低開(kāi)發(fā)成本,小程序官方提供“page-feed 信息流模板”,包含左文右圖樣式,開(kāi)發(fā)者可以快速調(diào)用該通用模板。(查看開(kāi)發(fā)文檔)

5. 評(píng)論區(qū)和互動(dòng)區(qū)

圖文類(lèi)小程序落地頁(yè)建議開(kāi)發(fā)者設(shè)置評(píng)論區(qū),便于用戶(hù)獲取更多信息;在用戶(hù)實(shí)驗(yàn)中,缺少評(píng)論區(qū)用戶(hù)接受度低。

小程序官方提供一站式互動(dòng)組件,包含互動(dòng)bar能力、評(píng)論列表&評(píng)論詳情落地頁(yè)能力以及數(shù)據(jù)存儲(chǔ)能力,開(kāi)發(fā)者可以快速接入。(查看開(kāi)發(fā)文檔)

6. 廣告區(qū)規(guī)范

可以在小程序長(zhǎng)圖文類(lèi)資源落地頁(yè)的文章末尾和相關(guān)推薦區(qū)插入廣告,廣告需要與正文內(nèi)容有如圖標(biāo)注的明顯分割;推薦區(qū)廣告樣式建議與推薦列表樣式對(duì)齊。

前往查看小程序信息流詳細(xì)廣告規(guī)范(信息流落地頁(yè)體驗(yàn)-廣告)

7.小程序長(zhǎng)圖文類(lèi)落地頁(yè)多維供給體系

為了降低開(kāi)發(fā)成本,除了規(guī)范文檔外,我們也為開(kāi)發(fā)者提供以下工具,助力小程序落地頁(yè)體驗(yàn)的提升。各種工具能力對(duì)比可參考以下圖表:

能力 一、規(guī)范文檔 二、圖文詳情頁(yè)模板 三、信息流統(tǒng)一模板 四、發(fā)文工具
開(kāi)發(fā)方式 手動(dòng)
閱讀文檔進(jìn)行開(kāi)發(fā)
半自動(dòng)
使用開(kāi)發(fā)者工具快速調(diào)用
全自動(dòng)
授權(quán)配置,內(nèi)容轉(zhuǎn)化
全自動(dòng)
內(nèi)容管理平臺(tái)編輯后發(fā)布
開(kāi)發(fā)成本
需要使用代碼編輯

可以直接調(diào)用代碼

不需要通過(guò)代碼

不需要通過(guò)代碼
定制能力
符合基礎(chǔ)體驗(yàn)規(guī)范后,
可進(jìn)行自定義

各模塊參數(shù)已基本配置好,
自定義需要修改代碼

統(tǒng)一模板內(nèi)部,
已封裝好各項(xiàng)參數(shù)和配置

編輯器中,
已封裝好各項(xiàng)參數(shù)和配置
使用門(mén)檻 無(wú)門(mén)檻 無(wú)門(mén)檻 無(wú)門(mén)檻,全流量開(kāi)放 質(zhì)量達(dá)到要求后開(kāi)放該能力


二、圖文詳情頁(yè)模板開(kāi)發(fā)者可以在開(kāi)發(fā)者工具中的歡迎頁(yè),選擇圖文詳情頁(yè)模板,模板中內(nèi)置了符合信息流落地頁(yè)體驗(yàn)的各種樣式內(nèi)容,可以快速生產(chǎn)符合體驗(yàn)的落地頁(yè)文章。查看模板


三、信息流統(tǒng)一模板:開(kāi)發(fā)者可以通過(guò)在開(kāi)發(fā)者平臺(tái)進(jìn)行授權(quán)配置,配置生成百度規(guī)范化模板,呈現(xiàn)出符合體驗(yàn)的落地頁(yè)文章。查看模板



四、發(fā)文工具:內(nèi)容管理模塊提供一種全新的運(yùn)營(yíng)方式,支持開(kāi)發(fā)者在百度域內(nèi)運(yùn)營(yíng)自己的粉絲用戶(hù)和潛在用戶(hù)。開(kāi)發(fā)者可以通過(guò)開(kāi)發(fā)者平臺(tái),在運(yùn)用中心-內(nèi)容管理新建群發(fā)消息,生成的圖文內(nèi)容符合信息流體驗(yàn)一致性,并且信息流會(huì)給予高權(quán)重分發(fā)。該能力有一定的準(zhǔn)入要求,具體可查看模板。


以上介紹的生產(chǎn)優(yōu)質(zhì)體驗(yàn)的信息流落地頁(yè)方式,開(kāi)發(fā)者可以根據(jù)實(shí)際需求選擇最合適的開(kāi)發(fā)方式。

二、視頻落地頁(yè)

視頻類(lèi)型小程序落地頁(yè)在信息流中的分發(fā)體驗(yàn)規(guī)范具體如下:

1. 整體框架結(jié)構(gòu)規(guī)范

視頻建議按照如右圖結(jié)構(gòu)布局,符合用戶(hù)對(duì)信息流常規(guī)視頻落地頁(yè)的結(jié)構(gòu)的認(rèn)知,降低用戶(hù)跳出感。頁(yè)面從上至下是一個(gè)固定的結(jié)構(gòu),模塊位置是不可以變更的,除了固定的框架、視頻、標(biāo)題、輔助信息區(qū)和作者信息區(qū)是必不可少的,其他部分模塊可根據(jù)實(shí)際情況進(jìn)行進(jìn)行插拔。



2. 頂部框架內(nèi)容規(guī)范

框架選擇: 建議使用默認(rèn)白色框架,不可使用透明框架??蚣軜?biāo)題: 展示小程序名稱(chēng)。字?jǐn)?shù)限制: 不超過(guò)8個(gè)字,否則會(huì)截?cái)囡@示,影響用戶(hù)閱讀。

正確

標(biāo)題字?jǐn)?shù)合理,小程序名稱(chēng)一目了然。

錯(cuò)誤

標(biāo)題字?jǐn)?shù)過(guò)長(zhǎng)且使用透明框架,框架與視頻播放器重合影響視頻內(nèi)容瀏覽。

3. 當(dāng)前視頻區(qū)規(guī)范

3.1.視頻區(qū): 放置視頻播放器,展示當(dāng)前視頻資源。

橫向視頻 資源展示可以使用小程序video視頻組件,寬:高=16:9。豎向視頻 資源展示最低高度≥屏幕寬度;最高高度≤屏幕高度*78%。



3.2.標(biāo)題文字: 字號(hào)57px,行距24px,中粗體,字色#000000。

3.3.輔助信息區(qū): 字號(hào)36px,行距18px,字色#999999。

3.4.互動(dòng)功能區(qū): 功能按鈕以全圓角描邊膠囊形式展現(xiàn)。

3.5.作者信息區(qū): 作者頭像大小105x105px;名稱(chēng)字號(hào)48px,字色#000000;輔助信息字號(hào)36px,字色#999999;輔助信息與名稱(chēng)間距21px。

3.6.頁(yè)邊距及間距: 內(nèi)容距離左右頁(yè)邊距為51px,其他各模塊間距可參考圖中標(biāo)示。

4. 相關(guān)推薦區(qū)規(guī)范

排版樣式: 可采用大圖樣式或者左文右圖列表樣式,視頻封面尺寸為16:9。列表文字: 列表標(biāo)題字號(hào)51px,字色#000000;輔助信息字號(hào)36px,字色#999999。

5. 評(píng)論區(qū)和互動(dòng)區(qū)

視頻類(lèi)小程序落地頁(yè)建議開(kāi)發(fā)者設(shè)置評(píng)論區(qū),便于用戶(hù)獲取更多信息;在用戶(hù)實(shí)驗(yàn)中,缺少評(píng)論區(qū)用戶(hù)接受度低。

6. 廣告區(qū)規(guī)范

可以在小程序視頻類(lèi)資源落地頁(yè)的相關(guān)推薦區(qū)插入廣告,并且廣告與視頻區(qū)有明顯分割;廣告樣式建議與推薦列表樣式對(duì)齊。


除了以上文字內(nèi)容以外,我們同時(shí)為開(kāi)發(fā)者提供如下關(guān)于小程序在信息流分發(fā)體驗(yàn)的詳細(xì)視頻解讀:在線觀看地址



以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)