We had a project recently with an element of AR-based interaction, which it turned out was impossible to create as a prototype in either Invision or Framer (our current stack). This had a massive impact on our ability to test with users in a naturalistic way.

我们最近有一个项目，其中包含基于AR的交互元素，结果证明无法在Invision或Framer(我们当前的堆栈)中将其创建为原型。 这极大地影响了我们以自然主义方式与用户进行测试的能力。

Like most UX teams, we can’t buy every toy on the market so I’ve been looking around for a simple way to create something that at least feels more like AR than a video or a flat screen that forces the user to imagine the experience.

像大多数UX团队一样，我们不能在市场上购买所有玩具，因此我一直在寻找一种简单的方法来创建一种至少感觉更像AR的产品，而不是迫使用户想象的视频或纯平屏幕经验。

Here are my criteria:

这是我的标准：

• Relatively inexpensive, 1 month trial or accessible via current agency tools stack
  相对便宜的1个月试用版，或可通过当前的代理工具堆栈访问
• Produces the visual experience of an image, projected onto a background
  产生投影到背景上的图像的视觉体验
• Uses the native smartphone camera
  使用本机智能手机摄像头
• Can be manipulated by the user
  可由用户操纵
• Feels like an AR experience
  感觉像AR体验
• Can be shared across multiple devices
  可以在多个设备上共享
• Can be demo’d to a stakeholder face to face
  可以面对面地演示给利益相关者

In the middle of this I stumbled across the fact that Adobe has an AR product, and of course we have the Adobe CC stack in house. Hurrah.

在此过程中，我偶然发现Adobe拥有AR产品，当然我们内部也拥有Adobe CC堆栈。 欢呼。

Note: I put to one side my opinions of other Adobe products which were formed about 5 years ago, such as AdobeXD; the UX industry equivalent of Sodas in the 80s, for those who remember that.

注意：我将我对大约5年前形成的其他Adobe产品(例如AdobeXD)的看法放在一边。 对于那些记得这一点的用户，UX行业相当于80年代的Sodas。

1.抓取一个.png (1. Grab a .png)

First thing I had lying around for this test — good old company logo. David won’t mind.

我在这项测试中躺着的第一件事-好的旧公司徽标。 大卫不介意。

2.在Photoshop中转换为3D对象 (2. Convert to 3D object in Photoshop)

3D conversion is built into Photoshop. Choose new 3D extrusion from current layer.

3D转换内置在Photoshop中。 从当前层选择新的3D拉伸。

If you’re going to mess with the rotation or axis positioning pre-export be sure to do it at the top of the layer tree.

如果您想弄乱旋转或轴定位的预导出，请确保在图层树的顶部进行。

3.导出(提示：保存为A​​dobe Aero) (3. Export (hint: Save for Adobe Aero))

The export menu in Adobe Photoshop 2020 has “Save for Adobe Aero” as an export option, but I’ve tested it with a slightly out of date version of CC and it this setting exports as a .psd, so if you just do the same you get a similar result.

Adobe Photoshop 2020中的导出菜单具有“另存为Adobe Aero”作为导出选项，但是我已经使用稍微过时的CC版本对其进行了测试，并且此设置导出为.psd，因此如果您只是同样，您会得到类似的结果。

4.发送到智能手机并保存到照片 (4. Send to smartphone & save to photos)

