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

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

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

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

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

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

圖一：正反示例對(duì)比

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

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

圖二：翻頁(yè)鍵與廣告距離過近

4、參考案例

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

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

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

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

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

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