在 Xamarin 中使用 tvOS 图标和图像

项目
03/16/2017

创建迷人的图标和图像是为 Apple TV 应用开发沉浸式用户体验的关键部分。本指南将介绍创建和添加 Xamarin.tvOS 应用所需的图形资产需要的步骤：

启动图像 - 启动图像在应用首次启动时显示，并在启动完成后替换为应用的第一个屏幕。
分层图像 - 特定于 Apple TV，Apple 的新分层图像与视差效果配合使用，可为所选项创建 3D 效果。可通过多种方式创建分层图像。
应用图标 - 不仅 Apple TV 主屏幕需要图标，App Store 也需要图标。图标必须作为分层图像提供。
顶层图像 - 如果应用放置在主屏幕的顶行，则需要一个顶层图像来突出显示应用的功能。（可选）可以提供动态的顶层内容以突出显示应用中的内容。
Game Center 图像 - 如果应用是游戏并使用 Game Center，则需要一些额外的图像。
设置 Xamarin.tvOS 项目图像 - 涵盖为 Xamarin.tvOS 应用设置启动图像和应用图标所需的步骤。

重要

Apple TV 上的所有图像均采用 1 倍率的分辨率 (@1x)，因此应只使用此大小的图像。如果包括更大且分辨率更高的图形，则下载图形需要时间并且会占用更多内存和存储，此外，还必须在运行时动态重新缩放图形，这会对绘图性能产生负面影响。

启动图像

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

启动图像应快速显示，并给人的印象是应用响应迅速。之后不久，Apple TV 会将启动图像替换为应用的第一个屏幕。

启动图像不是广告或艺术表达的机会，它们的存在只是为了给人留下这样的印象：你的应用启动快速并可供使用。

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

Apple 对如何设计应用的启动映像提出了以下建议：

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

设置启动图像

要为 tvOS 项目设置启动图像，请执行以下操作：

在“解决方案资源管理器”中，双击 Assets.xcassets 文件，将其打开以供编辑。
在“资产编辑器”中，单击 LaunchImages 资产：
单击“1x Apple TV”条目并选择“启动图像”，或者选择从文件系统中拖动新图像：
保存所做更改。

分层图像

分层图像是 Apple TV 的新增内容，与视差效果配合使用时可产生 3D 效果，有助于增强客厅用户体验，让用户能够身临其境地体验到房间另一头屏幕上的内容。

分层图像包含两个 (2) 到五个 (5) 个单独的层，这些层组合在一起形成一个完整的图像。除背景层外，每个层都使用其 Z 序和透明度来创造景深错觉。当用户与分层图像交互时，会缩放采用 Z 序排列的高层并加以重叠以打造这种效果。

重要

分层图像对于应用的图标是必需的，而对于其他可聚焦项（例如顶层图像）则是可选的。但是，Apple 建议对可在应用中获得焦点的任何图像使用分层图像。

Apple 对如何设计分层图像提出了以下建议：

使背景层不透明 - 背景层（第 1 层）必须是不透明的，否则当尝试在 Apple TV 上使用分层图像时，会收到错误消息。所有其他层可以包含多个透明度级别，以增强 3D 效果。
隔离前景、中景和背景元素 - 将重要元素（如游戏角色）放置在前景中，而将次要元素或阴影放在中景中。最后，包括中性背景，为上层提供舞台。
将文本保留在前景中 - 除非你希望文本被更高级别的内容遮挡，否则通常它应位于最顶层。
使用简单分层 - 视差效果被设计得很微妙，因此请尽量减少层，以防止出现不和谐、不真实的效果。
包括安全区 - 由于上层可能会在视差效果中被剪裁掉，因此需要在每个层中构建一个安全区边框。如果内容太过靠近层边缘，则它可能会被剪掉。与下层相比，上层的缩放和裁剪次数会更多。请参阅下面的调整图像层大小部分。
经常预览 - 应经常预览分层图像，确保出现所需的 3D 效果并且各个层上的任何内容都不会被裁调。应在真实的 Apple TV 硬件上预览分层图像，以确保它们按预期呈现。

如可能，应始终使用内置 UIKit 控件来显示分层图像，因为它们在聚焦时会自动获得视差效果。

调整图像层大小

请务必记住，应在构成分层图像的每个层中包含安全区边框。由于各个层在视差效果中可能会进行缩放和剪裁，因此如果层的内容太靠近层边缘，则可能会被剪掉：

创建分层图像

