王者榮耀是如何手把手讓你上頭的
時隔多日秋風(fēng)又回來了，這次帶來的主題是，王者榮耀是如何手把手讓你上頭的，對.... 其實這句話重點不是上頭，也不是王者榮耀，重點是"手把手"。
為什么這么說呢？無圖無真相，先上圖。
沒錯，上面的就是王者榮耀的新手引導(dǎo)，手把手教學(xué)，還有妲己美妙的聲音，讓人如此上頭。
整個過程大約 2 分鐘。它使用了多種引導(dǎo)方式，蒙層引導(dǎo)、氣泡引導(dǎo)、視頻引導(dǎo)、操作引導(dǎo)還有預(yù)設(shè)任務(wù)，可以說在新手引導(dǎo)方面，真的很"細"，用了各種各樣的花樣。但是它用了僅僅 2 分鐘的指引就讓你快速體驗到了整個產(chǎn)品的使用方式，讓你感受到打敗敵人是如此滿足，贏得一場游戲是如此簡單。你收獲了大量的快樂同時產(chǎn)生對它的依賴。
而如果說，沒有新手指引，讓一個沒有從來沒有玩過此類游戲的新人，就上手一個 5v5 的戰(zhàn)斗，在自己還沒弄懂操作，就上手實戰(zhàn)，那么新人肯定會被打的很慘，受到隊友的抱怨不說，很快會輸?shù)粢粓霰荣?，從而產(chǎn)生挫敗感，覺得這個游戲垃圾，更不用說從游戲中體驗快感。
所以說新手引導(dǎo)是一種能讓用戶在短時間內(nèi)快速了解產(chǎn)品特色以及產(chǎn)品使用方式。
它是非常重要也是非常有必要學(xué)習(xí)的一個功能！這也是本篇文章想要介紹的重點內(nèi)容。下面就進行原理實戰(zhàn)講解
我先介紹一下常見的幾種類型新手引導(dǎo)效果圖。
1.引導(dǎo)頁
引導(dǎo)頁一般出現(xiàn)在首次打開APP的時候，由3-5個頁面組成。
2.蒙層引導(dǎo)
在產(chǎn)品的整個界面上方用一個黑色半透明蒙層進行遮罩，這種引導(dǎo)方式可以讓用戶聚焦了解被圈注的功能點或手勢說明。
3.氣泡/彈窗提示
在操作按鈕旁邊彈出一個氣泡提示框或者直接彈出彈窗。
4.動畫/視頻引導(dǎo)
用戶可以根據(jù)動態(tài)演示，很快地理解整個產(chǎn)品。
5.操作式引導(dǎo)
一步一步地引導(dǎo)你進行操作，鼓勵用戶參與其中，邊學(xué)邊用。
6.預(yù)設(shè)任務(wù)
預(yù)設(shè)任務(wù)是指在用戶進入產(chǎn)品后，自動為用戶創(chuàng)建了一些和產(chǎn)品形態(tài)相關(guān)的示例，而不是留給用戶一個空頁面。
人將降大任于斯人也，所以最近我就遇到了這樣的一個需求。不過我需要實現(xiàn)的也比較簡單，只需要實現(xiàn)蒙層引導(dǎo)。
今天我們就來實現(xiàn)一下這個功能。先來看一下我們目標(biāo)的樣子。核心代碼大概只需要花5分鐘就能學(xué)會，只需 9 行 js 代碼，60 行 CSS?代碼。所以接著往下看吧 ~ 高亮部分會有不一樣的收獲哦 ~
主要包括三個部分: 蒙層、氣泡、高亮。
蒙層和氣泡對于很多同學(xué)來說，真的是太熟悉了。這里就只貼代碼了，沒有什么過多的可以講解，主要是利用了絕對定位。
//?蒙層實現(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>
//?氣泡實現(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)的技能
div>
而這個高亮怎么實現(xiàn)呢？如何能讓蒙層中間產(chǎn)生一個空白框呢？在我所知的 CSS 屬性中并沒有相關(guān)的屬性可以實現(xiàn)這個特性，如果不能這樣實現(xiàn)。那意味著我是不是需要自己將這個高亮區(qū)塊給空出來呢，自己通過拼接的方式來實現(xiàn)。如下所示，這是我第一直覺想到的方案。
而后我又使用了第二種方式。先來看一下實現(xiàn)方案的圖層分解。
是的，通過圖層分解，我們可以看到，目標(biāo)的元素那一行"秋風(fēng)的技能"是處于最高層，而不是和 "秋風(fēng)的筆記"文字處于同一層。因此采取的方案是，我們沒辦法讓蒙層在中間空出來，但是，我們可以通過?z-index?讓我們的目標(biāo)元素置于蒙層之上，然后再在蒙層和目標(biāo)元素之間加入一個白色的背景框，這樣就達到了高亮的效果。
關(guān)于定位，我們通過?getBoundingClientRect?屬性來獲取目標(biāo)元素的大小及其相對于視口的位置。然后通過絕對定位來進行布局。以下就是這個實現(xiàn)的主要邏輯（代碼比較粗糙，主要是意思表達
<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)的筆記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)的技能
????????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>
以上就是實現(xiàn)一個蒙層引導(dǎo)的實現(xiàn)方案。當(dāng)然這么精妙的設(shè)計也是離不開偉大的開源項目，以上就是參考了開源項目?introjs?來實現(xiàn)的。
我順便來介紹一下目前我看到新手引導(dǎo)比較好的幾個開源項目。
jquery-pagewalkthrough
優(yōu)勢: 手繪風(fēng)，適用于特定的網(wǎng)站風(fēng)格。
缺點: 需要依賴 jQuery。
intro.js
優(yōu)勢: 擁有豐富的蒙層引導(dǎo)示例，可自定義主題
缺點: 個人免費，商業(yè)需要付費。
driver.js
優(yōu)勢: MIT 開源，擁有與 intro.js 差不多的功能。
缺點: 示例沒有 intro.js 豐富。
綜合來講的話，driver.js 優(yōu)勢比較明顯（因為可以商用~）。至此，本文就到此結(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
小獅子有話說
你好，我是 Chocolate，一個獅子座的前端攻城獅，希望成為優(yōu)秀的前端博主，每周都會更新文章，與你一起變優(yōu)秀~
關(guān)注 小獅子前端，回復(fù)【小獅子】獲取為大家整理好的文章、資源合集我的博客地址： yangchaoyi.vip歡迎收藏，可在博客留言板留下你的足跡，一起交流~覺得文章不錯，【 點贊】【在看】支持一波 ??ヽ(°▽°)ノ?
叮咚~ 可以給小獅子加
星標(biāo)，便于查找。感謝加入小獅子前端，最好的我們最美的遇見，我們下期再見~