4.5 图像分层

图像分层是Apple TV用户体验中的精髓。结合视差效果一起，能够产生真实、有活力的体验，并且能随着用户与屏幕上内容的交互唤起实体联系感。

 

一张分层图片由2-5个不同图层叠加而成。通过分离图层和使用透明度来创造景深的感觉。当用户与图片互动时，靠前的图层升起并变大，同时靠后的图层进一步后退，产生3D效果。

 

重要：应用图标要求使用分层图片。应用中其他可被选中的图像，包括顶部图区图片，并非必需使用分层图片，但我们强烈建议使用。

 

使用标准的界面元素来显示分层图像。如果应用的用户界面使用UIKit框架和focus API，当分层图像被选中聚焦时，会自动被处理成带有视差效果的。

 

合理地区分前景、中景、背景元素。在前景层展现重要突出的元素，比如游戏中的角色、专辑封面或电影海报中的文字。中景层尤其适合展现次要内容和效果，比如阴影。背景层是不透明的幕布，能够衬出上面的图层、但又不抢风头。

 

通常，把文字放在前景层。把文字放在最上层以便清晰展现，除非你需要文字是模糊的。

 

背景层是不透明的。使用不同级别的透明度并让靠下层的内容透出来没问题，但背景层必须是不透明的，否则你会得到错误提示。不透明的背景会确保你的设计在视差效果下、投阴影时、在系统背景上使用时都看起来很好。

 

保持简单精致的分层。视差被设计成几乎注意不到的效果，过度的3D效果看上去不真实、不和谐。保持图像景深的简洁，让你的设计充满生命力和惊喜。

 

在核心内容周围预留安全区域。选中时和视差效果中，靠近边缘的图层内容会被裁切或在图像缩放移动时难以看清。为了确保核心内容总是可见的，不要把它摆放的太靠近边缘。安全区域的大小随图片尺寸、图层前后顺序和移动动作变化。前景层会比背景层裁切得更厉害。

 

总是预览你的分层图像。设计在Apple TV上看起来很棒的分层图像，你需要在设计过程中通过Xcode预览。重点关注缩放和裁切，如果需要的话调整图像直到重要的内容总在可视范围内。分层图像成稿后，你还需要在Apple TV上预览用户实际会见到的效果。

 

分层图像的大小

在确定分层图像合适的尺寸时，同时需要考虑选中态和非选中态。在视差效果中，背景图层可能会被少量裁切，所以把核心内容设计在安全区域以内，并在区域内适当留白，以确保你的设计在各种情况下都看起来很好。

推荐使用以下公式来计算分层图像的大小，这一算法根据图像非选中态的尺寸来计算。

 

选中态尺寸	实际尺寸	安全区域尺寸
长边：长边非选中态尺寸 + 70px短边：基于长边等比例缩放	长边：长边选中态尺寸 x 106%短边：基于长边等比例缩放	与选中态尺寸相同

创建分层图像

Apple TV使用CAR和LCR文件加载分层图像。

 

CAR文件

CAR是苹果定义的一种专有的资源目录运行时文件格式。你并不直接创建CAR文件，Xcode会在编译项目的LSR文件和图像栈时自动为你建立。 

• LSR图像。LSR是苹果定义的一种专有的分层文件格式。除了在应用当中使用，LSR文件还可以被导入iTunes Connect用作媒体图像，比如电影电视剧海报。Parallax Previewer工具和Parallax Exporter Photoshop插件能让你预览并以LSR格式导出分层图像。在 参考资料 可以下载这些工具。
• 图像栈。任何标准PNG文件都可以导入并作为图像栈中的独立图层。与所有分层图像一样，图像栈不超过5层。Xcode还可以把图像栈导出成LSR文件。

 

 

LCR文件

LCR是苹果定义的一种专有的运行时分层文件格式，并在内容服务器上使用。如果你的应用运行时需要从服务器获取分层图片，就必须要用LCR格式提供这些图片。LCR图像不应该嵌入在应用本地。

 

你并不直接创建LCR文件，而是使用Xcode中的layerutil命令行工具，通过LSR文件或Photoshop文件建立。

 

如果需要在Xcode应用项目中运用分层图像的指南，请查看 tvOS应用编程指南。

 

4.6 启动图像

启动图像在应用启动时展现，即时出现并很快被应用的首屏替代，让用户感觉应用响应速度很快。启动图像并不是艺术表达的窗口，它唯一的意图是增强这样的用户认知：你的应用启动很快，立即就可以使用。启动图像是静态图、不分层。

 

 

重要：每个应用必须提供启动图。

 

 

尺寸：1920px by 1080px

 

 

把启动图设计成与应用首屏几乎一样。如果启动图中含有不同的元素，当启动完成时，用户能够感知到从启动图切换到应用首屏的闪动。

 

 

