一、落地頁體驗白皮書總覽

百度搜索一直致力于提升搜索用戶的瀏覽體驗，營造健康的搜索生態(tài)。近幾年百度搜索持續(xù)發(fā)布《百度移動搜索落地頁體驗白皮書》，全力以赴改進和迭代搜索策略，堅決與低劣廣告作戰(zhàn)，與各位開發(fā)者共創(chuàng)健康優(yōu)質(zhì)的搜索服務(wù)。

《百度APP移動搜索落地頁體驗白皮書5.0》目前是搜索資源平臺最新最全的官方指導文檔，從信息獲取、頁面瀏覽、交互操作、服務(wù)規(guī)范四方面制訂了更加明確、細致的規(guī)范要求，全方位提升移動搜索落地頁體驗。

搜索產(chǎn)品運營師郭老師結(jié)合最新案例，全方位地為開發(fā)者們解讀《百度APP移動搜索落地頁體驗白皮書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ò)請求造成的渲染阻塞；

· 對非文字元素（如圖片，視頻）指定大小。

3、智能小程序加載速度優(yōu)化建議：

（1） 優(yōu)化小程序包體積：減小包的體積可以減少包的下載時間。

（2）請求數(shù)據(jù)優(yōu)化：涉及到關(guān)鍵數(shù)據(jù)的異步請求可以盡早的發(fā)出，越早準備好數(shù)據(jù)，就能越早的向視圖層發(fā)送這些渲染用的數(shù)據(jù)。

（3）漸進式加載：提前加載頁面的骨架，可以減少用戶的白屏等待時長。

三、頁面瀏覽規(guī)范

1、內(nèi)容模塊有明顯區(qū)分

（1）頁面主體內(nèi)容與廣告、相關(guān)推薦有明顯區(qū)分。

△反面示例：正文與廣告間隔不明顯，用戶體驗不佳。

（2）翻頁鍵、展開全文等功能鍵與廣告之間需有明顯間隔或分割線；避免干擾用戶操作。

△正面示例：展開全文有文字標識，放置合理。

2、合理放置"展開全文"按鈕：

（1）展開全文功能有明確的文字標識。

△反面示例：展開功能無文字標示，且與APP調(diào)起按鈕距離過近，不符合要求。

（2）展開全文功能在全文中至多出現(xiàn)一次。

（3）不可出現(xiàn)在落地頁的首屏內(nèi)容中。

△反面示例：展開全文功能放置在首屏。

（4）與其廣告等其他內(nèi)容模塊需設(shè)置間隔距離。

3、字體間距適中

落地頁的字體大小及文本間距的選擇，不可明顯過大過小，需適合手機用戶閱讀。頁面主體內(nèi)容的字號應(yīng)不小于10pt，字體與行高的比率應(yīng)大于1.4。

小程序具體字號的選擇可參考《智能小程序設(shè)計規(guī)范》。

△左圖為正面示例，頁面字體適中，段落布局合理；右圖為反面示例，字體過小。

4、機型適配

不同手機型號應(yīng)做好頁面適配，不影響用戶的正常瀏覽使用；IOS全面屏手機底部橫線不可遮擋頁面的具體功能和內(nèi)容。

△左圖為正面示例：黑色橫條沒有遮擋頁面內(nèi)容；右圖為反面示例：不適配IOS全面屏，底部黑色橫條遮擋功能鍵。

5、嚴禁的廣告內(nèi)容

（1）嚴禁違禁低俗廣告內(nèi)容（包括但不限于色情、賭博、法律規(guī)范的違禁品及服務(wù)；）

△反面示例：賭博類廣告，違反法律規(guī)范。

（2）嚴禁虛假誘導類廣告內(nèi)容，禁止使用"國家級"、"最高級"、"最佳"等用語，不能夸大效果、虛假承諾，誘導用戶分享；

△反面示例：虛假廣告。

（3）嚴禁廣告內(nèi)容侵犯國家尊嚴利益、泄露國家秘密、侵犯個人隱私。

△反面示例：上圖廣告內(nèi)容侵犯個人肖像權(quán)，不合規(guī)規(guī)范。

6、嚴禁的廣告樣式

（1）懸浮廣告

△頁面設(shè)置懸浮廣告，不符合要求。

（2）彈窗廣告

△禁止設(shè)置彈窗廣告

（3）遮屏廣告

△禁止設(shè)置頁面遮屏廣告

（4）抖動/閃動廣告

