从王者荣耀里我学会的前端新手指引

待我称王封你为后i 2022-11-22 12:40 323阅读 0赞

在王者的世界里，不仅仅只有快乐，还能搞学习，让你成为快乐而又富有知识的人。这其中的功臣，这不得不说的就是它的新手指引。

为什么这么说呢？我们先来看几张图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
没错，上面的就是王者荣耀的新手引导，手把手教学，还有妲己美妙的声音。

整个过程大约 2分钟。它使用了多种引导方式，蒙层引导、气泡引导、视频引导、操作引导还有预设任务，可以说在新手引导方面，真的很"细"，用了各种各样的花样。但是它用了仅仅 2 分钟的指引就让你快速体验到了整个产品的使用方式，让你感受到打败敌人是如此满足，赢得一场游戏是如此简单。你收获了大量的快乐同时产生对它的依赖。

而如果说，没有新手指引，让一个没有从来没有玩过此类游戏的新人，就上手一个 5v5 的战斗，在自己还没弄懂操作，就上手实战，那么新人肯定会被打的很惨，受到队友的抱怨不说，很快会输掉一场比赛，从而产生挫败感，觉得这个游戏垃圾，更不用说从游戏中体验快感。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
所以说新手引导是一种能让用户在短时间内快速了解产品特色以及产品使用方式。

它是非常重要也是非常有必要学习的一个功能！这也是本篇文章想要介绍的重点内容。下面就进行原理实战讲解

我先介绍一下常见的几种类型新手引导效果图。

1.引导页

引导页一般出现在首次打开APP的时候，由3-5个页面组成。

> 我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
2.蒙层引导

在产品的整个界面上方用一个黑色半透明蒙层进行遮罩，这种引导方式可以让用户聚焦了解被圈注的功能点或手势说明。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]  
3.气泡/弹窗提示

在操作按钮旁边弹出一个气泡提示框或者直接弹出弹窗。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]  
4.动画/视频引导

用户可以根据动态演示，很快地理解整个产品。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]  
5.操作式引导

一步一步地引导你进行操作，鼓励用户参与其中，边学边用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]  
6.预设任务

预设任务是指在用户进入产品后，自动为用户创建了一些和产品形态相关的示例，而不是留给用户一个空页面。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]  
人将降大任于斯人也，所以最近我就遇到了这样的一个需求。不过我需要实现的也比较简单，只需要实现蒙层引导。

今天我们就来实现一下这个功能。先来看一下我们目标的样子。核心代码大概只需要花 5 分钟就能学会，只需 9 行 js 代码，60 行 css 代码。所以接着往下看吧 ~ 高亮部分会有不一样的收获哦 ~  
![在这里插入图片描述][2020110411545229.png_pic_center]  
主要包括三个部分: 蒙层、气泡、高亮。![在这里插入图片描述][20201104115500689.png_pic_center]  
蒙层和气泡对于很多同学来说，真的是太熟悉了。这里就只贴代码了，没有什么过多的可以讲解，主要是利用了绝对定位。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]  
而这个高亮怎么实现呢？如何能让蒙层中间产生一个空白框呢？在我所知的 CSS 属性中并没有相关的属性可以实现这个特性，如果不能这样实现。那意味着我是不是需要自己将这个高亮区块给空出来呢，自己通过拼接的方式来实现。如下所示，这是我第一直觉想到的方案。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]  
但是以上方式的实现比较繁琐，而后我又使用了第二种方式。先来看一下实现方案的图层分解。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]  
是的，通过图层分解，我们可以看到，目标的元素那一行"秋风的技能"是处于最高层，而不是和 "秋风的笔记"文字处于同一层。因此采取的方案是，我们没办法让蒙层在中间空出来，但是，我们可以通过z-index让我们的目标元素置于蒙层之上，然后再在蒙层和目标元素之间加入一个白色的背景框，这样就达到了高亮的效果。

关于定位，我们通过 getBoundingClientRect 属性来获取目标元素的大小及其相对于视口的位置。然后通过绝对定位来进行布局。以下就是这个实现的主要逻辑（代码比较粗糙，主要是意思表达

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]  
以上就是实现一个蒙层引导的实现方案。当然这么精妙的设计也是离不开伟大的开源项目，以上就是参考了开源项目 introjs 来实现的。

完整代码仓库: github.com/hua1995116/…

我顺便来介绍一下目前我看到新手引导比较好的几个开源项目。

jquery-pagewalkthrough

优势: 手绘风，适用于特定的网站风格。

缺点: 需要依赖 jQuery。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]  
intro.js

优势: 拥有丰富的蒙层引导示例，可自定义主题

缺点: 个人免费，商业需要付费。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]  
driver.js

优势: MIT 开源，拥有与 intro.js 差不多的功能。

缺点: 示例没有 intro.js 丰富。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]

至此，本文就到此结束了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/bd5bb927086448b3abf433d279cb8eb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/1ab91e849119474187d370d4d695b4c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/c1687b8d096c4b708cd42155477636cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/963b927b6ba64d48bd209ccf44ac4ad3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/fe542237ea3949919e4c4dc06cf990e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/eaae7d48ecbb4cfe9297697778742010.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/40efe360a0c84e61ad501c985c037efe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/0d664f6d3cf74f6bbc092e9f864fa67d.png
[2020110411545229.png_pic_center]: /images/20221120/225f2eeb654b46b8a9ac7dbda0452caa.png
[20201104115500689.png_pic_center]: /images/20221120/e27ac8f568164288ac07ae0fac22f08f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/7f66f54eed82499c8ed00b97fc61d7f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/62fd5c315f2d4dcfbadec651e0596c00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221120/0df365e0a36744ad92710372449bb6c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221120/4ec5b1218dc9435fb837b5a1e47b69c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221120/8dc524100a5240c9bff70e4b43d7205e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221120/7f90bb182aa04ae1bbf2cf7839f4d1a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221120/28252f0c72b449698027e749308efc0f.png