用于前端应用程序的 est 产品之旅 JavaScript 库

作者：Abiola Farounbi✏️

现代 Web 应用程序通常包含许多功能和用例。但是，呈现这些功能的方式（尤其是对于首次使用的用户以及新功能或更新功能）可能会显着影响用户体验。

如果引导过程未正确完成，用户可能会感到不知所措或发现导航不清楚。实现顺利的入职流程和提高用户满意度的一种有效方法是使用产品导览。

幸运的是，有许多产品游览库可帮助您为您的应用程序构建信息丰富且引人入胜的导游。在本文中，我们将探索一些最好的旅游库，讨论它们的功能、优点、缺点和用例，以帮助您做出选择。

为什么要使用产品游览库？

产品导览是一种结构化和交互式的方式，可以让用户熟悉应用程序的主要特性和功能。使用一系列屏幕元素、模式或工具提示，您可以引导用户顺利地了解产品功能。这有助于增强整体用户体验并提高用户参与度。

有许多免费和开源库可帮助您实现产品导览。虽然从头开始构建自定义游览可能很诱人，但现实情况是，随着时间的推移，维护和迭代所需的时间和资源可能会非常昂贵。

您的旅游图书馆应具备的基本功能

是什么让旅游图书馆“好”？当然，答案可能取决于您的需求。不过，一般来说，一个好的旅游库必须具备以下功能：

• 灵活且可定制的选项，可根据您的喜好控制游览的外观和行为
• 清晰且广泛的文档和 API 参考
• 兼容不同的 UI 框架，并提供轻松集成的支持
• 具有内置分析或支持与其他外部分析工具集成
• 开源，拥有活跃的用户和贡献者社区
• 不断维护和更新，以跟上趋势和技术变化

考虑到这些重要功能，我审查了各种用户入门库，并选择了前七个在本文中进行讨论：

• Intro.js
• 船上
• 引导之旅
• Driver.js
• TourGuide.js
• 流动
• 牧羊人

现在，让我们看一下每个库的详细描述以及展示其功能的实际示例，并帮助您选择最适合您的项目需求的库。

简介.js

Intro.js 是一个开源 JavaScript 库，它提供了一种创建简单有效的产品导览的简单方法。它的文件大小约为 12.5 KB，因此它是一个轻量级库，可以轻松构建简单的演练： Intro.js 的主要功能之一是它的可定制性。它允许您通过提供各种主题和可定制的元素（例如颜色、字体和定位）来定制您的游览，以与您的应用程序的品牌保持一致。

将 Intro.js 集成到您的项目中后，您可以将网页上的特定元素指定为游览步骤。在浏览过程中，Intro.js 会突出显示这些元素，并提供信息丰富的文本叠加或工具提示来指导用户完成应用程序。用户可以按照自己的节奏使用直观的按钮向前、向后或退出游览来导航游览。

Intro.js 提供了现成的前端框架包装器，可以更轻松地在基于流行的 React、Angular 或 Vue.js 框架构建的项目中使用它。它还具有良好的文档参考和可重用的示例。

虽然 Intro.js 可能缺乏一些高级功能，但其简单性和易用性使其成为需要快速高效的入门解决方案的项目的绝佳选择。请记住，Intro.js 的免费层限制商业用途，而商业项目的付费许可证起价为 9.99 美元。

翁博尔达

Onborda 是一个轻量级 JavaScript 库，用于在 Next.js 应用程序中进行交互式产品导览。它使用流行的前端工具，如 Framer Motion 来实现流畅的动画，使用 Tailwind CSS 来进行样式设置： Onborda 使用提供程序组件来管理整体游览体验。您可以在 Next.js 应用程序中定义一系列“步骤”，指定要突出显示的元素以及要向用户呈现的内容。然后，Onborda 负责通过动画和工具提示呈现游览，引导用户使用应用程序的关键功能。

但是，重要的是要考虑到 Onborda 主要是为 Next.js 设计的。将其与其他框架集成可能需要额外的工作。

此外，作为一个较新的库，与更成熟的选项相比，Onborda 可能拥有更小的社区和更少的文档。决定 Onborda 是否适合您的项目取决于您的具体需求和框架偏好。

引导之旅

Bootstrap Tour 是一个免费的开源 JavaScript 库，专门用于使用 Bootstrap 弹出窗口创建产品导览。对于开发人员来说，这是一个流行的选择，特别是如果您已经在使用 Bootstrap 的组件和样式开发项目：

