如何做一个好看的页面引导效果?

       页面引导我们都不陌生,伴随点击,页面会聚焦到某个部分,其他部分变暗,并引导使用者按照特定的顺序进行操作。

20231018222751_rec_.gif

driver.js(本次要使用的页面引导库)官网的demo引导示例


       正在开发的产品出了新的需求,对整个UI界面进行了革新,为了防止原来的客户找不到位置,产品让我在新需求上线时添加一个页面引导的效果,我之前并没有做过页面引导的经验,所以理所当然地在掘金和CSDN上进行寻找有关教程。

在这里插入图片描述

找了快一个小时,各种教程各种组件库用遍了,各种报错


       在确定driver.js作为页面引导库之后,我找到了官网,并看了新手引导,发现官网文档的引用方式和语法已经更新了,教程上的失效报错是必然的(果然官方文档才是YYDS)。虽然官方文档是英文,并不难读懂,但想着可能会有一点不方便,所以我决定把最新版本且适用度比较高的页面引导效果写下来,给急需做这个需求的小伙伴们使用。

在这里插入图片描述

让我们开始吧~

driver.js简介

       driver.js 是一个可以轻松实现新手指引交互的原生JS工具库,主要的作用是为刚接触应用的新手用户快速了解产品,帮助用户把注意力聚焦到某项功能,从而快速熟悉我们的开发的产品。

driver.js的安装及引用

1.在命令行中以npm方式安装driver.js

npm install driver.js

2.创建一个driverUsing.js文件,并在其中引用如下文件

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

3.在driverUsing.js中导入如下测试代码

export const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "start",
    description: "hello driver.js"
  }
});

4.在要使用引导的页面导入driverUsing.js(这里以vue3为例)

<script setup>
import driverObj from './driverUsing.js'
driverObj
</script>

5.运行后,出现下列界面,说明安装引用driver.js成功

在这里插入图片描述

基本的页面引导

       仿照driver.js的官方文档,我也做了一个用来展示的demo页面,以vue3组件的方式,来控制页面引导的起始

image.png

单纯的静态页面,还未添加页面引导效果


1.声明 driver-using.vue组件,并导入如下代码(官网的基本配置)
<script setup>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  showButtons: ['next', 'previous'],
  steps: [
    {
      element: '.avatar',
      popover: {
        title: '引导第一步',
        description: '这是kami的照片',
        side: "left", 
        align: 'start'
      }
    },
    {
      element: '.title',
      popover: {
        title: '引导第二步',
        description: '这是kami的标题',
        side: "left", 
        align: 'start'
      }
    },
    {
      element: '.description',
      popover: {
        title: '引导第三步',
        description: '这是kami的内容',
        side: "left", 
        align: 'start'
      }
    },
    {
      element: '.box',
      popover: {
        title: '引导第四步',
        description: '引导结束,喜欢的话可以点赞收藏哦~',
        side: "left", 
        align: 'start'
      }
    },
  ]
});

driverObj.drive();
</script>

2.在需要引导效果的页面进行导入

<template>
  <div class="box">
    <div class="box-left">
      <div class="title">kami页面引导</div>
      <div class="description">点击触发页面引导,跟随指引使用吧~</div>
      <div class="button" @click="start()">开始页面引导</div>
    </div>
    <div class="box-right">
      <img class="avatar" src="../assets/cat.png" alt="">
    </div>
     <!-- ***2.在需要引导的页面中使用 -->
    <driverUsing v-if="show"></driverUsing> 
  </div>
</template>

<script setup>
import {ref} from 'vue'
import driverUsing from '../components/driver-using.vue' //***1.导入封装好的driver组件

const show = ref(false)
const start = () => {
  show.value = true
}
</script>

<style>
.box {
  width: 1000px;
  height: 448px;
  margin: auto;
  margin-top: 120px;
  padding: 80px 50px;
  box-sizing: border-box;
  display:flex;
  justify-content: space-between;
}

.title {
  height: 128px;
  margin-bottom: 16px;
  font-size: 84px;
  font-weight: bolder;
}

.description {
  height: 36px;
  margin-bottom: 50px;
  font-size: 24px;
}

.avatar {
  width:300px;
}

.button {
  width:max-content;
  background-color: #eaf2ff;
  padding:10px 20px;
  border-radius: 10px; 
  margin:auto;
  cursor:pointer;
}
</style>

3.基本引导效果完成

20231020230807_rec_.gif

修改配置

       接下来我会分别演示修改每个配置的效果,方便大家找到自己想要的效果(如果感兴趣推荐大家自己去试试看哦)

1.修改基本配置

  showProgress: true,                   //控制左下角的进度显示
  showButtons: ['next', 'previous'],    //控制按钮数组中按钮的显示隐藏
  steps: [
    {
      element: '.avatar',               //当前步骤卡片要聚焦到页面的哪个元素上
      popover: {
        title: '引导第一步',             //卡片标题
        description: '这是kami的照片',   //卡片内容
        side: "left",                   //卡片的展示方向
        align: 'start'                  //卡片的展示位置
      }
    },
    ......
        ]

