在王者的(de)世界裡(lǐ)，不(bù)僅僅隻有(yǒu)快(kuài)樂(yuè)，還(§←hái)能(néng)搞學習(xí)，讓你(nǐ)成為(w≤÷↓èi)快(kuài)樂(yuè)而又(yòu)富有(yǒu)知(zh©‍>εī)識的(de)人(rén)。這(zhè)其中的(de)功臣，這(zhè)不(b≈γ‍ù)得(de)不(bù)說(shuō)的(de)就(jiù)是(shì)它的(de→Ωσ∞)新手指引。

為(wèi)什(shén)麽這(zhè)麽說(shuō)呢(ne)？我們先來(l≥✘​ái)看(kàn)幾張圖。

沒錯(cuò)，上(shàng)面的(de)就(jiù)是(shì)εδ 王者榮耀的(de)新手引導，手把手教學，還(hái)有(yǒu)妲己♠≈γ美(měi)妙的(de)聲音(yīn)。

整個(gè)過程大(dà)約 2分(fēn)鐘(zhōng)。它使用(yòng)了(le)多(duō)種引導方式，蒙層引導、氣泡引導、視(shì)頻(pín)引導、操作(zuò)引導還(hái)有(yǒu)預設>≤φ®任務，可(kě)以說(shuō)在新手引導方面，真的(de)很(hěn)"細"，用(yòn∏‍ε←g)了(le)各種各樣的(de)花(huā)樣。但(d✔™÷≈àn)是(shì)它用(yòng)了(le)僅僅 2 分(fēn)↓♦Ω 鐘(zhōng)的(de)指引就(jiù)讓你(nǐ)快(€§kuài)速體(tǐ)驗到(dào)了(le)整個(gè)産✘☆品的(de)使用(yòng)方式，讓你(nǐ)感受到(dào)打敗敵人(rén)是(shì)α∞&如(rú)此滿足，赢得(de)一(yī)場(chǎn•←g)遊戲是(shì)如(rú)此簡單。你(nǐ)收獲了(le)大(dà)量÷÷的(de)快(kuài)樂(yuè)同時(shí)産生(shēng)對(duì)它的(>→←de)依賴。

而如(rú)果說(shuō)，沒有(yǒu)新手指引，讓一(yī)個(gèδ‍★)沒有(yǒu)從(cóng)來(lái)沒有(yǒu)玩(↕σwán)過此類遊戲的(de)新人(rén)，就(jiù)上(shα±₩àng)手一(yī)個(gè) 5v5 的(de)戰鬥，在自(zì)己還(hái)沒弄懂(d↕ $™ǒng)操作(zuò)，就(jiù)上(shàng)手實戰，那(nà)麽§€¶新人(rén)肯定會(huì)被打的(de)很(hěn)慘，受到(dào)隊友(yǒu)的λ₩✔(de)抱怨不(bù)說(shuō)，很(hěn)快(kuài)會←§₩(huì)輸掉一(yī)場(chǎng)比賽，從(cóng)而産生©π(shēng)挫敗感，覺得(de)這(zhè)個(gè)遊戲垃圾，更不¥€☆&(bù)用(yòng)說(shuō)從(cóng)遊戲中體(tǐ)驗快(kuài)感。

所以說(shuō)新手引導是(shì)一(yī)種能(néng)讓用(yòng)戶在短(→♦duǎn)時(shí)間(jiān)內(nèi)快(kuài)速了(le)解産品特色以‌≠∏§及産品使用(yòng)方式。

它是(shì)非常重要(yào)也(yě)是(shì)非常有(yǒu)®λ必要(yào)學習(xí)的(de)一(yī)個(gè)功能(néng)！這♣♣(zhè)也(yě)是(shì)本篇文(wén)章(z‍♦hāng)想要(yào)介紹的(de)重點內(nèi)容。下(xià)面就(←₩♠jiù)進行(xíng)原理(lǐ)實戰講解

