WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Shop online with AR Quick Look

Shop online with AR Quick Look

WWDC 2020AR Quick LookApple PaySafariCommerce
观看原视频

Highlight

Apple 在 AR Quick Look 中提供 Apple Pay、custom action 和自定义 HTML 三种网页 banner，让零售网站可以把产品预览后的购买、加购或 Business Chat 咨询直接接回网页流程。

核心内容

电商网站引入 AR 预览后，用户能把椅子、闹钟或吉他放进自己的房间。问题出在下一步：看完以后还要退出预览、回到商品页、找到按钮、再继续购买或咨询。AR 解决了“看得准”，但购买链路仍然被切开。

这场 session 把 AR Quick Look 的重点放在 commerce workflow（商业流程）上。Apple 延续网页里的 USDZ 链接和 fragment identifier（片段标识符），让零售商在现有商品页上接入 AR 购买流程。开发者只要把商品信息、按钮类型或自定义 HTML URL 放进链接，系统就能在 AR Quick Look 底部显示一个常驻 banner。

banner 被点击后，AR Quick Look 会关闭，并通过网页上的 message event 通知原页面。网页再决定弹出 Apple Pay、加入购物车、询问尺码、打开 Maps 找门店，或跳到 Business Chat。用户看到的是同一个购物动作，技术上却仍然保持了网页、支付和 AR 预览之间的安全边界。

这套设计适合零售团队逐步上线。第一步只需要一个 rel="ar" 链接。第二步加上 Apple Pay 或自定义 action。第三步再用自定义 HTML banner 放入品牌化内容、服务入口或对话式购买流程。

详细内容

1. 用 rel="ar" 和 fragment identifier 定制 AR Quick Look

（05:47）网页接入 AR Quick Look 的入口仍然是一个指向 USDZ 的链接。rel="ar" 告诉 Safari 这是 AR 内容，URL 的 # 后面放定制参数。session 先回顾了两个基础参数：canonicalWebPageURL 用来覆盖分享链接，allowsContentScaling=0 用来禁止用户缩放模型。

<a rel="ar" href="alarm-clock.usdz#canonicalWebPageURL=https://developer.apple.com/alarm-clock-product-page/&allowsContentScaling=0">
    <img src="alarm-clock-thumbnail.jpg">
</a>

关键点：

  • rel="ar" 让 Safari 直接打开 AR Quick Look，并在缩略图上显示 AR 标识。
  • href 指向真实的 USDZ 文件，# 后面的参数会被 AR Quick Look 解析。
  • canonicalWebPageURL 覆盖默认分享目标，让用户分享商品页链接，避开当前 gallery 页面。
  • allowsContentScaling=0 适合闹钟、家具等必须按真实尺寸查看的商品。
  • 多个参数在真实 URL 中用 & 连接，带空格的值需要 percent-encode。

2. Apple Pay banner：把购买按钮放进 AR 预览

（08:53）Apple Pay banner 是最直接的零售集成。它的布局由系统提供：左侧显示商品标题、副标题和价格，右侧显示 Apple Pay 按钮。session 明确列出四个必填参数：applePayButtonType、checkoutTitle、checkoutSubtitle 和 price。

<a rel="ar" id="ar-link" href="alarm-clock.usdz#applePayButtonType=plain&checkoutTitle=Retro%20Alarm%20Clock&checkoutSubtitle=Charming%20old-school%20look%20with%20built-in%20FM%20tuner&price=$92.50">
    <img src="alarm-clock-thumbnail.jpg">
</a>

关键点：

  • id="ar-link" 为后面的 JavaScript 监听器提供定位点。
  • applePayButtonType=plain 选择 Apple Pay 按钮样式；session 还提到 pay、checkout、book、donate、subscribe 等类型。
  • checkoutTitle 和 checkoutSubtitle 是 banner 上的商品信息，传入前要做 URL 编码。
  • price 由网页提供，支持多语言网站时要按 locale 本地化。
  • 支付信息不在 AR Quick Look 内收集；用户点击后回到网页，再由网页弹出 Apple Pay sheet。

3. Custom action banner：让按钮服务不同购买步骤

（11:42）有些商品不能马上付款。预售商品可能需要收集邮箱，服装可能要先选尺码，大件商品可能要先找附近门店。Custom action banner 保留系统模板布局，但把 Apple Pay 按钮换成开发者提供的文字。

<a rel="ar" id="ar-link" href="kids-slide.usdz#callToAction=Preorder&checkoutTitle=Kids%20Slide&checkoutSubtitle=Enjoy%20the%20playground,%20right%20from%20your%20home&price=$145">
    <img src="kids-slide-thumbnail.jpg">
</a>

关键点：

  • callToAction=Preorder 定义按钮文案，可以替换成 Add%20To%20Cart、Find%20In%20Store 等业务动作。
  • checkoutTitle 和 checkoutSubtitle 继续承担商品说明。
  • price 在 iOS 14 的 custom action 中变成可选项；旧系统仍然需要提供。
  • 点击后由网页处理后续逻辑，可以加入购物车、询问尺码，或打开 Apple Maps 查询门店。

4. Custom HTML banner：把品牌化内容带入底部区域

