使用 React-Joyride 让用户入门之旅变得简单

使用 React-Joyride 让用户入门之旅变得简单

您是否曾经尝试在网站上完成一项任务，却花费大量时间尝试识别不同的功能，甚至不知道某些功能？

用户入门导览，也称为产品演练，是向您的应用介绍新用户或描述新功能如何运作的不言自明的方式。它们是多步骤的应用内流程指南，可让用户熟悉特定功能。

应用程序的复杂性可能会使向用户解释新特性或功能变得具有挑战性，尤其是当您希望他们访问大量关键数据时。

用户入门之旅不仅限于指导新用户，还可以以其他不同方式使用，例如：

  • 发布新功能时，适用于所有用户。
  • 在用户尚未掌握更复杂功能的情况下。
  • 对于已经离开应用程序一段时间的当前用户。

本文将向您展示如何使用 Next.js 应用程序将用户引导至新网站，并使用 React Joyride 库向他们介绍基本的 UI 组件。

用户入门之旅的好处？

我们现在知道为什么需要用户引导之旅。让我们检查一下为什么应该在 Next.js 项目中使用它。

  • 降低客户支持成本 ：公司的客户支持人员经常被委托回答相同的用户问题，这可能会让人不知所措。质量和无缝的入职培训将减少对持续支持的需求。
  • 提高用户参与度 ：如果用户入门路线易于遵循，则用户更有可能留在周围并使用您的产品。
  • 改进/促进功能的采用 ：通常通过电子邮件通知用户程序的新功能的到来。即使它起作用了，它仍然不是很成功，因为一些用户可能不会打开他们的电子邮件来查看它，甚至最终会收到垃圾邮件。
  • 要求用户执行特定操作 ：您可以要求用户执行特定活动，以帮助他们熟悉各种功能。
  • 提高用户留存率 ：用户经常忘记特定功能的位置以及如何使用特定功能，但每次游览可能会帮助他们刷新记忆。此外，与用户入门指南的其他替代方法（例如视频教程和常见问题解答）相比，客户可能没有耐心在应用程序之外搜索有关您的应用程序的其他教程。

入职之旅可以提供“啊哈”的时刻，但在这与仅仅扰乱客户体验之间存在细微差别。

因此，它应具备以下品质：

  • 简洁明了 ：因为您网站的访问者希望快速开始使用您的应用程序，所以您应该尊重他们的时间，避免让他们在整个入职过程中激怒他们的冗长游览。它应该简明扼要。
  • 按顺序排列 ：每一个成功的用户入职体验都应该遵循一个结构，其中包含明显的后续步骤来提升用户。
  • 设计一致性 ：为了保持消费者的注意力，始终采用一致的设计。

最后，丰富的可用解决方案和库是在 React 生态系统中开发应用程序的主要好处之一。有一些现有的库可用于在 Next.js 应用程序中轻松设置用户入门之旅，包括 反应兜风 , 反应牧羊人 , Intro.js 反应 , 反应操纵杆 , 徒步旅行 , 反应堆 以及商业产品，例如 什么修复 , 随身听 , 应用程序 ， ETC。

在本文中，我们将坚持使用 React Joyride 库。

开源会话重播

开放重播 是一个开源的会话回放套件，可让您查看用户在您的 Web 应用程序上所做的事情，从而帮助您更快地解决问题。 OpenReplay 是自托管的，可以完全控制您的数据。

开始享受你的调试体验—— 开始免费使用 OpenReplay .

什么是 React Joyride？

反应兜风 是一个流行的库，用于为您的 React 应用程序创建导览。它允许开发人员选择 DOM 元素并提示工具提示，指出并解释该元素是什么。

React Joyride 由 吉尔巴巴拉 并于 2016 年发布了第一个版本。到目前为止，在 Github 上已经积累了超过 4.7k 颗星。

它的主要目标是向您的程序介绍新用户或解释新功能的工作原理。

该库会不断更新，如果您遇到任何问题，可以提供帮助。

React Joyride 是如何工作的？

为了执行某些功能，React Joyride 库使用了多种 道具 可以提供给joyride组件。

在引擎盖下，它使用 反应漂浮物 .

大型 Web 应用程序可以从其灵活性和可定制性中受益，以满足其独特的需求。

React Joyride 库提供了预构建的 UI 组件以便于设置，但您也可以选择使用最适合您要求的自定义 UI 组件。

下面是一个入职导览示例：

使用 React Joyride 向 Next.js 应用程序添加用户入门指南

我们将使用库提供的道具构建一个简单的入职导览，然后将了解如何使用函数而不仅仅是道具来完全控制导览。

为了将本文的重点完全放在 React Joyride 上，我设置了一个 起动机 Next.js 应用程序。

或者，您可以选择您选择的任何其他 Next.js 应用程序并跟随它。

让我们克隆 启动分支 .

