如何提升小程序互动体验

为帮助小程序开发者活跃小程序互动氛围,更好地留存用户,智能小程序官方针对互动体系的四大核心功能:评论、点赞、收藏、分享,提供了丰富便捷的开发能力。

通过官方提供能力的正确使用,小程序可达成以下目标:

  • 提质量:使小程序互动体验质量符合官方推荐标准与建议,好用易用;数据显示,正确接入能力后,小程序优质内容在百度 APP 信息流的人均阅读时长可增长 40%以上;
  • 降成本:快速搭建小程序内的评论、点赞、收藏、分享互动能力;数据显示,使用官方能力搭建对应功能,可节省 90%开发成本;
  • 消息闭环:通过互动能力提供的互动内容审核、C 端用户消息通路回访,小程序可接入百度互动消息推送体系,使小程序互动消息持续触达用户,促进小程序内互动的持续性。

内容索引

  1. 概述
  2. 能力介绍
  3. 接入示例
  • 互动能力相关体验质量标准,及相关能力使用建议,参见体验指引
  1. 选择互动区布局
  2. 评论触发评论输入评论评论后反馈
  3. 点赞
  4. 收藏
  5. 分享
  6. 关联登录

# 小程序官方互动能力一览

# 一、概述

  • 面向希望快速搭建整套互动体系的开发者,小程序官方提供 一站式互动组件,包含互动 bar 能力(图示 1.1)、评论列表&评论详情落地页能力(图示 1.2)以及数据存储能力,开发者可整体低成本快速接入。
  • 面向有个性化定制诉求的开发者,小程序官方提供重点互动能力的可自定义组件:评论发布器组件(图示 2)、点赞组件(图示 3),开发者接入组件时可按需选择功能模块、样式。

# 二、能力介绍

互动能力 接入说明 能力介绍

1. 一站式互动组件

适用于无后端服务器存储能力的开发者,整套接入,不支持自定义;

预计开发成本 3 人/日。

a. 提供整套互动 bar 能力,包含评论发布入口、点赞、收藏、分享功能;

b. 提供评论列表、评论详情落地页能力,包含评论内容查看、评论回复入口、评论内容点赞、评论删除、评论举报等功能;

c. 支持接入数据存储、评论内容审核、百度 APP 消息通知服务。

2. 评论发布器组件

适用于有后端服务器存储能力的开发者,可自定义配置功能模块;

预计开发成本 2 人/日。

a. 用于搭建发表评论功能;

b. 支持接入评论内容审核、百度 APP 消息通知。

3. 点赞组件

有后端服务器存储能力的开发者,可自定义自定义点赞样式/点赞动效;

预计开发成本 2 人/日。

a. 用于搭建文章内容/评论内容点赞功能;

b. 提供后端服务,支持接入百度 APP 消息通知。

# 三、接入示例

小程序接入官方互动能力示例:小程序接入评论发布器组件提供的百度 APP 消息通知服务后,小程序内发生的评论互动可同步至百度 APP 个人页面、及通知中心。

# 体验指引

# 一、选择互动区布局

设置互动区在内容落地页中的位置时,建议使用与百度 APP 一致的形式,使互动体验更符合用户认知和操作习惯。

