百度智能小程序-如何提升信息流落地頁體驗(yàn)
信息流是小程序獲取流量、凸顯內(nèi)容差異化價(jià)值的重要渠道，智能小程序官方針對(duì)信息流落地頁的主流呈現(xiàn)形式，提供了豐富詳盡的體驗(yàn)指引。
遵循體驗(yàn)指引提升小程序信息流落地頁體驗(yàn)，小程序可達(dá)成以下目標(biāo)：
提升用戶體驗(yàn)：實(shí)驗(yàn)證明，用戶在信息流連續(xù)瀏覽時(shí)，閱讀到小程序落地頁內(nèi)容時(shí)跳出感普遍強(qiáng)烈，心理上會(huì)產(chǎn)生不安全感。依據(jù)本文體驗(yàn)指引規(guī)范小程序在信息流落地頁的樣式，有助于降低用戶瀏覽信息時(shí)的跳出感，獲得更加流暢一致的瀏覽體驗(yàn)，從而促進(jìn)閱讀時(shí)長(zhǎng)增長(zhǎng)。
獲得更多流量：符合智能小程序信息流落地頁體驗(yàn)規(guī)范的開發(fā)者，有機(jī)會(huì)在信息流中獲得更好的分發(fā)和流量。
一、長(zhǎng)圖文落地頁
長(zhǎng)圖文類型小程序落地頁是在信息流分發(fā)中最常見的資源類型，長(zhǎng)圖文類型小程序落地頁在信息流分發(fā)中具體體驗(yàn)規(guī)范如下：
1. 整體框架結(jié)構(gòu)規(guī)范
圖文落地頁建議按照如圖結(jié)構(gòu)布局，符合用戶對(duì)信息流圖文落地頁文章的結(jié)構(gòu)和認(rèn)知，降低跳出感。
頁面從上至下是一個(gè)固定的結(jié)構(gòu)，模塊位置是不可以變更的，除了固定的框架、標(biāo)題、來源和正文是必不可少的，其他部分模塊可根據(jù)實(shí)際情況進(jìn)行進(jìn)行插拔。
2. 頂部框架內(nèi)容規(guī)范
框架選擇：建議使用默認(rèn)白色框架。
框架標(biāo)題：展示小程序名稱。
字?jǐn)?shù)限制：標(biāo)題文字不超過 8 個(gè)字， 否則會(huì)截?cái)囡@示，影響用戶閱讀。
正確
標(biāo)題字?jǐn)?shù)合理，小程序名稱一目了然。
注意
標(biāo)題字?jǐn)?shù)過長(zhǎng)，截?cái)鄬?dǎo)致信息丟失，容易困惑。
3. 正文內(nèi)容區(qū)規(guī)范
3.1.正文標(biāo)題：正文內(nèi)容區(qū)規(guī)范 字號(hào) 72px ，行距 36px ，中粗體。
3.2.信息來源：作者頭像大小 105x105px ；名稱字號(hào) 48px ，字色 #000000 ；發(fā)布時(shí)間等輔助信息字號(hào) 36px ，字色 #999999 。
3.3.正文文字：字號(hào) 57px ，行距 33px ，中粗體。
3.4.圖片樣式：圖片通欄展示，寬度=屏幕寬度，高度根據(jù)寬度自適應(yīng)。
3.5.頁邊距：文字距離兩邊 51px ，圖片距離兩邊 0px 。
3.6.模塊間距：正文段落之間 108p ，正文與圖片間距 90px ，圖片與圖片間距 60px 。
4. 相關(guān)推薦區(qū)規(guī)范
排版樣式：左文右圖列表樣式，圖片比例為 3：2 。
列表文字：列表標(biāo)題字號(hào) 57px ，字色 #000000 ；輔助信息字號(hào) 36px ，字色 #999999 。
為了降低開發(fā)成本，小程序官方提供 “page-feed 信息流模板” ，包含左文右圖樣式，開發(fā)者可以快速調(diào)用該通用模板。（查看開發(fā)文檔）
5. 評(píng)論區(qū)和互動(dòng)區(qū)
圖文類小程序落地頁建議開發(fā)者設(shè)置評(píng)論區(qū)，便于用戶獲取更多信息；在用戶實(shí)驗(yàn)中，缺少評(píng)論區(qū)用戶接受度低。
小程序官方提供一站式互動(dòng)組件，包含互動(dòng) bar 能力、評(píng)論列表 & 評(píng)論詳情落地頁能力以及數(shù)據(jù)存儲(chǔ)能力，開發(fā)者可以快速接入。（查看開發(fā)文檔）
6. 廣告區(qū)規(guī)范
可以在小程序長(zhǎng)圖文類資源落地頁的文章末尾和相關(guān)推薦區(qū)插入廣告，廣告需要與正文內(nèi)容有如圖標(biāo)注的明顯分割；推薦區(qū)廣告樣式建議與推薦列表樣式對(duì)齊。
前往查看小程序信息流詳細(xì)廣告規(guī)范（信息流落地頁體驗(yàn)-廣告）
7.小程序長(zhǎng)圖文類落地頁多維供給體系
為了降低開發(fā)成本，除了規(guī)范文檔外，我們也為開發(fā)者提供以下工具，助力小程序落地頁體驗(yàn)的提升。各種工具能力對(duì)比可參考以下圖表：
能力一、規(guī)范文檔二、圖文詳情頁模板三、信息流統(tǒng)一模板四、發(fā)文工具
開發(fā)方式手動(dòng)
閱讀文檔進(jìn)行開發(fā)半自動(dòng)
使用開發(fā)者工具快速調(diào)用全自動(dòng)
授權(quán)配置，內(nèi)容轉(zhuǎn)化全自動(dòng)
內(nèi)容管理平臺(tái)編輯后發(fā)布
開發(fā)成本高
需要使用代碼編輯中
可以直接調(diào)用代碼低
不需要通過代碼低
不需要通過代碼
定制能力高
符合基礎(chǔ)體驗(yàn)規(guī)范后,
可進(jìn)行自定義中
各模塊參數(shù)已基本配置好，
自定義需要修改代碼低
統(tǒng)一模板內(nèi)部，
已封裝好各項(xiàng)參數(shù)和配置低
編輯器中，
已封裝好各項(xiàng)參數(shù)和配置
使用門檻無門檻無門檻無門檻，全流量開放質(zhì)量達(dá)到要求后開放該能力
二、圖文詳情頁模板
開發(fā)者可以在開發(fā)者工具中的歡迎頁，選擇圖文詳情頁模板，模板中內(nèi)置了符合信息流落地頁體驗(yàn)的各種樣式內(nèi)容，可以快速生產(chǎn)符合體驗(yàn)的落地頁文章。查看模板
三、信息流統(tǒng)一模板
開發(fā)者可以通過在開發(fā)者平臺(tái)進(jìn)行授權(quán)配置，配置生成百度規(guī)范化模板，呈現(xiàn)出符合體驗(yàn)的落地頁文章。查看模板
四、發(fā)文工具
內(nèi)容管理模塊提供一種全新的運(yùn)營方式，支持開發(fā)者在百度域內(nèi)運(yùn)營自己的粉絲用戶和潛在用戶。開發(fā)者可以通過開發(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)的信息流落地頁方式，開發(fā)者可以根據(jù)實(shí)際需求選擇最合適的開發(fā)方式。
五、視頻落地頁
視頻類型小程序落地頁在信息流中的分發(fā)體驗(yàn)規(guī)范具體如下：
1. 整體框架結(jié)構(gòu)規(guī)范
視頻建議按照如右圖結(jié)構(gòu)布局，符合用戶對(duì)信息流常規(guī)視頻落地頁的結(jié)構(gòu)的認(rèn)知，降低用戶跳出感。
頁面從上至下是一個(gè)固定的結(jié)構(gòu)，模塊位置是不可以變更的，除了固定的框架、視頻、標(biāo)題、輔助信息區(qū)和作者信息區(qū)是必不可少的，其他部分模塊可根據(jù)實(shí)際情況進(jìn)行進(jìn)行插拔。
2. 頂部框架內(nèi)容規(guī)范
框架選擇： 建議使用默認(rèn)白色框架，不可使用透明框架。
框架標(biāo)題： 展示小程序名稱。
字?jǐn)?shù)限制： 不超過 8 個(gè)字，否則會(huì)截?cái)囡@示，影響用戶閱讀。
正確
標(biāo)題字?jǐn)?shù)合理，小程序名稱一目了然。
錯(cuò)誤
標(biāo)題字?jǐn)?shù)過長(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 ；名稱字號(hào) 48px ，字色 #000000 ；輔助信息字號(hào) 36px ，字色 #999999 ；輔助信息與名稱間距 21px 。
3.6.頁邊距及間距：內(nèi)容距離左右頁邊距為 51px ，其他各模塊間距可參考圖中標(biāo)示。
4. 相關(guān)推薦區(qū)規(guī)范
排版樣式：可采用大圖樣式或者左文右圖列表樣式，視頻封面尺寸為 16：9 。
列表文字：列表標(biāo)題字號(hào) 51px ，字色 #000000 ；輔助信息字號(hào) 36px ，字色 #999999 。
為了降低開發(fā)成本，小程序官方提供 “page-feed 信息流模板”，包含大圖和左文右圖樣式，開發(fā)者可以快速調(diào)用該通用模板。（查看開發(fā)文檔）
5. 評(píng)論區(qū)和互動(dòng)區(qū)
視頻類小程序落地頁建議開發(fā)者設(shè)置評(píng)論區(qū)，便于用戶獲取更多信息；在用戶實(shí)驗(yàn)中，缺少評(píng)論區(qū)用戶接受度低。
小程序官方提供一站式互動(dòng)組件，包含互動(dòng) bar 能力、評(píng)論列表 & 評(píng)論詳情落地頁能力以及數(shù)據(jù)存儲(chǔ)能力，開發(fā)者可以快速接入。（查看開發(fā)文檔）
6. 廣告區(qū)規(guī)范
可以在小程序視頻類資源落地頁的相關(guān)推薦區(qū)插入廣告，并且廣告與視頻區(qū)有明顯分割；廣告樣式建議與推薦列表樣式對(duì)齊。
前往查看小程序信息流詳細(xì)廣告規(guī)范（信息流落地頁體驗(yàn)-廣告）
六、體驗(yàn)直播課
我們同時(shí)為開發(fā)者提供體驗(yàn)直播課進(jìn)行視頻詳解讀：在線觀看地址
更多信息流流量說明可查看：信息流流量接入
來源：百度智能小程序
