前端常用的新手引导库,总有一款适合你!

更新日期: 2023-12-25阅读: 3.9k标签: 前端

在产品发布新版本或者有新功能上线时,经常需要新手引导功能来引导用户了解应用,新手引导功能在应用中具有以下作用:

  1. 帮助用户快速掌握应用的基本操作和核心功能,提高用户的使用体验。
  2. 引导用户了解应用的特点、优势和使用方法,激发用户的使用兴趣和需求。
  3. 帮助用户理解应用中的一些复杂功能和高级操作,提高用户对应用的认知和使用技能。
  4. 通过个性化的引导,满足不同用户的需求和偏好,提高应用的用户留存率和满意度。
  5. 通过反馈和评估,收集用户的反馈和建议,帮助开发者改进应用的功能和性能。

总之,新手引导功能在应用中扮演着重要的角色,可以帮助用户快速上手、提高使用体验、增强应用的认知度和用户留存率。同时,也帮助开发者收集反馈和建议,不断改进和优化应用的功能和性能。

下面就来分享几个开箱即用的新手引导组件工具库,帮你快速实现新手引导功能!


Intro.js

Intro.js 是一个帮助你引导新用户了解你的网站或应用的 JavaScript 库。它提供了一个简单的方式来创建优雅的指导体验,使得用户可以了解你的产品特性,快速上手,并对你提供的功能有更深入的理解。

介绍

Intro.js 的主要特点是:

  1. 易于使用:你只需要在你的 html 文件中包含一些特定的标记,然后引入 intro.js 文件,就可以开始创建引导。
  2. 丰富的主题:Intro.js 提供了许多可配置的主题,可以方便地定制你的引导样式。
  3. 互动性强:Intro.js 支持多种交互方式,例如点击、触摸或键盘操作,使得用户可以以他们喜欢的方式进行交互。
  4. 兼容性:Intro.js 在各种设备和浏览器上都有良好的兼容性。

使用

使用 Intro.js 的步骤如下:

  1. 引入库:首先,你需要在你的 HTML 文件中引入 intro.js 库。
  2. 定义引导步骤:然后,在你的 JavaScript 代码中,你需要定义引导的步骤。每个步骤都包括一个元素、一个标题、一段描述和一个可选的子步骤。
  3. 启动引导:最后,你需要在你的 JavaScript 代码中启动引导。你可以选择在页面加载时自动开始引导,或者让用户手动启动引导。

例如:

introJs().setOption('showProgress', true).start();

以上代码会在页面加载时自动开始引导,并且显示进度条。

请注意,为了使引导正常工作,你可能需要在你的 HTML 文件中包含一些特定的标记。具体的使用方法可以查阅 Intro.js 的官方文档。

Github:https://github.com/usablica/intro.js


Driver.js

Driver.js 是一个可以轻松实现新手指引交互的 javascript 工具库,主要的作用是为刚接触应用的新手用户快速了解产品,帮助用户把注意力聚焦到某项功能,从而快速熟悉我们的开发的产品。

介绍

Driver.js  的主要特点是:

  • 简单轻量:使用很简单,独立无依赖,只有 4kb 大小
  • 高度可定制:具有丰富强大的 api,按需使用
  • 交互体验好:支持动画过渡,体验流畅舒服
  • 突出显示任何内容:支持突出显示页面上的任何 dom 元素
  • 简单几步实现功能介绍:为我们 Web 应用创建很棒的功能介绍,体验优秀
  • 对用户操作友好:可以通过键盘控制引导流程,在生成力应用上很实用
  • 浏览器兼容性表现一致:支持几乎所有浏览器(包括著名的IE)

安装

Driver.js 支持通过 npm 或 yarn 来安装,比如:

yarn add driver.js
npm install driver.js

也可以在线或本地直接引入,需要注意要同时引入 css 文件:

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">

使用方法

最简单的使用方法是高亮突出一个元素,只要给一个 CSS 选择器即可:

const driver = new Driver();
driver.highlight('#create-post');

调整弹出框的位置:

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // 位置支持设置为 left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center
    position: 'left',
  }
});
github:https://github.com/kamranahmedse/driver.js


shepherd.js

Shepherd.js 是一个用于创建引导体验的轻量级库。它可以帮助开发者创建一种用户友好的方式,引导用户了解新的功能或界面。

使用

