利用 Apple tvOS 掌控客厅

大家好 欢迎 过去一年 我和我的团队一直在重新构想 Apple TV 的用户体验

我们一直在尝试 并探索如何将乐趣 重新融入浏览之中

今天 我们将与你们分享 如何主宰客厅 如何更贴心地 使用户与他们喜爱的内容 实现交互

我叫 Tommy Payne 我的朋友叫我 T.Payne 我是 Apple 的设计师

我在澳大利亚长大 一个离世界上其他国家都很远的地方 我一直在寻找能够 与其他国家联系的方式 我感兴趣也好奇于 其他的文化 其他人 其他的地方与环境

所以我希望电视和电影 能够建立起联系的桥梁

从学校回到家 我会扑通一下倒在沙发上 然后打开电视 不停的搜索频道 来回搜索 直到我感兴趣的东西出现 如果它确实很棒 我会非常着迷 我会全神贯注 沉浸在故事中

你脑海中出现了一部电影或电视节目 你与它有着一种联系

想象一下它给带来的感觉 当你沉浸在那部剧中的时候 时间和空间仿佛消失了 现在 记住那个感觉 我们继续 我要讲的不是代码 但是我的朋友一会儿会讲到 我要讲的是发现的乐趣

我们如何使用户 更快地找到他们想要的 并且除掉进入的障碍

现在的电视 有点啰嗦 很多很多很多行的内容 呈现在用户面前 用户要来回滚动 你们中有谁曾花 5 分钟 10 分钟甚至 20 分钟 只为了找点东西看呢 这种体验很常见 也很令人沮丧 在这个过程中 我们会失去选择的能力而变得犹豫不决

所以 这就是问题所在

现在 我们来说一下解决的方法

我们有意将 Apple TV 设计成内容优先的体验 所有的这些都意味着 一定有东西呈现 有东西放映 当你进入到 App 的时候 感受到它是充满活力的 所以我会给你讲解 如何通过一些最佳操作 实现内容优先的用户体验 我还会用一些例子 例如顶部展区 以及一些我们自己的 TV App 的例子

首先 我会移除 进入的障碍 消除用户与内容间的所有障碍 这个原则使顶部展区 变得具有互动性和浸入感

我们来看一看

我们启动 Apple TV 会看到 5 秒种的海报图片 接下来会有一个预告片 很重要的是 我们要注意到 在这个预告片中 我们不会给用户太多的声音 在你刚刚进入的时候 出现太多的声音和动画 是很糟糕的体验 但是 用户在稍后 可以自己将声音调出来 内容占据了所有像素 它铺满了整个屏幕 接下来 我们想要确保 因为用户正在观看 一些他们很容易得到交互的东西

这时任何远位置的点击或滑动鼠标 都会增加用户的认知负荷 因此我们想缩减步骤 让他们更容易地 完成操作

在顶部展区 我们将一个视觉提示放在 屏幕最上层 来提示用户 滑动这里可以就进入 全屏模式 我们看一下它的动态效果 用户把拇指放在 遥控器上然后滑动 这时候程序坞消失了 剩下的只有 全屏播放的预告片

所以用户还是处在浏览模式 但是会看到播放的影片 这会让用户觉得 他们沉浸在观影中 这很酷

我们在所有的地方 都尽力提高交互效果 这对用户来说是很棒的事情 所以我们从 TV App 里面 借用了这个交互方式 我们用这种方式来调用和隐藏菜单 在播放影片的过程中 通过利用这个 用户已经熟悉的知识 我们可以很容易完成这件事 因为用户不需要 再去学习接受一个新的东西 现在用户已经得到了互动性 他们就想要 App 和体验更加敏捷 对于减少认知负荷来说 速度和节奏是很重要的因素 尝试清除掉你的 App 中 所有的延迟和滞后 这样一来 它会变得生动 并且流畅

我们也想要避免 给用户带来过度刺激 隐藏式的 杂乱的 分散注意力的界面 会扰乱用户的操作 想象一下 如果你 站在一个房间里 有 11 个人同时大声地和你说话

你没有办法听清楚任何一个人说的话

如果 TV App 的界面也是这样 那么用户就没有办法全神贯注 使用太多的动画 图标 图像和文本风格

会分散人的注意力 我们不想让任何人 发生这种无法集中的情况 我们希望他们能够集中精力并且放松

现在 我们使用户处于 一种放松的状态 我们可以思考如何使 UI 内容类型变得多样化 这指的是 播放的形状和纵横比 不时打破网格的束缚