创建 Bootstrap 弹出窗口就像在项目中包含 JavaScript 和 CSS 文件一样简单。 Bootstrap Tour 还附带详细的文档，这将帮助指导您完成设置。

Bootstrap Tour 允许您将网页上的特定元素定义为游览步骤。在游览期间，Bootstrap Tour 利用 Bootstrap 的弹出窗口组件在突出显示的元素旁边显示信息内容。用户可以使用键盘与游览交互以导航步骤。

虽然 Bootstrap Tour 提供了用户友好的功能，但其缺点之一是其文档很差 - 目前尚未积极更新。 GitHub 上大量未解决的问题清楚地表明社区支持很少。

驱动程序.js

Driver.js 是一个使用 TypeScript 构建的强大 JavaScript 库，具有更好的可维护性。它的设计是轻量级的，不依赖于外部库，因此很容易集成到现有项目中，并且对性能的影响最小： Driver.js 不仅仅是简单的突出显示 - 它提供了高度的自定义来满足您的特定需求用例。您可以准确定义元素的突出显示方式，并能够使用提供的挂钩在焦点转移期间操纵它们。

此外，Driver.js 还附带了一些准备好的示例，为您提供了在自定义产品之旅时使用的不同选项。它还支持用户友好的键盘导航，并且是开源的，具有宽松的 MIT 许可证，可在个人和商业项目中免费使用。

我应该在这里指出，Driver.js 与框架无关，这使得它非常灵活并且能够与不同的框架很好地配合使用。然而，虽然它与不同的前端框架完全集成，但它没有内置特定于框架的游览组件。

对于任何寻求更轻松设置过程的人来说，这可能需要额外的开发时间。相比之下，提供拖放功能或特定于框架的游览组件的库可能会让您更快地进行设置。

有关 Driver.js 的更深入指南，请查看我们的 Driver.js 教程。

旅游指南.js

TourGuide 是作为一个实验库开发的，用于在单页应用程序中构建可定制的用户游览和入门旅程。它通过回调实现了许多承诺驱动的方法，这有助于保证对异步操作的支持，并允许对游览流程进行更精细的控制： 该库的一个独特功能是它依赖于 Floating UI 库。浮动 UI 提供了各种定位功能，可用于将元素彼此锚定 - 例如，将浮动元素绝对定位在参考元素旁边。

TourGuide 库提供了广泛的自定义选项，允许您定义从配色方案和字体到元素定位的所有内容。您甚至可以将自定义 HTML 内容合并到您的游览步骤中，确保完全定制的入门体验与您的应用程序设计无缝集成。

此外，TourGuide.js 拥抱开源开发，培育协作社区并持续改进。这也使您可以在商业和个人项目中自由地使用该库，不受任何限制。

尽管 TourGuide.js 已可用于生产环境，但它仍在开发中，与某些替代库相比，可能会导致文档不够全面。

流量

Flows 是一款独特的工具，旨在在 Web 应用程序中创建产品导览和用户入门体验。它提供了一个所见即所得的编辑器，用于直观地构建流程，并提供使用 SDK 直接在代码库中定义它们的选项，以满足不同偏好的开发人员： 流程编辑器通过视觉指南和实时功能简化了创建流程的过程。应用程序预览。该库通过将速度、灵活性、可靠性和设计付诸实践来强调用户驱动的入门。换句话说，您可以快速创建和部署入职流程，而您的用户无需等待。

Flows 不仅仅是基本的工具提示和模式，还提供多种步骤类型，包括为用户操作而暂停的“等待”步骤和条件路径的“分支”步骤。它还包括进一步的高级步骤类型以增加功能，例如条件分支、函数调用和人工智能驱动的决策。

Flows 还以非常原生的方式包含对性能指标的内置分析，例如观看次数、完成次数和下降次数。您可以进一步扩展它以与第三方工具集成，以更全面地了解用户旅程，或者使用 CSS 和 JavaScript 定制您的入门流程，以确保为开发人员提供无缝的品牌体验。

虽然有每月提供 1000 个流的免费套餐，但 Flows 使用基于使用情况的定价。高使用量用户将面临更高的成本，因此如果您预计使用量很大，您可能需要考虑更具成本效益的选择。

Shepherd.js

