名词解释

详情页：用户点击某条搜索结果后进入的页面，展示和该链接相关的扩展内容，类型通常包括文章内容页、商品详情页等，本规范主要针对文章内容页。

主体内容：指与搜索结果强相关的标题至正文内容结尾的部分，不包括文章后的用户评论、相关推荐等。

首屏：用户点击搜索结果后跳转的页面，不滑动屏幕所看到的部分称为首屏。首屏面积不包含浏览器边框等部分，仅考虑网页本身展现的长度。

一屏：用户滑动屏幕，任意停留时看到的所有展示内容，称为一屏。

移动端适配：PC页面兼容移动场景的方式，保证用户可以直接看清内容，不需要额外做放大、缩小操作。

广告：包括站外商业广告，站内的app推广、二维码、运营活动、广告专题页面。内容详情、图片、评论及内容推荐，不算作广告。

APP引导：通过悬浮窗、弹窗、文字、图片等方式引导用户下载或调起APP的行为。

详情页规范

1. 可访问度

即用户是否能够顺畅的看到页面，考量页面是否能打开、打开成本和访问速度。

加载时间：首屏加载时间不得超过2s。

适配移动端：页面需要适配移动端，无需用户手动放大或缩小。

权限页：为了提升信息获取效率，用户可以直接获得信息，不需要额外付出权限成本。不可提示登录或者注册，或需要权限才可访问整个页面。在h5可观看、操作的功能，不得强制调起外部APP才可查看。

弹窗遮挡：用户进入详情页必须可直接看到主体内容，不得出现弹窗、悬浮窗等遮挡主体。

负例

负例

2.浏览体验

在满足用户最主要需求的同时，网页的整体浏览体验会影响用户的感受，交互及UI设计友好的页面给用户带来愉悦的浏览体验。

字体字号：页面字体、字符大小、文本行间距等设计，应适合手机用户阅读，不可明显过大过小，正文文本字号不小于10pt。

页面整体布局：

1. 主体位于靠前的位置，首屏需有50%以上为主体内容。
2. 页面分区应具有辨识度， 主体与广告、推荐等模块需要有醒目区分，避免用户使用过程中被误导。
3. 页面不可出现大面积空白、文本杂乱无结构化、排版错乱、主体内容展示不全等情况。

2.1 主体内容

主体布局：

1. 页面主体突出，正文内容便于阅读，有规整的分段序号等。
2. 主体文本内容不得和背景颜色相近，在字体颜色上需做突出。

图片：图片清晰，位置统一。不得出现图片链接无效等无法正常展现、黑边过宽、模糊等现象。

视频/音频：

1. 可直接播放，不得出现需要下载指定播放器后才播放的情况。
2. 不得出现视频/音频质量差的情况（如声音嘈杂刺耳、视频抄袭、无授权搬运等）。
3. 播放时进度条可被拖拽。

 

app下载：如主需求为下载，详情页中的链接需可直接下载并安装使用，app为最佳版本。不得出现捆绑下载、下载的非最佳版本的情况。

文档：文库文档阅读。用户可以随意浏览，但下载需要登录甚至需要一定财富值积累。

展开更多/翻页：

1. 落地页最好能直接展现全文，也允许有加载更多/分页，但为减少查找成本，重点内容必须在第一页有所展示，不可隐藏于翻页后，第一页仅露出引导性语句是不允许的。
2. 需确保“展开更多”可点击，并且点击后不会跳转到另一不相关页面。

 

2.3 表意清晰度

该维度主要指内容页是否与搜索结果相关，正文阅读是否流畅，便于用户理解。

内容、标题一致性

1. 用户根据标题点击看到页面的主体内容，只有内容与标题一致，才能满足用户主要需求。
2. 除了公认的内容页，其他类别要考虑，资源播放页，播放的内容是否与标题一致；下载页，下载的资源是否与说明一致；搜索结果页就是搜索结果的相关性是否较好。

负例case：论坛帖子，标题：宝宝不爱去幼儿园怎么办，主贴一直在说宝宝在幼儿园与小朋友玩的很好。

便于理解程度

1. 内容需连贯可读，表意清晰，便于用户理解。
2. 需注意排版、分段等因素可能导致可读性降低，阅读过程中需用户略加分辨才可理解。
3. 避免出现错别字、标点符号错误，影响用户理解。

 

2.2 广告

页面广告主要分为弹窗和页面内嵌广告，过多的广告会引起用户反感，甚至影响用户找到并浏览主体内容。弹窗广告是否强制用户优先浏览也会很大程度上影响用户体验。

广告位置

1. 需尽量减少广告对阅读体验的负面影响，不允许使用悬浮/吸顶/吸底广告。
2. 从首屏顶部至主体部分结束，严禁插入任何形式的广告推广信息。（翻页功能区也算作主体）

 

广告面积

1. 首屏广告面积不超过20%
2. 主体内容之后，任何一屏广告面积不超过40%。

广告内容

1. 内容需正规合法，避免低俗、赌博等红线内容。
2. 禁止出现诱导性垃圾广告（如：您的浏览器即将崩溃，是否立即清除缓存）。
3. 跳转广告页需规范，点击返回按钮可正常返回文章详情页。
4. 不得有分时段/地区投放垃圾广告的行为。

 

广告样式

• 严禁出现任何形式的悬浮弹窗广告（遮屏、吸底、两侧悬浮）。

 

• 动/抖动不固定：不允许有影响阅读体验的闪动、抖动不固定的情况。
• 广告与功能按钮重叠：不得放在用户容易误点的区域，如播放、购买功能按钮和广告有重叠。
• 广告分布：广告和正文主体之间需要留出适当距离。

广告设计：

• 需做到字体规整，字号适当，配色美观，广告内容视觉感知需与页面和谐，不使用低俗、恶心、恶意博取眼球的图片，留白得体。
• 广告需有明显标识，不可与推荐内容样式混同，误导用户。