在我们的 TV App 中 我们已经实现了 通过在标准的 16x9 模式里分布一个 不同类型的模块 现在 我们可以做的更多 首先 它给我们 供应商 一个地方来 强调重要的部分 或者强调一些 十分有意义的 我们想让用户注意到的东西 对于观看者来说 它给提供了一段放松眼睛的时间 当他们在不停的浏览 这些密集的网格 创建这样的东西可以让用户 得到片刻的休息 我们想要将画布简化为 简单互不干扰的因素 这就意味着我们要设置等级

在顶部展区的设计中 内容是最重要的 所以它占满了整个屏幕 我们有一个程序坞 和一个选择列表 在它下面的三分之一处 它们就没有那么重要 通过调整优先顺序

有利于用户的操作

帮助带领用户 完成整个体验

接下来是元数据 它是有用的 但是重要性处于第二位 这属于内容优先的 内容优先的顶部展区 因为我们想让用户一开始 就对他们观看的内容感到兴奋 然后我们再提示他们还有更多的信息

我们来看一下

这个人沉浸在 全屏的顶部展区体验中 他将拇指 放在遥控器或者点击 它将会调出元数据 给予用户权力来控制 调出这些额外信息的方法和时间 那么影片播放和观看整个影片 就变得简单了 除此之外 元数据 可以促使人们发生转变 从浏览模式 变为购买或者 从浏览变为订阅

分页点能够显示 你正在浏览某个组的 一个项目 它们也能够显示 浏览的时长

我们将分页点 设计的很小 放在屏幕靠下的位置 看起来有点像面包屑 我们用 Apple TV 的系统材料 来确保它们可以与 所有下层的图像 之间有反差 我们相信这也可以给 你的 App 带来功能补充 V 形箭头代表了滑动的方向 向上 向下 向左 向右 但是它们还有其他的功能 它们还能表示内容在屏幕后

它和分页点 能够给用户带来空间感 还能帮助用户停留在 UI 界面 UI 界面这些小的组成部分 是非常重要的工具 因为它们能避免用户犯错 打消他们的疑问 例如这个可以点击吗 怎样从这里退出 我一会儿还能回到这个页面吗 所有类似的问题 都可能摧毁用户的体验 所以通过顶部展区的设计 我们增强了浏览中 最棒的部分

我们使用无边框的内容 占满可利用的整个屏幕 我们有熟悉的导航队列 功能强大的元数据 和简洁的手势

但是最棒的还是 它有一种熟悉感 感觉就像小时候 在搜索频道一样 我可以来回搜索 直到有东西吸引我

所以如果你可以应用一些 技巧和原则在你的设计中 它会使你的 App 变得十分人性化

在 Apple 我们坚信 内容优先的强大力量

它对于用户来说是最佳方案 总的来说 我们设计了这个工具来传递内容

总之 电视有它的无可替代的功能

它可以改变我们的看法 它可以给我们带来 一个不一样的世界

它还可以使我们 了解更多伟大的想法 这就是我们的目标 不是吗 让用户与故事产生连接 这足以改变他们 所以作为研发者或设计者 我们的任务不是让用户 焦虑地等待 不是这样 而是打开一扇门 让用户进来 让内容发光

因为如果我们做到了 用户就更有可能使用和浏览 观看并且感到享受

这将实现 用户与产品的持续的情感链接

下面 Caleb 将会告诉你们 如何在你自己的 App 里利用 内容优先的体验 Caleb

谢谢 Tommy 我叫 Caleb 我是一名软件工程师 来自 Apple TV 的团队

今天我非常开心 可以与你们分享一些 我们在 tvOS 13 的顶部展区中 进行的改善

当用户打开 Apple TV 时 顶部展区首先映入眼帘 顶部展区使用户更容易 在 App 中进行内容浏览 还能实现便捷的交互 他们能够直接跳转到影片播放

今年 我们想要更新顶部展区 使它能够利用 你家里最大的屏幕 并且提供 吸引人的浏览体验 正如 Tommy 刚刚提到的那样

我非常开心与你们分享 今年在 tvOS 13 中 我们利用分页滚动视图实现了它 相比于顶部展区来说 分页滚动视图有两个重要的优势 首先它具有浸入感 全屏的图像或者视频 可以从你的 App 播放器上 投屏在家里的 Apple TV 上

当你滑动进入全屏模式时 我们的 UI 可以帮你解决 所以你只需靠着观看

