辑导语：引导页可以给用户留下关于产品的第一印象，并在一定程度上告知用户产品的功能及特点。因此，合理、美观、有效、且能符合用户期望的引导页设计十分重要。本篇文章里，作者总结了引导页的类型和设计方法，一起来看一下。

引导页可以算作我们打开一个新产品时看到的第一个画面，能在未使用产品之前提前告知产品的主要功能与特点。

第一印象的好坏会很大程度上影响到后续的产品使用体验。文章通过梳理引导页设计的构成，总结出实用的观点与方法来助力引导页设计。

一、什么是引导页？

第一次打开新的应用时通常能会看到2-3个系列开屏页，上面有简短的文案来解释产品的功能，方便用户使用。

又或者打开一个全新的社交类产品，会引导用户进行创建帐号、设置偏好、添加兴趣等一系列操作，从零开始带用户了解产品。

通过友好的引导页向用户介绍价值主张以及产品将如何改善他们的生活。

入门引导有助于用户了解需要做什么以及怎么做、才能从产品中获得需要的东西。这是一种与用户建立信任的方法，不仅有助于用户，也是提高业务转化率和保留率的关键。

二、为什么引导页很重要？

平均来说，近四分之一的用户会在仅使用产品一次后就因为各种原因放弃再次使用。一旦用户试用了产品并且离开，可能很难再次成为产品的使用者，除非他们能从产品中获得一些有价值的内容。

例如我们花时间和精力去下载一个新产品时，总会带着某种目的性，希望这个产品能在某种程度上解决现阶段遇到的问题或者改善我们的生活。

Twine将渐进式的引导页融入到产品体验中，用户的流失率降低了一半以上。

用户留存率和客户忠诚度是大多数产品和服务成功的关键因素，合适的引导页可以提高长期留存率。

为产品或服务添加新功能虽然很好，但如果用户不了解或不知道如何使用，会导致用户在很大程度上未充分利用这些新功能，那么它们就没有为用户带来太大的价值。

三、引导页设计类型和方法

1. 引导页类型

为满足新用户的需求并留住他们，大多数产品会采用几种引导页组合来为用户提供指导。

1）入门之旅

这是一种在移动应用中非常流行的模式。用户第一次启动产品后，他们会看到几个快速概述产品价值和基础知识的页面。

这种简单、静态的介绍为新用户提供了一个很好的入门。

Slack通过四屏概览引入了新用户，整个介绍流程很清晰，为用户提供了明确的进度点以及跳过选项。

最好的做法是为用户提供进度指示以及退出或跳过选项。这样他们就会明白还有多少介绍内容需要阅读，并且不会感到困惑。

2）工具提示和指导标记

这是另一种很常见且相对省力的方法，用于从一开始并贯穿整个产品体验来引导用户。

Twine使用工具提示和指导标记帮助用户快速了解页面情况。

在为Metrie的3D房间配置器设计界面时，通过添加指导标记的可切换图层，将它们合并到加载屏幕中。

虽然这种带注释的引导设计很有用，但要注意不要过度使用或者连续弹出多个窗口来干扰用户。一次引导用户使用一个元素或操作，避免解释太多显而易见的事情。

3）引导任务完成

让用户记住某事最好的方法就是让他们实际去做。引导式任务是通过一系列步骤提示用户与产品交互的方法，常用于当产品希望用户尽早创建帐户或设置一些个性化参数时。

用户首次进入团队管理平台Basecamp时，会被引导完成一项任务，以此来熟悉产品的特性和功能。

2. 什么时间开始引导

从初次进入到持续使用的整个过程中，决定在产品体验的哪个部分使用哪种引导模式对于用户体验来说都至关重要。

1）开箱即用

第一印象很重要，因为很多用户在第一次打开产品后就把它放弃了。

日记应用Dailyo友好细致的引导页向用户解释了产品的价值，并提供了如何让用户从中获益的提示。

2）渐进式引导

用户完成了开箱即用的流程之后，在使用产品的过程中仍然有很多机会可以继续帮助、启发和取悦用户。

每当用户选择一种新语言来学习时，多邻国都会提示用户表明他们的专业水平，然后测试他们的语言能力。这有助于用户避免因高估自己的能力而有可能放弃使用的挫折感。

3）新功能上线

当产品推出新功能或对体验进行重大的改动时，需要让用户知道这些新功能的优点以及如何使用。

当Facebook为用户引入一项新功能时，会通过一个高度可见的工具提示标注来让用户知道如何在一个简单的消息中使用新的功能。

