简介
产品导览是用来让新的和现有的用户熟悉你的应用程序的界面，并引导他们采取有意义的行动，以帮助他们充分利用你的应用程序的潜力。
在这篇文章中，我将向你介绍如何制作产品导览，以帮助你的应用程序的新用户转化为长期用户或客户。
为什么要使用产品导览？
所有的软件，尤其是首次推出的新产品，往往都有一些学习曲线。作为产品所有者，你的目标是通过向用户展示如何有效地使用你的产品和它的功能来帮助缩短这一曲线。这可以在产品导览的帮助下完成。
产品导览也有助于用户保留和转换，因为大多数用户如果不能浏览你的应用程序的用户界面，就会感到沮丧，转而使用你竞争对手的产品。
请注意，产品导览并不能替代优秀的用户界面设计，所以考虑投资于高质量的设计也很重要。
虽然产品导览是一个很好的工具，但如果执行得不好，它们会很快让新用户感到沮丧，阻止他们发现你的产品的核心价值，使他们更有可能过早地放弃你的产品。关键是要专注于你的产品价值和用户目标，而不是把用户拖过每一个功能。在这篇文章中，我们将介绍设计有效产品导览的技巧。
创建产品导览的最佳实践
创建令人敬畏的产品导览并不是火箭科学，但它确实应用了科学原理，即你必须多次测试和迭代你的导览，以找出最适合你的用户，同时遵循基本设计原则。让我们来看看一些有用的提示，好吗？
让它成为可选项
并非每个用户都喜欢被教导如何使用一个产品。他们中的一些人是通过玩弄你的用户界面和自己摸索来学习的，而强迫他们参观产品可能会使他们失去兴趣。出于这个原因，请考虑在你的参观中添加一个 "跳过 "按钮。请注意，在某些情况下，添加产品导览可能是至关重要的，但这取决于你的产品类型。
KISS (保持短小而简单)
在创建产品导览时，不要试图把事情搞得过于复杂。不是每个新用户都急于使用你的产品，所以尽量尊重他们的时间，保持简短和简单。
你可以通过精简你的产品导览来实现这一点，只包含用户为熟悉你的产品并获得最大利益所需的关键步骤。
要有顺序
随意抛出亮点和工具提示并不是向你的用户展示你尊重他们时间的最好方式，而且这可能会让人困惑。尽量使你的产品之旅遵循一个特定的顺序，而不是。这将使你的用户急于探索你的产品服务。
要有暗示性
大多数时候，你可以简单地建议他们应该尝试的功能，或者在他们执行了一个特定的动作或设定后应该了解的功能，而不是一次性向你的用户展示你产品的所有功能。这鼓励他们通过自我发现来学习，这可以说是最好的学习方法之一。
提供价值
尽量只专注于你的产品的核心产品，而不是用每一个小细节来烦扰你的用户。80/20原则也可以适用于此，即你的大多数用户只会使用你产品的20%的功能来实现他们80%的需求。这意味着你应该找出你的产品的20%是什么，并在你的导览中介绍它。
创作产品导览，使用vue-tour
在Vue.js中，我们可以使用大量的库来制作我们的产品导览，但我们将看看如何使用vue-tour 库。vue-tour 是使用最广泛的，每周有20,000次下载和2,000颗Github星。它也很容易启动和运行，并提供大量的自定义功能。
为了练习我们如何在Vue.js中制作产品导览，我们将采用一个现有的仪表板应用程序，并使用vue-tour 库为其添加产品导览功能。
你可以在这里找到用vue-tour 制作产品导览的Github仓库。
请注意，该仓库有两个分支：一个是main 分支，它是最初的，另一个是product-tour 分支，它是最终的产品。
开始使用
为了开始工作，让我们分叉仓库并将其克隆到我们的本地机器。
然后我们用下面的命令安装节点模块。
yarn install
#OR if you prefer using npm
npm install
接下来，我们通过运行下面的命令来安装vue-tour 库。
yarn add vue-tour
#OR
npm install vue-tour
不幸的是，vue-tour 库还没有与Vue 3兼容。这个问题正在努力解决，并将由项目维护者在即将到来的更新中发布，但现在，我们将在Vue 2中使用它。
在你的main.js 文件中添加以下几行代码。这将导入vue-tour 库，它的默认样式，并指定我们要在我们的应用程序中全面使用该库。
import VueTour from 'vue-tour';
import 'vue-tour/dist/vue-tour.css';
Vue.use(VueTour)
使用vue-tour
首先，我们必须为我们想让我们的旅游目标元素添加一个独特的类名、ID名或数据属性。
通过src >views >dashboard >DashboardHome ，导航到DashboardHome.vue 。
<template>
<v-main>
<v-container>
<div class="lg:flex">
<v-container class="left-side">
<v-row>
<v-col cols="12">
<h2 class="text-xl">Hello, Iniubong!</h2>
<p class="text-sm mt-2 text-gray-400">
Let's travel around the world again
</p>
</v-col>
<v-col cols="6">
<v-card
id="v-step-0"
height="150px"
class="rounded-lg text-center cursor-pointer"
>
<router-link :to="'/dashboard/plan-trip'">
<div>
<v-avatar class="icon avatar-badge mt-6" size="50">
<v-icon color="primary">mdi-plus</v-icon>
</v-avatar>
<p class="mt-3">Add Trip</p>
</div>
</router-link>
</v-card>
</v-col>
<v-col cols="6">
<v-card
height="150px"
class="v-step-1 rounded-lg text-center cursor-pointer">
<router-link :to="'/dashboard/fund-wallet'">
<div>
<v-avatar class="icon avatar-badge mt-6" size="50">
<v-icon color="primary">mdi-plus</v-icon>
</v-avatar>
<p class="mt-3">Fund Wallet</p>
</div>
</router-link>
</v-card>
</v-col>
<v-col cols="12">
<v-card height="300px" class="rounded-lg">
<v-card-title>Popular Destinations</v-card-title>
<v-container>
<PopularPlacesSlider />
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>
<v-container class="right-side">
<v-row>
<v-flex class="flex-col">
<v-col>
<div class="flex justify-between items-center">
<p>Upcoming Trips</p>
<div>
<router-link
:to="'/dashboard/upcoming-trips'"
class="flex justify-end items-start">
<p>See all</p>
<v-icon>mdi-arrow-right</v-icon>
</router-link>
</div>
</div>
</v-col>
<v-col cols="12">
<UpcomingTrips>
<template v-slot:trip-name>Desert Surfing</template>
<template v-slot:trip-duration
>30th June 2021 - 20th July 2021</template
>
</UpcomingTrips>
</v-col>
<v-col cols="12">
<UpcomingTrips>
<template v-slot:trip-name>Flexing in Hawaii</template>
<template v-slot:trip-duration
>30th June 2021 - 20th July 2021</template
>
</UpcomingTrips>
</v-col>
<v-col data-v-step="2">
<VectorMap />
</v-col>
</v-flex>
</v-row>
</v-container>
</div>
</v-container>
</v-main>
</template>
接下来，我们将步骤定义为我们组件的数据属性、我们的Vuex商店或其他地方的对象数组。
每个对象数组应该至少包含目标元素，以及你想要的内容。也有空间进行一些其他的定制，如工具提示或标题的位置。
data() {
return {
steps: [
{
target: '#v-step-0',
header: {
title: 'Plan Trip',
},
content: `Click here to plan a solo trip or with family and friends`
},
{
target: '.v-step-1',
content: 'Add funds to your wallet or setup up a schedule to save up for that big trip you\'ve always planned for.'
},
{
target: '[data-tour-step="2"]',
// You can use HTML tags. Even emojis too 😏
content: 'Here\'s a map showing all of your travels as you go on amazing journies to amazing places.<br> Click on each point to relieve memories from each trip. 🌠',
params: {
// This sets the placement of the popup
placement: 'top'
}
}
]
};
},
将产品导览添加到你的项目中
接下来，为了使我们的产品导览显示在我们的页面上，我们添加以下一行代码。
<v-tour name="myTour" :steps="steps"></v-tour>
最后一步是在我们的mounted 钩子中添加下面这行代码，或者在我们希望旅游开始的时候添加。
this.$tours['myTour'].start()
在我们的案例中，我们希望当我们的用户加载页面时，旅游开始，所以我们在mounted 钩子中加载它，如下所示。
mounted: function () {
this.$tours['myTour'].start()
}
就这样，我们的产品之旅开始运行了。很明显，这不是什么花哨的东西，但我们已经学会了如何建立一个。
从这里，你可以调整和定制这个项目或你自己的产品导览，使之成为最适合你和你的用户的产品。
欲了解更多关于如何使用和定制vue-tour ，请查看他们的文档。
总结
在本教程中，我们已经回顾了产品之旅的定义和重要性。我们还讨论了创建真正好的产品导览的一些最佳做法，以帮助提高用户转化率和保留率。我们还练习了在我们的Vue.js应用程序中添加产品导览功能。
文章《在Vue.js中制作产品导览》首次出现在LogRocket博客上。
