百度移動(dòng)APP落地頁體驗(yàn)白皮書解讀
一、落地頁體驗(yàn)白皮書總覽
百度搜索一直致力于提升搜索用戶的瀏覽體驗(yàn)，營(yíng)造健康的搜索生態(tài)。近幾年百度搜索持續(xù)發(fā)布《百度移動(dòng)搜索落地頁體驗(yàn)白皮書》，全力以赴改進(jìn)和迭代搜索策略，堅(jiān)決與低劣廣告作戰(zhàn)，與各位開發(fā)者共創(chuàng)健康優(yōu)質(zhì)的搜索服務(wù)。
《百度APP移動(dòng)搜索落地頁體驗(yàn)白皮書5.0》目前是搜索資源平臺(tái)最新最全的官方指導(dǎo)文檔，從信息獲取、頁面瀏覽、交互操作、服務(wù)規(guī)范四方面制訂了更加明確、細(xì)致的規(guī)范要求，全方位提升移動(dòng)搜索落地頁體驗(yàn)。
搜索產(chǎn)品運(yùn)營(yíng)師郭老師結(jié)合最新案例，全方位地為開發(fā)者們解讀《百度APP移動(dòng)搜索落地頁體驗(yàn)白皮書5.0》的相關(guān)內(nèi)容，快來一起上課啦！
二、頁面信息獲取
1、加載速度：頁面首屏內(nèi)容應(yīng)在1秒內(nèi)加載完成。
2、H5頁面優(yōu)化建議：
（1） 資源加載：
· 壓縮或合并同類資源；
· 非首屏圖片懶加載。
（2） 頁面渲染：
· 將CSS樣式寫在頭部樣式表，減少由CSS文件網(wǎng)絡(luò)請(qǐng)求造成的渲染阻塞；
· 對(duì)非文字元素（如圖片，視頻）指定大小。
3、智能小程序加載速度優(yōu)化建議：
（1） 優(yōu)化小程序包體積：減小包的體積可以減少包的下載時(shí)間。
（2）請(qǐng)求數(shù)據(jù)優(yōu)化：涉及到關(guān)鍵數(shù)據(jù)的異步請(qǐng)求可以盡早的發(fā)出，越早準(zhǔn)備好數(shù)據(jù)，就能越早的向視圖層發(fā)送這些渲染用的數(shù)據(jù)。
（3）漸進(jìn)式加載：提前加載頁面的骨架，可以減少用戶的白屏等待時(shí)長(zhǎng)。
三、頁面瀏覽規(guī)范
1、內(nèi)容模塊有明顯區(qū)分
（1）頁面主體內(nèi)容與廣告、相關(guān)推薦有明顯區(qū)分。
△反面示例：正文與廣告間隔不明顯，用戶體驗(yàn)不佳。
（2）翻頁鍵、展開全文等功能鍵與廣告之間需有明顯間隔或分割線；避免干擾用戶操作。
△正面示例：展開全文有文字標(biāo)識(shí)，放置合理。
2、合理放置“展開全文”按鈕：
（1）展開全文功能有明確的文字標(biāo)識(shí)。
△反面示例：展開功能無文字標(biāo)示，且與APP調(diào)起按鈕距離過近，不符合要求。
（2）展開全文功能在全文中至多出現(xiàn)一次。
（3）不可出現(xiàn)在落地頁的首屏內(nèi)容中。
△反面示例：展開全文功能放置在首屏。
（4）與其廣告等其他內(nèi)容模塊需設(shè)置間隔距離。
3、字體間距適中
落地頁的字體大小及文本間距的選擇，不可明顯過大過小，需適合手機(jī)用戶閱讀。頁面主體內(nèi)容的字號(hào)應(yīng)不小于10pt，字體與行高的比率應(yīng)大于1.4。
小程序具體字號(hào)的選擇可參考《智能小程序設(shè)計(jì)規(guī)范》。
△左圖為正面示例，頁面字體適中，段落布局合理；右圖為反面示例，字體過小。
4、機(jī)型適配
不同手機(jī)型號(hào)應(yīng)做好頁面適配，不影響用戶的正常瀏覽使用；IOS全面屏手機(jī)底部橫線不可遮擋頁面的具體功能和內(nèi)容。
△左圖為正面示例：黑色橫條沒有遮擋頁面內(nèi)容；右圖為反面示例：不適配IOS全面屏，底部黑色橫條遮擋功能鍵。
5、嚴(yán)禁的廣告內(nèi)容
（1）嚴(yán)禁違禁低俗廣告內(nèi)容（包括但不限于色情、賭博、法律規(guī)范的違禁品及服務(wù)；）
△反面示例：賭博類廣告，違反法律規(guī)范。
（2）嚴(yán)禁虛假誘導(dǎo)類廣告內(nèi)容，禁止使用“國(guó)家級(jí)”、“最高級(jí)”、“最佳”等用語，不能夸大效果、虛假承諾，誘導(dǎo)用戶分享；
△反面示例：虛假?gòu)V告。
（3）嚴(yán)禁廣告內(nèi)容侵犯國(guó)家尊嚴(yán)利益、泄露國(guó)家秘密、侵犯?jìng)€(gè)人隱私。
△反面示例：上圖廣告內(nèi)容侵犯?jìng)€(gè)人肖像權(quán)，不合規(guī)規(guī)范。
6、嚴(yán)禁的廣告樣式
（1）懸浮廣告
△頁面設(shè)置懸浮廣告，不符合要求。
（2）彈窗廣告
△禁止設(shè)置彈窗廣告
（3）遮屏廣告
△禁止設(shè)置頁面遮屏廣告
（4）抖動(dòng)/閃動(dòng)廣告
△反面示例：頁面頂部設(shè)置閃動(dòng)廣告，不符合要求。
（5）輪播廣告
△反面示例：底部輪播APP下載廣告，不符合要求。
（6）廣告自動(dòng)播放
7、廣告面積及位置
（1）頂部嵌入廣告
首屏頂部允許嵌入不超過一屏面積10%的優(yōu)質(zhì)廣告；廣告位上有明確的【廣告】字樣標(biāo)識(shí)；圖片清晰、樣式美觀，視覺體驗(yàn)好，色彩與頁面整體協(xié)調(diào)。
△頂部嵌入不超過一屏面積10%的圖文樣式廣告。
（2）正文穿插廣告
文章內(nèi)容頁或信息詳情頁中，從主體內(nèi)容標(biāo)題開始到正文內(nèi)容結(jié)束前禁止插入任何廣告，包括標(biāo)題與正文之間；正文中；正文及功能鍵之間。
△反面示例：正文中穿插廣告。
（3）首頁、列表頁廣告
列表頁與首頁中，一屏的廣告總面積必須小于1/3；廣告內(nèi)容視覺感知上不能與原生內(nèi)容反差很大。
△左圖為反面示例：廣告面積過大；右圖為正面示例：廣告面積合理。
四、交互操作規(guī)范
1、功能導(dǎo)航按鈕設(shè)置
（1）功能位置固定且符合用戶習(xí)慣，與頁面其他內(nèi)容模塊（如廣告）有明顯間距；
（2）功能真實(shí)可用，操作便捷，不可出現(xiàn)誘導(dǎo)信息或引導(dǎo)跳轉(zhuǎn)至第三方頁面；
（3）側(cè)懸浮功能按鈕面積不能過大，避免影響用戶瀏覽。
△左圖為正面示例：返回鍵放置合理；右圖為反面示例：功能鍵放在目錄中，影響用戶體驗(yàn)。
2、咨詢按鈕
（1）當(dāng)前頁同一咨詢功能只能出現(xiàn)一次；
（2）咨詢功能可在頁面底部或側(cè)面嵌入或懸浮，面積不可超過一屏面積的10%；
（3） 在用戶未主動(dòng)點(diǎn)擊的情況下，咨詢的對(duì)話窗口不可自動(dòng)彈出。
△正面示例：功能鍵放置合理。
△正面示例：咨詢功能懸浮底部，面積合規(guī)。
3、文本操作/圖片交互
（1）頁面的文本內(nèi)容應(yīng)支持長(zhǎng)按可復(fù)制，鏈接可點(diǎn)擊；
（2）支持點(diǎn)擊調(diào)起查看大圖，點(diǎn)擊返回小圖；
（3）雙指按捏放大縮小功能使用自如；
（4）有多張圖片的情況下，支持左右滑動(dòng)切換圖片。
△正面示例：圖片支持點(diǎn)擊調(diào)起大圖、左右滑動(dòng)切換圖片。
五、服務(wù)規(guī)范
1、登錄便捷
站點(diǎn)及小程序的登錄入口清晰明顯，登錄方式便捷，支持授權(quán)登錄，比如百度賬號(hào)授權(quán)等；可以長(zhǎng)期保持登錄狀態(tài)，避免多次重復(fù)登錄給用戶帶來的復(fù)雜體驗(yàn)。
△正面示例：小程序支持多種登錄方式，既有登錄授權(quán)也有手機(jī)號(hào)登錄，符合要求。
2、定位服務(wù)
當(dāng)站點(diǎn)及小程序提供給用戶的服務(wù)有定位需求時(shí)，應(yīng)該支持自動(dòng)定位服務(wù)，并且做到定位準(zhǔn)確無誤。
△反面示例：該小程序不支持自動(dòng)定位，用戶體驗(yàn)差。
3、功能完備
（1）H5站及智能小程序提供服務(wù)時(shí)，核心的服務(wù)功能應(yīng)設(shè)置完備，并且實(shí)際可用，給用戶有效反饋，使用戶享有便捷、完整的全流程服務(wù)體驗(yàn)。比如電商類站點(diǎn)或者小程序應(yīng)具備搜索、客服、支付、購(gòu)物車、訂單查詢、退貨等基本服務(wù)功能。
（2）大部分服務(wù)體驗(yàn)的最終完成都需要有支付功能，因此開發(fā)者應(yīng)支持調(diào)起大部分用戶習(xí)慣使用的支付平臺(tái)，如微信支付或支付寶，簡(jiǎn)化支付流程。
△功能完備：具有客服咨詢、購(gòu)物車、購(gòu)買等功能。
△正面示例：以上小程序支持多重支付方式，簡(jiǎn)化了支付流程。
4、服務(wù)交互
服務(wù)界面整體排版清晰，布局合理，色調(diào)一致，頁面和控件切換自如。
△整體頁面美觀，布局清晰。
5、信息查詢
支持用戶登錄后可查詢歷史信息，如快遞追蹤、購(gòu)買記錄查詢咨詢、記錄查詢等；且歷史信息保存完備。
來源：百度搜索資源平臺(tái) 百度搜索學(xué)堂
