2020年3月，百度發(fā)布的《百度APP移動搜索落地頁體驗白皮書5.0》中提到”主體內(nèi)容應(yīng)與廣告、相關(guān)推薦等次要內(nèi)容板塊之間有明顯間隔距離或分割線，使用戶獲取信息時不受任何干擾?！北疚膶槟阍敿?xì)講解如何設(shè)置合理間隔更符合用戶瀏覽頁面信息的需要。

1、內(nèi)容模塊之間設(shè)置分割線的重要性

用戶點擊搜索結(jié)果頁進入落地頁時，對頁面信息的呈現(xiàn)方式一無所知。為了保障頁面主體信息的最佳可讀性，頁面整體的排版布局設(shè)計要注重區(qū)分信息層級，凸顯頁面主要內(nèi)容，幫助用戶快速甄別主次信息，找到所需。不同內(nèi)容模塊之間設(shè)置分割線是區(qū)分信息層級的有效呈現(xiàn)方式。

2、主體內(nèi)容與次要內(nèi)容模塊需設(shè)置間隔線

在內(nèi)容詳情頁，除了頁面主體內(nèi)容以外，還包括評論、廣告、相關(guān)推薦等內(nèi)容模塊，在當(dāng)前頁面，與主體內(nèi)容相比，評論、廣告、相關(guān)推薦等內(nèi)容屬于次要信息，使用分割線區(qū)分信息層級能幫助用戶意識到主體內(nèi)容已結(jié)束，避免用戶在滑動瀏覽主體內(nèi)容過程中因無明顯分隔線提示而誤點其他內(nèi)容。

如圖一所示，左側(cè)案例中正文與廣告之間沒有任何間隔，融為一體，用戶在滑動瀏覽信息的過程中易將廣告誤當(dāng)成主體內(nèi)容造成誤點擊，用戶體驗較差。右側(cè)案例中正文結(jié)束后有評論、點贊等互動按鈕，并且與底部廣告之間有明顯分界線，讓用戶能快速區(qū)分正文和廣告，意識到正文已完結(jié)。

圖一：正反示例對比

3、功能鍵與次要內(nèi)容模塊之間需設(shè)置明顯間隔

百度搜索發(fā)現(xiàn)不少開發(fā)者對于篇幅較長的文章會設(shè)置翻頁、展開全文等功能，功能鍵屬于頁面主體內(nèi)容的一部分，功能鍵與其他次要內(nèi)容模塊（如廣告、相關(guān)推薦等）也需設(shè)置明顯間隔，避免用戶在操作功能時誤點擊其他內(nèi)容。如圖二所示，該頁面的翻頁功能鍵與廣告之間距離過近，用戶點擊翻頁時很容易誤觸廣告，給用戶帶來不良的瀏覽感受。

圖二：翻頁鍵與廣告距離過近

4、參考案例

問題來了，講了這么多規(guī)范細(xì)節(jié)，頁面內(nèi)容模塊之間如何設(shè)置間隔距離對用戶最為友好呢？下面給大家提供優(yōu)質(zhì)案例供大家參考。

參考案例1：正文結(jié)束后放置版權(quán)信息、責(zé)任歸屬或者點贊評等功能，與廣告內(nèi)容隔開，提示用戶正文已結(jié)束

參考案例2：正文與廣告之間用分割線隔開，避免用戶誤點擊

參考案例3：翻頁功能鍵做成按鈕形式并且與廣告有一定間隔距離

參考案例4：展開全文功能有明顯文字標(biāo)識，與廣告之間設(shè)置分割線

細(xì)節(jié)決定成敗，內(nèi)容模塊之間設(shè)置間隔是頁面排版布局不可或缺的細(xì)節(jié)，能幫助用戶快速獲取頁面核心信息，不被其他次要內(nèi)容干擾，對提升用戶的頁面瀏覽體驗，贏得更多的用戶青睞非常重要。