在启动图中避免避免使用文字。因为启动图是静态图，所以任何文字展现不会经过本地适配。

 

 

淡化启动效果。用户可能会频繁切换应用，所以设计引导图时请不要意图引起用户对启动过程的关注。

 

 

别做广告。启动图并不是做品牌宣传的机会。不要设计得像闪屏或”关于”窗口，也不要使用LOGO或其他品牌元素，除非它们本来就是应用首屏的一部分。 

5 视觉设计

Apple TV充满了一些设计独到并且兼顾体验的应用。以下这些原则可以帮助你设计出可以向用户传达品牌理念的应用。

 

5.1 动效

Apple TV通过UIKit的方式，内置了很多适用于获得焦点、选择、和转场的动画，你可以在自己的应用中利用他们。这些微妙的动画为用户和屏幕内容建立了视觉感受上的联系。内置的动画效果与有品位的自定义动画的结合使用，可以增强内容的沉浸式体验。

避免使用无意义的动画。屏幕上的动画应该只是用于响应用户的操作。非用户行为触发的动画会造成体验的中断和注意力的分散，不要仅仅是为了使用动画而使用动画。

避免过分夸张的动画。多余的跳动或弹簧效果也许让动画在电脑频幕上看起来非常棒，但是呈现在更大的屏幕上的时候，会是非常让人恼火的。考虑下用优雅温和的动画来替代吧。请务必经常测试你的设计，以确保在电视上看起来也棒棒哒。

追求真实可信的动画。Apple TV的设计理念是轻量化，关键的界面组件都在体现轻薄的质感。这些轻量化的组件动起来不应该表现的像有质量似的，比如可以反弹到某个地方或者是从某个地方冒出来。虽然用户乐于接受艺术化的处理，但不合理的或是违背物理定律的运动效果，会让人感到迷惑。

5.2 品牌传达

成功的品牌传达不仅是将品牌元素添加到应用中这么简单。成功的应用需要通过明智的选择字体、色彩、配图，来传达品牌独一无二的理念。在应用中应当适度的向用户提供品牌内容，但不要过量。

优雅并潜移默化的传达品牌。用户使用应用是有目标的，为了得到讯息或是处理事务，而不是为了看广告。在应用的设计中向用户柔和的提示品牌信息，才能达到最好的使用体验。比如，在应用的界面中使用和应用图标一样的的色彩，就是呈现品牌内容的一种好方法。

内容为先，而不是品牌。一条一直存在的顶部栏，除了用来展示品牌什么也做不了，而且还会限制内容的空间。内容为先（的设计方式）则是用一种弱化干扰的方式来呈现品牌。此外还可以考虑去自定义色彩、字体、或者巧妙定义背景。

抵住在应用中到处展现品牌标志的诱惑。除非品牌标志的呈现对使用情景很必要，否则请避免在应用中频繁出现。

5.3 色彩

Apple TV的平台采用轻量简约的设计风格。色彩应当用于让用户更沉浸式的体验，引导用户关注内容，而不是界面本身。当面临决定选用哪种色彩和在哪里使用色彩时，请考虑它是否可以起到增强内容的作用。色彩同样有助于传达品牌，通常，可以使用应用标志的填充色。

在真实的电视上预览色彩。用户在计算机上和电视上看到的色彩并不总是一样的。为了获得最佳的效果，请使用sRGB的色彩格式，并且需要在真实电视上经常测试，可以通过这样的方式熟悉如何选择色彩以及将色彩转投到大屏幕上。如果条件允许，请在多台电视上预览你的应用，因为不同的电视型号可能导致很明显的色彩差异。

柔和的色彩更优。如果你的应用使用自定义色彩模式，请避免使用高饱和度色彩。这些色彩在电视的大屏幕上看上去会非常炫目和喧宾夺主，如果用户调整了他们的显示设置，则更甚。

请考虑色盲以及文化差异对色彩认知的影响。用户看待色彩的方式是不同的。比如有些色盲的人很难区分红色和绿色。所以请避免仅使用红绿色彩差异来区分状态或数值。一些图片编辑工具软件有提供可以验证色盲人群是否可以识别（当前的色彩）的功能。

不仅仅通过色彩来告知焦点状态。在Apple TV上，当元素获得焦点时，微妙的缩放以及响应式的动画是表示可交互的主要手段。

在不同的显示级别上预览色彩。电视的色彩效果取决于不同的生产商，亮度以及显示设置。如果某些设置会导致应用中的内容会混在一起或者变得看不清楚，请考虑重新选择色彩。

 

5.4 内容

Apple TV提供了一种可以在客厅中和各个年龄段的家人共享的家庭影院式体验。整个平台的页面和内容非常的丰富、美观、简单、可参与，相比科技感它更强调那种人和人联系起来的感觉。