分页滚动视图还具有互动性 在 App 之间滑动 或是在不同项目间滑动 感觉就像是频道搜索一样

当你选择一个项目之后 你可以看到丰富的元数据 在这里 屏幕的底部 我们认为这是一个 Apple TV 好办法 可以将 你 App 中的精彩内容 展示在家中的 Apple TV 的屏幕上 我知道内容各不相同 一个 UI 风格也许不能 满足所有人的需求

所以我们在我们的 API 中 为你提供了两种不同的形式

第一个是动态分页滚动视图

它主要将重点放在 App 中的全屏视频图像内容上 只提供 很少的 UI 信息 供用户进行自定义

一开始在左上角 有名称和文本名称

这些可以告诉正在浏览 顶部展区内容的人 他们正在看的内容是什么 和你们为什么要展示它 你可以将文本名称 看作类似于下拉展示列表 在顶部展区的项目之间它 添加了一个逻辑分组 接下来是播放按钮 和更多信息按钮

这些按钮可以帮助 正在浏览你的内容的人直接 跳转到你的 App 中的这个项目 或者直接开始播放 或者了解更多的信息

我们提供的第二种风格叫做 细节分页滚动视图 它长这样子 你们可以看到一些熟悉的 UI 内容 左上角是 标题和文本名称 左下角是播放按钮和 更多信息按钮 但是 我们的 API 也可以提供 丰富的元数据 就是这个被强调的地方 一些区域 例如概要 类型 时长 或者是一些媒体选项 都显示着 与这个内容相关的信息 和在电视上播放内容的时间 它支持 4K HDR 还有或许对于听觉障碍的人很重要的 它支持隐藏字幕和 口述影像 在最右边 有一列命名的属性

这是关键值数据 关于你的 App 是被完全控制的 在这个例子中 我们看到许多的 特邀演员的名字 出现在演员部分 和许多电影导演出现在 导演部分 很重要的是 要记住当你填充 这些区域的时候 要本地化和复数化 你想要播放的内容的数量 这就是全新的分页滚动视图 当你使用它时 有一些非常棒的地方 希望你们能记住

分页滚动视图的最佳功能是 内容发现 有一些好的例子 比如一部故事片 一季电视节目 或是一些个性化的推荐 对于签约的用户 它会定期更新 用户可以借此机会 将顶部展区展示的内容 拖拽到你的 App 里 因此它需要是新鲜且充满活力的

就像 Tommy 说的 我们不希望提供太多的选择 让他们有压迫感 顶部展区有太多的项目 只会增添噪音 变得更加杂乱 所以我们想出了一个合适的数字 需要记住 是 5 个到 10 个之间 下一个 图像

就像我说的 顶部展区 分页滚动视图的内容是全屏的 所以你的图像需要是 1920 乘 1080 分辨率的 它们应该占满整个内容的边框 我们的 API 可以让你 设置图像为 1080p 设备上播放的 1x 分辨率 或是 4K 设备上播放的 2x 分辨率 这对你来说是一个很不错的方法 帮助我们优化你的内容 以便在顶部展区实现最佳的用户体验 现在讲一下安全区域

tvOS 上标准的安全区域 是这样的 有 90 个填充点在 屏幕的前缘和后缘 有 60 个填充点在 上缘和下缘 请记住 你的内容 是允许超过安全区域的 但是基于设备或电视设定 用户看不到超出的部分 也无法与超出的部分进行交互 对于分页滚动视图 我们也有一个类似的安全区域 当你将图片放入分页滚动视图 记住它们可能会在 系统 UI 下显示 就像 V 形箭头 细节 UI 在最下面 或者是在 App 网格 所以 如果在你的图片中 有标题 要确保 它们不会与系统用户界面冲突 还要确保它们不会很难 找到和使用 最后是视频

就像 Tommy 展示的那样 你可以为你的内容播放视频或是预告片 在顶部展区分页滚动视图里面 这些视频需要是 1080p 高清的

如果可能的话 你应该 用 HTTP Live Streaming 或是 HLS 传送给我们

这是另一个方法 帮助我们优化你的内容 来实现顶部展区的最佳用户体验 这些视频需要能够快速载入 我们应该优化它们 在用户现有的带宽的基础上

就像我刚才所得那样 分页滚动视图是一个很好的地方 来预览你们的内容 我们不希望你们提供 完整长度的影片 在分页滚动视图里面

所以我们认为 你们预告片合适的时长 大概是 2 到 5 分钟 并且我们鼓励 在视频中加入声音 我们会确保声音只在 合适的时间播放 也就是说在用户执行了某个特定操作后

