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，打開新應用，但是，嘿。 除非我想學習正確編碼(沒有)，否則這絕對是次要的事情。