我先介紹一(yī)下(xià)常見(jiàn)的(de) €£<幾種類型新手引導效果圖。

1.引導頁

引導頁一(yī)般出現(xiàn)在首次打開(kāi)APP的(de)÷ 時(shí)候，由3-5個(gè)頁面組成。

2.蒙層引導

在産品的(de)整個(gè)界面上(shàng)方用(yòng)↕♥↕∏一(yī)個(gè)黑(hēi)色半透明(míng)蒙層進行(₹♣xíng)遮罩，這(zhè)種引導方式可(kě)以讓用(yòng)戶聚焦了(le)解被圈注的(d≠'©€e)功能(néng)點或手勢說(shuō)明(míng)。£'≈

3.氣泡/彈窗(chuāng)提示

在操作(zuò)按鈕旁邊彈出一(yī)個(gè)氣泡提示框或者δ'直接彈出彈窗(chuāng)。

4.動畫(huà)/視(shì)頻(pín)引導

用(yòng)戶可(kě)以根據動态演示，很(hěn)快(kuài)地(dì)理(lǐ)解整個≠Ω♦β(gè)産品。

5.操作(zuò)式引導

一(yī)步一(yī)步地(dì)引導你(nǐ)進行(xíng)操作(zuò)，鼓勵用(yòng)α£ 戶參與其中，邊學邊用(yòng)。

6.預設任務

預設任務是(shì)指在用(yòng)戶進入産品後，自(zì)動↔∞ 為(wèi)用(yòng)戶創建了(le)一(yī)些<>(xiē)和(hé)産品形态相(xiàng)關的(de)示例，而不(bù)是(shì)留給用'®(yòng)戶一(yī)個(gè)空(kōng)頁面。

人(rén)将降大(dà)任于斯人(rén)也(yě)，所以最近(jìn)我就(←©jiù)遇到(dào)了(le)這(zhè)樣的(de)一(yī)個(gè)需求。不(bù)過∏÷我需要(yào)實現(xiàn)的(de)也(yě)比δ¥×£較簡單，隻需要(yào)實現(xiàn)蒙層引導。

今天我們就(jiù)來(lái)實現(xiàn)一(yī)下(xià)這(zhè)個(✘×≥♥gè)功能(néng)。先來(lái)看(kàn)一(yī)下(xià)我們目标的(≥​de)樣子(zǐ)。核心代碼大(dà)概隻需要(yào)花(huλ×♦♠ā) 5 分(fēn)鐘(zhōng)就(jiù)能(néng)學會(huì)，隻&₹₽需 9 行(xíng) js 代碼，60 行(xíng)$✔ css 代碼。所以接著(zhe)往下(xià)看(€♥λ✔kàn)吧(ba) ~ 高(gāo)亮(liàng)部分(fēn)會(huì)有≤$Ω•(yǒu)不(bù)一(yī)樣的(de)收獲哦 ~

主要(yào)包括三個(gè)部分(fēn): 蒙層、氣泡、高(gāo)亮(li★®'àng)。

蒙層和(hé)氣泡對(duì)于很(hěn)多(duō)同學來(lái)說(shλ<'uō)，真的(de)是(shì)太熟悉了(le)。這(zhè)裡(lǐ)就(jiù)隻貼γ×代碼了(le)，沒有(yǒu)什(shén)麽過多(duō)的(de)可(kě)以講解，主要(yà↑γo)是(shì)利用(yòng)了(le)絕對(duì)定位。

// 蒙層實現(xiàn)
<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>
複制(zhì)代碼

// 氣泡實現(xiàn)
<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'>
  秋風(fēng)的(de)技(jì)能(néng)
div>
複制(zhì)代碼

圖層拼接

而這(zhè)個(gè)高(gāo)亮(liàng)怎 ∏÷★麽實現(xiàn)呢(ne)？如(rú)何能(néng)讓蒙層中間(φ≤jiān)産生(shēng)一(yī)個(gè)空(kōng)白(bái)框呢γ±φ×(ne)？在我所知(zhī)的(de) CSS 屬性中并£ 沒有(yǒu)相(xiàng)關的(de)屬性可(kě)以實現(xiàn>Ω)這(zhè)個(gè)特性，如(rú)果不(bù)能(néng)這(z±δhè)樣實現(xiàn)。那(nà)意味著(zhe)我是(shì)<₽不(bù)是(shì)需要(yào)自(zì)己将這(zhè)個(g∑←Ωè)高(gāo)亮(liàng)區(qū)塊給空(kōng)出來(lái)呢(ne•×)，自(zì)己通(tōng)過拼接的(de)方式來(lái)實現(xiàn)。¥÷如(rú)下(xià)所示，這(zhè)是(shì)我第一(yī)直覺想到(dàoφ£)的(de)方案。

這(zhè)一(yī)種方法比較傻瓜式，但(dàn)是(shì)就(jiù)是(shì)比©γ₩較繁瑣。

z-index

z-index 屬性設定了(le)一(yī)個(gè)定位元素及其後代元素≠←或 flex 項目的(de) z-order。 當元素之間(jiān)重疊的(de)時(≈¶±shí)候， z-index 較大(dà)的(de)元素會(huì)覆 ←±♥蓋較小(xiǎo)的(de)元素在上(shàng)層進行(xσ♥↕₩íng)顯示。

因為(wèi)我們可(kě)以利用(yòng) z-index 這(zhè)個(gè)特性，隻要(yào)将我們目标元素的(de) z-index 設置成比我們的(de)蒙層高(gāo)就(jiù)行(xíng)。

通(tōng)過圖層分(fēn)解，我們可(kě)以看(kàn)到(dào→♠)，目标的(de)元素那(nà)一(yī)行(xíng)秋風(fēng)的(de)技(jì)能(néng)是(shì)處于最高(gāo)層，而不(bù)是(shì)和(hé) 秋風(fēng)的(de)筆(bǐ)記文(wén)字處于同一(yī)層。因此采取的(de)方案是(shì)，我們沒辦法讓蒙層在中間(jΩσ∑Ωiān)空(kōng)出來(lái)，但(dàn)是(shì)，我♠♣們可(kě)以通(tōng)過z-index讓我們的(de)目标元素置于蒙層之上(shàng)，然後再在蒙層和(h☆♦∏é)目标元素之間(jiān)加入一(yī)個(gè)♣€白(bái)色的(de)背景框，這(zhè)樣就(jiù)達到(d ×>&ào)了(le)高(gāo)亮(liàng)的(de)效果。如(rú)果還(hái)看(kà×$₩®n)不(bù)明(míng)白(bái)可(kě)以看(kàn)下(xià)圖。

有(yǒu)了(le)以上(shàng)的(de)知✘♦₽(zhī)識就(jiù)差定位了(le)，我們通(tōng)過 getBoundingClientRect 屬性來(lái)獲取目标元素的(de)大(dà)小(xiǎo)及其相(xiàn↑‍♠®g)對(duì)于視(shì)口的(de)位置。然後通(tōng)過絕對(duì)定位來(lá→£∞i)進行(xíng)布局。以下(xià)就(jiù)是(shì)這(zhè)個(gè)實 →π現(xiàn)的(de)主要(yào)邏輯（代碼比較粗糙，主要(yào)是(shì≤φ÷)意思表達

<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>秋風(fēng)的(de)筆(bǐ)記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'>
            秋風(fēng)的(de)技(jì)能(néng)
        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 = rec≥¥δπt.left - 3 + 'px'
        helperLayer.style.top = rec♦♦≤t.top - 3 + 'px'
        helperLayer.style.width = rect.wσ‌γidth + 3 * 2 + 'px'
        helperLayer.style.height = rect.heig≈←ht + 3 * 2 + 'px'
        tooltip.style.top = rect.height₩β← + 3 * 2 + 10 + 5 + 'px'
script>
複制(zhì)代碼

以上(shàng)就(jiù)是(shì)實現(xià↕↓n)一(yī)個(gè)蒙層引導的(de)實現(xiàn)方案。當然這(zhè)麽σσ精妙的(de)設計(jì)也(yě)是(shì)離(lí)不(bù)開(kāi)偉大(dà)的÷£☆(de)開(kāi)源項目，以上(shàng)就(jiù↔>¶±)是(shì)參考了(le)開(kāi)源項目 introjs 來(lái)實現(xiàn)的(de)。

box-shadow

這(zhè)個(gè)方案除了(le)兼容性問(wèn)題(不(bù)兼容低(dī)版本ie8以€↑及以前版本)，也(yě)是(shì)比較簡單的(de)βγλ一(yī)個(gè)方法。來(lái)看(kàn)看(kàn) box-shado®'¶w 的(de)方法介紹。

/* x偏移量 | y偏移量 | 陰影(yǐng)模糊半徑 | 陰影(yǐng)擴散半徑✘ε | 陰影(yǐng)顔色 */
box-shadow: 2pxβ♦φ 2px 2px 1px rgba(0, 0, 0, ©γα0.2);
複制(zhì)代碼

核心思路(lù)為(wèi)我們可(kě)以通(tōng)過設置一(yī)個(gè)×δ比較大(dà)的(de)陰影(yǐng)擴散半徑，來(lái)實現(xiàn∏δ)，再設置一(yī)個(gè)半透明(míng)的(de)背景色。

box-shadow: 0 0 0 2000px rgba(0,0,0,.5);
複制(zhì)代碼

canvas

先通(tōng)過 canvas 繪制(zhì)出全屏的(de)半透明(mín₩♥>g)遮罩，然後繪制(zhì)出高(gāo)亮(liàng)部分(fēn)δ©→₽，通(tōng)過 globalCompositeOperation 中的(de) xor選項，将重疊部分(fēn)變透明(míng)。

const canvas = document.getElementById('guide-mask')
const width = window.innerWidth;
const height = window.innerHeight;
canvas.setAttribu≤₹te("width", width);
canvas.setAttribut ∏ &e("height", height);
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
ctx.fillRect(0, 0, width, height);
ctx.fill();
ctx.fiσαβ₹llStyle = 'rgb(255, 255, 255)';
ctx.globalCompositeOperation = "xor";
ctx.fillRect(rect.left - 3, rect.top - 3, rect.width + 3 * 2 + 10 + 5, rect.height + 3 * 2);
複制(zhì)代碼

完整代碼倉庫: github.com/hua1995116/…

我順便來(lái)介紹一(yī)下(xià)目前我看(kàn)到(dào)新手引導$≤↓≤比較好(hǎo)的(de)幾個(gè)開(kāi)源項目。

jquery-pagewalkthrough

優勢: 手繪風(fēng)，适用(yòng)于特定的(de)網站(zhànφ≥$')風(fēng)格。

缺點: 需要(yào)依賴 jQuery。

intro.js

優勢: 擁有(yǒu)豐富的(de)蒙層引導示例，可(kě)自(∏₩zì)定義主題

缺點: 個(gè)人(rén)免費(fèi)，商業(yè)需要(←∑£yào)付費(fèi)。

driver.js

優勢: MIT 開(kāi)源，擁有(yǒu)與 intro.js 差不(bù)多(duō)♦λ的(de)功能(néng)。

缺點: 示例沒有(yǒu) intro.js 豐富。

至此，本文(wén)就(jiù)到(dào)此結束了(le)。

參考

zhuanlan.zhihu.com/p/33508501>π₹×

www.zhihu.com/question/20…

www.woshipm.com/ucd/3506054…

juejin.im/post/684490…

developer.mozilla.org/zh-CN/docs→​/…

歡迎關注「秋風(fēng)的(de)筆(bǐ)記」，前端學®&習(xí)不(bù)迷路(lù)或加微(wēi)信 qiufengblue，一(yī)起交流學習☆☆©(xí)。