因此现在我们拥有四个 UI 风格 在顶部展区供你选择 首先是动态分页滚动视图

细节分页滚动视图 切分部分和插入内容 记住如果你的内容 在分页滚动视图不能播放 如果你没有全屏的图像或是视频 那也没关系 我们依然鼓励你们使用 切分部分和插入内容 的风格来提供 轻松容易的内容浏览体验 在顶部展区中

这就是 UI 的大概情况 和一点它的工作说明 下面我们来谈一谈 如何建立一个 UI 你将要利用顶部展区扩展来完成

今年 我们有一个全新的 扩展和 API 这让使用顶部展区比以前更容易 首先 添加一个新的 顶部展区扩展标签 在你的 App 的 Xcode 中 它将会允许你访问 分页滚动视图和 我们新的 API

下面我们来简要讨论一下 三个主要的部分

首先是 TVTopShelfContentProvider

这个是你扩展的 根对象 它负责 响应系统对于 顶部展区数据的请求 我们全新的 API 使返回内容和异步响应 变得非常容易

接下来是电视顶部展区内容 这是一个协议 你不会与它进行太多的直接交互 我们为你提供了三个具体的类 与三个主要的 UI 风格 一一对应 分页滚动视图 切分部分和插入

每一个类都有它自己的特点 能够与其他的用户界面形式区分 最后是 TVTopShelfItem

与内容分类相似 针对每一个内容风格 我们分了不同的类 对于不同的 UI 风格 它们具有不同的性能

分页滚动视图 项目集合 展示切分部分内容的切分部分项目 和内容项目 具有足够的性能来 展示插入内容 所以现在我们不讲更多的代码 如果我们可以做一个演示才更有趣 来看一看它们都是如何工作的 所以我要邀请我的同事 Felipe 上台帮我一下 Felipe

正像我说的 第一步是给我们项目 在 Xcode 添加一个新的顶部展区扩展标签 所以首先我们添加一个新的标签

在 tvOS 标签中 我们选择电视顶部展区扩展 我们给它起个名字 还要确保 App 弹出窗口中的嵌入标签 被设置为正确值 这样一来 我们已经有一个 扩展在我们的项目里 还包括一些支持文件 所以我们现在跳过这个 直接进入我们的 ContentProvider 它就是这样子的 当你添加一个新的顶部展区扩展 在你的项目里

在 ContentProvider 级 子级 TVTopShelfContentProvider 并执行 loadTopShelfContent 它需要使用 completionHandler 现在我们通过 nil 调用它 它的意思是 现在我们没有要展示的东西 下面我们来替换它 用一些实际的内容

这里 我们有一些 来自 MoviesClient 的故事片 它异步响应了 一个电影回应的结果 或一个错误的结果 我们分别来填写一下 以 success 为开头的实际案例 这里 我们通过 一个真实模型对象调用 completionHandler 如果是错误的结果的话 我们仍然想要通过 nil 来调用 completionHandler 来说明 现在我们不想对这个系统再进行更多操作

很好 我们来添加一些扩展 给我们的模型 我们一起来填写丰富的 顶部展区内容 这里我们有两个扩展 一个放在电影对象上 它知道如何返回顶部展区 的切分项目 另外一个在 MoviesResponse 它知道如何选取所有的项目 和怎样把它们塞进 切分内容对象里 在这 它有一个名称叫做 故事片和一些项目 我们的项目分类有点无聊 我们现在只有一个名称 让我们添加一些性能 从图片开始 正如我所说 我们的 API 可以帮助你 制定图像的屏幕比例为 1x 和 2x 我们现在正在做 并且我们将图像的形状 设置为 HDTV 这就是说我们 想要一个 16 乘 9 比例的图像 呈现在切分的顶部展区中 现在我们需要处理用户操作 当用户与我们顶部展区的项目 交互时会发生什么呢 从 displayAction 开始说起 这个发生在 当用户选择你的项目时 它在顶部展区被选中 playAction 会发生 当用户按了 Siri Remote 上的播放按钮 这个项目被选中 它会被传送到你的 App 通过开放网址处理程序 很重要的是 你以最快的速度 把它们直接拿到内容中来

就是这样 我们运行一下看看是什么样

太棒了 如果你今天有一个扩展 需要使用顶部展区 它可能就长这样 我们有分区名称 如果我们选中周围 我们可以看到 每个项目的名称被隐藏了 但是我们很想要使用 全新的浸入式的浏览体验 在顶部展区中 所以让我们回到 Xcode 看看我们必须要做哪些改变

首先我们要做的事 改变 makeTopShelfItem 功能 来返回电视顶部展区分页滚动视图项目

编译器立刻就会 告诉我们图像的 形状不再有效 所以让我们去掉线条 现在我们只需要增加两个性能 来填写剩下的 分页滚动视图内容

第一个还是文本名称 还是这样 分组头 告诉用户我们 正在看什么

previewVideoURL 这是你的图像内容播放结束后 要播放的东西 最后 我们需要更新 makeTopShelfContent 功能 返回一个 TVTopShelfCarouselContent 来匹配我们的分页滚动视图项目 这里 我们正在请求 动态形式的分页滚动视图

好的 我们再运行一次

太棒了 它看起来真棒 我们从一个小的 静态的插入框变为 一个大的全屏的播放内容 的视频预览 当 Felipe 向上滑动进入 全屏模式 我们的 UI 可以避开 他能在不同的项目间滑动 去看我们顶部展区中的其他内容 当他点按菜单 我们可以回到上面的网格 就是刚才所在的位置

现在 我们回到我们的项目 再做一个改变 我们想要利用 顶部展区 API 提供的全部的元数据 所以我们添加一些新的属性 到我们的项目类 就像我提到的 例如 概要 类型 媒体选项这些字段 这只是描述了更多的内容 关于我们正在为我们的用户 寻找的项目

最后 让我们更新 我们的内容对象来 返回一个细节的分页滚动视图 我们再运行一次

所以你会发现我们只是 改变了一些类 增添了一些性能 就使切分的内容变为 这个动态的 浸入式的体验 当 Felipe 向上滑动进入 全屏模式时 你会发现 我们没有立刻呈现 元数据 UI 我们不想让用户有压迫感 一次给他们过多的信息 所以如果需要它会出现 当他轻敲或者点击 Siri Remote 时

在这里 你会看到所有的信息 就是我们刚刚填写的 就是这样 这就是在你的 App 里使用顶部展区 所需的所有步骤 谢谢 Felipe

所以你会发现如此的简单

就可以在 Apple TV 的顶部展区里 提供一个很棒的浏览体验

你们看到了分页滚动页面 以及它如何使一个静态插入的 顶部展区内容变为 大的 令人兴奋的 充满吸引力的体验 你看到了全新的扩展和 API 它们让应用这些 变得比以往更加容易 我们已经迫不及待想看看 你们能够利用 tvOS 13 里的顶部展区做些什么

现在 我将舞台交给 Dale 让他来谈一谈如何将 内容优先的设计理念 融入你的 App Dale 谢谢 Caleb

我叫 Dale Taylor 我是 tvOS 团队中的一名工程师 今天首先我要 聊一下用户描述文件 以及你们如何使用它们 给用户展示 他们想要的内容

在 tvOS 13 里 我们给 TV 安装了控制中心 它可以使用户快速进入 常用操作 例如 睡眠 搜索和正在播放 另外 我们在最上面的位置 添加了快速切换用户 它给用户提供了一个快捷的方式 快速切换到 个性化内容和推荐 在保留文本的情况下 我们为研发者开启了这个 因此你们可以在你的 App 里 使用多用户 让我给你们展示一下这个长什么样 首先我会举个例子

有多少人曾经坐下想看电视的时候 只能看到 这样的东西 我们想让它变成过去式 尽管我们非常开心地看到 你们的 App 提供了很棒的 个性化推荐 但是这样的屏幕并没有提供 一个内容优先的体验 这特别糟糕 因为在 tvOS 13 里 Apple TV 已经知道你是谁 所以为什么它还是会这样问

我们来看一下我们可以做些什么 来帮助你们 我们在 tvOS 13 中有全新的 API 和电视服务 即 TVUserManager 来帮助你们 基于配置文件的 App 融入多用户使用功能 我们为你们做了一些事情 我们为你们提供了一个标识符 代表目前 TV 上的用户 我们还会让你们知道 什么时候标识符会发生变化 这很重要因为有了控制中心 甚至是当你的 App 处在前景的时候 它也会发生 我们还会给你们提供一些系统 UI 来帮助使用你们 App 的用户 建立我们的用户标识符 和你们的 App 配置文件之间的映射

所以你们要怎样做才能 与 TVUserManager 结合呢

