整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家好，我是 Echa。
在產(chǎn)品發(fā)布新版本或者有新功能上線時，經(jīng)常需要新手引導(dǎo)功能來引導(dǎo)用戶了解應(yīng)用。下面就來分享幾個開箱即用的新手引導(dǎo)組件庫，幫你快速實現(xiàn)新手引導(dǎo)功能！
Intro.js 是一個使用廣泛的產(chǎn)品引導(dǎo)庫，它在 Github 上擁有 21.6k Star。其具有以下特點：
可以通過以下命令來安裝 Intro.js：
npm install intro.js - save
安裝完成后，只需三個簡單的步驟即可將其添加到項目中：
introJs().start();
可以使用以下附加參數(shù)在特定元素或類上調(diào)用 Intro.js：
introJs(".introduction-farm").start();
Github：https://github.com/usablica/intro.js
Shepherd 在 Github 上擁有 10.7k GitHub Star。它支持在多個前端框架中開箱即用，包括 React、Vue、Angular 等。其具有以下特點：
可以使用以下命令來安裝 shepherd.js：
npm install shepherd.js -save
npm install react-shepherd --save
npm install vue-shepherd --save
npm install angular-shepherd --save
安裝完成之后，可以按如下方式來使用 shepherd（以 React 為例）：
import React, { Component, useContext } from 'react'
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
import newSteps from './steps'
const tourOptions={
defaultStepOptions: {
cancelIcon: {
enabled: true
}
},
useModalOverlay: true
};
function Button() {
const tour=useContext(ShepherdTourContext);
return (
<button className="button dark" onClick={tour.start}>
Start Tour
</button>
);
}
class App extends Component {
render() {
return (
<div>
<ShepherdTour steps={newSteps} tourOptions={tourOptions}>
<Button />
</ShepherdTour>
</div>
);
}
}
React Joyride 在 GitHub 上擁有超過 5.1k Star，在 React 項目中開箱即用，用于向現(xiàn)有用戶介紹新功能。其具有以下特點：
可以使用以下命令來安裝 react-joyride：
npm i react-joyride
可以通過以下方式來在 React 中使用 react-joyride：
import Joyride from 'react-joyride';
export class App extends React.Component {
state={
steps: [
{
target: '.my-first-step',
content: 'This is my awesome feature!',
},
{
target: '.my-other-step',
content: 'This another awesome feature!',
},
...
]
};
render () {
const { steps }=this.state;
return (
<div className="app">
<Joyride
steps={steps}
...
/>
...
</div>
);
}
}
Github：https://github.com/gilbarbara/react-joyride
Vue Tour 是一個輕巧、簡單且可自定義的新手指引插件，可以與 Vue.js 一起使用。它提供了一種快速簡便的方法來指導(dǎo)用戶使用應(yīng)用。它在 Github 上擁有 2.1 k Star。
可以通過以下命令來安裝 Vue Tour：
npm install vue-tour
然后在應(yīng)用入口導(dǎo)入插件（如果使用 vue-cli 搭建項目，通常是 main.js），并在 Vue 中注冊它。可以添加默認提供的樣式或根據(jù)自己的喜好自定義它們。
import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'
require('vue-tour/dist/vue-tour.css')
Vue.use(VueTour)
new Vue({
render: h=> h(App)
}).$mount('#app')
最后將 v-tour 組件放入模板中的任何位置（通常在 App.vue 中），并向其傳遞一系列步驟。每個步驟的 target 屬性可以將應(yīng)用的任何組件中的 DOM 元素作為 target（只要在相關(guān)步驟彈出時它存在于 DOM 中）。
<template>
<div>
<div id="v-step-0">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.</div>
<div class="v-step-1">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.</div>
<div data-v-step="2">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.</div>
<v-tour name="myTour" :steps="steps"></v-tour>
</div>
</template>
<script>
export default {
name: 'my-tour',
data () {
return {
steps: [
{
target: '#v-step-0', // We're using document.querySelector() under the hood
header: {
title: 'Get Started',
},
content: `Discover <strong>Vue Tour</strong>!`
},
{
target: '.v-step-1',
content: 'An awesome plugin made with Vue.js!'
},
{
target: '[data-v-step="2"]',
content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
params: {
placement: 'top' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
}
}
]
}
},
mounted: function () {
this.$tours['myTour'].start()
}
}
</script>
Github：https://github.com/pulsardev/vue-tour
Reactour 是一個用于創(chuàng)建 React 應(yīng)用導(dǎo)覽的流行庫。在 GitHub 上擁有 3.2K Star，它提供了一種簡單的方式來引導(dǎo)用戶瀏覽網(wǎng)站和應(yīng)用。
可以通過以下命令來安裝 reactour：
npm i -S @reactour/tour
安裝完成之后，在應(yīng)用的根組件添加 TourProvider，傳遞元素的步驟以在瀏覽期間突出顯示：
import { TourProvider } from '@reactour/tour'
ReactDOM.render(
<TourProvider steps={steps}>
<App />
</TourProvider>,
document.getElementById('root')
)
const steps=[
{
selector: '.first-step',
content: 'This is my first Step',
},
// ...
]
然后在應(yīng)用樹中的某個地方，使用 useTour hook 來控制 Tour：
import { useTour } from '@reactour/tour'
function App() {
const { setIsOpen }=useTour()
return (
<>
<p className="first-step">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at
finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
metus nec, porta luctus orci
</p>
<button onClick={()=> setIsOpen(true)}>Open Tour</button>
</>
)
}
Github：https://github.com/elrumordelaluz/reactour
何在vue項目中使用用intro.js新手引導(dǎo)功能呢?這里需要使用到vue-introjs插件，vue-introjs是在Vue中綁定intro.js所使用的。在使用vue-introjs前，需要先安裝intro.js
npm i intro.js --save
npm i vue-introjs --save// webpack.config.js
{
plugins: [
new webpack.ProvidePlugin({
// other modules
introJs: ['intro.js']
})
]
}如果是vue-cli3的項目，則在vue.config.js
chainWebpack: config=> {
config.plugin('provide').use(webpack.ProvidePlugin, [{
// other modules
introJs: ['intro.js']
}])
}在webpack中配置后，webpack.ProvidePlugin將會使用它，所以不需要在main.js中使用import introJs from ‘intro.js’來引用
import VueIntro from 'vue-introjs';
import 'intro.js/introjs.css';
Vue.use(VueIntro);需要在頁面渲染完成后，使用
mounted: function () {
this.setGuide();
},
methods: {
setGuide() {
let data=[
{element: '.step_1',intro: '步驟1：對應(yīng)class為.step_1的元素進行選擇提示。',position: 'right'},
{element: '#step_2',intro: '步驟2：對應(yīng)Id為#step_2的元素進行選擇提示。',position: 'left'},
]
this.$intro().setOptions({
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳過",
doneLabel: "完成",
steps:steps
}).oncomplete(()=> {
//點擊結(jié)束按鈕后執(zhí)行的事件
}).onexit(()=> {
//點擊跳過按鈕后執(zhí)行的事件
}).start()
},
}如果不想使用steps的方式，我們可以直接在html中通過指令的方式來使用，html如下：
<div v-intro="'這是步驟1的引導(dǎo)提示內(nèi)容'" v-intro-step="1"></div>
<div v-intro="'這是步驟2的引導(dǎo)提示內(nèi)容'" v-intro-step="2"></div>主要參數(shù)如下：
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳過",
doneLabel: "結(jié)束",
tooltipPosition: 'bottom',/* 引導(dǎo)說明框相對高亮說明區(qū)域的位置 */
tooltipClass: '', /* 引導(dǎo)說明文本框的樣式 */
highlightClass: '', /* 說明高亮區(qū)域的樣式 */
exitOnEsc: true,/* 是否使用鍵盤Esc退出 */
exitOnOverlayClick: true,/* 是否允許點擊空白處退出 */
showStepNumbers: true,/* 是否顯示說明的數(shù)據(jù)步驟*/
keyboardNavigation: true,/* 是否允許鍵盤來操作 */
showButtons: true,/* 是否按鍵來操作 */
showBullets: true,/* 是否使用點點點顯示進度 */
showProgress: false,/* 是否顯示進度條 */
scrollToElement: true,/* 是否滑動到高亮的區(qū)域 */
overlayOpacity: 0.8, /* 遮罩層的透明度 */
positionPrecedence: ["bottom", "top", "right", "left"],/* 當位置選擇自動的時候，位置排列的優(yōu)先級 */
disableInteraction: false, /* 是否禁止與元素的相互關(guān)聯(lián) */
hintPosition: 'top-middle', /* 默認提示位置 */
hintButtonLabel: 'Got it',/* 默認提示內(nèi)容 */更多詳細的使用此處不再贅述，vue-introjs的github地址：https://github.com/alex-oleshkevich/vue-introjs。
文共3787字，預(yù)計學(xué)習(xí)時長8分鐘
制作登陸引導(dǎo)頁的模板和教程非常少，而且大多數(shù)都過于復(fù)雜或是添加了太多設(shè)計（如多個頁面和表格等），但多數(shù)情況下一些非常簡潔的設(shè)計就足矣。
本文將介紹在不用老式CSS庫（如 bootstrap）的情況下，如何以CSS（Grid和Flex）為主要工具創(chuàng)建響應(yīng)式用戶界面。
那么就開始吧！
本文所要構(gòu)建引導(dǎo)頁的基本布局主要聚焦于一些基礎(chǔ)部件，以便讀者自己制作引導(dǎo)頁時可以直接從中找出并使用自己想用的部件。下方為成果圖例：
該網(wǎng)頁主要有四個組成部分：導(dǎo)航欄、封面圖像、卡片網(wǎng)格、以及頁腳。
index.html的代碼非常簡單，主要包含div標簽和整體的網(wǎng)頁結(jié)構(gòu)：
<body> <nav class="zone bluesticky"> <ulclass="main-nav"> <li><ahref="">About</a></li> <li><ahref="">Products</a></li> <li><ahref="">Our Team</a></li> <liclass="push"><ahref="">Contact</a></li> </ul> </nav> <div> <imgsrc="img/cover.jpg"> <divclass="coverText"><h1>Making the world a betterplace</h1></div> </div> <div class="zone bluegrid-wrapper"> <div> <imgsrc="./img/teamplay.jpg"> <divclass="text"> <h1>Teamplay</h1> <p>We work togetherto create impact</p> <button>Learn more</button> </div> </div> <div><img src="./img/strategy.jpg"> <divclass="text"> <h1>Strategy</h1> <p>Every goal is partof our strategy</p> <button>Learn more</button> </div> </div> <div><img src="./img/innovation.jpg"> <divclass="text"> <h1>Innovation</h1> <p>We're focused onthinking different</p> <button>Learnmore</button> </div> </div> </div> <footerclass="zone"><p> 2019 Assaf Elovic All right reserved. Formore articles visit <ahref="www.assafelovic.com"> www.assafelovic.com</a></p></footer> </div> </body>
因此，筆者這次只著重講解網(wǎng)頁樣式的設(shè)計（采用CSS）。
用Grid和Flex設(shè)置布局樣式
經(jīng)驗之談：有些元素需要Grid風(fēng)格的樣式，如表格、卡片、媒體專輯（如Instagram上的內(nèi)容）等，這種情況就使用Grid 。其他情況就都用 Flex。強烈建議深入學(xué)習(xí)這兩個工具，因為要制作漂亮的響應(yīng)式網(wǎng)頁，只要掌握了Grid和Flex，就無需學(xué)習(xí)其他工具了。
導(dǎo)航欄
制作導(dǎo)航欄要使用Flex，這樣就能做出導(dǎo)航欄需要的單向行。由于使用了<nav>標簽，需要刪除點（列表樣式）。最后，為了刪除瀏覽器設(shè)置的默認邊距，應(yīng)將邊距重設(shè)為零：
.main-nav {
display: flex;
list-style: none;
margin: 0;
font-size: 0.7em;
}
在改變?yōu)g覽器寬度時，部分導(dǎo)航欄會被刪除，因此寬度縮小時要調(diào)整導(dǎo)航欄大小：
@media only screen and (max-width: 600px) {
.main-nav {
font-size: 0.5em;
padding: 0;
}
}
要讓“聯(lián)系方式”這個選項右對齊，就要將左邊距設(shè)置為“auto”，這樣就可以自動將超鏈接的左邊距設(shè)置為最大值：
.push {
margin-left: auto;
}
最后，要讓導(dǎo)航欄固定且始終出現(xiàn)在網(wǎng)頁頂端，同時還要讓導(dǎo)航欄覆蓋在其他所有元素之上（z-index）：
.sticky {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
}
封面
為保證畫面簡潔（即只保留中心內(nèi)容），制作封面時應(yīng)使用Flex。在Flex中設(shè)置好界面后，將內(nèi)容水平居中對齊（X軸），布局容器和對齊項垂直居中（Y軸）。圖像大小要適應(yīng)整個屏幕，因此要將高度設(shè)置為100vh，這代表圖像高度為100%：
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
封面文本還要居中且覆蓋在圖像之上：
.coverText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
請參照完整CSS樣式表：https://github.com/assafelovic/Basic-Landing-Page-Layout/blob/master/style.css，了解其他微調(diào)的方法。
卡片網(wǎng)格
如上文所述，制作引導(dǎo)頁需要創(chuàng)建卡片網(wǎng)格，此時需要使用Grid。grid-template-columns可以定義每欄的樣式（或div）。參考信息：如果把寬度設(shè)置為1fr，那每欄就只有一個區(qū)塊。對其設(shè)置repeat函數(shù)（和一遍遍輸入1fr的效果相同），則它就可以從最小350像素自動全屏填充（1fr）。最后，將網(wǎng)格間隔（也就是網(wǎng)格對象之間的填充間隔）設(shè)置為20像素：
.grid-wrapper {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
grid-gap: 10px;
}
接下來，要設(shè)置網(wǎng)格內(nèi)每個卡片的樣式。如下文所示，定義每個卡片的邊距和背景色，方法十分簡單：
.card {
background-color: #444;
margin: 50px;
}
每個卡片要包含一張大小適應(yīng)整個頂部區(qū)域的圖片、一個標題和相應(yīng)的文本段落、以及位于下方的“了解更多”按鈕。而且卡片內(nèi)部的圖像、標題和段落要可控可調(diào)，代碼如下所示：
.card > img {
max-width: 100%;
height: auto;
}.card h1 {
font-size: 1.5rem;
}.card p {
font-size: 1rem;
}
此時圖片已經(jīng)100%適應(yīng)卡片寬度，但我們還可以在卡片文本區(qū)適當添加一些填充間隔：
.card > .text {
padding: 0 20px 20px;
}
最后，在每個卡片內(nèi)部添加按鍵設(shè)計。將邊框設(shè)置為0（因為系統(tǒng)會默認添加邊框），再設(shè)置一些間隔、顏色等等：
button {
cursor: pointer;
background: gray;
border: 0;
font-size: 1rem;
color: white;
padding: 10px;
width: 100%;
}button:hover {
background-color: #e0d27b;
}
頁腳
最后，頁腳也很重要。頁腳的設(shè)置方式非常簡單。調(diào)整內(nèi)部文本大小使之小于默認值，再給頁腳設(shè)置一些間隔和顏色：
footer {
text-align: center;
padding: 3px;
background-color: #30336b;
}footer p {
font-size: 1rem;
}
完成了！按照這種簡單的響應(yīng)式布局方法，就可以制作幾乎所有想要的引導(dǎo)頁。還可以應(yīng)用動畫庫，升級自己的頁面布局——下面是一些推薦的動畫庫：
1. SweetAlert（https://sweetalert2.github.io/）— 添加精美的警告框
2. Typed.js（https://github.com/mattboldt/typed.js/） —在頁眉處添加輸入動畫
3. Auroral（https://lunarlogic.github.io/auroral/） — 添加動畫式漸變背景圖
4. OwlCarousel（https://owlcarousel2.github.io/OwlCarousel2/）— 給元素添加動畫效果
5. Animate.css（https://daneden.github.io/animate.css/） — 給加載元素添加精美動畫效果
完整源代碼：https://github.com/assafelovic/Basic-Landing-Page-Layout
留言 點贊 發(fā)個朋友圈
我們一起分享AI學(xué)習(xí)與發(fā)展的干貨
如需轉(zhuǎn)載，請后臺留言，遵守轉(zhuǎn)載規(guī)范
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