四、引导页设计实践和技巧

1. 了解用户

通过了解用户来调整引导页的设计，发现并利用用户现有的心智模型，来帮助弥合用户对产品的期望。

Basecamp通过提供一个简单的选择面板和友好的指南，突出了新用户在首次使用时要注意的核心要素。

在构建产品时，用户测试和可用性分析不仅能帮助团队改进整体设计，还能告知用户在入门时应关注哪些内容。

2. 与用户价值联系起来

使用福利介绍来提醒用户为什么产品或服务适合满足特定需求。

Inbox对入门体验进行了冗长的介绍，但每个案例都强调了其功能将如何使用户的生活更轻松。

3. 快速引导

使用一个实体产品时，很少有人愿意翻看说明书，相反大家更愿意自己去摸索产品的功能。

Morningstar Financial的入门引导违反保持简单引导的准则，因为没有人愿意花费时间去阅读这么多的说明，更别说记住这些说明。

如果产品很简单，快速的概览可能就足够了。当需要更深入时可以考虑渐进式引导，将引导扩展到整个产品体验中。

4. 可重复引导

入门引导之后，不能假设用户不会再次访问这些引导内容，用户很可能忘记了第一次引导时提到的技巧或内容，所以考虑在导航中设置一个“帮助”模块，便于用户重复回看这些引导内容。

指导标记可以根据用户需要在房间中选择打开或关闭，这使用户能够根据自己的实际情况获得指导和帮助。

5. 避免过于个性化

鼓励新用户提供一些有助于个性化体验的信息是很好的，但需要注意不能要求太多细节，导致让用户有一种信息泄漏的感觉。

产品不应该向用户询问太多不必要的问题，尤其是在刚开始使用的时候。

首次使用Pinterest时，用户需要使用邮箱才能登录，再通过年龄和兴趣爱好的选择为用户带来个性化的体验。

最后

引导页不仅仅是一瞬间的操作，而是一个与受众建立并保持信任的过程。

原文：toptal.com/designers/product-design/guide-to-onboarding-ux

作者：Bree Chapin

译者：Clippp

作者：Clippp，微信公众号：Clip设计夹。每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。

本文由 @Clippp 翻译发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。

{
	"pages": [{
		"path": "pages/index/init",
		"style": {
			"navigationBarTitleText": "入口页"
		}
	}, {
		"path": "pages/index/guide",
		"style": {
			"navigationBarTitleText": "引导页",
			"titleNView": false,
			"app-plus": {
				"bounce": "none"
			}
		}
	}, {
		"path": "pages/index/home",
		"style": {
			"navigationBarTitleText": "首页",
			"navigationBarTextStyle": "black"
		}
	}]
}

onLoad() {
 // 从本地缓存中同步获取指定 key 对应的内容，用于判断是否是第一次打开应用
 const value = uni.getStorageSync('launchFlag');
 if (value) {
 // 如何已经有，直接去home首页
 uni.switchTab({
 url: '/pages/index/home'
 });
 } else {
 // 没有值，跳到引导页，并存储，下次打开就不会进去引导页
 uni.setStorage({
 key: 'launchFlag',
 data: true
 });
 uni.redirectTo({
 url: '/pages/index/guide'
 });
 }
}

<template>
	<view id="guide">
		<swiper
 class="swiper"
 circular 
 :indicator-dots="true" 
 :current="tabIndex"
 @change="changeTab">
			<swiper-item
 class="item"
 v-for="(item, index) in guidelList" :key="index">
				<image :src="item.src" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

"titleNView": false,

<template>
	<view id="guide">
		<video
			id="video"
			src="/static/guide.mp4"
			:direction="0"
			:autoplay="false"
			:controls="false"
			:show-play-btn="false"
			:show-center-play-btn="false"
			:enable-progress-gesture="false"
			objectFit="fill"
			@timeupdate="timeupdate"
			@ended="goIndex"></video>
		<cover-view @click="goIndex">立即体验</cover-view>
	</view>
</template>

onShow() {
 let videoContext = uni.createVideoContext('video', this)
 videoContext.play()
},
methods: {
 timeupdate(event){
 uni.getSystemInfo({
 success: (data) => {
 if(data.platform=='ios') {
 if(event.detail){
 event.detail.diff = event.detail.duration - event.detail.currentTime;
 if(event.detail.diff < 0.4){
 this.goIndex()
 }
 }
 }
 }
 })
 
 },
 goIndex(){
 uni.switchTab({
 url: '/pages/index/index'
 });
 }
}