Shepherd.js 是一个简单的 JavaScript 库，旨在简化 Web 应用程序中用户浏览的过程。它有一个清晰、直观的界面，您可以在其中逐步描述您的游览，这有助于改善游览用户体验并增强用户理解： Shepherd.js 提供广泛的自定义选项并与您的应用程序无缝集成。它通过全键盘导航优先考虑可访问性。与 TourGuide 一样，Shepherd.js 也使用浮动 UI 来呈现每个游览步骤的对话框。

此外，Shepherd.js 提供与框架无关的功能，可以轻松集成到不同的前端框架中。虽然它能够独立工作于任何框架，但它还提供特定于框架的包装器，这些包装器具有更多特定于框架的功能。

当然，Shepherd.js - 像任何库一样 - 也有一些限制。例如，它缺乏内置的用户参与度分析，并且与更简单的库相比具有更陡峭的学习曲线。

旅游图书馆对照表

为前端应用程序选择游览库时，请确保在做出决定之前比较每个选项的主要功能。下面是一个比较表，总结了我们讨论的库的主要特性、优缺点：

Feature/Library	Intro.js	Shepherd	Onborda	Flows	Driver.js	TourGuide.js	Bootstrap Tour
Open source	✅	✅	✅	✅	✅	✅	✅
Community support	Large	Large	Small	Growing	Moderate	Small	Large
Free tier	✅	✅	✅	Up to 1000 flows per month	✅	✅	✅
Ease of use	Very easy	Easy	Moderate	Moderate	Moderate	Moderate	Very easy
Built-in analytics	❌	❌	❌	✅	❌	❌	❌
Framework support	Framework agnostic	Framework agnostic	Designed for Next.js, supports others	Framework agnostic	Framework agnostic	Framework agnostic	Bootstrap-based
Documentation	⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐	⭐
Pros	Simple, lightweight	Highly customizable, flexible	Easy integration, customizable	Intuitive, highly flexible, built-in analytics	Lightweight, flexible	Customizable, framework agnostic	Easy to use with Bootstrap projects
Cons	Limited advanced features	Steeper learning curve for complex customizations	Smaller community, designed for Next.js	Potential costs for high usage	Doesn't have pre-built components for specific frameworks	Limited advanced features, early development	Limited advanced features, requires Bootstrap
Best use cases	Simple onboarding, quick tours	Customizable onboarding for SPAs	Next.js apps, customizable tours	High-customization onboarding	Lightweight, flexible tours	Detailed and complex tours	Bootstrap-based projects

此概述应该可以帮助您快速确定哪个库适合您的要求。

结论

您的网站或应用程序的用户入门体验对于塑造第一印象和提高用户保留率至关重要。为您的前端应用程序选择正确的游览库使您能够制作引人入胜且信息丰富的游览，引导用户了解产品的功能。

每个库都提供独特的功能和优势，满足不同的开发偏好和项目要求。本文提供了最佳旅游图书馆的比较概述，以帮助您做出决定。仔细考虑这些因素来选择用户入门库，使您能够从第一次交互中创建无缝且引人入胜的用户体验。

最终，最好的库取决于功能、易用性和预算之间的平衡。您可能还需要考虑针对您在项目中使用的框架或库策划的产品游览库，例如 React 产品游览库或 Vue 产品游览库。

如果您有任何疑问，请随时在 Twitter 上与我联系或在下面发表评论。快乐编码！

---

您是否添加新的 JS 库来构建新功能或提高性能？如果他们反其道而行怎么办？

毫无疑问，前端变得越来越复杂。当您向应用添加新的 JavaScript 库和其他依赖项时，您需要更多的可见性以确保您的用户不会遇到未知问题。

LogRocket 是一个前端应用程序监控解决方案，可让您重放 JavaScript 错误，就像它们发生在您自己的浏览器中一样，以便您可以更有效地对错误做出反应。

LogRocket 可以与任何应用程序完美配合，无论框架如何，并且具有用于记录来自 Redux、Vuex 和 @ngrx/store 的其他上下文的插件。您无需猜测问题发生的原因，而是可以汇总并报告问题发生时应用程序所处的状态。 LogRocket 还监控您的应用程序的性能，报告客户端 CPU 负载、客户端内存使用情况等指标。

自信地构建 - 开始免费监控。

以上是用于前端应用程序的 est 产品之旅 JavaScript 库的详细内容。更多信息请关注PHP中文网其他相关文章！