尊重家长的控制。请记住一些家庭会使用家长模式来控制色情和限制级的内容。你的应用应当在适当的时候遵循这些限制。对于实施指南，请参阅IOS应用指南的限制条款相关内容。

5.5 布局

电视有很多不同的尺寸。Apple TV上的应用和在IOS上一样不会自动适应屏幕的大小。相反的，应用在每一个显示器上都会呈现完全一样的界面。设计的时候要格外注意，这样应用才能够在各种尺寸的屏幕上都呈现非常赞的布局。

优化大屏显示效果。

将你的应用的界面分辨率设置为1920 x 1080 (1080p)像素，这意味着16:9的界面宽高比。所有得比例都应该是@1x 分辨率的。

保持主要内容远离屏幕的边缘。

留意距离界面顶部和底部60像素，以及距离侧边90像素的区域。在这个接近边缘的区域内很难看清楚内容。在一些旧的电视中，为了适应界面尺寸也会裁掉边缘的内容。

有焦点状态的元素之间注意保留适当的间距。

如果你使用UIKit或者focus API，元素在获得焦点的时候尺寸会增大。请注意元素在获得焦点时候的视觉样式，确保它们不会无意中遮盖了重要信息。

通过显示一部分当前屏外的内容来暗示隐藏了更多的内容。

呈现大量内容时，会遇到单独一屏不能承载全部内容的情况，可以通过展示一部分当前屏以外的内容来暗示还有更多的内容

构建媒体为主的应用时，使用布局模板。

如果你的应用布局需要少量的定制并且内容呈现要精美。请考虑使用预设的布局模板。详见布局模板。

网格

在Apple TV上，网格有助于更好地呈现内容。这些内容不仅在远距离很容易浏览，还可以使用遥控器快捷地导航，呈现效果非常理想。

以下的网格布局和界面宽度提供了最佳视觉体验。请确保元素在非焦点状态保持适当间距，以防止他们在获得焦点的时候内容重叠。

3栏网格

内容宽度：548像素

水平间距：48像素

垂直间距：100像素

5栏网格

内容宽度：308像素

水平间距：50像素

垂直间距：100像素

6栏网格

内容宽度：250像素

水平间距：48像素

垂直间距：100像素

9栏网格

内容宽度：148像素

水平间距：51像素

垂直间距：100像素

如果你使用UIKit提供的内容流的集合样式，网格栏数会根据内容的宽度和间距自动确定。详细的内容请参见 UICollectionViewFlowLayout Class Reference。

考虑屏幕的安全区域。牢记将内容左右缩进90像素，上下缩进60像素。可以通过在缩进造成的区域中，用溢出的方式展示未在当前屏出现的内容。

为标题行留出额外的垂直间距。如果一行内容有标题，请确定非焦点状态的上一行底部和当前标题行的中间有适当间距。然后，确定该行非焦点状态下标题底部和内容顶部的有适当距离。

请使用一致的间距。不一致的间距会让网格看起来不像网格。

余光的内容保持左右对称。为了可见内容更直观的获得焦点，请保持屏幕安全区域外的溢出内容在各个边缘都保持相同的宽度。

布局模板

Apple TV提供了样式美观、布局一致、并且凸显内容的模板。这些模板是基于JavaScript和Apple TV的编程语言(TVML)开发的。当应用启用时，它们会动态加载内容。这些模板可以灵活创建丰富的内容，并且这些内容可以很好地在电视屏幕上呈现，非常适合流媒体。

有品位的自定义模板。布局模板的可定制程度很高，你可以控制背景、文字、色彩、尺寸、布局甚至更多。在设计应用的时候，请无论何时都遵从于内容，避免出现分散注意的、跳跃的或突兀的定制内容。

在使用之前了解模板的使用意图。如果你的定制化使得基本模板无法识别，请考虑换个模板或者使用完全自定义的界面。

更多应用中模板整合方面的内容详见 Apple TV Markup Language Reference。

提醒模板 Alert Template

提醒模板用于在屏幕上呈现相关信息并询问是否执行操作，比如确定购买或删除等负向操作。

另请参阅 6 界面元素 中的 6.9 提醒。

目录模板 Catalog Template

目录模板用于呈现内容相关的组内容，比如电影或电视节目的流派的分组。浏览左边的分组列表，聚焦于其中一项的时候右侧可以看到对应的内容。

专辑模板 Compilation Template

专辑模板用于呈现元素包含的内容，比如专辑中的歌曲或者播放列表的轨迹。它最常用于显示音频相关的内容。

描述性提示模板 Descriptive Alert Template

描述性提示模板用于显示大段的长内容，可能要求用户同意某一项操作，比如同意条款或者许可协议。

  

保持简短，避免滚动。远距离在屏幕上阅读大量文字一点都不好玩，对眼睛简直是折磨。所以请认真斟酌应用需要呈现的文字内容。