端功能问题系列文章，点击上方合集↑

序言

大家好，我是大澈！

本文约1700+字，整篇阅读大约需要3分钟。

本文主要内容分三部分，第一部分是需求分析，第二部分是实现步骤，第三部分是问题详解。

如果您只需要解决问题，请阅读第一、二部分即可。

如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。

1. 需求分析

在页面初次加载时，弹出引导提示框，去介绍和引导用户，浏览页面的重要功能信息和组成部分。

我感觉很有趣的一个功能，这个功能在一般项目中应用的并不算多，但对一些特定网站的设计，确实很有必要应用。

2. 实现步骤

2.1 页面引导的作用或是应用场景

开始聊实现之前，我觉得有必要说道说道，页面引导有哪些有价值的作用或应用场景。

大体可以概括为以下几点：

• 用户导航：页面引导可以帮助用户快速了解和导航网站或应用程序，尤其是对于新用户或首次访问的用户。它们可以引导用户查找关键功能、页面或内容，从而提高用户体验。
• 
  
• 新功能介绍：当你向网站或应用程序添加新功能时，页面引导可以用于介绍和解释这些功能，帮助用户了解如何使用它们。这有助于提高功能的采用率。
• 
  
• 减少用户迷失：有时用户可能会迷失在网站或应用程序中，不知道如何前进或执行特定任务。页面引导可以引导他们完成任务，减少用户的迷失感。
• 
  
• 数据收集：页面引导还可以用于收集用户反馈或信息。通过在引导中包含表单或调查，开发者可以获取用户的意见和建议。
• 
  
• 提高用户参与度：通过引导用户参与特定活动，例如填写个人资料、上传图片或创建帐户，页面引导可以促进用户参与，提高网站或应用程序的互动性。
• 
  
• 教育和培训：在教育和培训应用中，页面引导可用于向学生或培训者提供课程材料，指导他们完成任务，并确保他们了解关键概念。
• 
  
• 降低用户错误：页面引导可以帮助用户避免犯错或误操作，从而提高网站或应用程序的可用性和效率。
• 
  

总之，页面引导是提高用户体验、功能采用率和用户满意度的有用工具，特别是在用户首次使用或遇到新功能时。它们有助于减少用户的困惑，提供指导，从而增强用户与网站或应用程序的互动。

2.2 简单实现代码

举例，实现在页面加载时，分3步查看一只快乐的狗子。

先安装依赖，三者选其一：

# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js

模版代码：

<template>
<!--第一步元素-->
<div class="step1" style="margin-bottom: 30px;">首先，你要这样</div>
<!--第二步元素-->
<div class="step2" style="margin-bottom: 30px;">然后，你要那样</div>
<!--第三步元素-->
<div class="step3">
<div>最后，你就看到了一只快乐的狗子！</div>
<img width="200" height="200" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F31%2F20181031045137_twKyr.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702366836&t=7f544eb90953a90dbe8553c0ef9a144f" />
</div>
</template>

逻辑代码：

<script setup>
// 引入driver逻辑
import { driver } from "driver.js";
// 引入driver样式
import "driver.js/dist/driver.css";
import {onMounted} from "vue";

// driver配置对象
const driverObj = driver({
// 显示步骤进度
showProgress: true,
// 不允许其它方式关闭
allowClose: false,
steps: [
{ element: '.step1', popover: { description: '第一步', side: "left" } },
{ element: '.step2', popover: { description: '第二步', side: "right" } },
{ element: '.step3', popover: { description: '最后一步', side: "bottom" } }
]
});

// 放在Mounted中进行初始化driver
onMounted(() => {
driverObj.drive()
})
</script>

3. 问题详解

3.1 提示弹框自定义

如果你要修改提示弹框的样式，或者要修改弹框的DOM，请参考文档如下地址：https://driverjs.com/docs/styling-popover。

3.2 配置属性一览

如果你要查看某些配置属性的含义，或者要在某些生命周期时刻做一些处理操作，请参考文档如下地址：https://driverjs.com/docs/configuration。

3.3 对象API一览

如果你要用API的方式来自定义，请参考文档如下地址：https://driverjs.com/docs/api。

结语

建立这个平台的初衷：

• 打造一个仅包含前端问题的问答平台，让大家高效搜索处理同样问题。
• 通过不断积累问题，一起练习逻辑思维，并顺便学习相关的知识点。
• 遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。

感谢关注微信公众号：“程序员大澈”，然后加入问答群，让我们一起解决实现所有BUG！