侧边栏壁纸
博主头像
M酷博主等级

一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 45 篇文章
  • 累计创建 40 个标签
  • 累计收到 456 条评论

目 录CONTENT

文章目录

前端如何快速实现新手引导功能?

M酷
2022-11-29 / 2 评论 / 13 点赞 / 4,105 阅读 / 917 字 / 正在检测是否收录...
广告 广告

🍄 在发布新产品或者有新功能上线时,往往需要新手引导功能来引导用户了解和使用新应用,也可以用于引流。下面分享几个开箱即用的新手引导组件,帮你快速实现新手引导功能!

Driver.js

Driver.js 是一个使用广泛的产品引导库,它在 Github 上拥有 14.5k Star,可在整个页面上吸引用户的注意力。其具有以下特点:

  • 轻量级,无依赖;
  • 小而快:压缩后约 4kb,但功能强大的 JavaScript 引擎;
  • 用户友好:提供可以根据喜好选择的各种主题;
  • 文档完善:文档包含示例及功能介绍、号召性用语组件、焦点转移器等。

Intro.js

Intro.js 是一个使用广泛的产品引导库,它在 Github 上拥有 21.9k Star。其具有以下特点:

  • 无依赖
  • 小而快:JS 整体大小为 10KB,CSS 为 2.5KB。
  • 用户友好:提供可以根据喜好选择的各种主题。
  • 兼容性佳:适用于所有主流浏览器,如 Google Chrome、Mozilla Firefox、Opera、Safari 等 。
  • 文档完善:文档包含要介绍的每个元素的样本和示例。

Shepherd

Shepherd 在 Github 上拥有 10.7k GitHub Star。它支持在多个前端框架中开箱即用,包括 React、Vue、Angular 等。其具有以下特点:

  • 辅助功能:提供键盘导航支持,遵循 a11y 规范,还可以使用 JavaScript 启用 DOM 元素内的焦点捕获。
  • 高度可定制:允许在不影响性能的情况下更改外观。
  • 框架支持:随时融入项目的前端框架。
  • 文档完善:文档涵盖安装和自定义,包括项目的主题和样式。

React Joyride

React Joyride 在 GitHub 上拥有超过 5.1k Star,在 React 项目中开箱即用,用于向现有用户介绍新功能。其具有以下特点:

  • 易于使用
  • 高度可定制
  • 文档完善
  • 积极维护

Vue Tour

Vue Tour 是一个轻巧、简单且可自定义的新手指引插件,可以与 Vue.js 一起使用。它提供了一种快速简便的方法来指导用户使用应用。它在 Github 上拥有 2.1 k Star。

Reactour

Reactour 是一个用于创建 React 应用导览的流行库。在 GitHub 上拥有 3.2K Star,它提供了一种简单的方式来引导用户浏览网站和应用。

13
广告 广告

评论区