3.2 焦点和选择
在iOS设备上，用户直接通过在触控板上轻触或滑动与用户界面交互。Apple TV没有触屏，用户在房间里，通过遥控器直接与屏幕中的元素交互。 这一交互模式是基于焦点模型的。通过按下按钮或使用遥控器上的手势，用户可以在元素间变换焦点，停留于某一元素，点击到达内容或激活动作。焦点改变时，微妙的动画和视差效果营造的纵深感，能明确标识出此元素现正处于焦点。
使用标准界面元素，获得相应动效。如果你的应用使用UIKit和focus API实现用户界面，你的界面元素的焦点模式会带有相应的动效和视觉效果，这能使你的应用感觉更像一个平台原生应用，并帮助减少用户在界面移动时的阻力。当用户在你的应用使用Siri遥控器时，他们会发现焦点元素间的转换流畅而直观。
按用户预期方向移动焦点。在Apple TV中，几乎都是间接操作——手势在元素间移动焦点，系统滚动界面使焦点元素保持可见。如果你的应用使用间接操作，确认焦点与手势方向一致。如果用户在遥控上点按向右或滑动向右，焦点应该向右移动，即内容应该左移。如果用户点击向上或向上滑动，焦点也应该向上移。而全屏幕元素，如照片，应该采用直接操作，手势移动的实体而不是焦点。举例，向右滑应该从左向右移动相片。
聚焦元素显性化。用户在远处选择并操作屏幕上的元素，因此让他们时刻知道哪个元素正处于焦点中至关重要。通常而言，如果你使用UIKit中的界面元素，系统会自动做到这点。如果你想使用自行开发的焦点模型，请确保焦点元素突出。举例而言，一个图像为主的合集中，图像会有标题，你应该在焦点元素，而不是非焦点元素下显示其标题。
使用视差效果，让焦点元素对用户交互响应更迅速。在遥控器上轻柔地画圈，相应的焦点元素也会实时产生柔和的位移。这样的反馈能提高对内容连接的认知，并强调了正处于聚焦态的元素。这种视差效果内置于UIKit，使用分层图像的方式，赋予焦点元素活力感。 使用视差能创造更身临其境的互动体验。要了解更多信息，请参阅 1.5 焦点和视差 和 4.5 图像分层。
创建尺寸合适的焦点元素。间距恰当的、较大的元素比较小的元素更易浏览和选择。
界面元素的焦点和非焦点态都应设计得美观。在Apple TV上，处于焦点的元素通常会稍微放大。当你设计界面时，应该同时考虑元素的焦点态和非焦点态。为聚焦状态配置较大尺寸，以确保它们看起来始终清晰。你可以在 4 图标和图片 中查看图片尺寸规范。
焦点的改变应是流畅的。一个元素转为聚焦状态时，它会发生颜色改变或伴有微妙的动画；当焦点再次发生变化时，记得让它自然地恢复至非焦点态，而不要让这个过渡显得不和谐。
不要显示光标。用户预期通过改变焦点导航，而不是尝试移动屏幕上一个小小的光标。使用焦点模型来提供行之有效的、一致的体验。
了解更多应用中的焦点运用，请参阅 tvOS应用编程指南。
4 图标和图片
应用图标和图片对创造沉浸式的用户体验至关重要，这样的体验吸引着用户并让他们充满兴趣。
4.1 图片尺寸
总是按照界面所需尺寸提供图片。运行时需要缩小的大尺寸图像需要花更长时间加载，并对渲染性能有负向影响。Apple TV上的所有图片按@1x分辨率提供。
4.2 应用图标
每个应用都需要一个漂亮并令人记忆深刻的图标，在App Store中吸引用户的注意，在Apple TV首页能跳出来抓人眼球。一瞥之间，图标是第一个向用户传达应用内容的机会。
提供单一的视觉焦点。为应用设计单一、中心的视觉焦点，能立刻抓住眼球并能清晰地表现应用。用户不应该需要仔细分析图标才能理解其代表的意思。
保持背景简洁。不要用太多背景元素塞满你的图标。给图标绘制一个简洁的背景，能够突出上面的图层，但并不过分压制它周围的应用图标。记住，你不必填满整个图标。
仅当必要或文字是LOGO一部分的时候，才使用文字。当图标被选中聚焦时，应用名会出现在图标的下面。不要包含非必须的文字来重复名字或者告诉用户如何使用你的应用，比如观看(Watch)或者玩(Play)之类的。如果你的设计包含文字，可以强调与应用实际功能相关的部分。
不包括截图。截图对应用图标来说太复杂，而且通常不能帮助传达应用内容。相反，还是花时间去设计个漂亮、迷人、突出的图标吧。
保持图标四角是直角。系统会自动用蒙板来生成圆角。
分层
重要：应用图标要求使用分层图片。具体参见 4.5 图像分层。
应用图标必须有2-5个图层来创造聚焦状态时的纵深感和生动感。
仔细考虑如何分离图层。如果你的图标包含一个LOGO，把它从背景层中分离出来。如果你的图标包含文本，把文本放在前景层，这样在视差效果下就不会被其他图层所遮盖。
图层样式
仔细考虑渐变和阴影。背景的渐变和花纹可能会与视差效果有冲突，因此使用时要谨慎。关于渐变，推荐使用上到下、浅到深的渐变，记得它们会影响整个图层。
应用图标中，阴影最好看起来是锐利、硬线条、融入背景层的着色，当图标静止时不可见。
利用不同程度的透明度来增强纵深感和活力度。创造性地使用透明度能够使你的图标脱颖而出。举个例子，Photos图标的核心分成多个半透明图层，为设计带来更多活力。
图标尺寸
重要：每个应用必须提供一个小尺寸和大尺寸图标。应用图标必须呈递两种尺寸，两者长宽比相同。
小尺寸图标——这个尺寸的图标在Apple TV主屏上使用。
实际尺寸：400px by 240px
安全区域尺寸：370px by 222px
非聚焦态尺寸：300px by 180px
聚焦态尺寸：370px by 222px
大尺寸图标——这个尺寸的图标在App Store使用。
尺寸：1280px by 768px
大尺寸图标应照搬小尺寸图标的设计。尽管大尺寸图标与小图标使用不同，它仍然是你的应用图标，应该在外观与小图标相匹配。
应用图标安全区域模板能够帮你把内容放在合适位置，参见 参考资料。
4.3 顶部展区 (Top Shelf) 图片
当用户把你的应用放在Apple TV主屏的最上面一行时，顶部展区 (Top Shelf) 是增加可见度的好机会。应用被选中聚焦时，你能够展示迷人的图片，来鼓励用户使用应用去发掘更多。
重要：最低要求，每个应用至少提供单张顶部展区静态图——当应用在主屏最上面一行且被选中聚焦时使用。
让用户能直接跳到相关内容。顶部展区通往用户最关心的内容，帮助用户快速到达。用户能通过点击被选中的图片来打开应用并直达相关内容，也能使用遥控器上的播放键直接启动媒体播放或进入游戏。
展示引人注目的动态内容。你展示在顶部展区上的图片应该吸引用户、让他们渴望更多。尽管你也可以在顶部展区放静态图片，还是要考虑放置更有魅力的动态图片，比如最新的或者评价最高的内容。
提供视觉丰富的静态图像。当没提供动态图或动态图不可用时，顶部展区展现静态图。静态图不可被选中聚焦，所以利用这个机会展现品牌吧。
顶部展区静态图尺寸：1920px by 720px
个性化内容。用户熟悉他们放在Apple TV主屏最上面一行的应用，他们经常使用这些应用。考虑把体验个性化，在顶部展区展现有针对性的推荐项，比如让用户能够恢复视频播放、继续游戏。
不显示广告。当用户将你的应用放在主屏的顶行时，你已经成功地把自己推销给他们了。别再对他们进行广告轰炸，这样会把用户推开，怂恿他们把你的应用撤下来。可以在顶部展区展示可购买内容，但是要强调最新、令人激动的内容，千万不要展现价格。
你可以为顶部展区提供单一图层或多图层的图像。具体参见 4.5 图像分层。
动态内容布局 Dynamic Content Layouts
动态顶部图像可以作为一排可聚焦内容或者滚动横幅出现。布局样式为展现你的内容提供了一系列灵活的格式选择。不管使用什么样式，展示用户最为关心的内容，帮助他们快速获得所求。
分栏内容行 Sectioned Content Row
这一布局样式展现了一行带标签的内容。它通常用于高亮最近浏览内容、新的内容、或者收藏的内容。
行内内容可被聚焦，允许用户按自己想要的速度滚动。当一个内容被聚焦选中时，一个标签会出现，同时，在遥控器触控板上轻轻移动，会让图片活过来。如果需要的话，一个分栏内容行也可以被配置多个标签。
提供足够的内容,构成完整的一行。最低限度，在分栏内容行至少载入能撑满屏宽的内容。此外，为了平台一致性或展现额外信息，至少包含一个标签。
分栏内容行支持多种长宽比的图片，包括以下尺寸：
海报 (2:3)
实际尺寸：404px by 608px
安全区域尺寸：380px by 570px
非聚焦态尺寸：333px by 500px
聚焦态尺寸：380px by 570px
方图 (1:1)
实际尺寸：608px by 608px
安全区域尺寸：570px by 570px
非聚焦态尺寸：500px by 500px
聚焦态尺寸：570px by 570px
HDTV (16:9)
实际尺寸：908px by 512px
安全区域尺寸：852px by 479px
非聚焦态尺寸：782px by 440px
聚焦态尺寸：852px by 479px
注意，当多种图片尺寸混合时，可能会发生额外的缩放。如果你的顶部图区含有多种图片尺寸，图片会自动放大去匹配最高图片的高度。例如，当和海报、方图混合在一排中时， HDTV图片会放大到500px高。
滚动横幅区 Scrolling Inset Banner
这一布局样式展示一系列几乎整屏宽的大图。在限定的时间内，Apple TV自动从左到右滚动横幅直到其中某个被选中。滚动到最后一张图片后，序列回到开始。
当一个横幅被选中时，在遥控器触控板上轻轻画圈会触发系统聚焦效果：横幅动起来、打光、产生3D效果（如果横幅由多个图层构成的话）。在触控板上滚动，按次序进入下一个或者上一个横幅。使用这种设计展示丰富、引人注目的内容，比如受欢迎的新电影。
提供合理数量的内容确保滚动舒适。滚动横幅区中至少要有3张图片；超过8张的话很难手动导航到某张特定图片。
如果你需要文字，将它加入到你的图片中。这种布局样式在内容下面不显示标签，因此任何文本必须是图像自身的一部分。在分层图片中，应考虑把文字放在最顶层突出出来。
滚动横幅区支持以下尺寸的图片：
超宽比例
实际尺寸：1940px by 624px
安全区域尺寸：1740px by 620px
非聚焦态尺寸：1740px by 560px
聚焦态尺寸：1740px by 620px
4.4 游戏中心图片
如果你的应用是一款游戏，游戏中心会给你更多让用户沉浸在抢眼图像中的机会。
成就图标
每个成就都需要一张不透明的图标，来直观地表现用户在游戏中达成的成就。系统会自动把成就图标裁切成圆形，所以你需要确保核心内容在图片正中。成就图标是用来展示的，没法被选中。
可见尺寸：200px by 200px
实际尺寸：320px by 320px
控制面板 (Dashboard) 插图
这种可选图像出现在你游戏控制面板的顶部。透明度可能被用于让背景从图像中显示出来。控制面板插图不能被选中。
最大尺寸：923px by 150px
排行榜插图
你必须为游戏中的排行榜或排行榜集合提供1-3张单层或多层、长宽比为16：9的图像。插图的底层必须是不透明的。在运行时，深色渐变可能会从下往上覆盖图片，你可以在图片右下角放置文本。这些图像可被选中，在遥控器触控板上轻轻画圈会触发聚焦效果。
实际插图尺寸：659px by 371px
安全区域尺寸：618px by 348px
未聚焦尺寸：548px by 309px
聚焦尺寸：618px by 348px
如需在应用中实现对游戏中心的支持，参见 游戏中心编程指南。
本文链接：http://www.mobileui.cn/apple-tv-man-machine-interface-guidelines.html本文标签: Apple TV, 图标, 导航, 尺寸, 应用, 手势, 指南, 按钮, 用户, 电视, 遥控器