The above option will save to your CC cloud by default and you can download from there, or as a workaround email it to which ever phone you have installed the AdobeAero app on. And yes, this tool currently only exists on mobile (apparently there’s a desktop beta out there somewhere that some lucky people have access to (**please 🙋‍♂️ **).

上面的选项默认情况下会保存到CC云，您可以从那里下载，也可以通过变通解决方案通过电子邮件将其发送到安装了AdobeAero应用程序的任何电话。 是的，该工具目前仅在移动设备上存在(显然有一些幸运的人可以使用的台式机Beta版(**请ple‍♂️ **)。

5.在智能手机上打开AdobeAero并开始新文件 (5. Open AdobeAero on smartphone and start new file)

When you open AdobeAero for the first time it will ask you to do a walkthrough to learn the basics. I recommend you do this. It’s also very cute and gets you using something quite visually sophisticated really quickly.

首次打开AdobeAero时，它将要求您进行演练以学习基础知识。 我建议你这样做。 它也非常可爱，可让您快速真正地使用视觉上非常复杂的东西。

6.从照片导入3D图形 (6. Import 3D graphic from photos)

You can import from files, photos, all the usual. If you’ve saved your .psd file to photos, you can upload it from there.

您可以通常从文件，照片导入。 如果您已将.psd文件保存到照片，则可以从那里上传。

Aero will then ask you to select a surface and choose an anchor point for your image.

然后，Aero将要求您选择一个表面并为图像选择一个锚点。

7.摆放！ (7. Place and play!)

There’s plenty of stuff you can do once items are placed. First you can move them around to adjust them, and use 3 finger swipe to move them up away from the anchor point.

放置物品后，您可以做很多事情。 首先，您可以四处移动它们以对其进行调整，然后使用三指滑动将其向上移离锚定点。

Next, you can choose a trigger for your interaction such as starting (onload) tap or when your phone is in proximity to the asset.

接下来，您可以为互动选择触发器，例如开始(加载)点击或手机靠近资产时。

Once your trigger is selected, you can choose from a range of “behaviours” such as rotation, bounce etc. You can even create a bepoke animation in-app using your finger.

选择触发器后，您可以从一系列“行为”中进行选择，例如旋转，弹跳等。您甚至可以使用手指在应用内创建自定义动画。

There’s certainly enough functionality to create the feeling of an AR interaction of something fun, or something scenario-based — for example if you want to tap on a product and get pricing or other info to appear (using show/hide).

当然，有足够的功能来创建有趣的或基于场景的AR交互的感觉，例如，如果您想点击产品并显示价格或其他信息(使用显示/隐藏)。

视频导出 (Video export)

The one sadness of this tool is that whilst it looks OK on screen, the in-built screen recording is really bad. And trying to do anything to the exported video seems to just shrink it further. Here’s what happened when I tried to turn it into a .GIF for this post..

该工具的一个令人遗憾的是，虽然它在屏幕上看起来不错，但内置的屏幕记录确实很糟糕。 尝试对导出的视频执行任何操作似乎只会使其进一步缩小。 这是我尝试将其转换为.GIF时发生的情况。

Increasing the image pixel size in any way makes it look like some kind of 1980s video game.

以任何方式增加图像像素大小，使其看起来像某种1980年代的视频游戏。

So as a workaround, try using the native iPhone screen record functionality.

因此，作为解决方法，请尝试使用本机iPhone屏幕记录功能。

(Tip: Add this functionality to your iPhone’s bottom swipe up menu by going to Settings > Control Centre > Customise Controls, + Screen Recording.)

(提示：通过转到“设置”>“控制中心”>“自定义控件”，“ +屏幕录制”，将此功能添加到iPhone的底部向上滑动菜单中。)

共享以供用户测试 (Sharing for user test)

As this is smartphone-based, you can just hand the user your phone in Preview mode, or you can send a link which will allow a user to open the experience so long as they also have the app downloaded. Most of the time this works, though I’ve found it loses assets from time to time, which could be a giant ball ache on a larger prototype, or if you’re doing remote testing.

由于这是基于智能手机的，因此您可以将手机移至“预览”模式，也可以发送链接，只要用户还下载了该应用程序，就可以打开该体验。 在大多数情况下，这种方法都是可行的，尽管我发现它有时会丢失资产，这可能是大型原型机上的巨大疼痛，或者您正在进行远程测试。

Also, I’ve not yet tried to integrate this back into a prototyping tool. It would make the most sense for AdobeXD to support integration, but I’m yet to find any evidence that it’s possible.

另外，我还没有尝试将其重新集成到原型工具中。 对于AdobeXD，支持集成是最有意义的，但是我尚未找到任何可能的证据。

解决的问题(共) (Problem solved (sort of))

So for now, in terms of solving my initial problem — done.

所以就目前而言，就解决我的第一个问题而言-完成了。

User testing-ready AR app with basic functionality that can be put on a smartphone and into users hands. Not entirely sure how to make something that is not a janky transition from AdobeXD, click URL, open new app, but hey. Unless I feel like learning to code properly (nope) then this is definitely the next best thing.

具有基本功能的可用于用户测试的AR应用程序，可以放在智能手机上并掌握在用户手中。 不能完全确定如何从AdobeXD进行一些过渡，请单击URL，打开新应用，但是，嘿。 除非我想学习正确编码(没有)，否则这绝对是次要的事情。