Shop online with AR Quick Look
Augmented Reality 入门 20m

使用 AR Quick Look 在线购物

Shop online with AR Quick Look

2020年6月23日

在 Apple 官方观看视频

一句话判断

如果你在做电商 App 或网站，这场 Session 展示了如何用 AR Quick Look 让用户”先试后买”——从沙发到运动鞋，零安装即可预览 3D 产品。

这场 Session 讲了什么

这场 Session 聚焦于 AR Quick Look 在电商场景中的实际应用。AR Quick Look 是 Apple 提供的一种无需安装额外 App 就能查看 AR 内容的机制——用户在 Safari、Messages 或支持的 App 中点击 USDZ 链接，就能直接在真实环境中预览 3D 物品。

演讲者首先回顾了 AR Quick Look 的基本工作原理。当用户点击一个指向 USDZ 文件的链接（带有 rel="ar" 属性），系统会自动打开一个全屏的 AR 预览界面。用户可以缩放、旋转、移动模型，还可以截图分享。2020 年的更新增加了几个电商非常需要的新功能：自定义 call-to-action 按钮、尺寸标注、以及更精确的物体放置。

Session 的核心部分通过实际案例展示了如何将 AR Quick Look 集成到电商工作流中。从产品 3D 模型的创建（推荐使用 Reality Converter 转换为 USDZ），到在网页中嵌入 AR 预览链接，再到处理用户的交互数据。演讲者还讨论了 AR 购物的数据分析——如何追踪用户是否使用了 AR 功能、AR 预览对购买转化率的影响。

最后，演讲者介绍了一些最佳实践，帮助开发者创建高质量的 AR 购物体验，包括模型优化、材质设置和环境光照。

值得深挖的点

  • 自定义 Call-to-Action 按钮：2020 年新增的功能允许你在 AR Quick Look 界面底部添加自定义按钮。比如”加入购物车”或”查看更多颜色”。这意味着用户可以在 AR 预览中直接完成购买动作，而不需要返回商品页面。这对转化率的影响是直接的。
  • AR 购物的数据闭环：通过 JavaScript 回调和 URL Scheme，你可以追踪用户在 AR 预览中的行为——他们是否打开了 AR 模式、停留了多长时间、是否截了图。这些数据对于优化 AR 内容策略和证明 AR 投资回报至关重要。

代码片段

<!-- 基础 AR Quick Look 链接 -->
<a rel="ar"
   href="models/sneaker.usdz">
    <img src="sneaker-thumb.jpg" alt="运动鞋">
</a>

<!-- 带自定义 Call-to-Action 的 AR Quick Look -->
<a rel="ar"
   href="models/sneaker.usdz#callToAction=购买&checkoutURL=https://shop.com/buy/sneaker">
    <img src="sneaker-thumb.jpg" alt="运动鞋">
</a>
<!-- 用户点击 AR 界面中的"购买"按钮后
     会跳转到 checkoutURL -->
<!-- 带尺寸标注的 AR 模型 -->
<a rel="ar"
   href="models/chair.usdz#allowsContentScaling=1">
    <!-- allowsContentScaling=1 允许用户缩放查看实际尺寸 -->
    <img src="chair-thumb.jpg" alt="椅子">
</a>

<!-- 使用 JavaScript 检测 AR Quick Look 支持 -->
<script>
function isARQuickLookSupported() {
    const a = document.createElement('a');
    return a.relList && a.relList.supports('ar');
}

if (isARQuickLookSupported()) {
    document.getElementById('ar-button').style.display = 'block';
}
</script>
// 在 iOS App 中使用 AR Quick Look 并追踪事件
import QuickLook

class ProductViewController: UIViewController,
    QLPreviewControllerDelegate,
    QLPreviewControllerDataSource {

    func showARPreview(for product: Product) {
        let previewController = QLPreviewController()
        previewController.delegate = self
        previewController.dataSource = self
        present(previewController, animated: true)

        // 追踪 AR 预览事件
        Analytics.track(.arPreviewOpened, product: product)
    }

    func previewController(
        _ controller: QLPreviewController,
        previewItemAt index: Int
    ) -> QLPreviewItem {
        return product.modelURL as QLPreviewItem
    }
}

最佳实践

  • USDZ 模型文件控制在 10MB 以内，确保加载速度在 3G 网络下也可接受
  • 提供多个角度的产品缩略图，引导用户点击 AR 预览
  • 使用基于物理的材质让产品在 AR 中看起来更真实
  • 追踪 AR 使用数据并对比 AR 用户与非 AR 用户的转化率差异
  • 为不支持 AR 的设备提供备选的 3D 预览方案（如 360 度旋转图片）

还有什么值得关注

  • Apple 的 AR Quick Look Gallery 展示了大量高质量的 AR 电商案例
  • 如果你在做鞋类或家具类电商，Apple 提供了专门的最佳实践指南
  • 搭配 “The artist’s AR toolkit” 一起看，可以了解 AR 内容的创作流程
WWDC 2020