從王者榮耀里我學(xué)會的前端新手指引

在王者的世界里，不僅僅只有快樂，還能搞學(xué)習(xí)，讓你成為快樂而又富有知識的人。這其中的功臣，這不得不說的就是它的新手指引。

為什么這么說呢？我們先來看幾張圖。

沒錯(cuò)，上面的就是王者榮耀的新手引導(dǎo)，手把手教學(xué)，還有妲己美妙的聲音。

整個(gè)過程大約 2分鐘。它使用了多種引導(dǎo)方式，蒙層引導(dǎo)、氣泡引導(dǎo)、視頻引導(dǎo)、操作引導(dǎo)還有預(yù)設(shè)任務(wù)，可以說在新手引導(dǎo)方面，真的很"細(xì)"，用了各種各樣的花樣。

但是它用了僅僅 2 分鐘的指引就讓你快速體驗(yàn)到了整個(gè)產(chǎn)品的使用方式，讓你感受到打敗敵人是如此滿足，贏得一場游戲是如此簡單。你收獲了大量的快樂同時(shí)產(chǎn)生對它的依賴。

而如果說，沒有新手指引，讓一個(gè)沒有從來沒有玩過此類游戲的新人，就上手一個(gè) 5v5 的戰(zhàn)斗，在自己還沒弄懂操作，就上手實(shí)戰(zhàn)，那么新人肯定會被打的很慘，受到隊(duì)友的抱怨不說，很快會輸?shù)粢粓霰荣?，從而產(chǎn)生挫敗感，覺得這個(gè)游戲垃圾，更不用說從游戲中體驗(yàn)快感。

所以說新手引導(dǎo)是一種能讓用戶在短時(shí)間內(nèi)快速了解產(chǎn)品特色以及產(chǎn)品使用方式。

它是非常重要也是非常有必要學(xué)習(xí)的一個(gè)功能！這也是本篇文章想要介紹的重點(diǎn)內(nèi)容。下面就進(jìn)行原理實(shí)戰(zhàn)講解

我先介紹一下常見的幾種類型新手引導(dǎo)效果圖。

1.引導(dǎo)頁

引導(dǎo)頁一般出現(xiàn)在首次打開APP的時(shí)候，由3-5個(gè)頁面組成。

8種引導(dǎo)方式，7個(gè)設(shè)計(jì)要點(diǎn)，讓你全面了解新手引導(dǎo)！

2.蒙層引導(dǎo)

在產(chǎn)品的整個(gè)界面上方用一個(gè)黑色半透明蒙層進(jìn)行遮罩，這種引導(dǎo)方式可以讓用戶聚焦了解被圈注的功能點(diǎn)或手勢說明。

3.氣泡/彈窗提示

在操作按鈕旁邊彈出一個(gè)氣泡提示框或者直接彈出彈窗。

4.動畫/視頻引導(dǎo)

用戶可以根據(jù)動態(tài)演示，很快地理解整個(gè)產(chǎn)品。

5.操作式引導(dǎo)

一步一步地引導(dǎo)你進(jìn)行操作，鼓勵(lì)用戶參與其中，邊學(xué)邊用。

6.預(yù)設(shè)任務(wù)

預(yù)設(shè)任務(wù)是指在用戶進(jìn)入產(chǎn)品后，自動為用戶創(chuàng)建了一些和產(chǎn)品形態(tài)相關(guān)的示例，而不是留給用戶一個(gè)空頁面。

人將降大任于斯人也，所以最近我就遇到了這樣的一個(gè)需求。不過我需要實(shí)現(xiàn)的也比較簡單，只需要實(shí)現(xiàn)蒙層引導(dǎo)。

今天我們就來實(shí)現(xiàn)一下這個(gè)功能。先來看一下我們目標(biāo)的樣子。核心代碼大概只需要花 5 分鐘就能學(xué)會，只需 9 行 js 代碼，60 行 css 代碼。所以接著往下看吧 ~ 高亮部分會有不一樣的收獲哦 ~

主要包括三個(gè)部分: 蒙層、氣泡、高亮。