（13:39）第三种样式允许开发者提供一个自定义 HTML 文件。它适合展示更复杂的品牌内容、促销说明或对话入口。为了满足 AR Quick Look 的安全要求，HTML 资源必须通过 HTTPS 提供。

<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=small">
    <img src="solar-panels-thumbnail.jpg">
</a>

关键点：

  • custom 参数指向自定义 HTML 文件的绝对 URL。
  • 自定义 HTML 必须使用 HTTPS，否则 banner 不会显示，请求会被忽略。
  • customHeight 可以是 small、medium 或 large。
  • 省略 customHeight 时，AR Quick Look 使用 small 高度。
  • session 里的 Business Chat 示例把吉他 AR 预览接到 Messages，对话中继续咨询并下单。

（14:04）如果需要更多垂直空间，可以把高度调到 medium。

<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=medium">
    <img src="solar-panels-thumbnail.jpg">
</a>

关键点：

  • medium 高度是 121 points，适合多一行说明或更明显的操作入口。
  • 高度仍然由 AR Quick Look 控制，网页只提交枚举值。

（14:09）如果 banner 需要更强展示能力，可以使用 large。

<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=large">
    <img src="solar-panels-thumbnail.jpg">
</a>

关键点：

  • large 高度是 161 points，适合放入更完整的营销或服务入口。
  • 高度越大，越要控制信息密度，避免遮挡用户观察商品。

5. 监听 banner 点击，把用户交还给网页

（16:31）三种 banner 最后都依赖同一个网页事件。开发者给 AR 链接设置 id，再监听 message。当 event.data 等于 _apple_ar_quicklook_button_tapped 时，网页就知道用户点击了 AR Quick Look 里的 banner。

<a rel="ar" id="ar-link" href="alarm-clock.usdz#applePayButtonType=plain&checkoutTitle=Retro%20Alarm%20Clock&checkoutSubtitle=Charming%20old-school%20look%20with%20built-in%20FM%20tuner&price=$92.50">
    <img src="alarm-clock-thumbnail.jpg">
</a>


<script type="application/javascript">
    const linkElement = document.getElementById("ar-link");
    linkElement.addEventListener("message", function (event) {
        if (event.data == "_apple_ar_quicklook_button_tapped") {
            // handle the user tap.
        }
    }, false);
</script>

关键点：

  • document.getElementById("ar-link") 找到前面声明的 AR 链接。
  • addEventListener("message", ...) 接收 WebKit 发回网页的通知。
  • _apple_ar_quicklook_button_tapped 表示用户点击了 banner。
  • 注释位置应该接入真实业务逻辑，例如调用 Apple Pay、加入购物车、跳转到 Business Chat URL。
  • AR Quick Look 先关闭，再把控制权交还给网页，支付和业务处理仍然发生在原站点。

核心启发

1. 给高单价商品加一条 AR 到 Apple Pay 的短路径

做什么：在家具、音响、灯具等商品页加入 AR Quick Look，并在底部 banner 放 Apple Pay。

为什么值得做：session 展示的流程让用户在确认尺寸和外观后直接开始支付，减少退出 AR 后重新找购买按钮的步骤。

怎么开始：先选一个已有 USDZ 的商品页，添加 applePayButtonType、checkoutTitle、checkoutSubtitle 和 price。随后监听 _apple_ar_quicklook_button_tapped，在回到网页后打开 Apple Pay sheet。

2. 为预售或多规格商品使用 custom action

做什么：把 AR 预览后的按钮改成“预订”“选择尺码”或“加入购物车”。

为什么值得做：custom action 不要求立即付款，适合还需要补充选项的零售流程。

怎么开始：用 callToAction 定义按钮文案，继续提供商品标题和副标题。事件触发后，在网页里打开规格选择弹层或执行加入购物车请求。

3. 用 custom HTML banner 做门店咨询入口

做什么：在大件商品或高咨询商品的 AR 预览里放入品牌化 banner，引导用户进入 Business Chat。

为什么值得做：session 展示了吉他和 Home Depot 场景：用户看完真实空间里的商品后，可以直接在 Messages 中继续问问题、安排服务或购买。

怎么开始：准备一个 HTTPS 的 HTML banner，使用 custom 参数传给 AR Quick Look。点击事件里跳转到公司的 Business Chat URL，或先打开商品咨询页。

4. 把分享链接指回商品详情页

做什么：为 gallery 或活动页里的每个 USDZ 链接设置 canonicalWebPageURL。

为什么值得做：用户分享 AR 内容时，收件人应该回到可购买、可了解规格的商品页，避免停在临时预览页面。

怎么开始：给每个 AR 链接追加 canonicalWebPageURL，值使用对应商品详情页的绝对 URL，并对参数做编码。

5. 为真实尺寸敏感商品关闭缩放

做什么：对闹钟、桌椅、挂画、家电等商品设置 allowsContentScaling=0。

为什么值得做：用户购买这些商品时关心真实占地、挂墙比例和与已有家具的关系。禁止缩放能减少误判。

怎么开始：检查商品模型的实际尺寸，确认 USDZ 单位正确，再在链接 fragment 中加入 allowsContentScaling=0。

关联 Session

评论

GitHub Issues · utterances