最重要的 你们要负责建立 用户标识符和配置文件之间的映射 在你们的 App 中 总的来说 你们想要将它储存在用户默认中 使每个用户标识符 与一个配置文件建立映射 最完美的是 多个用户标识符 与一个配置文件建立映射 这就意味着你可以 在一个电视上使用多用户 它们可以分享同一个配置文件 在 App 里 这些用户标识符标识符都是不同的 对于每一个研发团队 所以如果你有多个 App 或是 扩展在一个套装软件中 你们都可以分享同一个偏好

你们还要负责 倾听目前用户标识符的改变 我稍后会展示一些很好实例 学习如何处理它 根据你们不同的 App 可以采用不同的方法 你们必须 采用对于你们 App 的工作流有帮助的方式 来呈现系统 UI 但是每个人的 App 都有所不同 所以我们来看一个例子

想象你们的 App 搭建了一个 配置文件选取器

你们需要这样做 在你们搭建你们的配置文件选取器之前 你们要检查你的 App 是否有一个配置文件 与当前的用户标识符相关联 如果有的话 你绝对可以给用户提供最佳的体验

你只需要让他们看电视 你不需要问他们任何问题 你不需要向他们展示任何选择屏幕 你可以直接将他们带到 他们的内容所在之处 如果你没有为当前的用户标识符 储存的配置文件 那么现在你就要 为你的 App 建立一个配置文件选择器 当用户作出选择 你可以询问他们 对于当前用户的这个对话来说 这是否是正确的配置文件

这个 UI 将会 询问使用你的 App 的用户 是否他们想要关联 当前的用户标识符和 已经选择的配置文件 如果他们同意 那么你储存结果 他们将不会被 再次询问 因此当他们再次打开 App 时 他们能够获得 最佳的用户体验 所以你怎样才能将这个 UI 放在屏幕上 很简单 你可以使用 shouldStorePreference ForCurrentUser

你也可以让用户 在偏好设置面板之后 修改这些映射 你可以用 presentProfilePreferencePanel 显示 这个 UI 是这样的 在这个对话中 你在用户标识符和配置文件之间 提供了一个当前的映射 我们会帮你将改变复原 对于这个 UI 和确认对话来说 你提供了一个用户名和用户 标识符 我们将会在 UI 提供真实用户名 所以就像我刚刚提到的 你们的 App 应该可以 在当前的用户标识符下处理更新

你们要注意 当前用户标识符的变化 通过 currentUserIdentifier DidChangeNotification 当这发生时 你们有责任通过给当前的配置文件 设置用户标识符 让我们知道新的映射 由于可能同时有几个不同的用户标识符 都指向同一个配置文件 你要在这设置 不同的值 所以在用户标识符发生改变的时候 你需要做这件事 除此以外呢 我们有一些很好的操作 推荐给你们 来处理你的 App 中的配置文件 如果你必须要改变配置文件 而且之前的配置文件一直保持活动 保存它 因为谁也不想丢失 他们正在做的事情 你还要确保 改变是有意义的 所以你应该展示 像个性化推荐这样的东西 并且让改变更加明确 所以让它有一个流畅的过渡 这可以让 用户清楚的知道改变是成功的

那么关于现在的 tvOS 上的用户配置文件 我们要了解什么呢 我们要了解如果你有一个 基于用户配置文件的 App 你可以使用多用户的功能 让用户得到更好的个性化体验 你可以使用 TVUserManager 开启一个内容优先的用户体验 在这里 用户可以跳过没用的对话 直接观看电视

既然我们已经聊过了 你们初次开启的体验 那我们来聊一下接下来你们 在 App 中会看到的东西 导航栏

在新的 TV App 中 我们有一个全新的导航栏 它让导航变得更加容易 它真的可以让内容 大放异彩

因为它会随着 内容上下移动 而不是在失去选中时直接消失 这是一个很好的办法 来强化层次结构 对使用 App 的用户来说 我非常高兴地宣布在 tvOS 13 里 你们都能得到这个全新形式的导航栏

所以你们要怎样做 来使用这个全新的导航栏呢 大部分情况下什么都不用做 有时候你想要修改它的动作 你要这样做 如果你想要导航栏 在屏幕上随着内容滚动 你可以设置 tabBarObservedScrollView 性能 在你的视图控制器上 它嵌入在你的导航栏控制器上 通常我们推荐 这种风格的集合视图 全部都是可浏览内容 事实上 UI 集合视图控制器 可以帮你自动完成 如果你想让导航栏 固定在屏幕顶端 你可以将这个性能 设置为 nil