蒙層和氣泡對于很多同學(xué)來說，真的是太熟悉了。這里就只貼代碼了，沒有什么過多的可以講解，主要是利用了絕對定位。

圖層拼接

而這個(gè)高亮怎么實(shí)現(xiàn)呢？如何能讓蒙層中間產(chǎn)生一個(gè)空白框呢？在我所知的 CSS 屬性中并沒有相關(guān)的屬性可以實(shí)現(xiàn)這個(gè)特性，如果不能這樣實(shí)現(xiàn)。那意味著我是不是需要自己將這個(gè)高亮區(qū)塊給空出來呢，自己通過拼接的方式來實(shí)現(xiàn)。如下所示，這是我第一直覺想到的方案。

這一種方法比較傻瓜式，但是就是比較繁瑣。

z-index

z-index 屬性設(shè)定了一個(gè)定位元素及其后代元素或 flex 項(xiàng)目的 z-order。當(dāng)元素之間重疊的時(shí)候， z-index 較大的元素會覆蓋較小的元素在上層進(jìn)行顯示。

因?yàn)槲覀兛梢岳?z-index 這個(gè)特性，只要將我們目標(biāo)元素的 z-index 設(shè)置成比我們的蒙層高就行。

通過圖層分解，我們可以看到，目標(biāo)的元素那一行秋風(fēng)的技能是處于最高層，而不是和 秋風(fēng)的筆記文字處于同一層。因此采取的方案是，我們沒辦法讓蒙層在中間空出來，但是，我們可以通過z-index讓我們的目標(biāo)元素置于蒙層之上，然后再在蒙層和目標(biāo)元素之間加入一個(gè)白色的背景框，這樣就達(dá)到了高亮的效果。如果還看不明白可以看下圖。

有了以上的知識就差定位了，我們通過 getBoundingClientRect 屬性來獲取目標(biāo)元素的大小及其相對于視口的位置。然后通過絕對定位來進(jìn)行布局。以下就是這個(gè)實(shí)現(xiàn)的主要邏輯（代碼比較粗糙，主要是意思表達(dá)

以上就是實(shí)現(xiàn)一個(gè)蒙層引導(dǎo)的實(shí)現(xiàn)方案。當(dāng)然這么精妙的設(shè)計(jì)也是離不開偉大的開源項(xiàng)目，以上就是參考了開源項(xiàng)目 introjs 來實(shí)現(xiàn)的。

box-shadow

這個(gè)方案除了兼容性問題(不兼容低版本ie8以及以前版本)，也是比較簡單的一個(gè)方法。來看看 box-shadow 的方法介紹。

核心思路為我們可以通過設(shè)置一個(gè)比較大的陰影擴(kuò)散半徑，來實(shí)現(xiàn)，再設(shè)置一個(gè)半透明的背景色。

canvas

先通過 canvas 繪制出全屏的半透明遮罩，然后繪制出高亮部分，通過 globalCompositeOperation 中的 xor選項(xiàng)，將重疊部分變透明。

完整代碼倉庫:

https://github.com/hua1995116/node-demo/tree/master/guide

我順便來介紹一下目前我看到新手引導(dǎo)比較好的幾個(gè)開源項(xiàng)目。

jquery-pagewalkthrough

地址：

https://github.com/jwarby/jquery-pagewalkthrough

優(yōu)勢: 手繪風(fēng)，適用于特定的網(wǎng)站風(fēng)格。

缺點(diǎn): 需要依賴 jQuery。

intro.js

地址：https://github.com/usablica/intro.js

優(yōu)勢: 擁有豐富的蒙層引導(dǎo)示例，可自定義主題

缺點(diǎn): 個(gè)人免費(fèi)，商業(yè)需要付費(fèi)。

driver.js

地址：https://github.com/kamranahmedse/driver.js

優(yōu)勢: MIT 開源，擁有與 intro.js 差不多的功能。

缺點(diǎn): 示例沒有 intro.js 豐富。

至此，本文就到此結(jié)束了。

參考

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

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

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

https://juejin.im/post/6844903859786104839?

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing