如何设计最佳 App Clips

（你好 WWDC 2020）

你好 欢迎来到 WWDC

大家好 欢迎大家观看 如何设计最佳 App Clips 我是来自 Apple 设计团队的 Grant Paul 接下来我的同事 Heena Ko 会跟我一起 跟大家聊聊一下要设计优质的 App Clips 需要哪些要素 我希望大家跟我们一样 对 App Clips 感到非常激动 那么 我们现在就开始吧 首先 我们先来详细讲一下 什么是 App Clips 及其与各位现有的 app 之间的关系 接下来我们会聊一聊 用户是如何打开 App Clips 的 因为与 app 不同的是 App Clips 不是通过 App Store 获取的 最后我们会聊一聊一个好的 App Clips 应该有什么功能 以及在设计用户界面时需要了解什么 那么 什么是 App Clips？ App Clips 是 app 的轻量版本 它们提供 app 的部分功能 而且是在用户有需要的时候提供 完全是原生的体验 而且所使用的技术 跟你的 app 中熟知技术是一样的 因为 App Clips 非常轻量 所以可以立即使用 完全无需下载或安装一个 app 实际上 App Clips 针对的是还没有下载 你的 app 的用户 他们可能根本都不知道你的 app 是什么 app 一般是通过在 App Store 中浏览或者搜索获得 App Clips 则是会在用户需要的时候出现 是通过外部环境里的代码和标签找到的 包括一些 我们专门为 App Clips 设计的新代码 App Clips 也可以来自 iOS 系统自带的 情景或者 app 像是地图和 Safari 浏览器 在接下来的内容中 我们会详细了解一下 App Clips 分别在这些情景中出现时的最佳实践 还有一点非常重要 用完之后 App Clips 不会一直运行 一旦把 App Clip 滑掉 就完事了 不需要对它进行管理或者清理来节省空间 或者从你的设备中删除 一切都给你处理好了 而如果你还需要使用某个 App Clip 还是能通过之前的方式再次打开 但如果你想要更快捷的访问方式 可以把这个 App Clip 对应的 app 下载到你的主屏幕上 这个 app 既可以提供 App Clip 的所有功能 还提供只有 app 才有的其他服务 这就是 App Clip 我们来了解一下 App Clip 的外观 这是一个 app 图标 大家应该很熟悉了 （SPIN） 它对应的 App Clip 图标外观是这样的 这个边框是由你提供的图标自动生成的 所以在制作你的 app 图标时 不需要专门为 App Clips 做额外的考虑 这就是使用 App Clip 时的情况 比如说用你的手机碰一个 NFC 标签 （SPIN - 打开） 马上就会出现一个 App Clip 卡 上边的信息会告诉你 这个 App Clip 是什么及其功能 如果想要使用 App Clip 只需要轻点“打开”即可

一旦轻点“打开”App Clip 卡就会消失 App Clip 完成加载 然后就可以使用了 App Clip 的使用就是这么简单和快捷

App Clip 的用途也非常广泛 在这一个视频里我们会聊到许多创意 涵盖可以应用 App Clips 的 不同类别和情景 而我们最期待的莫过于 我们之前从未想到过的创意 就是作为开发者的大家未来会开发的创意 就像我们在 App Store 上所看到的 那些富于想象力和创造力的 app 一样 我们希望 App Clips 能够开拓一个前所未有的领域 并像 app 一样激发出新的创意 App Clips 可以开拓的其中一个领域 就是为小型企业服务 如今的小型企业往往没有自己独立开发 一个完整的 app 的资源 所以小型企业往往会作为一个不同品牌下 一个较大 app 中的一小部分出现 比方说一个冰激凌外卖 app 要想通过这个 app 在一个冰激凌店下单 你需要先打开这个外卖 app 然后找到你想下单的那家店 但是用户想要的是 直接跟自己熟悉的店家沟通 而不想为了点一份这家店的冰激凌 再另外下载和学习另一个 app 怎么用 App Clip 这时就可以派上用场 如果你有 App Clip 就可以专门为这家小店开发一个定制体验 把这家店自己的品牌 和一些属性用回到 App Clip 上 这样一来 使用时就好像 是直接在跟这家店互动一样 （Tasty Scoops 由 Ice Cream Delivery 提供技术支持） 我们非常期待能看到 能够借用 App Clips 和 app 的力量 让更多企业取得突破性的发展 这就是 App Clips 和它存在的意义 现在我想向大家介绍一下 如何搜索和打开 App Clips 我之前说过 跟 app 不一样 在 App Store 里搜索名字或浏览类别 是找不到 App Clips 的 你只能在使用场景里找到 App Clips 你需要的时候才去找 而找到 App Clip 的方法之一 是通过实体标签 App Clips 支持很多不同种类的实体标签 比如我们的新 App Clip 代码 和其他各类 NFC 标签 也支持普通的二维码 要打开 App Clip 这些新的 App Clip 代码 是最为明显的渠道 因为这类代码的外观一致 能够立刻被大家认出来 只要扫描一下 就可以享受 App Clip 带来的绝佳体验 由于它们的辨识度高 所以当人们看到时 立刻就知道该如何使用 这些代码也很灵活 中间有一个 NFC 标签 只需把 iPhone 举到标签处就能使用了 这个标签的外圈为一个视码 在无法靠近时 使用视码会方便很多 比如代码在一个广告牌上、海报上 或者是类似很难靠近的地方 画面展示的是实体的 App Clip 代码 可以看到 它是这样摆在桌上的 对需要使用它的人来说 一目了然 十分方便 我们很快将为大家介绍更多信息 教大家如何制造及放置自己的 App Clip 代码 使用任何实体标签最重要的一点是 每个进入 App Clip 的路径 需要使用不同的标签 比如 一家咖啡店有四家门店 如果你造访的是位于库比蒂诺市的店 那它应该使用一个有别于其他地点的标签 这样一来 App Clip 就能够 自动显示库比蒂诺店的菜单 而不用让你先勾选造访的门店是哪个

你也可以在同一家门店使用不同的标签 比如 库比蒂诺店中的每张桌子上 可以放置不同的标签 这样一来 App Clip 不仅能够自动 定位你所在的店 还能识别应该将你的餐品送到哪一桌 这省略了一个步骤 让你的 App Clip 更快捷 除此之外 这还意味着 用户永远不会不小心在 App Clip 中 选错门店或所在的桌子 因为一切都是自动处理的 此外 除了放置实体标签 你也可以将 App Clip 关联到定位上 这样一来你的 App Clip 将显示在地图中 这样用户在到达相应地点前 就能使用 App Clip 比如 像这个潘娜拉烘焙店 一个餐饮 app 可以让用户在到店前 提前下单或点外卖 如果一个 App Clip 在某个地点特别有用 或者是人气、关联度很高的话 则将被选中自动出现在 Siri 建议中 这意味着在主屏幕的小组件 和聚焦中的 Siri 建议中都能看到它 这样一来 人们无需扫描任何东西 或者搜索标签或代码 就能打开你的 App Clip 以上就是通过实体标签和 定位打开 App Clips 的方法 接下来 我想介绍一下 从设备的不同地方打开 App Clips 的方法 一些 App Clip 体验并没有实体定位 因此无法为其放置标签 或在地图中进行关联 但这也没问题 App Clips 同样能与完全虚拟 仅能在设备上进行的体验完美契合

这类 App Clip 体验 可以借助 Safari 浏览器的 智能 App 横幅找到 如果你有一个网页和 App Clip 你可以将一个智能 App 横幅 添加到网页页面的最上方 这样一来 用户只要点击这个按钮 就能直接进入你的 App Clip 了 （ETSY） 举个例子 如画面所示 Etsy 可以在自己的详情页面 添加一个智能 App 横幅 直接跳转到他们的 App Clip 当然 如果用户已经下载了他们的 app 点击横幅将会跳转到 app 所以在除了拥有 App Clip 的功能外 还能同时呈现 app 的功能 那么 在 Safari 浏览器里放一个 智能 App 横幅 和比如说用户直接使用网站相比 有什么不同？ 这样做的主要原因有两个

一是开发 App Clip 就像开发一个 app 一样 最终呈现出的体验会比网页要好很多 App Clip 使用原生系统控件 用户无需学习如何使用 很快就能上手 当然 就像 app 一样 App Clip 速度很快 反应灵敏 能够带来与吸引用户 用户去 App Store 下载 app 一样的绝佳体验

第二个原因是 App Clips 能够 带来一种新的体验 这种体验很难或无法在网页端实现 但在 app 中却是手到擒来 小菜一碟 以录制和剪辑视频为例 在网页端这个功能并不常见 但是在强大的 iOS 框架下 这个功能可以轻而易举地在 app 中实现 同样地 你也可以做到将设备连接到蓝牙 或在增强现实中呈现交互式 3D 场景 App Clips 拥有 app 的全部优势 供你轻松取用 如同实体标签一样 在使用智能 App 横幅时 能够自动跳转至正确的 App Clip 页面 是非常重要的 因此在这里 Etsy 选择直接跳转至 他们 App Clip 中的产品部分 就是下方 Safari 浏览器中展示的产品 这为用户省去了在 App Clip 内 跳回至某个产品的麻烦 还有最后一个地方能够看到 App Clips 的身影 如果你在浏览一个 带有智能 App 横幅的网页 并且在信息中分享了这个页面的链接 收到链接的用户 可以直接从信息进入 App Clip 这样做的好处在于 人们可以跟认识的人分享你的 App Clip 使得其他人能够自然的 发现你的 App Clip 并由此发现你的 app 以上是 Safari 浏览器中智能 App 横幅 以及它与信息的联动的介绍 在搜索到一个 App Clip 之后 下一步就是使用它 而每次使用 App Clip 时 首先映入眼帘的便是 App Clip 卡 App Clip 卡就像 App Store 的 产品页面一样 是展现 App Clip 功能的平台 目的是对 App Clip 进行推广 告诉用户为什么应该使用它 比如说用户用手机 轻触了一个 App Clip 代码

和其他打开 App Clip 的方式一样 首先映入眼帘的是一个 App Clip 卡 所有的 App Clip 卡形状都大致相同 但有几个部分是可以自定义的 让我们看一看都有哪些和如何进行自定义 App Clip 卡上最重要的自定义部分 就是标题 标题告诉用户这个 App Clip 是什么 对于大部分 App Clips 来说 标题就是 app 的名字或品牌名字 但有时候给自己的 App Clip 起一个更加具体的标题也不错 如果你的 App Clip 只提供 app 中的某一个功能 那就可以把这个功能作为标题的一部分 比如像这个例子 如果你的 app 是一个音乐播放器 但对应的 App Clip 只有电台 那你可能需要把 "电台" 放在这个 App Clip 体验的标题里 如果标题是你 App Clip 的品牌 副标题就可以用来解释你的 App Clip 是用来干什么的 记住 使用你的 App Clip 的用户 通常都是第一次 接触你的 app 或品牌 你的品牌名字对用户来说 可能并不代表什么 用户需要看到 你的 App Clip 是做什么的解释 你就能在副标题里面解释 下一个可以自定义的是标头图 标头图是用图像来展示 你的 App Clip 的功能的好机会 如果你的 App Clip 与实体定位或服务相关 放一张定位或者服务的图片 这就是非常好的标头图了 如果与虚拟相关 可以放一张你的 logo 的图片 或者品牌的一部分 不管是哪一种 标头图都应该放一张照片 或者自定义图像 不要用截图 或者在标头图里面放很多字 在 App Clip 卡上狭小的空间里 两者都很难看清 说完了标头图之后 还有一样可以自定义东西 App Clip 卡右边的按钮 是用户在设备上打开你的 App Clip 时 能够进行的操作 我们现在为大家提供了三种操作按钮 打开、查看和播放 如果你开发的是一个通用 App Clip 你大概率会选择使用打开 这是默认选项 如果你的 App Clip 是用来展示信息 或将某物变得可视化 那查看按钮可能会比较适合你 当然 多媒体类的选择播放按钮 除了这三个 我们想要知道 大家还需要什么其他的操作按钮 当各位在开发 App Clips 新点子的时候 在反馈助手里告诉我们还有什么需要加的 最后 在 App Clip 卡的底端 是回到 App Clip 相对应的 app 的属性 轻点这里跳转到 App Store 这样用户可以下载 app 或查看相关信息 比如说开发者或隐私政策 如果你想要自定义这一部分 就意味着要修改 app 的元数据

以上就是用户如何发现 App Clips 可以是实体接触 如使用 App Clip 代码 NFC 标签和二维码 还可以使用 Safari 浏览器里的 智能 App 横幅 通过 App Clip 为用户提供一个 比网页更新或更好地体验

在使用环境明确界定 App Clip 是从哪个标签或页面跳转过来时 确保打开的是正确的 App Clip 页面 而省去无谓的浏览

最后 要仔细思考如何在 App Clip 卡上 向用户介绍你的 App Clip 应该使用清晰的语言和恰当的图片 现在大家都大概了解了什么是 App Clips 和如何使用 接下来将由我的同事 Heena 来跟大家聊聊 如何设计 App Clips 里面的内容 你好 我叫 Heena 我今天跟大家聊聊 App Clips 的设计 首先我们先来谈一谈 一个优秀的 App Clip 里面都有些什么 要记住最重要的是 优秀的 App Clips 都很简约 其专注的体验 是为了完成某一项任务而打造的 优秀的 App Clips 都很快 不光是加载快 流程也需要尽可能快速和简短 当开发一个 App Clip 时 大家要牢记三件事 第一 决定目的是什么 不管是租滑板车还是买冰淇淋 决定你 App Clip 完成的一项任务是什么

第二 思考完成这项任务 最简化的流程是什么 记住 App Clips 是一个当下的体验 所以流程应该是专注且高效的 考虑使用 像 Apple Pay 和通过 Apple 登录 这样的技术来实现更为流畅的体验

最后 你可以在 app 里面 为用户提供更多功能 记住 App Clips 应该是可独立使用的 但如果你想要为用户提供 app 我们也开发了可以轻松提供 app 的选项 我们来看一些例子