使用Shepherd.js的基本步骤如下:

  1. 引入库:首先,你需要引入Shepherd.js库。这可以通过在HTML文件中引入相关脚本文件或使用CDN链接来实现。
  2. 创建引导:在JavaScript代码中,你可以使用Shepherd.js来创建引导。这通常涉及定义一系列的步骤,每个步骤都包含一个元素、一个标题、一段描述和可能的子步骤。
  3. 配置选项:你可以通过调用setOption方法来配置Shepherd.js的行为。例如,你可以设置是否显示进度条、是否允许用户跳过引导等。
  4. 启动引导:最后,调用start方法来启动引导。这通常在页面加载完成后执行。

例如:

var shepherd = new Shepherd.Tour({  
defaults: {
classes: 'shepherd-theme-dark',
showCancelLink: true,
scrollTo: true,
steps: [
{
element: '#step1',
title: 'Step 1',
text: 'This is step 1'
},
{
element: '#step2',
title: 'Step 2',
text: 'This is step 2'
}
]
}
});

// 启动引导
shepherd.start();

在这个示例中,我们创建了一个包含两个步骤的引导。每个步骤都关联到一个特定的元素(通过元素的ID指定),并具有一个标题和描述。最后,我们调用start方法来启动引导。

请注意,为了使引导正常工作,你需要确保每个步骤所关联的元素在页面加载时存在。此外,你还可以根据需要自定义引导的样式和行为。

shepherd:https://github.com/shipshapecode/shepherd
react-shepherd:https://github.com/shipshapecode/react-shepherd
vue-shepherd:https://github.com/shipshapecode/vue-shepherd
angular-shepherd:https://github.com/shipshapecode/angular-shepherd


React-JoyRide

React-JoyRide是一个React组件库,它提供了一个轻松的引导体验。这个库使用一个直观的API来定义引导步骤,并允许你自定义每个步骤的样式和行为。React-JoyRide还提供了一些额外的功能,如导航控制、回调函数等,使你能够更灵活地控制引导过程。

使用

使用React-JoyRide的基本步骤如下:

安装库:首先,你需要在你的项目中安装React-JoyRide库。你可以使用npm或yarn来安装它。

npm install react-joyride

或者

yarn add react-joyride

引入库:在你的React组件中,你需要引入React-JoyRide库。

import JoyRide from 'react-joyride';

定义引导步骤:你需要定义引导的步骤。每个步骤都包含一个标题、描述和目标元素。你可以通过传递一个数组来定义多个步骤。

const steps = [  
{
target: '#step1',
title: 'Step 1',
description: 'This is step 1'
},
{
target: '#step2',
title: 'Step 2',
description: 'This is step 2'
}
];

配置选项:你可以通过传递一个配置对象来配置React-JoyRide的行为。例如,你可以设置是否显示导航控制、是否自动滚动到目标元素等。

const options = {  
showNavigation: true,
autoScroll: true,
// 其他选项...
};

渲染组件:最后,你可以在React组件中渲染JoyRide组件,并传递步骤和选项作为props。

<JoyRide steps={steps} options={options} />

这样,当用户访问你的网站时,React-JoyRide会自动引导他们了解你的界面或功能。你可以根据需要自定义每个步骤的样式和行为,以及整个引导的外观和感觉。

Github:https://github.com/gilbarbara/react-joyride


Reactour.js

Reactour.js的设计目标是提供一种简单而灵活的方式来创建引导体验。它提供了丰富的组件和功能,使开发者能够轻松地定义引导步骤、导航控制、回调函数等。此外,Reactour.js还支持多种自定义样式和行为,以满足不同的项目需求。

使用

使用Reactour.js的基本步骤如下:

安装库:首先,你需要在你的项目中安装Reactour.js库。你可以使用npm或yarn来安装它。

npm install reactour

或者

yarn add reactour

引入库:在你的React组件中,你需要引入Reactour.js库。

import Reactour from 'reactour';

定义引导步骤:你需要定义引导的步骤。每个步骤都包含一个标题、描述和目标元素。你可以通过传递一个数组来定义多个步骤。

const steps = [  
{
target: '#step1',
title: 'Step 1',
description: 'This is step 1'
},
{
target: '#step2',
title: 'Step 2',
description: 'This is step 2'
}
];

配置选项:你可以通过传递一个配置对象来配置Reactour.js的行为。例如,你可以设置是否显示导航控制、是否自动滚动到目标元素等。

const options = {  
showNavigation: true,
autoScroll: true,
// 其他选项...
};

渲染组件:最后,你可以在React组件中渲染Reactour组件,并传递步骤和选项作为props。

<Reactour steps={steps} options={options} />

这样,当用户访问你的网站时,Reactour.js会自动引导他们了解你的界面或功能。你可以根据需要自定义每个步骤的样式和行为,以及整个引导的外观和感觉。

Github:https://github.com/elrumordelaluz/reactour


Vue Tour

Vue Tour是Vue.js的一个插件,它可以帮助开发者在应用程序中创建引导体验。Vue Tour提供了一种简单而直观的方式来定义和组织引导步骤,并在用户访问应用程序时自动引导他们了解新的功能或界面。

介绍

Vue Tour通过在应用程序中添加一个特殊的组件来工作。这个组件可以包含一系列的步骤,每个步骤都包含一个目标元素、一个标题、一个描述和一个可选的子步骤。当用户访问应用程序时,Vue Tour会自动引导他们按照定义的步骤进行操作。

Vue Tour还提供了一些额外的功能,如导航控制、回调函数等,使你能够更灵活地控制引导过程。此外,Vue Tour还支持多种自定义样式和行为,以满足不同的项目需求。

使用

使用Vue Tour的基本步骤如下:

安装库:首先,你需要在你的项目中安装Vue Tour库。你可以使用npm或yarn来安装它。

npm install vue-tour

或者

yarn add vue-tour

引入库:在你的Vue组件中,你需要引入Vue Tour库。

import VueTour from 'vue-tour';

定义引导步骤:你需要定义引导的步骤。每个步骤都包含一个目标元素、一个标题和描述。你可以通过传递一个数组来定义多个步骤。

const steps = [  
{
target: '#step1',
title: 'Step 1',
description: 'This is step 1'
},
{
target: '#step2',
title: 'Step 2',
description: 'This is step 2'
}
];

配置选项:你可以通过传递一个配置对象来配置Vue Tour的行为。例如,你可以设置是否显示导航控制、是否自动滚动到目标元素等。

渲染组件:最后,你可以在Vue组件中渲染VueTour组件,并传递步骤和选项作为props。

<v-tour :steps="steps" :options="options" />

这样,当用户访问你的应用程序时,Vue Tour会自动引导他们了解新的功能或界面。你可以根据需要自定义每个步骤的样式和行为,以及整个引导的外观和感觉。

Github:https://github.com/pulsardev/vue-tour


链接: https://www.fly63.com/article/detial/12618

前端开发,脱离菜鸟层次的二个关键点

我个人吧,一直认为学习前端技术是比较简单的事情,只要你真的是一步一个脚印的在前进,那你自然会有相应的结果可以收获。这里面包含二个关键点,一,脚踏实地;二,不断努力。

前端开发,如何写出优秀js代码

前端开发如何写出优秀js代码,什么样的javascript代码才是最优秀的的呢?我总结的大概分为三点:性能好,简单优雅,通俗易懂,这篇文章就将围绕这这3点来说明。

解读前端热更新原理

热更新:浏览器的网页通过websocket协议与服务器建立起一个长连接,当服务器的css/js/html进行了修改的时候,服务器会向前端发送一个更新的消息,如果是css或者html发生了改变,网页执行js直接操作dom,局部刷新,如果是js发生了改变,只好刷新整个页面。

你不知道的前端SDK开发技巧

作为一个SDK,我们的目标是让使用者能够减少查看文档的时间,所以我们需要提供一些类型的检查和智能提示,一般我们的做法是提供JsDoc,大部分编辑器可以提供快捷生成JsDoc的方式,另一种做法是使用Flow或者TypeScript

Web前端体系的脉络结构

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。

关于前端数据&逻辑的思考

这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步:拆分组件,逻辑处理,抽象、聚合数据

什么是前端? web1.0、web2.0时代的网页制作,前端开发都有哪些内容等

前端基础-什么是前端:一、 web1.0时代的网页制作,二、 web2.0时代的前端开发,三、 Web前端能做什么?四、 为什么要学习前端开发,五、 前端开发都有哪些内容,六、 开发环境

web前端的一些不为人知的冷知识点_html篇整理

web前端HTML篇冷知识点——这是一篇关于前端的技巧使用,或许你做前端很多年了,但是下面的这些你可能闻所未闻。现在这里给大家整理出来,分享给前端的小伙伴们。

web前端的一些不为人知的冷知识点_CSS篇整理

CSS篇整理:关于CSS的恶作剧、简单的文字模糊效果、垂直居中、多重边框、实时编辑CSS、创建长宽比固定的元素、CSS中也可以做简单运算

web前端的一些不为人知的冷知识点_Js篇整理

Js篇整理:生成随机字符串、整数的操作、重写原生浏览器方法以实现新功能、关于console的恶作剧、万物皆对象、If语句的变形、禁止别人以iframe加载你的页面、console.table

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!