tvOS 使用以下格式的分层图像：

CAR 文件 - 这是 Apple 创建的专有 Asset Catalog 格式。你无需直接创建 CAR 文件，它们会在编译时从任何 LSR 文件进行创建，并包含在应用程序包中。
LSR 图像 - 这是 Apple 创建的专有图像格式。使用 Parallax Exporter Adobe Photoshop 插件或 Parallax Previewer 以 LSR 格式创建和预览分层图像。
Assets.xcassets - Asset Catalog 中包含两 (2) 到五 (5) 个标准 .png 格式图像，这些图像将在编译时编译为 CAR 或 LSR 格式的分层图像。
LCR 文件 - 这是 Apple 创建的专有文件格式。 LCR 文件旨在用作从内容服务器之一下载的附加内容。不应将 LCR 文件包含在应用程序包中。 LCR 文件是使用 Xcode 附带的 layerutil 命令行工具从 LSR 或 Photoshop 文件生成的。

Parallax Previewer

Apple 创建了 Parallax Previewer 来预览并创建应用图标和可选可聚焦项所需的分层图像。该预览程序可显示构成完整分层图像的每个层：

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

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

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

应用图标

Xamarin.tvOS 应用不仅需要一个用于 Apple TV 主屏幕的应用图标，还需要一个用于 App Store 的图标。应用图标可以给潜在用户留下深刻印象，因此应一目了然地传达应用的目的。

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

小图标	解决方法	解决方法
实际大小	400x240px	1280x768px
安全区大小	370x222px
没有焦点时的大小	300x180px
有焦点时的大小	370x222px

重要

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

Apple 对如何创建应用图标提出了以下建议：

提供单一焦点 - 使用直接放置在图标中心的单一焦点设计图标。
使用简单的背景 – 保持图标背景简单，使上层脱颖而出。请考虑使用简单的颜色或微妙的渐变效果。
限制文本量 - 由于应用的名称会在用户选中时显示在图标下方，因此应仅包含对图标设计至关重要的文本。
请勿使用屏幕截图 - 屏幕截图对于图标来说过于复杂，不利于用户一目了然地查看应用的目的。
保持图标为方形 – tvOS 会自动应用一个掩码，以不易为人察觉的方式使图标的角变成圆角。请勿包括此掩码自行变成圆角。
谨慎分隔层 - 文本应位于最上层、次要项位于中间和中性背景，让上层脱颖而出。
谨慎使用渐变和阴影 - 渐变和阴影可能会与视差效果发生冲突，因此应谨慎使用。渐变用简单的从上到下、从浅到深的样式来表现效果最佳。阴影通常用锐利的硬边缘色调来表现效果最佳。
不同层透明度 - 在应用图标的上层使用不同级别的透明度可以增强 3D 效果。背景层必须为不透明，否则将导致出错。

设置应用图标

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

在“解决方案资源管理器”中，双击 Assets.xcassets 文件，将其打开以供编辑。
在“资产编辑器”中，展开 App Icon & Top Shelf Image 资产：
接下来，展开 App Icon - Small 资产：
然后展开 Back 资产并单击 Contents 条目：
单击“1x Apple TV 条目”并选择图像文件。
对 Front 和 Middle 资产重复上述步骤。
然后重复相同的步骤以定义 App Icon - Large 资产。
保存所做更改。

顶层图像

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

顶层图像可以作为单个静态 .png 或 .lsr 文件提供（请参阅创建分层图像），也可以在运行时动态创建为单行可聚焦项（请参阅下面的动态的顶层内容）。

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

Apple 对如何创建顶层图像提出了以下建议：

使用富静态图像 – 如果你的应用不提供动态内容，则其顶层图像将不可聚焦。使用此图像可突出显示应用或品牌的功能。
链接到应用内容 – 动态顶层布局提供了一个快速链接，该链接指向用户认为在应用中最重要的内容。使用此区域可提供快速链接来启动应用并立即跳转到给定的内容。
展示最新内容 - 富顶级内容可以吸引用户访问你的应用，并增强他们想要使用的意愿。可将此区域用作展示评分最高或最新内容的区域。
个性化设计内容 – 用户可以将最常用或最喜欢的应用放在主屏幕的顶行。可使用顶层来显示用户最感兴趣的内容。
不允许广告 – 严禁在顶层显示广告。可以显示最新的可购买内容，但不应显示定价信息。

设置顶层图像

要设置 tvOS 项目所需的顶层图像，请执行以下操作：

在“解决方案资源管理器”中，双击 Assets.xcassets 文件，将其打开以供编辑。
在“资产编辑器”中，展开 App Icon & Top Shelf Image 资产：
单击 Top Shelf Image 资产：
单击“1x Apple TV 条目”并选择图像文件。
保存所做更改。

动态的顶层内容

顶层可以包含一行动态的可聚焦项或一组动态的滚动横幅，而不是显示静态的顶层图像。这两种动态样式都可突出显示应用提供的内容或跳转到其最常用的功能。

分栏内容行

这种动态顶层内容类型可呈现单行滚动、可聚焦项（可选择细分为多栏）。它通常用于突出显示新内容、收藏的内容或最近查看的应用内容。

内容显示为单个水平滚动的内容列表，并在当前所选内容（当前具有焦点的内容）下方显示有一个标签。如果用户选择一段给定的内容，则将启动应用并直接跳转到该内容。

需要以下内容大小：

大小	招贴 (2:3)	方块 (1:1)	HDTV (16:9)
实际大小	404x608px	608x608px	908x512px
安全区大小	380x570px	570x570px	852x479px
没有焦点时的大小	333x500px	500x500px	782x440px
有焦点时的大小	380x570px	570x570px	852x479px

Apple 对分栏内容行提出了以下建议：

完成行 – 应提供足够的内容以占满屏幕的整个宽度。
缩放混合图像 - 分栏内容行旨在保持混合图像大小（来自上面提供的列表）。但请注意，如果混合图像大小，需应用额外的缩放来规范内容显示。

滚动内嵌横幅

（可选）Xamarin.tvOS 应用可以将其内容显示在顶层，作为自动滚动和循环显示的横幅集合，几乎占满整个屏幕。这种样式通常用于展示丰富的新内容，例如新电视节目。

除自动滚动之外，用户还可以使用 Siri Remote 控制横幅并向任一方向滚动。当某个横幅为焦点时，在 Siri Remote 上做出一个小的圆形手势将激活该横幅的视差效果。

横幅图像（超宽）

大小	分辨率
实际大小	1940x624px
安全区大小	1740x620px
没有焦点时的大小	1740x560px
有焦点时的大小	1740x620px

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

Apple 对滚动内嵌横幅提出了以下建议：

内容量 - 应提供至少三 (3) 个横幅，以使滚动显得自然。包含的横幅数不应超过八 (8) 个，否则最终用户的导航会变得困难。
内容文本 - 如果你的横幅需要文本，则应包含在横幅图像中。如果使用分层图像，文本应位于最顶层。

如需深入了解有关如何向应用添加顶层扩展以提供动态的顶层内容，请参阅 Apple 的 TVServices 框架参考。

Game Center 图像

如果 Xamarin.tvOS 应用是游戏，并且你已包含 Game Center 支持，还需要以下几个图像资源：

成就图标 - 每个成就都需要一个不透明的图像，该图像将被自动裁剪成一个圆圈。成就是不可聚焦项。
仪表板图像 - 可以提供可选图像，并将其显示在 Game Center 内应用的仪表板顶部。这些图像不可聚焦。
排行榜图像 - 必须为应用支持的每个排行榜提供一 (1) 到三 (3) 个 16:9 纵横比图像。这些图像可以是静态 .png 或分层 .lsr 文件。排行榜图像可聚焦。

大小	成就图标	仪表板图像	排行榜图像
可见大小	200x200px	923x150px	不适用
实际大小	320x320px	不适用	659x371px
安全区大小	不适用	不适用	618x348px
没有焦点时的大小	不适用	不适用	548x309px
有焦点时的大小	不适用	不适用	618x348px

有关使用 Game Center 的详细信息，请参阅 Apple 的 Game Center 编程指南。

使用图像

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

设置 Xamarin.tvOS 项目图像

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

请执行以下操作：

在“解决方案资源管理器”中，双击 Info.plist，将其打开以供编辑：
在“Info.Plist 编辑器”中，针对“应用图标”选择在上面的“设置应用图标”部分中配置的 Assets Catalog：
接下来，针对“启动图像”选择在上面的“设置启动图像”部分中配置的 Assets Catalog。
保存所做更改。

总结

本文介绍了 Xamarin.tvOS 应用中使用的所有图像类型和大小。首先，它介绍了启动图像、分层图像、应用图标、顶层图像和 Game Center 图像。然后介绍了如何在 Xamarin.tvOS 应用中使用这些图像。

通过