无论哪种情况 你都要注意安全区域 如果是滚动视图 你可以直接得到 只需通过设置 contentInsetAdjustmentBehavior 来修改 如果你在做自己的布局 你可以使用你的 safeAreaLayoutGuide 来帮你 我们也添加了一些新的 API 用户界面导航栏 你可以显示 你的品牌在你的 App 上 我们添加了一个新的区域 在导航栏的两边 你们可以放置自己的标志 它会随着导航栏一起 向上滚动 或是在屏幕上消失 你们可以访问两个新的视图 在你们 UITabBar 的性能中 它们是 leadingAccessoryView 和 trailingAccessoryView 你们不应该把按钮放在 可选中的项目上 在这些自定义辅助视图中 它们的确是是为静态内容设计的 另外 如果你需要 继续自定义自己的导航栏 来匹配你的品牌 你可以使用 standardAppearance 性能 要了解更多的 standardAppearance 的内容 请查看 为 iOS 13 现代化你的 UI 今天我们关于 tvOS 上的导航栏 了解到了什么 在 tvOS 13 上将有一个全新的导航栏 它能够非常容易地 结合你的 App 我们也将它变得更加灵活 所以你会感到非常便捷 使用标准控件 但是你不需要 牺牲任何功能 就可以展示你的品牌 现在我们看到了 UITabBar 是如何 在你的 App 中实现高级导航的 我们来讨论一下浏览

我们有一些新的工具 你们可以使用它们创造全屏浏览体验

Tommy 刚刚提到 创造一个便捷高效的浏览体验的重要性 比以往更快沉浸在吸引人的故事中 进入和退出菜单的时候没有任何困难 我们创造的这种体验可以 使用大部分电视的 巨大屏幕 在你的客厅里 创造最佳的观影体验 并且使用起来就像 水平滑动一样简单 在 tvOS 13 中 我们带来了全新的 API 帮助你们 创造这样的一种体验 我们使用新的 TVCollectionView TV UIKit 中的 FullScreenLayout

这个设计是为了帮助你们 创造一个集合视图 实现屏幕无边缘化 在你的房子里实现最大程度的大屏播放 默认情况下 对于已经使用过 tvOS 的人来说 它看起来很熟悉 但是它自定义功能更加强大 所以你可以更容易地调整它 来实现你们 工程团队和设计团队的目标 事实上 自定义程度很高的是 刚刚 Caleb 给你们展示的顶部展区 甚至使用了 完全一样的布局

为了适应这个布局 我们给你们提供了 TVCollectionView FullScreenCell 当你们有一个新的单元格子类时

你们要知道它有两个视图 隐藏的背景视图 和隐藏的内容视图 当你创建了一个新的自定义单元格 你们将内容填充在这些视图里 通常来说 你们要添加一个不透明图像 到隐藏的背景视图里 添加用户界面信息 到隐藏的内容视图里

由于这个新的集合视图布局 的设计是为了使用 整个屏幕 单元格和它的次级使用也要 也要充满整个 1920 乘 1080 分辨率的屏幕 在我告诉你们如何 自定义整个全屏布局之前 我要邀请 Felipe 回到舞台 给你们展示一下非常容易 就可以创造一个 全屏浏览体验 只需通过 TVCollectionView FullScreenLayout

首先我们来看一个 现有的 App 它有一些照片 是流式布局的 这是一个很好的开始 但实际上它没有优化我们的 TV 既然我们已经看过了所有的 TVCollectionView FullScreenLayout 让我们回到 Xcode 并尝试使用它 首先我们创建一个新的 fullScreenLayout 我们可以在我们的集合视图里 设置这个布局 来替换以前的

为了适应我们的布局 我们需要一个单元格 我们已经创建了一个 我们可以用它来 通过我们的集合视图注册 现在我们回到这个单元格的例子 在我们为 indexPath 建立的单元格里 现在我们已经安装了我们的视图控制器 我们可以去到单元格 向里面添加一些内容 我们已经有了一个 imageView 和一个 titleLabel 可以开始添加图像视图 到隐藏的背景视图里 并且也可以添加名称标签 到隐藏的内容视图里

我们可以把它设置成大号字体 这样更容易看清楚屏幕 现在我们已经完成了所有的安装 我们现在来试一试

它好了很多 它真的能够填满整个屏幕 当你在浏览的时候 你可以看到图像更细节的部分 但是很棒的是 如果你点击 Siri Remote 它就会充满整个屏幕 做起来很容易 我们现在回到视图控制器 来做一下 如果我们在 indexPath 添加 didSelectItem 那么我们可以处理 选择操作 如果这样的话 我们可以将隐藏的数量设置为零 我们可以激活它使它看起来更流畅