显示，而不是讲述。如果可能，避免描述提示内容，可以考虑用更容易理解的方式来展现相同的信息，比如用图片。

按键要仔细摆放。当文字内容可滚动展示时候，请横向并排摆放按键。这样一来，可以通过上下滚动来阅读文字，通过左右滚动来切换按钮的焦点状态。

 

另请参阅 6 界面元素 中的 6.9 提醒。

表单模板 Form Template

表单模板用于显示一个或者多个输入框比如名字和邮件地址，包括键盘。

另请参见 6 界面元素中 的 6.3 文本和搜索。

 

列表模板 List Template

列表模板用于以列表的形式在屏幕右方呈现电影或电视的节目列表。当聚焦与一项内容时，左边会呈现其对应的内容，比如它的图片或者描述。

加载模板 Loading Template

当内容在服务器中检索的时候，会出现加载模板，它会时时显示一个进度显示器和一些文字描述。它让用户知道有一些行为正在进行，应用看上去并没有终止。

保持加载文案的简练和准确。如果加载很快，用户也许来不及在文案消失前读完很长的内容，这会让他们以为遗漏了一些信息。

另请参阅 6 界面元素 的 6.7 进度指示器。

主菜单模板 Main Menu Template

主菜单模板会展示一个带底部菜单的全屏图像。它通常出现在电影的首页，有一个可以播放电影和访问特定章节或其它功能的菜单。

菜单栏模板 Menu Bar Template

菜单栏模板是为了一级页面而设计，作为内容的入门页。它包含一个贯穿顶部的菜单。当一个元素获得焦点时，它相关的内容会在下方呈现。

保持菜单栏的整洁。每增加一个元素都会导致更多的选择，并且还增加了应用的复杂度。

将菜单元素保持在屏幕上。当菜单栏获得焦点的时候，它所有的元素都应当可见。一般情况下，短标签应当限制在7个以内，这样能避免由于内容拥挤导致的元素超出当前屏。

另请参见 6 界面元素 的 6.1 标签栏。

展览式模板 Parade Template

展览式模板通过将当前焦点状态下的组内容，通过旋转的方式进行预览。组内容列表会呈现在右边。聚焦与其中的一项内容，左侧用旋转的方式呈现其内容。

产品模板 Product Template

产品模板用于电影、电视或其他产品的展示。它通常包括产品图片、背景和描述信息。在产品内容下方会提供产品的相关信息，用户可以通过向下滚动来获取更多信息，比如演员列表，打分和评论。

自定义背景时，请仔细考虑图片和文字信息的颜色。默认情况下，背景会呈现出一个产品图片的投影，来制造互补的视觉效果。如果你决定使用自定义背景，请确保他不会与其它内容造成冲突。

产品集合模板 Product Bundle Template

产品集合模板用于呈现系列电视节目，电影和其他产品。通常情况下它包括图片，背景和描述信息。内容下方提供了包内的全部产品，比如一季的电视剧。用户可以通过向下滚动的方式获取更多的信息，比如演员列表，打分和评论。

评分模板 Rating Template

评分模板用于让用户对特定元素进行评价，比如电影或一首歌。

搜索模板 Search Template

搜索模板用于让用户搜索应用中的内容和查看搜索结果。它包括搜索框，键盘和结果列表。

堆栈模板 Stack Template

堆栈模板用于成组的展示产品，比如不同流派的电影。每组产品都直接在前一组的下方展示。

5.6 质感纹理

在整个系统中，柔软细腻，半透明质感的窗口的呈现，是为了传达一种深度和层次感。这些设计同样也给人沉浸感，但并不引人注意，也不会造成内容的分心。这些质感纹理有多种色彩，适用在多种场景中，看上去非常棒。

考虑使用系统的质感。系统质感能带给你原生应用的感觉，当用户从其它应用切换到你的应用的时候，过渡会非常平滑。下面的质感样式可供选择：

 

超轻薄

UIBlurEffectStyleExtraLight

大部分全屏模式中会使用这种纹理，效果非常棒。如果你的应用采用透明窗口的背景，系统会默认自动呈现此样式。

 

轻薄

UIBlurEffectStyleLight

这种纹理适用于覆盖层，它会模糊屏幕上的部分内容。

使用更轻薄，半透明的质感来提升内容，让它有新鲜感。深色的质感会导致沉重的感觉，这样的质感使内容显得陈旧，与背景混为一体且看不到投影，从而降低了页面纵深感和活力。当你看不到投影的时候，很难区分哪个元素处于获得焦点的状态。

本文链接：http://www.mobileui.cn/apple-tv-man-machine-interface-guidelines.html
本文标签: Apple TV, 图标, 导航, 尺寸, 应用, 手势, 指南, 按钮, 用户, 电视, 遥控器