Categories


Tags


看这里!教你如何在页面主次内容之间设置合理间隔

2020年3月百度搜索发布的《百度APP移动搜索落地页体验白皮书5.0》中提到,“主体内容应与广告、相关推荐等次要内容之间有明显的间隔或分割线。”

那么,你知道页面各内容模块之间为何要设置合理间隔吗?

1、内容模块之间设置合理间隔的重要性

为了帮助用户快速甄别主次信息,找到所需,页面在整体的排版布局上要注意对主次内容进行区分。而设置合理的间隔或分割线则是最有效的区分主次内容的方式。

2、如何对各模块的内容进行合理的区分?

「主体内容与次要内容之间设置分割线」

除了主体内容以外,内容详情页中还包括评论、广告、相关推荐等模块。与主体内容相比,这些内容属于次要信息,使用分割线进行区分能帮助用户意识到主体内容已结束,避免用户在浏览内容的过程中因主次内容没有明显的区分而导致误点击。

如下图所示,该页面的主体内容与广告之间没有设置分割线,用户在浏览内容的过程中易将广告误当成主体内容,导致误点击。

图片

「翻页键与次要内容之间设置明显间隔」

不少开发者会对篇幅较长的文章设置翻页功能,翻页键属于页面主体内容的一部分,与其他次要内容(如广告、相关推荐等)也需设置明显的间隔,避免用户在操作时误点击。

如下图所示,该页面的翻页键与广告之间距离过近,用户点击翻页键时容易误点击到广告。

图片

参考案例

讲了这么多标准规范,页面内容模块之间如何设置间距对用户最为友好呢?小编给大家提供几个优质案例进行参考。

参考案例1:正文结束后放置版权信息或者点赞评等功能,将主体内容与广告内容隔开,提示用户正文已结束

图片

参考案例2:正文与广告之间用分割线隔开

图片

参考案例3:翻页键与广告有一定间距

图片

内容模块之间设置合理间隔是页面排版布局中重要的一环,它能帮助用户快速获取页面的主要信息,不被其他次要内容干扰。看完本篇文章,相信你一定学会如何在页面主次内容之间设置合理间隔了~

来源:百度搜索资源平台 百度搜索学堂


Public @ 2019-09-19 16:18:58

【院长帮帮忙】移动适配不稳定、不生效,可能是这些原因造成的!(第五期)

1. 布局使用了绝对定位 如果布局使用了绝对定位,那么在不同的设备上,元素的位置和大小会发生变化,从而导致移动适配不稳定或者根本无法生效。建议使用相对定位或者flex布局。 2. 使用了固定宽度和高度 在移动适配时,应该使用相对单位(如rem或者百分比),而不是固定宽度和高度。如果使用了固定宽度和高度,那么在不同的设备上,元素的大小会发生变化,从而导致移动适配不稳定。 3. 没有考虑不同的

Public @ 2023-06-24 11:50:16

移动搜索-5-良好展现

良好的展现是移动搜索的关键特性之一。这意味着在移动搜索结果页面上,网站的展现应该是易于阅读、导航和使用的。为了实现良好的展现,以下是一些关键因素: 1. 响应式网站设计:确保网站能够针对不同的移动设备调整布局和设计,从而提供良好的用户体验。 2. 优化内容展示:在移动设备上,内容的展示方式很重要。为了获得最佳效果,网站应该采用适合移动平台的字体、颜色和排版方案。 3. 快速加载时间:在移动设

Public @ 2023-04-19 17:50:28

百度眼中的优质移动站点什么样

做网站、做SEO的同学往往喜欢问百度各项关于标准的问题,在移动大潮席卷整个互联网的今天,百度眼中的优质移动站点是怎样的呢?在5月底结束的杭州培训上我们给亲临培训现场的同学留了作业,站长社区版主飞鹰正义是第一个就此题目发来作业的同学。在作业中,飞鹰同学并非仅就那一页PPT做了复录,更是将现场很多知识点结合在一起,内容比培训那单页PPT更加完整。不仅如此,飞鹰同学还就培训部分内容提出质疑与询问,在得到

Public @ 2021-08-26 16:19:49

【搜索视频课】落地页体验白皮书解读

发布日期:2020-08-25本节课程将从页面信息获取、页面浏览规范、交互操作规范、服务规范这四个纬度对落地页体验白皮书的要求进行介绍。第一部分:提升加载速度,快速获取信息第二部分:如何打造友好的浏览体验第三部分:如何提供便捷的交互操作第四部分:完成服务闭环,打造沉浸式服务体验第五部分:Q&A解答Q1:落地页要求中,展开询问按钮只能出现一次。但假如是问答页面,问题比较长,可以在每个问题后都

Public @ 2020-05-06 16:19:35

更多您感兴趣的搜索

0.473906s