王者荣耀是如何手把手让你上头的-技术圈

时隔多日秋风又回来了，这次带来的主题是，王者荣耀是如何手把手让你上头的，对.... 其实这句话重点不是上头，也不是王者荣耀，重点是"手把手"。

为什么这么说呢？无图无真相，先上图。

没错，上面的就是王者荣耀的新手引导，手把手教学，还有妲己美妙的声音，让人如此上头。

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

而如果说，没有新手指引，让一个没有从来没有玩过此类游戏的新人，就上手一个 5v5 的战斗，在自己还没弄懂操作，就上手实战，那么新人肯定会被打的很惨，受到队友的抱怨不说，很快会输掉一场比赛，从而产生挫败感，觉得这个游戏垃圾，更不用说从游戏中体验快感。

所以说新手引导是一种能让用户在短时间内快速了解产品特色以及产品使用方式。

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

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

1.引导页

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

2.蒙层引导

在产品的整个界面上方用一个黑色半透明蒙层进行遮罩，这种引导方式可以让用户聚焦了解被圈注的功能点或手势说明。

3.气泡/弹窗提示

在操作按钮旁边弹出一个气泡提示框或者直接弹出弹窗。

4.动画/视频引导

用户可以根据动态演示，很快地理解整个产品。

5.操作式引导

一步一步地引导你进行操作，鼓励用户参与其中，边学边用。

6.预设任务

预设任务是指在用户进入产品后，自动为用户创建了一些和产品形态相关的示例，而不是留给用户一个空页面。

人将降大任于斯人也，所以最近我就遇到了这样的一个需求。不过我需要实现的也比较简单，只需要实现蒙层引导。

今天我们就来实现一下这个功能。先来看一下我们目标的样子。核心代码大概只需要花5分钟就能学会，只需 9 行 js 代码，60 行 CSS 代码。所以接着往下看吧 ~ 高亮部分会有不一样的收获哦 ~

主要包括三个部分: 蒙层、气泡、高亮。

蒙层和气泡对于很多同学来说，真的是太熟悉了。这里就只贴代码了，没有什么过多的可以讲解，主要是利用了绝对定位。

// 蒙层实现
<style>
.guide-mask {
  z-index: 999999;
  background-color: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  opacity: 0.8;
}
style>
<div class="guide-mask">div>

// 气泡实现
<style>
.tooltip-box:before {
  content: "";
  position: absolute;
  right: 100%;
  top: -10px;
  left: 20%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 13px solid white;
}
style>
<div class='tooltip-box'>
  秋风的技能
div>

而这个高亮怎么实现呢？如何能让蒙层中间产生一个空白框呢？在我所知的 CSS 属性中并没有相关的属性可以实现这个特性，如果不能这样实现。那意味着我是不是需要自己将这个高亮区块给空出来呢，自己通过拼接的方式来实现。如下所示，这是我第一直觉想到的方案。

而后我又使用了第二种方式。先来看一下实现方案的图层分解。

是的，通过图层分解，我们可以看到，目标的元素那一行"秋风的技能"是处于最高层，而不是和 "秋风的笔记"文字处于同一层。因此采取的方案是，我们没办法让蒙层在中间空出来，但是，我们可以通过 z-index 让我们的目标元素置于蒙层之上，然后再在蒙层和目标元素之间加入一个白色的背景框，这样就达到了高亮的效果。

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

<style>
  ...
  .guide-helper-layer {
    position: absolute;
    z-index: 9999998;
    background-color: #FFF;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 4px;
  }
  .guide-content {
    position: absolute;
    z-index: 10000000;
    background-color: transparent;
  }
  .guide-mark-relative {
    position: relative;
    z-index: 9999999 !important;
  }
  ...
style>
head>
<body>
    <h2>秋风的笔记h2>
    <div class="skill guide-mark-relative">
        ...
    div>
    <div class="guide-mask">div>
    <div class="guide-helper-layer" style="width: 472px; height:58px; top:55px;left: 36px;">
        <div class='tooltip-box'>
            秋风的技能
        div>
    div>
    <script>
        const guideTarget = document.querySelector('.skill')
        const tooltip = document.querySelector('.tooltip-box')
        var rect = guideTarget.getBoundingClientRect()
        const helperLayer = document.querySelector('.guide-helper-layer')
        helperLayer.style.left = rect.left - 3 + 'px'
        helperLayer.style.top = rect.top - 3 + 'px'
        helperLayer.style.width = rect.width + 3 * 2 + 'px'
        helperLayer.style.height = rect.height + 3 * 2 + 'px'
        tooltip.style.top = rect.height + 3 * 2 + 10 + 5 + 'px'
script>

以上就是实现一个蒙层引导的实现方案。当然这么精妙的设计也是离不开伟大的开源项目，以上就是参考了开源项目 introjs 来实现的。

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

jquery-pagewalkthrough

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

缺点: 需要依赖 jQuery。

intro.js

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

缺点: 个人免费，商业需要付费。

driver.js

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

缺点: 示例没有 intro.js 丰富。

综合来讲的话，driver.js 优势比较明显（因为可以商用~）。至此，本文就到此结束了，欢迎大家留言讨论哦~

参考

https://zhuanlan.zhihu.com/p/33508501

https://www.zhihu.com/question/20295898

http://www.woshipm.com/ucd/3506054.html

https://juejin.im/post/6844903859786104839

小狮子有话说

你好，我是 Chocolate，一个狮子座的前端攻城狮，希望成为优秀的前端博主，每周都会更新文章，与你一起变优秀~

关注小狮子前端，回复【小狮子】获取为大家整理好的文章、资源合集
我的博客地址：yangchaoyi.vip 欢迎收藏，可在博客留言板留下你的足迹，一起交流~
觉得文章不错，【点赞】【在看】支持一波 ✿✿ヽ(°▽°)ノ✿

叮咚~ 可以给小狮子加星标，便于查找。感谢加入小狮子前端，最好的我们最美的遇见，我们下期再见~