在 Xamarin 中使用 tvOS 图标和图像

创建引人入胜的图标和图像是开发 Apple TV 应用的沉浸式用户体验的关键部分。 本指南将介绍创建和包含 Xamarin.tvOS 应用所需的图形资产所需的步骤:

  • 启动图像 - 启动应用首次启动时显示启动图像,并在启动完成后由应用的第一个屏幕替换。
  • 分层图像 - 特定于 Apple TV,Apple 的新分层图像使用视差效果,为所选项目创建 3D 效果。 可通过多种方式 创建分层映像
  • 应用图标 - 图标不仅需要 Apple TV 主屏幕,还需要用于应用商店。 它们必须作为分层图像提供。
  • 上架图像 - 如果你的应用放置在主屏幕的顶部行上,则需要一个顶部架子图像来突出显示你的应用的功能。 (可选)可以提供 动态顶架内容 以突出显示应用中的内容。
  • 游戏中心图像 - 如果你的应用是游戏并使用游戏中心,则需要其他几个图像。
  • 设置 Xamarin.tvOS 项目图像 - 涵盖为 Xamarin.tvOS 应用设置启动图像和应用图标所需的步骤。

重要

Apple TV 上的所有图像均分辨率为 1x 分辨率(@1x),你只使用此大小的图像。 包括更大的、更高分辨率的图形不仅需要时间来下载和使用更多的内存和存储,而且必须在运行时动态重新缩放图形,并会对绘图性能产生负面影响。

启动映像

启动图像是首次在 Apple TV 上启动 Xamarin.tvOS 应用时显示,因此,每个 tvOS 应用都必须提供启动图像。

“启动图像”会快速显示,并给人留下你的应用快速响应的印象。 Apple TV 将在不久后将启动图像替换为应用的第一个屏幕。

启动图像不是广告或艺术表达的机会,它们只是为了给人留下你的应用快速启动并准备好使用的印象。

启动图像大小 说明
1920x1080px 仅限分层.png文件

Apple 针对设计应用的启动映像提出了以下建议:

  • 与第一个屏幕 几乎完全相同 - 启动屏幕应尽可能接近你的应用的第一个屏幕。 当第一个屏幕出现时,包括不同的图形或元素可能会导致令人恼火的“闪烁”。
  • 避免使用文本 - 启动图像是静态的,因此,在显示之前不会本地化。
  • 淡化启动 - 由于 Apple TV 用户经常切换应用,因此不应注意应用启动过程。
  • 无广告或品牌 - 你的启动图像不应用作“关于”屏幕或包含任何品牌,除非它是应用第一个屏幕的静态部分。 严格禁止广告。

设置启动映像

若要为 tvOS 项目设置启动图像,请执行以下操作:

  1. 解决方案资源管理器中,双击Assets.xcassets将其打开进行编辑:

    The Assets.xcassets file

  2. 在资产编辑器,单击LaunchImages资产:

    The LaunchImages asset

  3. 单击 1x Apple TV 条目并选择“启动图像”,或者选择从文件系统中拖动新图像:

    Select a Launch Image

  4. 保存所做更改。

分层图像

对于 Apple TV,分层图像与视差效果配合使用,以产生 3D 效果,帮助用户在沙发上精神上连接到整个房间的内容。

分层图像包含两个(2)到五个(5)个单独的层,这些层组合成一个完整的图像。 除了背景层之外,每个层都使用其 Z 顺序以及透明度来创建深度错觉。 当用户与分层图像交互时,将缩放更高的 Z 排序层并重叠以创建此效果。

Layered Images Z-ordered diagram

重要

分层图像对于应用的图标是必需的,对于其他 可聚焦项 (如顶部架图像)是可选的。 但是,Apple 建议对可在应用中获得焦点的任何图像使用分层图像。

