WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Design great App Clips

Design great App Clips

WWDC 2020App ClipsDesign
观看原视频

Highlight

Apple 让 App Clip 作为完整 App 的轻量级原生体验，通过 App Clip Code、NFC、QR code、Maps、Safari 和 Messages 在具体场景中启动，并要求设计聚焦单一任务、最短流程、清晰卡片和任务完成后的完整 App 引导。

核心内容

App Clip 的设计要从具体任务开始。咖啡店例子里的最小流程是浏览菜单、下单、用 Apple Pay 付款，交易完成后再提示下载完整 App。（16:08）停车例子里的最小流程是支付一段停车时间，到期前发通知，用户点通知后远程延时。（16:33）

Safari 里的商品详情页是另一类入口：Etsy 可以在详情页放 Smart App Banner，让用户直接进入对应 App Clip。（08:16）Apple 还强调，Safari 入口要自动打开 App Clip 中与网页商品对应的部分，省掉用户再次导航回商品的步骤。（09:56）从完整 App 提取 App Clip 时，介绍页、登录页、全局导航、tab、设置和管理入口都要删掉，Sign in with Apple 只在需要注册时使用。（18:56）

App Clip 的定位正好相反。它是完整 App 的轻量级版本，使用原生技术，在用户需要的地点和时刻出现。它可以从 App Clip Code、NFC tag、QR code、Maps、Safari、Messages 进入。用户用完后把它划走，系统会处理清理；如果还要更快访问或更多功能，再下载对应的完整 App。（01:01）

这场 session 的重点是设计决策。App Clip 不该把完整 App 缩小一圈放进去。物理标签要把入口上下文转成默认状态：门店 tag 直接选中门店，桌牌 tag 直接带出桌号。（06:08）

Safari 入口也要保留上下文。Etsy 的例子会直接进入商品所在的 App Clip 部分，避免把用户带到通用首页。（10:04）

进入体验前，App Clip card 要先解释这是什么、能做什么、为什么值得打开；它类似 App Store 产品页，是用户决定是否打开 App Clip 前看到的介绍。（10:49）进入体验后，流程只保留单一任务需要的步骤：咖啡 App Clip 负责菜单、下单、Apple Pay 和任务完成后的下载提示；停车 App Clip 负责支付、到期通知和远程延时。（16:08）（16:33）

详细内容

发现入口要带着任务上下文

（05:02）App Clip 的发现方式来自现场，而不是 App Store 搜索。物理入口包括 App Clip Code、NFC tag 和 QR code。Apple 强调，每一种进入方式都应该对应清晰的任务上下文。

关键点：

  • App Clip Code 中间可以包含 NFC tag，外圈是可扫描的视觉码，适合放在桌面、广告牌、海报或用户够不着的位置。
  • 同一家咖啡店的不同门店应该使用不同 tag，让 App Clip 自动显示当前门店菜单。
  • 同一门店的不同桌子也可以使用不同 tag，让订单自动绑定桌号。
  • 这样能省掉位置选择和桌号选择，也能减少用户选错地点的风险。

（07:00）App Clip 也可以关联地点。关联后，它可能出现在 Maps 的地点卡片里。session 明确给出的例子是 Panera Bread 这类 food app：用户还没到店，就能预订或点外带。如果某个 App Clip 在特定地点足够有用，系统还可能在 Siri Suggestions 或 Spotlight 中建议它。

关键点：

  • Maps 入口在本场示例里对应餐饮地点，可以支持到店前预订或外带。
  • Siri Suggestions 适合高频、地点强相关的体验。
  • 设计时要假设用户可能没有扫任何码，仍然需要直接进入对应地点的任务页。

Safari 和 Messages 适合纯数字场景

（08:16）有些体验没有物理位置，用户可以从 Safari Smart App Banner 进入 App Clip。session 的 Etsy 例子是商品详情页，banner 可以把用户带到对应 App Clip。

（09:24）Apple 还举了几类 Web 上较难完成、App Clip 更适合承接的体验：录制和编辑视频、连接 Bluetooth 设备、展示增强现实里的交互式 3D 场景。

关键点：

  • Safari banner 应该出现在 App Clip 能提供更好原生体验的页面。
  • 如果完整 App 已安装，banner 会打开完整 App。
  • App Clip 打开后要落到网页对应的具体内容，不能让用户再从首页找一遍。
  • Messages 分享同一链接时，也可以让接收者直接打开 App Clip。

App Clip card 是一次极短的自我介绍

（10:49）每次打开 App Clip 前，用户都会先看到 App Clip card。它承担 App Store 产品页的一部分职责：告诉用户这个体验来自谁、能完成什么、打开后会发生什么。