比如说你在为一个咖啡馆开发 App Clip 大家可以提前点单外带咖啡 最简化的流程可能包括浏览菜单和下单

然后使用 Apple Pay 来为你的咖啡买单

交易完成后 你也展示了你的 App Clip 的价值 这时候可以邀请用户下载完整的 app 这里很重要的一点是 要清楚解释完整的 app 都有哪些好处 下一个例子是停车 app 能够让用户在不同停车场付费停车

在这里 最简化的流程可能包括 用户可以支付某一时段内的停车费 你可以在快超时的时候给用户推送通知

轻点这一通知 就可以远程增长时限 这样就不用走回停车场里了 让我们再来看看下一个例子 比如说你在开发一个线上商店 像这个可以购买配饰的线上商店

这里的流程可能包括一个简单的购物体验 意为用户可以浏览和添加商品到购物车

交易完成后 你可以提供通过 Apple 登录 这样用户可以在收藏商品打折时收到提醒 下面是一个餐厅 App Clip 示例 这个 App Clip 可以让用户直接在 自己的位置上点单和支付 这里要注意的是 这样的体验要求 为每一桌单独发放 App Clip 代码 这样顾客可以扫一扫 扫描代码后 体验可以包括 在一个简易菜单上浏览餐品 和随时加菜的能力 然后是使用 Apple Pay 的支付体验 最后 当你证明了 自己的 App Clip 的体验有多棒 在这里为用户提供完整 app 的体验 用户可以提前下单到店自取或外卖 大家明白了吗？ 好！ 最后一个例子是一个增强现实体验 用户可以使用相机 来识别周围山峰的名字 这个体验可以包括一个简单的相机视图

和使用周围环境相关注解和信息 来增强该视图的选项

最后 你可能还会想要包括一个 与朋友分享视图的选项 以上就是一个 App Clip 的基本要素 说到这里 你可能会想说 “我有一个 app 我要怎么把这个 app 变成 App Clip 呢？” 第一步是要专注于某一项具体任务 我们来看一下这个咖啡馆 app 这里面有很多功能 可以下单、保存喜爱的饮料 查看附近的店 甚至还有创建账户 创建一个专注的体验 是要选择一个功能 这里我们决定要将体验的重点放在下单上 其他像保存最爱的饮料 或查看其他店的定位这样的功能 对于下单这主要一任务毫无帮助 所以 你其实要做的是将体验简化 把与下单和支付无关的功能都去掉 这就意味着没有不必要的 App Clip 介绍 抗拒想要在进入主流程之前添加说明 介绍和教程的冲动 避免使用登录或账户页面 如果需要注册 使用通过 Apple 登录 这样可以加快速度 保护隐私 因为 App Clip 流程极简 也不需要通用浏览或很多标签页 最后 避免使用任何设置或管理 以上就是如何将 app 变成 App Clip 的基本步骤 接下来我们聊一聊 如何设计 App Clip 的用户界面 具体地说 如何更好地使用系统部件

App Clips 可以推送通知 通知是传递与体验至关重要的信息的 绝佳方式

默认 App Clip 可以 在首次使用 8 小时内 给用户推送信息 对于完成大部分任务来说 8 小时足够了

但如果你的 App Clip 体验持续超过一天 那么可以请求明确授权将时间延长至一周 比如说 汽车租赁公司可以 在租期超过一天时请求明确授权 切记将通知内容专注于任务本身 不要给用户发送意料之外的或推广性通知 只在响应明确用户行为的前提下推送通知 如果整个体验都发生在 App Clip 里 你可能都不需要推送通知 如果你的 App Clip 有交易行为 使用 Apple Pay 这是接收付款最快的途径 而且用户也不需要重新输入 信用卡信息或地址 最后一点是 在合适的时间推广完整 app 合适的时间是指首要任务完成后 这样 你的 app 有了证明自己价值的机会 记住 App Clips 不是你的 app 的 特洛伊木马 App Clip 应该有自己独立的价值 总结一下 App Clips 是原生的轻量级体验 可以即时使用 App Clip 是当前场景下的体验 用完即关 并不存在于设备上

在线下使用 App Clip 代码 来让用户发现你的 App Clip 思考在实体空间内创建接触点 对你的 app 来说意味着什么 记得把 App Clip 做得明显可见 这样用户可以轻松发现它

让你的 App Clip 专注于一项具体任务 去除所有不必要的元素

因为 App Clips 可被发现的渠道 多种多样 更多用户将通过 App Clip 形式 使用你的 app

最后 我推荐大家去读一读 Human Interface Guidelines 里面有一章节介绍了如何设计 优秀的 App Clips 我还推荐大家去看一看 所有关于 App Clips 的视频 包括“配置和链接你的 App Clips”视频 里面介绍了如何设置 App Clips 的打开 非常感谢大家 希望大家可以开发超棒的 App Clips