你可直接使用智能小程序官方提供的一站式互动组件-评论列表、评论详情落地页功能。(查看开发文档

  • 评论内容区:建议按”正文区-推荐区-评论区“顺序布局,便于用户阅读推荐内容。

  • 互动操作区:建议设置底部互动和文末互动,满足用户不同场景下的互动需求。

  1. 底部互动:承载核心互动功能(评论、点赞、收藏、分享等),浏览时不随页面滚动,随时可触发;
  2. 文末互动:承载用户好恶表达功能(点赞、喜欢/不喜欢),便于用户在文章浏览完毕时的快捷发表观点。

# 二、评论体验指引

# 1.触发评论

开发者选择合适的场景,提供评论功能:

  1. 用户评论详情页的内容资讯;
  2. 用户回复已有的评论。

设置详情页内容资讯的评论入口时,位置应选在固定置底、不随页面滚动的底 bar 上,方便用户随时触发评论,否则将违反功能实现规范
同时,建议入口使用与百度 APP 一致的样式:评论框,降低用户的学习成本,提高用户整体浏览体验一致性。



正确

评论入口在固定置底、不随页面滚动的底 bar 上,方便用户随时触发评论




错误

评论入口在正文后评论区前,首屏不可见,用户查找困难



设置已有评论的回复入口时,应使用明确的回复按钮,避免用户产生疑惑,否则将违反功能实现规范

你可直接使用智能小程序官方提供的一站式互动组件-互动 bar 评论入口功能,评论列表、评论详情落地页回复按钮功能。(查看开发文档

正确

回复已有的评论场景,评论列表中有明确回复按钮提示用户

错误

无明确提示,用户不知道是否可评论

如当前评论区无内容,建议在评论区内,显示提示鼓励用户发评论;同时建议提供发评论快捷入口,缩短操作路径,活跃互动氛围。

你可直接使用智能小程序官方提供的一站式互动组件-评论列表、评论详情落地页功能。(查看开发文档

示例3:小程序内容落地页评论区、评论详情页回复区为空时,均显示提示鼓励互动;并提供按钮,支持直接进入评论发布器。

# 2.输入评论

小程序搭建输入评论功能,需接入智能小程序官方的发布器组件:评论发布器组件(查看开发文档)。
此发布器组件包含后端服务,开发者可以将其接入各自平台的后端服务,同时接入百度评论内容审核、用户接收百度 APP 消息通知服务。
并且,评论发布器组件提供与百度 APP 原生框架发布器一致的体验,开发者可根据自身需求自定义配置功能模块(当前已有 1.文本 2.表情 3.图片三项功能可供选择,其中文本功能为必选)。

接入评论发布器组件时,建议开发者使用小程序官方推荐配置,以保证体验质量,提高用户在百度 AP P 内阅读浏览的整体体验一致性。
如需自定义配置,方法详见开发文档

输入评论时,评论发布器失焦状态,如用户已输入内容,小程序评论入口-评论框处应显示草稿,否则将违反功能实现规范

你可直接使用智能小程序官方提供的一站式互动组件-互动 bar 评论框功能。(查看开发文档

正确

评论框显示草稿,用户可知已输入内容已保存

错误

评论框不显示草稿,用户无法感知已输入内容是否已保存。

# 3.评论后反馈

你可直接使用智能小程序官方提供的一站式互动组件-评论列表、评论详情落地页功能实现如下建议。(查看开发文档

评论发表成功后,小程序应即时提供如下反馈,否则将违反功能实现规范。:

  1. 当前页面即时展现新评论;
  2. 通过页面滑动,自动定位至新评论,避免新评论出现在用户无感知区域;
  3. toast 提示,评论发表成功。

评论发表失败时,小程序应即时提供如下处理,否则将违反功能实现规范。:

  1. 将用户已输入的内容保存草稿,避免二次输入成本;
  2. 停留在输入态,避免页面布局突变造成的不安全感;
  3. toast 提示,说明失败原因。

在用户评论发表成功或失败时,建议使用通用提示 toast,降低用户的理解成本。
如下图,1.评论发表成功通用提示,2.评论发表失败通用提示。

# 三、点赞体验指引

通过相关互动能力的使用,小程序可快速实现内部点赞功能;同时,通过点赞能力提供的服务,小程序可接入百度互动消息推送体系,使小程序点赞消息持续触达用户,促进小程序内互动的持续性。

示例:他人在小程序中对用户的动态、内容、评论作出点赞操作后,同步在该用户的“百度APP-通知中心”中显示。

在使用点赞组件时,开发者可根据场景及产品调性,选择适合的点赞样式进行用户点赞引导:

你可直接使用智能小程序官方提供的点赞组件。(查看开发文档)

  1. 信息流:可对页面中单条内容进行点赞;
  2. 内容落地页:可在页面中多个位置对内容进行点赞。

示例:信息流和内容落地页的点赞功能

  1. 按钮样式:提供拇指及爱心两种点赞样式,可根据产品调性及场景进行选择;
  2. 动效样式:提供无动效、轻动效、强动效三种动效样式,可根据场景进行选择。

示例:多种按钮样式和动效样式

建议在误操作后用户可进行更正,避免出现无法取消点赞的情况:

你可直接使用智能小程序官方提供的点赞组件。(查看开发文档)

正确

再次点击可以取消点赞

错误

点赞不可以被取消

# 四、收藏体验指引

通过相关互动能力的使用,小程序可快速实现内容收藏功能;同时,通过收藏能力提供的服务,小程序可接入百度 APP - 收藏功能,使小程序用户复访更加便利。

你可直接使用智能小程序官方提供的一站式互动组件-收藏功能。(查看开发文档

示例:用户在小程序中对内容做出收藏操作后,内容会同步在该用户的“百度APP - 收藏”中。

# 五、分享体验指引

通过相关互动能力的使用,小程序可快速实现内容分享功能。

你可直接使用智能小程序官方提供的一站式互动组件-分享功能。(查看开发文档

示例:一站式互动组件分享功能。

# 六、关联登录指引

未登录状态下评论、收藏,应先登录后操作,建议使用简洁的登录流程,同时向用户强调个人信息安全。

你可直接使用智能小程序提供的登录中间页示例模板,优雅快速地接入最新登录能力。(查看开发文档

模板1:默认登录页

模板2:品牌图片登录页

模板3:功能前置登录页

模板4:沉浸式登录页

未登录状态下进行点赞,建议不要强制用户登录

你可直接使用智能小程序官方提供的一站式互动组件-点赞功能。(查看开发文档

正确

未登录状态依然可以点赞

错误

点赞前强制用户登录