React 应用程序中产品浏览的实用指南

martinez999

向用户展示新产品功能或让他们熟悉 Web 应用程序中的某些 UI 功能可能会变得乏味，尤其是当您希望用户看到很多内容时。在下面的指南中，您将学习如何使用典型的 React 应用程序主动使用产品导览来引导用户进入新的复杂的 UX，以及如何让他们熟悉 UI 功能而不会让他们感到无聊。 正如Appcues 中所述： “产品导览（有时称为产品演练）向用户介绍新产品并帮助他们找到方向。” 通常，当需要在 Web 应用程序中展示新功能或复杂的 UI 功能时，客户成功团队会向所有用户发送营销电子邮件。虽然这是建立这种意识的好方法，但某些用户可能没有机会看到添加的功能；因此，电子邮件的目的就落空了。 提高用户对 Web 应用程序中特定功能的认识的更好方法是集成简洁、不言自明的 UI 提示（称为产品导览）。 产品导览引导用户获得“顿悟”时刻，或展示未充分利用的高价值功能。


产品导览可以成为向用户介绍新产品并帮助他们找到方向的强大工具。它们可以引起人们对产品发布、促销优惠和产品销售的关注。 但如果做得不对，产品参观最终可能会让人感觉像是一个后座司机。没有人喜欢后座司机，不是吗？ 在本教程中，您将了解什么是产品之 电话号码数据 旅以及 React 生态系统中产品之旅包的类型及其优缺点。 如果您正在使用 React 构建面向客户的产品，那么您可能会热衷于在 React 应用程序中实现这一点。最后，我们将使用React Joyride为简单的购物车 UI 构建产品导览。 我们不会介绍 React 和 JavaScript 的语法基础知识，但您不必是这两种语言中的任何一种语言的专家也可以跟随。 基本产品之旅 基本产品之旅。（大预览） 产品参观指南  产品导览是网络应用程序的一个棘手方面，需要一些用户体验专业知识来推动结果。我建议您阅读Appcues 的产品参观提示。



以下是一些需要考虑的准则。 从来不讲  在网页上放置大量游览内容很诱人。但用户通常不热衷于冗长的介绍性教程。当他们必须吸收大量信息才能使用应用程序中的功能时，他们会变得焦虑。 分解  不要教一切。专注于单个功能，并创建两到三个步骤的游览来展示该功能。展示许多小型游览，而不是单一的长途游览。确定它们的优先顺序。 增值  您喜欢自己的旅行吗？你的队友呢？以用户能够理解的方式呈现游览。展示价值，而不是故事。 现在我们知道了产品导览的价值并了解了构建它们的一些指南，让我们介绍一些用于产品导览的 React 库并学习如何使用它们。 只有几个基于 React 的库用于实现游览。其中最受欢迎的两个是React Tour和React Joyride。 认识移动界面的触摸设计，Steven Hoober 的全新移动设计指南，具有经过验证的、通用的、以人为本的指南。400 页，充满了深入的用户研究和最佳实践。