輯導語：引導頁可以給用戶留下關于產品的第一印象，并在一定程度上告知用戶產品的功能及特點。因此，合理、美觀、有效、且能符合用戶期望的引導頁設計十分重要。本篇文章里，作者總結了引導頁的類型和設計方法，一起來看一下。

引導頁可以算作我們打開一個新產品時看到的第一個畫面，能在未使用產品之前提前告知產品的主要功能與特點。

第一印象的好壞會很大程度上影響到后續的產品使用體驗。文章通過梳理引導頁設計的構成，總結出實用的觀點與方法來助力引導頁設計。

一、什么是引導頁？

第一次打開新的應用時通常能會看到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！