关键点：

  • 标题通常使用 App 或品牌名；如果体验只聚焦单一功能，可以把功能放进标题。
  • 副标题要解释 App Clip 的任务，因为很多人第一次接触这个品牌。
  • 头图应该用地点照片、服务照片、品牌图形或 logo 相关图形，避免截图和大段文字。
  • 操作按钮可选 Open、View、Play，分别适合通用任务、信息查看、媒体或游戏。
  • 底部归因链接回完整 App，隐私政策、开发者信息和下载入口都从这里进入。

最小流程从一个任务开始

（15:12）优秀 App Clip 的共同点是简单、快速、聚焦。设计前先确定它要完成的单一任务，再删掉任务之外的内容。

关键点：

  • 咖啡 App Clip 的最小流程是浏览菜单、下单、Apple Pay 付款。
  • 停车 App Clip 的最小流程是选择停车时长、付款、到期前通知用户。
  • 电商 App Clip 的最小流程是浏览商品、加入购物车、完成交易。
  • 餐厅桌边 App Clip 需要给每张桌子分发独立 App Clip Code，扫码后直接点餐和付款。
  • AR App Clip 可以只提供相机视图、周围信息标注和分享入口。

（18:24）从完整 App 提取 App Clip 时，Apple 的建议是先选一个具体任务。咖啡 App 可能有下单、收藏饮品、查找门店、创建账户等功能，但 App Clip 只保留下单。

关键点：

  • 删除与单一任务无关的入口，例如收藏、附近门店、设置和管理页面。
  • 避免开场介绍、教程和欢迎页，用户进入时已经有明确目的。
  • 避免登录页和账户页；需要注册时，用 Sign in with Apple 降低输入成本。
  • 不需要全局导航或大量 tab，因为 App Clip 只服务一个短任务。

系统组件要服务当前任务

（19:32）App Clip 可以发送通知。默认情况下，它在首次使用后的 8 小时内可以发送通知；如果体验跨越多天，可以请求显式授权，把通知能力延长一周。

关键点：

  • 通知只应该回应用户明确动作，例如停车即将到期；如果任务跨越多天，例如租车，可以请求显式授权延长通知能力。
  • 不要发送促销或意外通知。
  • 如果整个任务都在 App Clip 内完成，可以不发送通知。

（20:17）有交易就优先使用 Apple Pay。它让用户不用重新输入银行卡和地址。完整 App 的推广要放在主要任务完成之后，让 App Clip 先证明自己的价值。

关键点：

  • Apple Pay 适合本场提到的点单、停车、电商购物和餐桌结账。
  • 完整 App 下载提示应该解释额外收益；餐厅例子里，完整 App 可以提供提前点餐、外带和配送。
  • 保存收藏和接收销售通知属于在线商店交易后提供 Sign in with Apple 的收益，不应该和完整 App 下载提示混在一起。
  • App Clip 本身要有独立价值，不能只当下载完整 App 的入口。

核心启发

  • 做什么：做一个餐桌点单 App Clip。 为什么值得做：session 提到每张桌子可以使用不同 tag，App Clip 能自动知道门店和桌号。 怎么开始：为每张桌子生成独立 URL，扫码后直接打开菜单，结账使用 Apple Pay，完成后再提示下载完整 App 获取外带和配送能力。

  • 做什么：做一个停车续时 App Clip。 为什么值得做：停车例子展示了付款后通过通知提醒到期，再从通知回到 App Clip 远程延时。 怎么开始：付款后安排 8 小时内的任务通知，用户点通知后进入续时页面。

  • 做什么：把商品详情页接到 Safari App Clip。 为什么值得做：Safari Smart App Banner 可以让网页里的具体商品进入原生购买流程，省掉再次搜索商品的步骤。 怎么开始：只在适合原生体验的详情页显示 banner，App Clip 读取商品 URL 后直接显示同一商品，并保留网页到完整 App 的升级路径。

  • 做什么：给小商家做带品牌感的 App Clip。 为什么值得做：session 用冰淇淋配送举例，说明小商家可以通过更大平台提供自己的品牌体验，同时保留对平台 App 的归因。 怎么开始：为每个商家准备独立的卡片标题、头图和入口 URL，App Clip 内只展示该商家的点餐或配送流程。

  • 做什么：做一个面向现场的 AR App Clip。 为什么值得做：session 的山峰识别例子说明，App Clip 可以把相机和 AR 用在短时、地点明确的体验里。 怎么开始：打开后进入相机视图，叠加周围山峰名称、说明和分享按钮，保留分享入口作为任务收尾。

关联 Session

评论

GitHub Issues · utterances