Apple 针对设计分层图像提出了以下建议:

  • 使背景层不透明 - 你的背景层(第 1 层) 必须 不透明,或者尝试在 Apple TV 上使用分层图像时会出现错误。 所有其他层可以包含多个透明度级别,以增强 3D 效果。
  • 隔离前台、中间元素和背景元素 - 将突出元素(如游戏字符)放置在前台,将中间用于辅助元素或阴影。 最后,包括中性背景,为上层提供阶段。
  • 将文本保留在前台 - 除非希望文本被较高级别遮盖,否则它通常应位于最顶层。
  • 使用简单分层 - 视差效果设计为微妙,因此请将层保持在最小,以防止不切实际的效果。
  • 包括保险箱区域 - 由于上层可以在视差效果期间裁剪,因此需要在每个层中构建保险箱区域边框。 如果内容太接近层边缘,则可以将其裁剪。 与较低层相比,上层的缩放和裁剪体验更大。 请参阅下面的“ 大小调整图像层” 部分。
  • 预览通常 - 应经常预览分层图像,以确保所需的 3D 效果发生,并且各个层上的内容均未裁剪。 你应该在真实的 Apple TV 硬件上预览分层图像,以确保它们按预期呈现。

尽可能使用内置 UIKit 控件来显示分层图像,因为它们会在焦点进入焦点时自动获得视差效果。

调整图像层的大小

请务必记住,将保险箱区域边框包含在构成分层图像的每个层中。 由于可以在视差效果期间缩放和裁剪各个层,因此如果层的内容太接近层边缘,则可以裁剪层的内容:

35 pixel border

创建分层图像

tvOS 适用于采用以下格式的分层图像:

  • CAR 文件 - 这是 Apple 创建的专有资产目录格式。 你不会直接创建 CAR 文件,它们是在编译时从任何 LSR 文件创建的,并包含在应用捆绑包中。
  • LSR 映像 - 这是 Apple 创建的专有图像格式。 使用视差导出程序 Adobe Photoshop 插件视差预览器以 LSR 格式创建和预览分层图像。
  • Assets.xcassets - 从两个(2)到五个(5)标准 .png 格式化图像包含在资产目录中,将在编译时编译为 CAR 或 LSR 格式化分层图像。
  • LCR 文件 - 这是 Apple 创建的专有文件格式。 LCR 文件旨在用作从其中一个内容服务器下载的其他内容。 不应将 LCR 文件包含在应用捆绑包中。 LCR 文件是使用 Xcode 附带的 layerutil 命令行工具从 LSR 或 Photoshop 文件生成的。

视差预览器

Apple 创建了 视差预览器 ,用于预览和创建应用图标和可选可聚焦项所需的分层图像。 预览器显示构成已完成分层图像的每个层:

The Parallax Previewer

预览分层图像时,可以使用鼠标旋转图像并预览视差效果。 + 使用(加号)和-(减号)按钮添加和删除层。

创建新的分层图像时,可以采用 LSR 格式导出该映像,并将其包含在应用的捆绑包中。

有关创建和预览分层图像的详细信息,请参阅 Apple 的 TvOS 应用编程指南的“创建视差插图”部分。

应用图标

Xamarin.tvOS 应用不仅需要 Apple TV 主屏幕的应用图标,还需要 App Store 的图标。 应用图标是对潜在用户留下深刻印象的第一次更改,应该一目了然地传达应用的目的。

The App Icon

每个应用必须同时提供其应用图标的小型版本和大版本。 安装应用后,小图标将在 Apple TV 主屏幕上使用。 App Store 使用大型版本。 大型应用图标应模仿小图标版本的外观。

小图标 解决方法 大图标 解决方法
实际大小 400x240px 1280x768px
保险箱 区域大小 370x222px
无焦点大小 300x180px
重点大小 370x222px

重要

应用图标必须作为 分层图像提供。 有关更多详细信息, 请参阅上面的分层图像 部分。

Apple 提供了以下有关创建应用图标的建议:

  • 提供单个焦点 - 使用直接放置在图标中心的单一焦点设计图标。
  • 使用简单背景 – 使图标背景保持简单,使上层脱颖而出。请考虑使用简单的颜色或微妙的渐变。
  • 限制文本 量 - 由于应用的名称在用户选择图标时将显示在图标下方,因此仅当应用对图标设计至关重要时,才应包含文本。
  • 请勿使用屏幕截图 - 对于图标来说,屏幕截图过于复杂,不允许用户一目了然地查看应用的目的。
  • 保留图标正方形 – tvOS 会自动应用一个掩码,该掩码巧妙地绕开图标的角落。 不要包括这个舍入自己。
  • 仔细 分隔层 - 文本应位于最上层、中间的辅助项和中性背景上,使上层能够闪耀。
  • 小心使用 渐变和阴影 - 渐变和阴影可以与视差效果冲突,因此应谨慎使用它们。 简单的从上到下,浅色渐变样式效果最佳。 阴影通常最能像锋利的硬边缘色调一样工作。
  • 不同层透明度 - 在应用图标的上层使用不同级别的透明度来增加 3D 效果。 背景层必须不透明,否则将导致错误。

设置应用图标

若要设置 tvOS 项目所需的应用图标,请执行以下操作:

  1. 解决方案资源管理器中,双击Assets.xcassets将其打开进行编辑:

    The Assets.xcassets fileg

  2. 在资产编辑器,展开App Icon & Top Shelf Image资产:

    Expand the Top Shelf Image asset

  3. 接下来,展开 App Icon - Small 资产:

    Expand the App Icon - Small asset

  4. 然后展开 Back 资产并单击 Contents 该条目:

    Then expand the Back asset

  5. 单击 1x Apple TV 条目 并选择图像文件。

  6. Front 资产重复 Middle 上述步骤。

  7. 然后重复相同的步骤来定义 App Icon - Large 资产。

  8. 保存所做更改。

上架图像

如果用户已将 Xamarin.tvOS 应用放置在 Apple TV 主屏幕上的顶部行上,则当用户选择你的应用时,将显示一个大的上架图像。 此图像应突出显示应用的功能或提供指向其内容的直接链接。

Top Shelf Image example

顶部货架图像可以作为单个静态 .png.lsr 文件提供(请参阅 “创建分层图像”),也可以在运行时动态创建为可聚焦项的单个行(请参阅 下面的动态上架内容 )。

上架图像大小 说明
1920x720px 静态.png或分层 .lsr 文件

Apple 提供了以下有关创建顶部货架图像的建议:

  • 使用丰富静态图像 – 如果你的应用不提供动态内容,则其顶部架形图像将不可聚焦。 使用此图像突出显示应用或品牌的功能。
  • 链接到应用内容 – 动态顶部架布局提供了一个快速链接,指向用户在应用中找到最重要的内容。 使用此区域提供快速链接来启动应用并立即跳转到给定的内容。
  • 展示最新内容 - 丰富的顶部架子内容可以吸引用户进入你的应用,并使他们想要使用它更多。 将此作为一个区域来展示最高评级或最新内容。
  • 个性化内容 - 用户将最常用的或最喜爱的应用放置在主屏幕的顶部行中。 使用顶部架显示他们最感兴趣的内容。
  • 不允许 广告 – 严格禁止在顶部货架上显示广告。 可以显示最新的可购买内容,但不应显示任何定价信息。

设置上架图像

若要设置 tvOS 项目所需的上架图像,请执行以下操作:

  1. 解决方案资源管理器中,双击Assets.xcassets将其打开进行编辑:

    The Assets.xcassets file

  2. 在资产编辑器,展开App Icon & Top Shelf Image资产:

    Expand the Top Shelf Image asset

  3. Top Shelf Image单击资产:

    The Top Shelf Image asset

  4. 单击 1x Apple TV 条目 并选择图像文件。

  5. 保存所做更改。

动态上架内容

顶部架子可以包含可聚焦项动态行或动态滚动横幅集,而不是显示静态上架图像。 这两种动态样式都允许你突出显示应用提供的内容或跳转到其最常用的功能。

分区内容行

此动态顶部架内容类型提供一行滚动,可聚焦项可以选择分解为部分。 它通常用于突出显示新内容、收藏夹或最近查看的应用内容。

内容显示为单个水平滚动列表,其中标签显示在所选内容的当前部分下(当前具有焦点)。 如果用户选择给定的内容,则应用将启动,并且应直接进入该内容中。

需要以下内容大小:

