使用uxpin fullstory和netlify远程测试原型-CSDN博客

Sometimes the tools we love need a little help from others. One tool I love to use for quick wireframes and high fidelity prototypes is UXPin. Unlike Figma, Sketch, and most design tools that require you to fake states and interactions, UXPin supports interactive states, conditional logic, and even code components. This means that buttons and form fields are fully interactive.

小号 ometimes我们所爱的工具，需要别人的帮助不大。我喜欢用于快速线框和高保真原型的一种工具是UXPin 。与Figma，Sketch和大多数需要伪造状态和交互的设计工具不同，UXPin支持交互状态，条件逻辑甚至代码组件。这意味着按钮和表单字段是完全交互的。

Similar to tools like Figma, UXPin is web-based and makes it easy to share a URL with anyone to click through the prototype. Because of this and its rich support for interactive components, when I’m creating and testing prototypes with people where it needs to feel like the real thing, UXPin is a top choice.

与Figma之类的工具相似，UXPin是基于Web的，可以轻松地与任何人共享URL以单击原型。由于这一点及其对交互组件的丰富支持，当我与需要真实感觉的人一起创建和测试原型时，UXPin是最佳选择。

大规模测试 (Testing at scale)

Sharing preview links is simple enough, but observing how others navigate through your prototypes is often cumbersome and synchronous. Peering over someone’s shoulder, getting them to share their screen with you over Google Meet or Zoom, or working through a 3rd party service like UserTesting.com are often not ideal.

共享预览链接非常简单，但是观察其他人如何浏览您的原型通常既麻烦又同步。凝视某人的肩膀，让他们通过Google Meet或Zoom与您共享屏幕，或者通过UserTesting.com之类的第三方服务工作通常都不理想。

One effective method I’ve used for testing concepts and prototypes at scale with B2B customers at companies like UserVoice is to target in-app messages inviting users to test a prototype and provide feedback. But, as many of us know, the real value in feedback is not what the user says, but what they do.

我用于与UserVoice等公司的B2B客户进行大规模测试概念和原型的一种有效方法是针对应用内消息，邀请用户测试原型并提供反馈。但是，正如我们许多人所知， 反馈的真正价值不是用户所说的，而是他们所做的。

Enter FullStory. FullStory helps us see what people do, and understand what they mean when they give us feedback. As someone who has led design for B2B platforms serving thousands of customers, it’s simply the best way to understand how people are using your product.

输入FullStory 。 FullStory帮助我们了解人们的行为，并理解他们在向我们提供反馈时的含义。作为负责为数以千计的客户提供服务的B2B平台设计的人，这只是了解人们如何使用您的产品的最佳方式。

FullStory is like a DVR for recording everything people do on your website or web app. You can go back and replay — visually — every user’s session. You can even search for specific events to watch everyone who’s done it. As powerful as this is for seeing people use existing products and sites, what most people don’t know is that they can use this power for prototypes, too!

FullStory就像DVR，用于记录人们在您的网站或Web应用程序上所做的一切。您可以返回并直观地重播每个用户的会话。您甚至可以搜索特定事件，以观看完成此操作的每个人。看到人们使用现有产品和站点的功能如此强大，大多数人不知道的是他们也可以将这种功能用于原型！

The trick is getting FullStory to record UXPin prototypes.

诀窍是让FullStory记录UXPin原型。

Fortunately, UXPin allows you to export prototypes in HTML. Prototypes in UXPin are, in fact, already HTML, so this is perfect. The only thing missing is hosting the prototype where others can access it and recording it with FullStory. This is where Netlify comes in (of course, you could use a different hosting solution, but Netlify is free and makes it easy to inject FullStory’s tracking scripts).

幸运的是，UXPin允许您导出HTML原型。实际上，UXPin 中的原型已经是HTML，所以这很完美。唯一缺少的是托管原型，其他人可以访问它并用FullStory进行记录。这就是Netlify的用处(当然，您可以使用其他托管解决方案，但是Netlify是免费的，可以轻松注入FullStory的跟踪脚本)。

步骤 (The Steps)

This article assumes you already use UXPin. If not, they’ve got a great free trial and lots of tips for getting started. You can even import your existing Sketch files. Go make something you want to test and carry on!

本文假定您已经在使用UXPin。如果没有，他们将获得免费的试用版和许多入门技巧。您甚至可以导入现有的Sketch文件。去做一些您想测试并继续的东西！

Also, if you haven’t already, sign up for free accounts on Netlify and FullStory. Both Netlify’s and FullStory’s free plans are sufficient for testing your prototype.

另外，如果您还没有的话，请在Netlify和FullStory上注册免费帐户。 Netlify和FullStory的免费计划都足以测试您的原型。

步骤1：导出您的UXPin原型 (Step 1: Export your UXPin prototype)

Exporting a UXPin prototype to HTML.

将UXPin原型导出为HTML。

Open the Share dialog for your prototype.
打开原型的“ 共享”对话框。
Select the Export tab, then select HTML.
选择“ 导出”选项卡，然后选择“ HTML”。
Make sure Include images (offline browsing) is selected.
确保选择包括图像(脱机浏览) 。
Click Export as HTML.
单击导出为HTML。
After the export is generated, click the link to download the prototype.
生成导出后，单击链接以下载原型。

步骤2：将原型上传到Netlify (Step 2: Upload your prototype to Netlify)

Uploading a UXPin prototype to Netlify.

将UXPin原型上载到Netlify。

After logging in to Netlify, drag the unzipped UXPin folder into the area that says, “Want to deploy a new site without connecting to Git? Drag and drop your site folder here.”
登录到Netlify后，将解压缩后的UXPin文件夹拖到“是否要在不连接Git的情况下部署新站点？ 将您的站点文件夹拖放到此处。”