运行以下代码：

 git clone -b 启动器[ https://github.com/wisdomekpotu/nextjs-user-onboarding-tour.git](https://github.com/wisdomekpotu/nextjs-user-onboarding-tour.git) cd nextjs-user-onboarding-tour  
 纱线安装

该网站应该可以在以下位置访问 本地主机：3000 .

构建游览组件

让我们从添加新库开始。在您的 Node.js 环境中，运行以下命令：

 纱线添加反应-joyride

首先，我们在目录下创建 Tour.js 文件 成分 .

添加以下代码：

 //Tour.js 从“反应”导入反应；  
 从“react-joyride”导入 JoyRide； // 游览步骤  
 常量 TOUR_STEPS = [  
 {  
 目标：“.tour-logo”，  
 content: "这是应用标志",  
 },  
 {  
 目标：“.tour-login”，  
 content: "查看登录按钮",  
 },  
 {  
 目标：“.tour-post”，  
 内容：“这是明信片”，  
 },  
 {  
 目标：“.tour-contact”，  
 内容：“这是联系表格”，  
 },  
 {  
 目标：“.tour-footer”，  
 内容：“查看我们的页脚”，  
 },  
 ]; // 旅游组件  
 const Tour = () => {  
 返回 （  
 <>  
 <JoyRide  
 步数={TOUR_STEPS}  
 />  
 </>  
 );  
 }; 导出默认游览；

如前所述， 道具 是 React Joyride 库的基础。这 脚步 道具是我们将使用的第一个也是最重要的道具。这 脚步 prop 是唯一需要的，它由一系列步骤组成。

该数组包含两个基本属性 目标 和 内容 .

  • 目标 : 在这里，我们针对适当的 类名 我们想在游览中突出显示的元素。
  • 内容 ：内容是为用户显示的信息（文本）。

定义数组步骤后，我们必须将其传递给 脚步 Joyride 组件中的道具。

动态导览组件导入

现在继续加载游览组件，我们可以在页面的任何位置执行此操作。

快速说明： 为了避免 Next.js 的更新版本出现问题，我们需要使用动态导入。

我将把它导入 index.js 页。

去 index.js 并使用以下代码进行修改：

 从“下一个/头”导入头；  
 从“../components/Contact”导入联系人；  
 从“../components/Post”导入帖子；  
 从“../components/Hero”导入英雄；  
 从“../components/Layout/Layout”导入布局；  
 从“下一个/动态”导入动态 //动态游览组件导入  
 常游=动态（  
 () => 导入('../components/Tour'),  
 { ssr：假 }  
 ) 导出默认函数 Home() {  
 返回 （  
 <>  
 <Head>  
 <title>VPN 最佳登陆页面</title>  
 <link rel="icon" href="/favicon.ico" />  
 </Head>  
 <Tour />  
 <Layout>  
 <Hero />  
 <Post />  
 <Contact />  
 </Layout>  
 </>  
 );  
 }

至此，我们的简单导览开始运行。

点击 信标 （动画点）闪烁开始游览。

现在您会注意到，要继续下一个元素，我们必须关闭游览。

这是一次非常糟糕的经历。

为了解决这个问题，我们将使用另一个名为 连续的 .

将其传递给 Joyride 组件并将其设置为 真的 .

 const Tour = () => {  
 返回 （  
 <>  
 <JoyRide  
 步数={TOUR_STEPS}  
 连续={真}  
 />  
 </>  
 );  
 };

这将添加一个 下一个 按钮，当用户到达游览结束时，它变为 最后的 ，这将停止游览。

在每一步启用跳过选项

跳过选项在您的导览中非常重要，因为有些用户可能已经熟悉您的应用程序并希望在没有它的情况下继续。

使用 React Joyride 实现这一点非常简单。

我们将利用 显示跳过按钮 支柱。这个道具将接受一个布尔值 真的 .

 const Tour = () => {  
 返回 （  
 <>  
 <JoyRide  
 步数={TOUR_STEPS}  
 连续={真}  
 showSkipButton={真}  
 />  
 </>  
 );  
 };

显示巡演进度

现在，当用户参加这次旅行时，我们需要向用户展示他们应该期待多少旅行项目/功能。它将采用格式（例如，1/5）。

我们可以通过添加 显示进度 支持 Joyride 组件。这个道具是一个布尔值，我们将设置为 真的 .

这应该与 显示跳过按钮 支柱。

添加自定义样式

您可能需要修改游览卡的默认样式。

您可以通过简单地添加 风格 支持您对 Joyride 组件的首选自定义。

 样式={{  
 工具提示容器：{  
 文本对齐：“左”  
 },  
 按钮下一步：{  
 背景颜色：“绿色”  
 },  
 按钮返回：{  
 边距右：10  
 }  
 }}

在我们的代码中，我们可以看到 风格 prop 是一个对象。它还有其他具有唯一键和值的对象。

  • 工具提示容器 : 关键是 文本对齐 , 其值被保留。
  • 按钮下一步 : 它的关键是 背景颜色 ，其值为绿色。
  • 按钮返回 ：它的值是10px，它有一个key叫做 边距右 .

自动开始游览

您可以选择在页面加载后立即开始游览，而无需单击信标。

传递一个名为 禁用信标：真 到 step 数组的第一步。

结论

在本文中，我们查看了 React Joyride 库以及如何使用它在 Next.js 应用程序中添加用户入门教程。您可以更进一步，通过使用按钮单击来控制游览 活动 和 行动 由库通过回调函数提供。

资源

最初发表于 https://blog.openreplay.com 2022 年 9 月 12 日。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38550/23092211

posted @   哈哈哈来了啊啊啊  阅读(1219)  评论(0)  编辑  收藏  举报
相关博文：
· 下一篇JS介绍
· 了解全局——Next.js
· NextJs 与 Tailwind 入门开发笔记
· React 简单登录平台Demo(1):Next.js配置
· NextJS v13服务端组件和客户端组件及最佳实践
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示