接下来对每个配置修改一个部分,进行展示(文本就不改了)

  showProgress: false,                   
  showButtons: ['next'],   
  steps: [
    {
      element: '.avatar',              
      popover: {
        title: '引导第一步',             
        description: '这是kami的照片',   
        side: "right",                  
        align: 'center'                  
      }
    },
    ......
        ]

修改前
在这里插入图片描述

上面是修改前,下面是修改后


2.主题定制

       driver.js可以通过主题,来给引导卡片添加样式

      popover: {
        title: '引导第一步',             
        description: '这是kami的照片',   
        side: "right",                  
        align: 'center',
        popoverClass: 'kami-theme'  //添加定制主题样式
      }
......
<style>
/* 整体*/
.driver-popover.kami-theme {
  background-color: #eaf2ff;
  color: #000;
}

/* 标题 */
.driver-popover.kami-theme .driver-popover-title {
  font-size: 20px;
}

/* 内容 */
.driver-popover.kami-theme .driver-popover-description {
  color: #000;
}

/* 按钮 */
.driver-popover.kami-theme button {
  flex: 1;
  text-align: center;
  background-color: #1e80ff;
  color: #ffffff;
  text-shadow: none;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 6px;
}

/* 箭头,四个都要加上,因为卡片会随着你页面滚动位置发生变化 */
.driver-popover.kami-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #eaf2ff;
}
.driver-popover.kami-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #eaf2ff;
}
.driver-popover.kami-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #eaf2ff;
}
.driver-popover.kami-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #eaf2ff;
}
</style>

修改后的效果

修改后的效果


3.其他的配置
  nextBtnText: '下一步', //按钮的文本,格式为'按钮名'+BtnText,不能在showButtons里修改文本
  allowClose: false,    //是否允许点击黑色部分关闭掉引导
  overlayColor: 'red'   //阴影的颜色,默认为黑

结语

       到这里,已经足够完成一个页面引导效果了,如果小伙伴们有更多的需求,例如异步或者样式的重构,可以去官方文档进行查阅,链接在下方,如果觉得本文有对你有用的话,可以点个赞收藏一下哦~

driver.js的官方文档

  • 36
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 很高兴为您提供登录页面的建议。为了实现炫酷的效果,您可以考虑使用动画、渐变和大胆的字体。尝试使用几个相似的颜色来创建渐变,同时使用简单的图形。在页面中添加一个徽标或一个简单的插图可以增加亲和力。最后,确保页面易于使用和易于理解。 ### 回答2: 当然可以帮你设计一个炫酷的登录页面一个炫酷的登录页面需要注意以下几个要素: 1.颜色搭配:选择明亮和鲜艳的颜色,如深蓝色、紫色、橙色等。可以采用渐变色或色块的方式使页面更加生动有趣。 2.动画效果:在页面中添加一些动画效果,如背景的渐变、文字的飞入、按钮的放大缩小等,以增加页面的动感和互动性。 3.扁平化设计:采用扁平化的设计风格,即简约、直观的界面,去掉过多的阴影和浮雕效果,使页面更加干净、时尚。 4.用户体验:在设计中考虑用户的便捷性和友好性,如提供快速登录的选项、显示密码强度的提示、记住密码等功能。同时,可以在页面上添加一些有趣的提示或引导,增加用户主动参与和留下深刻印象的可能性。 5.响应式布局:确保页面在不同设备上都能够得到良好的展示效果,适应不同尺寸的屏幕和浏览器。这样用户无论使用电脑、手机还是平板等设备,都能够获得良好的登录体验。 希望以上的建议能够帮助你设计一个炫酷的登录页面!如有需要,欢迎随时咨询。 ### 回答3: 当然可以帮您设计一个炫酷的登录页面!首先,我们可以选择一个黑色背景,因为黑色总是给人一种科技感和专业感。然后,在页面的中心,我们可以放置一个带有动画效果的登录表单。表单可以使用暗灰色和酷炫的蓝色作为主要颜色,这样可以与黑色背景形成鲜明的对比。 在登录表单的左侧,我们可以添加一个大背景图像,以展示一些与登录主题相关的图像,比如城市的夜景或者科技元素。这些图像可以增加页面的视觉吸引力,并为用户提供一个与登录相关的引导。 旁边的登录表单可以设计成半透明的样式,让页面上的背景图像透过来。登录表单中的输入框和按钮可以使用简洁的线条设计和圆角,以增加整体的现代感。同时,我们可以添加一些动态效果,比如当用户将鼠标悬停在输入框上时,可以出现动画效果强调输入框。 此外,为了确保页面的易用性和友好性,我们可以在页面的右上角添加一个简单的注册链接,以便未注册用户可以快速访问注册页面。 最后,为了提高页面的可访问性,我们需要确保页面元素的对比度足够高,文字清晰可读。同时,为了响应不同的设备,我们还可以进行响应式设计,确保页面在不同屏幕上都能够良好地展示。 通过以上的设计元素和考虑要点,我们可以设计一个炫酷且功能强大的登录页面

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-soda-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值