ymcai

一文读懂强制阅读 2.0 更新了什么

前言

去年,我们赶在新规落地前做了适用于 H5 和小程序的“强制阅读”方案(相关文章),以帮助行内业务快速完成改造。

大量业务使用后反馈了一些优化建议,同时我们也发现了组件的一些瑕疵。我们同步进行阅读组件的优化和业务的实际使用案例的收集。然后从交互开始改造,迭代成今天要介绍的“强制阅读 2.0” 。

1.X 遗留问题回顾

与合规要求不吻合

在“强制阅读”方案设计之初,行内还未有明确的实操办法,业务或者团队内部的想法皆不尽相同。

于是我们综合考虑了各种需求,包括:区分必读与非必读,合并计时,分别计时,下拉到底,自定义外观和文案等。希望尽可能覆盖个性化需求,同时保证能和未来落地的实操办法对上号。

最初设计的“合并计时”相当于一个宽容模式,面向“只关心用户停留时长”的场景,所以它从诞生之初就被设计为不兼容“下拉到底”,用户可以在倒计时内任意切换文档。

你可能猜到了:与之对应的“分别计时”就是一个严格模式,面向希望对每个文档精细化控制阅读规则的场景。

我们设想有“下拉到底”的需求就应该直接用“分别计时”。这个设定虽然不违反法规,但 与后来合规确定的改造办法(使用下拉到底的方式,合并强制阅读时间 xx 秒)不吻合

而如果直接在现状基础上修改,会出现长时间“既引导下拉又引导等待”的情况,容易造成用户困惑。所以改造必须从交互着手,而不能由开发简单修改逻辑支持。

存在冗余功能

在合规的改造办法确定前,我们经常需要反复介绍这些设计的初衷、配置项的作用,即便当面沟通也很难三言两语讲明白。

在合规的改造办法确定后,我们收到最多的一个反馈就是:如何使用能实现强制下拉到底且合并计时 xx 秒?

我们意识到:最初塞进去的东西太多,无形中提高了使用门槛;由于政策原因不得不做的改造,业务更愿意直接按合规字面意思来,不影响业务发展即可 —— 个性化的需求其实很少。

体验有明显不足

此外,还 存在一些肉眼可见的体验不足

  • 使用置灰按钮显示秒数(看不清)
  • 倒计时给人以较强的“被迫感”(要弱化)
  • 滑动不流畅、缩放时闪烁

2.0 主要更新一览

开箱即合规

我们首先决定移除容易造成困扰,以及几乎用不到的功能,包括“分别计时”模式。

专注提供合并计时,可选下拉到底的模式。以便开发接入时能 用较少的耗时和配置,达到合规“办法”要求的效果

原来以分别计时接入使用的,升级后默认兼容为合并计时。我们也预留了可回退使用旧版特性的开关。

无感计时

上个版本中,用户从进入到离开阅读器都能够看到倒计时,包括文档加载过程中暂停递减的秒数。这就像客人走进餐厅时,服务员说的不是“欢迎光临”,而是“最低消费200元”。

确有必要时刻提醒剩余时间吗?实际上,大多数用户正常阅读几份协议下来都能满足 15 秒的要求

于是我们决定在大部分时候隐藏它。

弱化时间要求的感知,把它延迟到用户离开前 —— 用户读完最后一份必读文档,不满足时间要求再显示倒计时。与此同时,调整后的交互将指引用户一步一步满足阅读规则,取代后者的自行探索。

大部分体验者几乎感觉不到计时器的存在,或者被迫感明显降低。

醒目明确的提示

上个版本中,用户得知阅读要求的唯一途径是置灰按钮上的文本。存在看不清楚,“既引导下拉又引导等待”的问题。

现在,我们把重要提示从按钮的功能中分离出来,换成 固定在顶部的警告条,使提示更为醒目。倒计时出现时机的延迟也解决了第二个问题,在同一时间只引导用户做一件事

快捷滚动条

上个版本中,用户有且仅有“滑动屏幕”一种向下浏览的方式。

我们发现在长文档、必须下拉到底的场景下:

  • 用户需要滑动的次数多,操作累。
  • 用户得不到文档总长度的预期,有“深不见底”的感觉。
  • 用户想回看上文时很难快速定位到关键位置。

于是我们加了一个滚动条。

这个滚动条 可点击可拖动,方便用户快速定位段落或下拉到底

另外,滑块的高度是与文档的实际长度相关的(缩放时亦会调整),文档越长滑块越小,给用户一个总长度的预期

界线分明

由于 PDF 文档的页面通常包含较宽的边距,导致简单线性排列的页面间留有大块空白。

通过微调样式,页与页、页与阅读区的界线分明,避免大块空白使用户误认为是 bug

同时,边距和圆角也会随缩放变化,使文档 更具整体感

更流畅的手势操作

优化手势操作:

  • 滑动跟手性更佳,滑动惯性更流畅。
  • 修复缩放闪烁问题。

小程序页面跳转支持

由于微信小程序的限制,H5 需调用 JSSDK 切换小程序页面,才能使小程序侧收到消息。

在上个版本中,我们设想业务接入后的完整交互是:用户读完协议回到表单页,勾选框自动勾上。所以 H5 的默认设定就是让小程序回退页面。这实际上制约了业务逻辑串联的自由度。

有同学提出不想要勾选框,希望在用户读完协议后能直接跳转到一个新的页面 —— 比如让用户输入密码,让流程顺着往下走。

于是我们增加了一个配置项,用于向下跳转小程序页面。

pdfViewer.open({
  // ...
  redirectTo: '/pages/verify/index'
})

小程序收藏功能处理

安卓微信 7.015 版本起增加小程序收藏功能,可收藏某个页面至收藏夹。有部分用户收藏了文档阅读页,后续 通过收藏夹直接打开停留在白屏界面

我们 增加了两个回调用于处理收藏功能

// app.js
pdfViewer.config({
  onPageLoad (options, next) {
    const { from } = options
    if (from === 'favorites') {
      // 用户通过收藏直接打开页面...
      return
    }
    next()
  }
})
// your-page.js
pdfViewer.open({
  // ...
  onPageAddToFavorites() {
    // 自定义收藏内容(与小程序 Page.onAddToFavorites 一致)
    return {
      title: '我的贷款协议'
    }
  }
})

字体兼容性优化

去年底,有业务相继在线上和接入时发现白屏的问题:同一份文档的部分段落正常,部分段落空白,且与设备型号和网络状况无关

这实际上与 PDF 文档所使用的中文字体有关,它们都使用了 CID 字体

长话短说。

如今,很多中文字体使用 Adobe 公司的 CID 字体标准。当用户设备缺少某一 CID 字体时,需要通过特定的映射文件 —— CMap,用字符 code 查询字符的跨字体唯一 ID —— CID,然后用这个 CID 查找系统字体内可兜底显示的字形

所以必须准备一些常用的 CMap 文件供 PDF.js 使用。

对于 web 项目,我们增加了用于添加字符映射文件目录 URL 的选项。对于微信小程序,配套的 H5 已经包含了字符映射文件支持,直接使用新版即可。