△反面示例：頁面頂部設(shè)置閃動廣告，不符合要求。

（5）輪播廣告

△反面示例：底部輪播APP下載廣告，不符合要求。

（6）廣告自動播放

7、廣告面積及位置

（1）頂部嵌入廣告

首屏頂部允許嵌入不超過一屏面積10%的優(yōu)質(zhì)廣告；廣告位上有明確的【廣告】字樣標識；圖片清晰、樣式美觀，視覺體驗好，色彩與頁面整體協(xié)調(diào)。

△頂部嵌入不超過一屏面積10%的圖文樣式廣告。

（2）正文穿插廣告

文章內(nèi)容頁或信息詳情頁中，從主體內(nèi)容標題開始到正文內(nèi)容結(jié)束前禁止插入任何廣告，包括標題與正文之間；正文中；正文及功能鍵之間。

△反面示例：正文中穿插廣告。

（3）首頁、列表頁廣告

列表頁與首頁中，一屏的廣告總面積必須小于1/3；廣告內(nèi)容視覺感知上不能與原生內(nèi)容反差很大。

△左圖為反面示例：廣告面積過大；右圖為正面示例：廣告面積合理。

四、交互操作規(guī)范

1、功能導航按鈕設(shè)置

（1）功能位置固定且符合用戶習慣，與頁面其他內(nèi)容模塊（如廣告）有明顯間距；

（2）功能真實可用，操作便捷，不可出現(xiàn)誘導信息或引導跳轉(zhuǎn)至第三方頁面；

（3）側(cè)懸浮功能按鈕面積不能過大，避免影響用戶瀏覽。

△左圖為正面示例：返回鍵放置合理；右圖為反面示例：功能鍵放在目錄中，影響用戶體驗。

2、咨詢按鈕

（1）當前頁同一咨詢功能只能出現(xiàn)一次；

（2）咨詢功能可在頁面底部或側(cè)面嵌入或懸浮，面積不可超過一屏面積的10%；

（3） 在用戶未主動點擊的情況下，咨詢的對話窗口不可自動彈出。

△正面示例：功能鍵放置合理。

△正面示例：咨詢功能懸浮底部，面積合規(guī)。

3、文本操作/圖片交互

（1）頁面的文本內(nèi)容應(yīng)支持長按可復(fù)制，鏈接可點擊；

（2）支持點擊調(diào)起查看大圖，點擊返回小圖；

（3）雙指按捏放大縮小功能使用自如；

（4）有多張圖片的情況下，支持左右滑動切換圖片。

△正面示例：圖片支持點擊調(diào)起大圖、左右滑動切換圖片。

五、服務(wù)規(guī)范

1、登錄便捷

站點及小程序的登錄入口清晰明顯，登錄方式便捷，支持授權(quán)登錄，比如百度賬號授權(quán)等；可以長期保持登錄狀態(tài)，避免多次重復(fù)登錄給用戶帶來的復(fù)雜體驗。

△正面示例：小程序支持多種登錄方式，既有登錄授權(quán)也有手機號登錄，符合要求。

2、定位服務(wù)

當站點及小程序提供給用戶的服務(wù)有定位需求時，應(yīng)該支持自動定位服務(wù)，并且做到定位準確無誤。

△反面示例：該小程序不支持自動定位，用戶體驗差。

3、功能完備

（1）H5站及智能小程序提供服務(wù)時，核心的服務(wù)功能應(yīng)設(shè)置完備，并且實際可用，給用戶有效反饋，使用戶享有便捷、完整的全流程服務(wù)體驗。比如電商類站點或者小程序應(yīng)具備搜索、客服、支付、購物車、訂單查詢、退貨等基本服務(wù)功能。

（2）大部分服務(wù)體驗的最終完成都需要有支付功能，因此開發(fā)者應(yīng)支持調(diào)起大部分用戶習慣使用的支付平臺，如微信支付或支付寶，簡化支付流程。

△功能完備：具有客服咨詢、購物車、購買等功能。

△正面示例：以上小程序支持多重支付方式，簡化了支付流程。

4、服務(wù)交互

服務(wù)界面整體排版清晰，布局合理，色調(diào)一致，頁面和控件切換自如。

△整體頁面美觀，布局清晰。

5、信息查詢

支持用戶登錄后可查詢歷史信息，如快遞追蹤、購買記錄查詢咨詢、記錄查詢等；且歷史信息保存完備。