现在我们继续 再试一次 看看是否能成功

你们可以看到 当 Felipe 点击时 它就从边缘到边缘填满了屏幕 正是我们所期待的那样 但是看起来我们好像忘记了 隐藏文本

没关系 这很容易解决 我们回到单元格 现在来修复一下它

如果我们覆盖应用 我们可以得到修改后的布局属性 这种情况下 我们想要一个 titleLabel 有一个为零的阿尔法值 当隐藏的数目为零的时候 所以我们只需将不透明度设置成 和隐藏的数目一样 我们再试一次 看看是什么样的

这次好多了 这种体验 就是我们想要在 TV 上创造的 它很容易实现交互 在这样全屏的情况下 你也很容易被内容吸引 谢谢 Felipe 现在我们回头看看细节 你记得刚刚的 TVCollectionViewFullScreenCell 它有两个子功能 隐藏的背景 和隐藏的内容视图 为了理解这两个 视图是如何一起工作的 你需要了解 布局的两个原则 隐藏和视差 我们先讲一下隐藏

视图和单元格 一个放在另一个上层 充满整个屏幕 你可以看到 这儿的隐藏的背景视图 和顶端的内容视图 当像这样从边缘到边缘运行时 隐藏的单元格中的布局所指的数目 设置为零

但是当我们 像这样从侧面浏览插入的其他地方时 隐藏的数目是一 你可以控制 隐藏的插入的数量 利用布局中隐藏的插入性能

同样的信息 也反映在 内容抽取性能 它来自布局属性 所以这就是隐藏 下面我们来讨论一下视差 视差可以创建深度 通过移动不同速率的层 我们已经在 tvOS 实现了所有的这些 我来解释一下它是怎么应用 在我们的布局上的

布局有一个视差因子性能 它显示了减慢 隐藏背景视图的程度

同样的信息被下达给 单元格 通过布局属性和 视差偏移属性 这指的是 在所有时间点 从隐藏背景的中心到 隐藏内容视图的距离 通过不同的移动速率 和一个部分透明的 隐藏内容视图 你可以看到 我们怎样模拟深度感

最后 我们与掩码结合 我们可以得到擦除效果 就像你们在 Felipe 的演示中看到的那样 作为提示 我们已经完成了 TVCollectionView FullScreenLayout 中的 繁重的工作 但是 这个概览应该可以帮助 理解一些参数 这些参数可以用来帮助你们 达到你们想要的效果 由于有许多的像素 在全屏布局中不断移动 就像这样 我们有一些 很好的操作推荐给你们 来充分利用 TVCollectionView FullScreenLayout 你们应该避免播放任何 动画或者视频 直到单元格到达中心 一次播放多个视频 不仅会使用户分散注意力 还可能造成掉帧 你应该看看 你使用了多少屏外传入 这就意味着要避免使用过多的 视觉效果或是 组合不透明动画 事实上 大部分 你们使用的东西 可以用来帮助你们在 App 的 其他地方实现滚屏 当你左右滑动时 你可以在这应用 你还应该注意你的 内存使用量 你工作时可能会 在布局中处理许多大型照片 就像这样 所以你应该确保 它们的尺寸适合展示 当你不再使用它们的时候 应该将它们从内存中释放出来

如果你是一个 TVMLKit 开发人员 我们没有忘记你们 你们可以使用所有这些东西 创建 TVBrowserViewController 我们还连接了一个样本 App 向你们展示一下 构建一个展区 和全屏浏览器间的流畅连接 是十分容易的

今天我们带你们走了一段旅程 从用户 初次打开你的 App 开始 家里的屏幕和顶部展区 这是一个 吸引用户的目光的好方法 并且让他们使用你的 App

接下来我们了解了 初次启动的体验 你们了解到可以利用 多用户功能给用户 立刻带来个性化的内容 不需要其他的对话

最后 我们了解了 如何使浏览变得简单省事 用我们全新的导航栏 和全屏布局就可以实现

所有的这些结合在一起 构成了功能强大的客厅 我们希望你们可以使用 今天我们在这展示的工具和原则 并在你们自己的 App 中应用它们 因此每一个 tvOS 的用户 都可以获得享受的体验

你可以在这里看到更多关于 我们今天讨论的信息 或是在周三或周五拜访我们的实验室

谢谢大家 [掌声]