That’s it. In seconds Netlify will create a new website with your prototype and assign it a unique subdomain. Feel free to change this to whatever you prefer, but note that if you change it after FullStory starts recording sessions, sessions from before you changed the subdomain will not render properly.

而已。 Netlify将在几秒钟内用您的原型创建一个新网站，并为其分配一个唯一的子域。可以随意将其更改为您喜欢的任何内容，但是请注意，如果在FullStory开始录制会话之后进行更改，则更改子域之前的会话将无法正确呈现。

步骤3：将您的FullStory跟踪代码添加到Netlify (Step 3: Add your FullStory tracking code to Netlify)

Adding FullStory tracking code to Netlify.

将FullStory跟踪代码添加到Netlify。

Once Netlify has published your new site, you’re ready to add your FullStory tracking code. Netlify allows you to do this without modifying the HTML that UXPin generated, which is especially helpful if you update your prototype later — you don’t have to edit the HTML yourself to include FullStory!

Netlify发布新站点后，就可以添加FullStory跟踪代码了。 Netlify允许您执行此操作而无需修改UXPin生成HTML，这在以后更新原型时特别有用-您不必自己编辑HTML即可包含FullStory！

In Netlify, click on your new site’s Site settings.
在Netlify中，单击新站点的“ 站点设置”。
In the left-hand nav, select Build & Deploy and scroll down to Post processing.
在左侧导航栏中，选择“ 构建和部署”，然后向下滚动至“ 后期处理”。
Under Snippet injection, click Add snippet. You’ll now see three new fields: Insert before…, Script name, and HTML.
在代码段 注入下，点击添加代码段。 现在，您将看到三个新字段：在...之前插入，脚本名称和HTML。
Change Insert before from </body> to </head>.
将“ 插入之前”从</ body>更改为</ head>。
For Script name you can simply enter FullStory (the exact text doesn’t matter).
对于脚本名称，您只需输入FullStory (确切的文本无关紧要)。
Under HTML you’ll need to paste in your FullStory tracking code. If you’ve just created a new FullStory account, this will be the first thing you see. Otherwise, go to your FullStory settings and copy the Javascript code from there.
在HTML下，您需要粘贴FullStory跟踪代码。如果您刚刚创建了一个新的FullStory帐户，这将是您看到的第一件事。否则，请转到FullStory设置并从那里复制Javascript代码。
Click Save. Netlify will automatically update your prototype’s HTML to include the tracking script.
单击保存。 Netlify将自动更新原型HTML以包括跟踪脚本。

步骤4：分享您的原型 (Step 4: Share your prototype)

Now you’re ready to have people view your prototype. Just copy the website URL generated by Netlify.

现在，您已经准备好让人们查看您的原型。只需复制Netlify生成的网站URL。

How and with whom you share your prototype is up to you, depending on the audience and desired turnaround time. Here are a couple of methods for scaled asynchronous testing I’ve had success with in the past:

如何以及与您共享原型的方式取决于您，取决于听众和所需的周转时间。这是我过去成功使用过的几种用于规模化异步测试的方法：

Email. Email specific users you’d like feedback from. You’ll be able to see if and when they’ve accessed the prototype, and respond
电子邮件。 向您希望反馈的特定用户发送电子邮件。您将能够查看他们是否以及何时访问了原型，并做出了回应
In-app notification. Send an in-app notification to a specific cohort of users of your product asking them for feedback about your new concept. Services like Pendo and Intercom are great for this.
应用内通知。 向您产品的特定用户群发送应用内通知，请他们提供有关您的新概念的反馈。 Pendo和Intercom之类的服务对此非常有用。
Embedded iframe. Similarly — or in addition to — in-app notifications, you can embed your Netlify-hosted prototype in an iframe. Try prompting users through an in-app button or notification to invoke a modal experience with the embedded prototype.
嵌入式iframe。 类似地(或除了应用程序内通知)，您可以将Netlify托管的原型嵌入到iframe中。尝试通过应用内按钮或通知提示用户以调用嵌入式原型的模式体验。

In any of these cases, it’s helpful to provide context to the person you’re asking to view the prototype, let them know what kind of feedback you’re looking for, and how to give that feedback.

在任何一种情况下，为您要查看原型的人员提供背景信息，让他们知道您正在寻找什么样的反馈以及如何提供反馈都是有帮助的。

开始观看 (Start Watching)

Viewing a user session in FullStory.

在FullStory中查看用户会话。

Once people start viewing and interacting with your Netlify-hosted prototype, their sessions will automatically be recorded and you’ll start seeing their sessions show up in FullStory.

一旦人们开始查看并与您的Netlify托管的原型进行交互，他们的会话将被自动记录，并且您将开始看到他们的会话显示在FullStory中。

Whether you’re testing your prototype with just a few people or at scale, you’ll now be able to review how each session at any time. As an added bonus, you can even add notes to specific moments you’re reviewing in FullStory to share with your team (or just to keep track of for yourself).

无论您是只用几个人测试还是大规模测试原型，现在您都可以随时查看每个会话的方式。作为额外的奖励，您甚至可以为在FullStory中正在查看的特定时刻添加注释，以与您的团队共享(或只是为了自己跟踪)。

Happy testing!

测试愉快！

Joshua leads design at Vaporware, a design and development agency in Raleigh, North Carolina. Since 2013, Vaporware® has partnered with innovative business leaders to discover, deliver, and adopt the right custom software solutions to overcome their biggest challenges.

约书亚(Joshua) 在北卡罗来纳州罗利市的设计和开发机构 Vaporware 负责设计 。 自2013年以来，Vaporware® 与创新的业务领导者合作，发现，交付和采用正确的定制软件解决方案来克服其最大的挑战。