大小 海报 (2:3) 方块 (1:1) HDTV (16:9)
实际大小 404x608px 608x608px 908x512px
保险箱 区域大小 380x570px 570x570px 852x479px
无焦点大小 333x500px 500x500px 782x440px
重点大小 380x570px 570x570px 852x479px

Apple 为分区内容行提供以下建议:

  • 完成行 – 你应该提供足够的内容来跨越屏幕的全宽。
  • 缩放混合图像 - 分区内容行旨在保存图像大小的组合(从上面提供的列表)。 但是,如果确实混合了图像大小,请注意,将应用额外的缩放来规范化内容显示。

滚动内嵌横幅

(可选)Xamarin.tvOS 应用可以在顶部货架中呈现其内容,作为几乎填满屏幕的横幅的自动滚动和循环集合。 这种风格通常用于展示丰富的新内容,如新的电视节目。

除了自动滚动之外,用户还可以使用 Siri 远程控制横幅和向任一方向滚动。 当横幅处于焦点时,在 Siri 远程上做一个小的圆形手势将激活该横幅的视差效果。

横幅图像 (特宽)

大小 分辨率
实际大小 1940x624px
保险箱 区域大小 1740x620px
无焦点大小 1740x560px
重点大小 1740x620px

滚动 Inset 横幅可以作为静态 .png 文件或分层 .lsr 文件提供。

Apple 为滚动 Inset 横幅提供了以下建议:

  • 内容量 - 你应该至少提供三(3)个横幅,以便滚动感觉自然。 应包含不超过 8 个(8)横幅,或者使最终用户难以导航。
  • 内容文本 - 如果你的横幅需要文本,则应包含在横幅图像中。 如果使用分层图像,文本应位于最顶层。

请参阅 Apple 的 TVServices 框架参考 ,了解有关向应用添加顶部架扩展以提供动态 Top Shelf 内容的详细信息。

游戏中心图像

如果你的 Xamarin.tvOS 应用是游戏,并且你已包含游戏中心支持,则需要更多图像资产:

  • 成就图标 - 每个自动裁剪成圆圈的成就都需要不透明图像。 成就是不可聚焦的项目。
  • 仪表板插图 - 可以提供可选图像,该图像将显示在游戏中心内应用的仪表板顶部。 这些图像不可聚焦。
  • 排行榜插图 - 必须为应用支持的每个排行榜提供一个 (1) 到三个 (3) 16:9 纵横比图像。 这些文件可以是静态 .png 文件或分层 .lsr 文件。 排行榜艺术品是可聚焦的。
大小 成就图标 仪表板插图 排行榜插图
可见大小 200x200px 923x150px n/a
实际大小 320x320px n/a 659x371px
保险箱 区域大小 n/a 不适用 618x348px
无焦点大小 n/a 不适用 548x309px
重点大小 n/a 不适用 618x348px

有关使用 Game Center 的详细信息,请参阅 Apple 的游戏 中心编程指南

使用图像

由于 tvOS 9 是 iOS 9 的子集,因此用于在 Xamarin.iOS 应用中包括和显示图像的相同技术也适用于 Xamarin.tvOS 应用。 有关详细信息,请参阅“ 显示图像 ”文档。

设置 Xamarin.tvOS 项目图像

如上所述,所有 tvOS 应用都需要 启动图像应用图标。 本部分介绍如何在资产目录中设置 Xamarin.tvOS 应用项目后为 Xamarin.tvOS 应用项目选择启动图像和应用图标。

请执行以下操作:

  1. 解决方案资源管理器中,双击Info.plist打开它进行编辑:

    The Info.plist file

  2. Info.Plist 编辑器中,为应用图标选择“设置应用图标”部分中配置的资产目录(上面配置):

    The Info.Plist Editor

  3. 接下来,为启动映像选择资产目录(在“设置启动映像部分的上面配置)。

  4. 保存所做更改。

总结

本文介绍了 Xamarin.tvOS 应用中使用的所有图像类型和大小。 首先,它介绍了启动图像、分层图像、应用图标、顶级货架图像和游戏中心图像。 然后,它介绍了如何使用 Xamarin.tvOS 应用中的图像。