新Apple TV重新定义了起居室的体验，你能将非同凡响而身临其境的内容投放到大屏幕上，这是前所未有的体验。

1 概述

1.1 设计原则

无论你是在开发游戏、媒体流应用，还是家庭实用应用，在构想产品的时候请记住这些设计原则。

互联 Connected

Apple TV通过革命性的Siri遥控器为电视带来了触控体验。用户可以在房间的任何一个角落，通过流畅、直观的手势与内容进行交互。 触控板的操作犹如人们熟悉的trackpad，全新的遥控器支持轻触、滑动和点按。 请利用触控的优势，运用令人愉悦、引人入胜的方式，将用户和内容连接在一起。

明确 Clear

Apple TV给人自然、直观的感受，令你本能地知道该怎么做。你的应用应该增强这一体验。用布局网格、动作和透明度打造语境。为每个元素赋予空间感，让用户清楚它们在你的应用中的位置。Apple TV的导航采用焦点模型。用户使用遥控器在界面元素间移动，例如电影海报、应用或按钮，通过点按选中某个元素。导航中的当前项是选中态，如果一个元素被选中聚焦，即使远看也该一目了然。

沉浸 Immersive

精美、绵延无边框的艺术画面将用户吞没在丰富多彩的影音体验中。对单个内容的聚焦提升了这种体验，遥控器的触控版会让你觉得自己在直接触摸屏幕，与在iOS设备上操作无异。通过吸引人的内容、令人振奋的影像、以及精巧流畅的动画力求沉浸感。

1.2 应用 APP

tvOS为一系列本地运行的应用提供了开发框架，如吸引人的游戏、实用工具和其他Apple TV本地应用。如果你熟悉iOS应用设计，你就已经知道大部分你需要了解的东西了。大部分界面元素和开发框架在tvOS里也同样存在。然而，想创造一个可以遥控、在电视屏幕运转良好的出色影音体验确实需要一些重要而且独特的设计考量。

仔细思考用户交互。把你应用的体验设计得直观、简洁、流畅。在iOS里，用户看到的和触摸的是同一个设备。在Apple TV上，用户看着房间另一头的屏幕，同时触摸的是遥控器。寻找机会通过遥控器让用户感到和应用连接在一起，即使他们坐在一定距离之外。

考虑用户与屏幕的距离，让焦点醒目。你的应用将会是在距离电视10英尺外的沙发上也能被使用的。相应地去设计界面元素，让用户不会感到困惑。并且明确聚焦的事物以及明确在遥控器上操作带来的反馈。

创造共享体验。用户通常在公共环境中享受电视。考虑你的应用应该怎样吸引一组用户，以及每次打开应用的都是不同的用户。

应用开发相关信息，参阅 tvOS应用编程指南。

1.3 首页

Apple TV首页展现已安装的应用。用户浏览网格排列的一系列应用图标，选中一个并通过点击来启动应用。

在首页上，你的应用图标是讲述你应用的故事以及与用户建立情感连接的最好机会。你的应用图标应该建立好的第一印象，所以请设计一个独特、动人、便于记忆的图标吧。设计指导参阅 4.2 应用图标。

1.4 顶部展区 Top Shelf

顶部展区是首页上位于首行应用列表之上的内容展示区域，用户可以决定顶部展区展示哪些应用。当聚焦这些应用中的一个时，顶部展区展示于此应用相关的特定推荐内容。

顶部展区突出展现应用中最新、推荐或者有价值的内容，并且给用户提供直接跳转的独特机会。例如，当聚焦App Store时，横幅突出展现值得关注的新应用。当聚焦iTunes TV Shows时，用户可以看见一系列推荐节目。聚焦并且点击一个节目，就会直接跳转到应用内相关的节目详情页。聚焦到一个节目时，按下遥控器的播放／暂停键即刻开始回放该节目。

推荐内容的设计指南，参阅 4.3 顶部展区图片。

1.5 焦点和视差

在Apple TV上，导航过程中当前的界面元素，如某图标、图片、按钮或其他的界面元素，可视为处于聚焦态。当一个元素被聚焦，它会被缓缓的提到前景。在遥控器触控板上轻轻画圆，元素会相应地做出摇摆动作。与此同时，元素上出现照明光泽，制造表面反光的视觉效果。如果用户一段时间内没有操作，非聚焦中的内容转为暗淡而聚焦中的元素变的更大。这些共同作用的效果，与坐在沙发上的用户保持一种联系，并且提供了上下文和一种明确的感受，强调了什么在焦点。

视差效果是一种贯穿整个系统的精巧视觉效果，它传达了聚焦元素的纵深和动态。通过图片分层、透明度、缩放和动效，视差效果打造了活灵活现的、真实的3D感。为了支持视差效果，提供图像分层是应用图标的要求之一，也是首页顶部展区的动态内容可以支持的。我们提倡应用中任何可被聚焦的图片内容都使用分层图片。

更多关于焦点的信息，见 3.2 焦点和选择。在 4.5 图像分层 中学习如何为视差设计图片。聚焦和视差实现指南，见 tvOS应用编程指南。

2 遥控器与交互

使用革命性的Siri遥控器，与屏幕内容创建一种独特、亲密的联系。

2.1 遥控器

遥控器为Apple TV最主要的操作设备，创造性地利用遥控器的触控板、加速计以及陀螺仪，为用户提供令人感叹的和直观的体验。用户在客厅使用遥控器时感觉像直接与电视交互一样。

2.2 手势

遥控器的触控板可以检测到多种直观的单指手势。利用手势可以与你的内容建立一种实感的联系。

滑动 Swipe

用户可以在选项间向上、下、左、右移动焦点。滑动手势的滚动通常带有惯性，即基于滑动的力度，滚动开始快，随后慢下来。通过这种方式，用户可以毫不费劲地在大量内容中移动。

点击 Click

点击能激活控件或选择一个选项。点击是一个强意图性的动作，也是触发行动的主要形式。“点击并长按”是用来触发特定情境下的动作。举个例子，点击并长按界面元素可以进入编辑状态。

轻触 Tap

轻触能在一系列的元素中逐个浏览。在基于UIKit的标准界面的应用中，轻触导航的不同区域能直接导航。举个例子，轻触触控板的顶部向上导航。一些应用会使用轻触手势来显示隐藏的控件。

为了避免在无意中触发动作，所以要区分点击和轻触。点击手势是一种强意图的交互行为，常适用于按下按钮，确认选择以及在游戏中发起一个动作。轻触手势适用于导航或者展示一些额外的信息。但需要注意的是用户在拿起遥控器、移动遥控或把遥控器交给他人时，他们的手指可能会自然地放在遥控器上。

避免使用标准手势执行非标准的行为，除非你的应用是一个需要手势的互动游戏 (active gameplay)。重新定义标准手势的含义会导致用户困扰和交互复杂性。

当且仅当必要时，你的应用能定义新手势。人们熟悉标准的手势，不喜欢被迫学习其他的方法去完成相同的事情。在游戏或者其他沉浸式应用里，定制手势也是体验中有趣味的部分。但在其他应用里，最好还是使用标准手势，这样用户就不需要额外的努力去发现或者记住它们。

适当时，不同位置的轻触手势能辅助导航和游戏。遥控器可以区分的触控板上下左右的轻触手势。如果要对不同位置的轻触做出响应，前提是你的应用和对应的情境需要该轻触动作，且这一行为是直观的、可发现的。

2.3 游戏手柄

在游戏里，游戏手柄可以提升可玩性以及增加沉浸感。游戏手柄也能对Apple TV的基于焦点的界面进行导航，省去切换输入设备的需要。

重要：游戏手柄是选购项，用户不一定有购买。但每台Apple TV一定会配置遥控器。如果你的应用可以支持游戏手柄，那么你必须让遥控器也能控制游戏控制。

确认游戏手柄的连接。你的游戏可能随时启动，甚至在没有游戏手柄连接的情况下。为了确保可靠的用户体验，应用启动时应该检查手柄是否就位，如手柄是必要的，可以友好地提示用户连接手柄，还需要告知用户游戏手柄比遥控器多提供的能力。

不要让用户在使用你的应用时切换操作设备。用遥控器和游戏手柄测试你的应用，以及确保它们能在菜单和必要的导航上能使用。考虑一下，在使用遥控器时，你还能使用什么交互。举个例子，在赛车游戏里，你可以让用户在遥控器横屏模式上进行旋转和操作。参阅 2.4 按钮 了解按钮预期行为。

关于游戏手柄支持的相关信息，可以查看 tvOS应用编程指南 中的 Working with Game Controllers。了解如何开发游戏，请查阅 GameplayKit Programming Guide。

2.4 按钮

遥控器上除了触控板外，还有些可点击的按钮，例如播放/暂停键也可以用于你的应用或者游戏上。当菜单按钮被按下时，使用游戏控制框架（Game Controller framework）的应用程序也能收到通知并采取适当行动。在你的应用或游戏的情境中，不管用户使用遥控器还是游戏手柄，按钮的行为应该一致且可预测的。

Siri遥控器的按键操作预期

游戏手柄的按键操作预期

给用户返回到上一屏以及离开你的应用或者游戏的路径。用户预期按下遥控器或者游戏手柄上的菜单按钮时，可以回到上一屏或者Apple TV的首页。当在应用或者游戏首页时，按下菜单按钮应该始终回到Apple TV首页。在游戏过程中，按下菜单按钮应该可以显示或者隐藏游戏中的暂停菜单，里面也应该包括一个选项可以导航回到游戏的主菜单。

始终可以使用Siri遥控器上的播放/暂停按钮。无用的按钮感觉像坏了一样，所以应该始终为播放/暂停按钮提供合理的行为。举一个例子，让用户使用播放/播放键来开始游戏，跳过一页教程说明，或者直接开始播放媒体。在游戏过程中，如果不需要辅助操作，播放/暂停应执行主操作。在一个应用里，如果没有明显的可播放内容，播放/暂停的操作行为等同于点击，用来激活一个焦点选项（focused item）。

3 导航和焦点

运用这些设计准则能帮助你创造运行自然的应用，如同Apple TV身临其境体验的一部分。

3.1 导航

用户往往不会注意到一个应用的导航，除非它并不符合他们的预期。你的工作是建立既能支持应用的结构和目标，又不会吸引用户注意力的导航。导航应该是自然而熟悉的，它不应该主宰用户界面或让用户从内容中分心。

在Apple TV上，用户在堆叠的页面间移动，浏览内容。每一屏可能放置前往其他屏的入口，并且通过遥控器返回到前一屏或主菜单。一般情况下，使用标准的用户界面元素，如标签栏、表单视图（table views）、内容集视图（collection views）和分屏视图（split views），可以在不同的页面间切换。

设计一个能快速简单到达内容的信息结构。用户想用最少的轻触、滑动，迅速地访问到内容。简化你的信息结构，用最少屏数来组织它。

利用触控来达成流畅性。提供简单的，用最少手势便能在焦点元素中阻力最低地移动的方法。

考虑焦点。Apple TV的导航并不总能一步到位。由于电视采用基于焦点的选择模型，用户需要先通过遥控器，把焦点移动到目标界面元素后，才能与其交互。如果你的导航方案需要太多的手势才能实现目标，用户可能会感到沮丧。参阅 3.2 焦点和选择。

通过菜单按钮实现后退导航。让用户能通过遥控器上的菜单按钮返回，以创建简单和可预期的导航体验。在玩游戏时，点击菜单按钮应该回到游戏主界面或调起有返回至菜单主界面选项的游戏菜单。在应用或游戏的一级界面，点击菜单按钮会退出至Apple TV的主屏幕。

避免显示返回按钮。用户知道按菜单键能返回，所以不要在你的应用中浪费空间去显示一个额外的重复此功能的控件了。但当界面中只存在购买或删除的按钮时，可以考虑提供取消按钮，便于让用户能返回上一界面。

内容合集在一屏显示比优于在多屏显示。即使一屏的元素非常多，遥控器的手势也能帮助用户快速移动。如果你有个焦点元素的集合，可以考虑用一屏显示，以保持导航的简单。

使用标准的导航组件。如果你的应用用户界面使用UIKit实现，采用标准的导航控件，如页面控制器（page controls）、标签栏（tab bars）、分段控件（segmented controls）、表单视图（table views）、内容集视图（collection views）和分屏视图（split views），用户已经熟悉这些控件，他们将直观地知道如何使用你的应用。 你可以在 6 界面元素 了解这些导航组件。

支持内容垂直导航。左右滑动比上下滑动更自然，在选择或设计内容布局时，请考虑这一点。

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

如需在应用中实现对游戏中心的支持，参见 游戏中心编程指南。

4.5 图像分层

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

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

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

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

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

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

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

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

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

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

分层图像的大小

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

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

创建分层图像

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

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

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

5.7 字体排版

San Francisco是Apple TV的系统字体。这个字体有两个变体：San Francisco Text 和 San Francisco Display，在大屏幕上易读性都很高。

在标签或其他界面元素中使用系统字体时，Apple TV会根据选择的磅值自动应用最合适的文本样式。它也会按需自动更改字体并遵循辅助设置。

尽可能减少应用中的文字数量。展示给用户，而不是通过文字来说明。阅读房间对面屏幕上的大量文字十分费劲也并不好玩。认真考虑你的应用实际需要展示的文本数量，尝试用更容易理解的方式来呈现信息，比如使用图片或动画。

在设计时选择合适的系统字体。最重要的是，文字在远处必须清晰易读。当设计应用时，39点或更小的字适合用San Francisco Text，40点或更大的字用San Francisco Display更好些。

尽量使用内置的文本样式。内置的文本样式允许你用不同的视觉效果来表达内容，同时保留最优易读性。这些样式使用系统字体并且允许你利用重要的排版功能，比如动态排版（为不同字号自动调整字距和行距）。主要内容使用正文样式，标签和次要内容可以使用注脚样式和说明样式。

使用自定义字体时，在远处需要清晰易读。Apple TV支持自定义字体，但在远处可能难以阅读，尤其当字体笔画过细时。所以，除非你有必须使用自定义字体的理由，比如为了品牌推广或创造沉浸式的游戏体验，否则还是坚持用系统字体吧。

使用自定义字体时，支持辅助特性。系统字体自动会对辅助特性作出反应，比如字体加粗。使用自定义字体的应用，应该检查是否启用了辅助特性并在特性发生变化时接收通知，实现与系统字体相同的行为。

请在 参考资料 下载San Francisco字体。

5.8 视频

Apple TV的视频播放器让用户能在应用内欣赏视频，而且它专为触屏设计。与Siri遥控器的无缝集成让用户能够流畅、直觉地使用手势来浏览多媒体。

用户可以使用遥控器做这些事：

• 快速翻看视频：拇指在触控板上滑动。
• 视频的快进和快退：点击触控板的左侧或右侧。
• 视频节点上快进和快退：点击唤起视频播放进度条，然后点击触控板的左侧或右侧。
• 连续快进或后退：点击并按住触控板的左侧或右侧。
• 展现额外信息：向下滑动，能够展现字幕、小节、音轨、扬声器输出选项。

使用系统视频播放器。内置的视频播放器能够提供很棒的视频播放体验。它的控件极简而低调，让媒体本身成为注意力的中心。除非你的应用确实需要一个自定义播放器，否则请使用系统视频播放器，会创造跨平台统一的多媒体浏览体验。

在视频上展现LOGO或非交互的浮层时，内容为先。一个小小的不引人注目的LOGO或倒计时可能适合放在视频上，避免使用与观看体验无关的又大又让人分心的浮层。用户期望在观看内容时不受打扰，他们会欣赏干净整洁的观看体验。

优雅地在视频顶部显示互动元素。一些视频中会展现可交互浮层，比如小测试、调研、进度签到等。为了体验更佳，暂停播放中的视屏，需要精确到仅有0.5秒的延迟，然后展现可交互浮层。提供清晰的关闭浮层的方式，一旦用户完成交互就恢复视频播放。

提供额外的增值信息。通过提供图片，标题，描述和其它有用的信息，来实现视频附加信息的定制化。一般来说，这些内容的高度应当限制在8行以内，以免影响到视频播放。

6 界面元素

界面元素是构成应用的基石。用界面元素来展示信息、促进与应用内容的互动。

6.1 标签栏 Tab Bars

对于Apple TV的多数应用而言，导航主要以屏幕顶部的标签栏形式呈现。内容区域位于标签栏之下，显示当前选中标签的内容。标签栏让用户知道当前处于应用哪个位置；同时提供一种便捷路径，让用户在不同页面和内容之间移动，或者触发操作行为，如搜索。

当遥控聚焦标签栏时，标签栏出现在屏幕顶部，高度是140px。标签栏默认半透明，可以看到标签栏覆盖区域下的内容。 一般而言，标签栏总是位于屏幕顶部，移开聚焦的标签栏时，标签栏消失，屏幕展现完整内容。

使用标签栏，有逻辑的来组织应用内容。标签栏可以很好地扁平化信息层级，快速访问同级信息模块。一些特殊信息不够明确时，采用角标补充说明。与当前视图或模式相关联的新信息或重要信息，需要解释说明时，通常在某个选项上使用以下角标 –  一个包含白色数字或解释说明文字的红色椭圆角标。

对角标进行管理。一个页面不要试图展示大量的新信息或重要信息，这样会让用户无所适从。

对选项数量进行管理。每增加一个选项，既增加应用本身的复杂性、又增大用户选择认知困难。

当聚焦标签栏时，所有的选项都应该要在屏幕内。选项应该使用短标题，从而避免拥挤或者导致有选项超出屏幕显示范围。

保证所有选项都可访问。如果一个选项可见、可用，而其他选项不可见、不可用，那么应用界面状况将不可控。

保证所有选项位于屏幕上，且随时可用。当选项下没有内容展现时，给出相关说明。例如，iTunes的音乐选项下，当没有歌曲列表时，给出了如何下载音乐的引导说明。

标签栏适配应用风格。采用颜色提取，或调整透明度，来适配应用的配色方案和风格。

更多的实施细则，请查看 UITabBarController Class Reference 和 View Controller Programming Guide for iOS。

标签栏选项 Tab Bar Items

选项标题通常使用文字。一般而言，相比于易被曲解的图标，简明的书面文字更干净、更直接。

采用短的、有意义的名词或动词作为选项标题。标题清晰定义了当前选项内容类型。一般而言，标题应该是名词（如音乐、电影和流派），但某些情况下，动词可能更加合适（如播放和搜索）。

6.2 表单和内容集 Tables and Collections

Apple TV包含了一些关于组织和呈现内容集合的标准，帮助用户理解以及导航。

表单 Tables

单列表单以滚动形式来呈现数据，可以将它们划分成多个区域或组别。不同量级的信息，使用表单的形式来更清晰有效地展现。

一般来说，单列表单是一个很好的承载文字信息的载体，而且经常以导航形式出现在页面一边，同时页面另一边呈现相关联的内容。更多可查看 分屏视图。

考虑单列表单宽度。窄的列表导致列表标题截断和重叠，让用户很难阅读和快速浏览。同样地，宽的列表也很难阅读和浏览，且占据了内容区域空间。

页面内容采用优先加载模式。不要等待全部内容读取完成后一起加载，而应先加载一部分。优先先加载文字部分，待图片数据读取完毕后，再加载图片内容。这种技术让用户尽可能快的获取有用信息，同时提升应用的用户感知反应。某些情况下，页面没有刷新时，显示旧数据可能是有意义的。

内容加载状态。 如果一个列表内容加载时间较长，需要一个加载进度条或动态的指示图标来告知用户应用仍在加载中。

更多的实施细则，请查看 UITableViewController Class Reference。

单列表单 Table Celss

你可以采用标准的单列表单样式，定义表单中内容如何出现。

默认样式。单列表单的左侧为“可选图像+左对齐标题”。对于不需要补充信息的内容来讲，这是一个很好的选择。更多的实施细则，请查看 UITableViewCellStyleDefault。

小标题模式。 内容左对齐，大标题在上，小标题在下。采用小标题模式可以很好分行。 更多的实施细则，请查看 UITableViewCellStyleSubtitle。

补充说明1. 单列表单中，标题左对齐，小标题右对齐，且小标题采用更小的字号。 更多的实施细则，请查看 UITableViewCellStyleValue1。

补充说明2. 单列表单中，标题右对齐，小标题左对齐，且小标题采用更小的字号。更多的实施细则，请查看 UITableViewCellStyleValue2。

标准的单列表单样式也允许存在图形元素，如复选标签或标记。当然，增加这些图形元素，会减少列表标题和小标题的显示空间。

保持标题文字简洁性，避免被截断。被截断的词句很难被理解。标准单列表单样式中，标题文字是被自动截断的。而由于文字截断产生问题的多少，取决于采用哪种单列表单样式和定义截断何时发生（给出最大文字字符数，超出截断）。

测试选中态。选中表单内某行内容时，该行内容放大高亮。同时选中态样式包含圆角，这直接影响到该行中图形样式。基于此，如需使用图形元素，可直接采用表单圆角样式，而不增加额外的圆角。

考虑是否增加表单编辑功能。在Apple TV 上进行删除和重新排序操作，是一个缓慢而乏味的过程。因此需要考虑是否值得提供此类功能。

为用户定制个性化表单。用标准单列表单样式，满足绝大多数用户和使用场景，但是你的内容可能需要满足更多操作。这种情况下，相比于调整标准样式，为用户特别需求定制表单是一个更好的选择。 了解如何创建个性化表单，参考 Table View Programming Guide for iOS 中的 Customizing Cells。

更多的实施细则，请查看 UITableViewCell Class Reference。

内容集 Collections

内容集有序的管理一组内容，并在一个可自定义、高度可视化的页面中呈现。内容集不强制要求呈现线性格式，因此特别适合显示大小不同的内容。一般而言，内容集适合呈现图片相关内容。

当标准样式或网格布局足够满足需求时，避免进行全新设计。一个内容集应该提升用户体验，而非变成视觉焦点。

更容易的聚焦选项。在用户找到感兴趣的内容前，如果很难找到想找的内容选项，他将感到沮丧和丧失兴趣。 给图片周围足够留白，以保持内容清晰聚焦，同时避免内容重叠。

考虑使用表单组织文字，代替文字堆叠。在电视屏幕上，滚动列表中的文字信息，通常更简单和更易理解。

如果应用内容丰富，需要一个标准的网格布局呈现内容集，请考虑使用模板。详见 Templates 和 Apple TV Markup Language Reference。更多实施细则，请查看 UICollectionViewController Class Reference。

分屏视图 Split Views

分屏视图决定相邻2个内容面板的呈现样式。每个内容面板都可包含多种元素，如列表、内容集、图像和自定义视图。分屏视图中，一级面板显示固定的、可聚焦的内容；二级面板显示与之相关联的信息。分屏视图经常伴随着可筛选内容使用，一级面板中显示可筛选类别列表，二级面板中展示选中类别的具体内容。

根据内容选择效果最好的分屏视图。默认情况下，分屏视图以1:3的比例分隔屏幕空间，一级面板占据屏幕的1/3，二级面板占据2/3。当然屏幕也可按照1:1的比例分隔。基于内容本身，选择适当的分隔比例，以确保面板看上去均衡。

高亮一级面板中选中项。二级面板中内容是可变的，总是对应一级面板中选中项。这有助于用户理解面板之间关系。

每个分屏视图显示单独标题。 对于屏幕中多个标题，用户很难找出当前内容。相反，显示单独标题，提供了一个视图对应关系框架。

当二级视图显示了一个内容集合，考虑使用一个聚焦的标题。当二级视图包含了重要内容，考虑在一级视图上显示标题，这样就有更多的空间用来显示内容。

更多实施细则，请查看 UISplitViewController Class Reference。

6.3 文本和搜索 Text and Search

如果必要，你的应用可以申请基于文本信息来执行搜索、登录服务等等。需要留意的是，除非物理键盘连接，在Apple TV上的文本输入任务的体验可能较为乏味。

文本框 Text Field

输入区域是一个固定高度、带有圆角的单行文本框，在用户点击输入区域的时候可以自动调起一个键盘屏幕。通过使用输入框获取少量信息，例如电子邮件地址。

在应用中最小化文字输入。键入长段文本内容或是填写大量文字在Apple TV上是极为耗时的。减少输入并且考虑有效的收集展示信息，比如说带有按钮的形式。

文本框中的提示信息增强用户理解。当输入框内没有键入其他文字内容的时候，一个文本框可以展示占位文本 – 例如邮件地址或是密码。当占位提示文本内容足够清晰时，不要使用单独的标签来描述文本字段。

在条件允许的情况下，使用安全输入框。当你的应用需要获取一些敏感信息的时候，例如密码输入，尽量使用安全输入。

更多实施细节，请参见 UITextField Class Reference。

键盘 Keyboards

任何时候点击文本框都会自动弹起一个输入面板。屏幕风格由当时使用的输入设备决定。

线性面板。当用户使用Siri遥控器的触摸板时，线性的键盘会展现在屏幕上。这种风格优化了触控体验，使用户更快速更流畅的输入文字。

网格面板。当用户使用Siri遥控器以外的设备时，网格状的键盘会展现在屏幕上。内容布局会基于键盘类型自适应。

虽然你不能控制键盘屏幕风格，但是你可以指定键盘类型。

根据选择的内容，制定相应的输入面板类型。为特定类型的内容，Apple TV提供几种不同类型的键盘设计，使输入更加便利。相对应的键盘让输入过程更轻松，比如输入名字，邮箱地址或是数字。有关可用键盘类型的列表，请参阅UITextInputTraits Protocol Reference的UIKeyboardType。要了解你的应用内的键盘管理，请参考 Text Programming Guide for iOS的 Managing the Keyboard。

在适当的时候选择使用附属视图。键盘屏幕包含一个可选的附属视图。使用此区域提供有关您所收集的数据上下文和其他信息。例如，您可以添加您的应用程序标识和标签到附属视图，告知用户“请输入您的电子邮件地址登录到您的MyApp的帐户”。更多实施细节，请参阅Text Programming Guide for iOS的 Custom Views for Data Input。

搜索 Search

搜索屏幕是一个专用键盘屏幕，用来执行搜索输入操作。在此屏幕上，搜索结果将以可定制视图形式，显示在键盘下呈现。

允许用户使用近期搜索记录。用户经常在Apple TV上搜索重复内容。在用户开始输入前，通过在键盘下方罗列出流行或近期搜索结果，减少重复输入。

简化搜索结果。不提供需要大量滚动查看的冗长搜索结果列表。使信息易于获取，例如，将搜索结果分为多列，或呈现最匹配的搜索结果信息集合。

考虑让用户手动过滤搜索结果。如果可以，在搜索结果区域设置一个筛选区，以帮助人们方便快捷的过滤搜索结果。

更多实施细节，请参见 UISearchController Class Reference。

6.4 按钮 Buttons

应用特定的启动按钮可以包含一个标题和图标。

一般情况下，使用标题名称或图标来传达按钮的语义。由于按钮空间有限，为了避免拥挤和视觉复杂性，尽量不合并文本和图标。

明确标签和破坏性操作。如果点击一个按钮操作，导致不可逆转的结果，如删除内容，请确保这个按钮的指示性是非常明确的。使用明确描述的标签，如“删除”或相应的图标。在执行破坏性操作之前显示一个警告要求确认，也是很好的做法。

不要使用后退按钮。用户习惯于通过点击遥控器上的菜单按键带他们返回上一级界面或回到主菜单。除非你的应用有正当的理由去使用额外的后退按钮，尽量不要在你的页面上加入返回按钮。

对于实施细节，参见 UIButton Class Reference。

按钮图标 Button Icons

使用简单、可识别图形作为按钮图标。在电视屏幕上，太多细节的图标很难解释。保持图标简洁更好的传达信息。有可能的话，使用通用图标帮助理解，例如放大镜图标代表执行搜索。

按钮文字 Button Text

如果合适的话，在图标下方显示描述性文本。一个图标通常足够表达含义。但如果附加的文字描述提供了有用的信息内容，则把它放在按钮下方。

使用动词或动词短语来描述一个按钮的操作。以操作行为为特定标题，表示交互性，并且明确了单击该按钮时会发生什么。

使用大写式标题。除了文章以外，大写按钮上的每一个字，并列连词，和四个字母以下的介词。

确保按钮文本简短，重点突出。过长的文字可能被截断，从而使其难以阅读。

6.5 导航栏 Navigation Bars

你可以在视窗的顶部增加一个导航栏，用来展示标题、导航按钮、以及其他交互元素。应用设置使用一个导航栏，导航栏的标题用来提供内容信息，让用户随时知道处于应用的哪个位置。

请注意透明度。导航栏默认就是透明的，所以所有在导航栏下面滚动的内容都是清晰可见的。确保导航栏里的交互元素不要与底下内容元素有所冲突。当内容滚动时，考虑把导航栏下的内容元素淡化，从视觉上将它们与导航栏上的元素区分开。

6.6 页面控制器 Page Controls

有些应用会把内容分散到多个页面上呈现，一个页面控制器可以清楚地告诉用户总共的页面数量，以及现在处于哪个页面。它的呈现方式就是有一连串小的空心的指示原点，可以从左边滑动到右边，同时呈现出页面数量及顺序。一个实心原点指示的是当前页面。视觉上来说，这些小点的间隔是相同的，如果点数太多的话，屏幕上会省略掉一部分。

页面控制器它本身是一个非交互的元素，只是作为信息呈现的功能使用。它并不真正的具有导航的作用－比如说，你不能点击一个小点去到一个特定的页面。相对应的，真正的页面之间的导航会使用其他的交互机制，比如说手势控制以及分离按钮的按压／点击。

请在完整的屏幕页面上使用页面控制器。当全屏页面的内容很多且是同级情况下，使用页面控制器。在页面间切换时，尽量避免使用额外的交互方式，保持用户注意力集中。

不要展示太多的页面。超过10个小点，用户很难让一眼就数过来；然后超过大约20页的话，用户查看起来就会非常耗时。如果你的应用需要展示超过20个同级页面时，请考虑使用不同的设计方式，比如网格，因为网格不需要按照既定顺序来导航。

更多的实施细则，请查看 UIPageControl Class Reference。

6.7 进度指示器 Progress Indicators

不要让用户坐在那死盯着一个静止的屏幕，等待应用加载内容或者呈现冗长的数据处理操作过程。利用动态的指示图标还有进度指示条来让用户知道应用正在加载中，同时告诉他们还要等多久。

动态的指示图标 Activity Indicators

一个动态的旋转指示图标用来表示比较难测量时间的任务的加载，比如说正在加载或者同步复杂的数据。当任务完成时，这个图标就会消失。

相比于动态指示图标，多使用进度指示条。如果任务是可以被计算测量时间的，请不要使用指示图标（就是那个旋转的小圈圈），请使用进度指示条，这样用户就能更好的评估正在发生什么，还需要等待多少时间。

保证指示图标是动态显示的。用户会自然而然地将静止的活动图标（也就是本应该活动的东西）当作是死机的迹象，所以让那个小圈圈一直转着可以让他们知道应用正在运作。

在用户等待加载的时候，可以给他们提供一些有用的信息。这些有用的信息可以是在动态指示图标上增加的文字信息。不要增加意思模糊的术语，比如说正在加载或者正在授权这样的字眼，因为它们并不会更好地帮助用户理解。

想看更多的细节信息，可以参考 UIActivityIndicatorView Class Reference。

进度指示条 Progress Bars

进度指示条是用来显示可测量任务的加载进度的，表现为一条从左到右填充的轨迹。

精准告知用户任务的加载进度。不要为了让应用看起来很忙，而显示不精准的进度信息。如果任务是可被测量时间的，使用进度指示条，否则使用动态指示图标。

进度指示条适用于可测量时间的任务。进度指示条有益于显示任务状态，尤其是它能告知用户完成当前任务，还需多长时间。

更多实施细则，请查看 UIProgressView Class Reference。

6.8 分段控件 Segmented Controls

分段控件是指一串线性排布的控件，每个控件都作为一个按钮来呈现不同的视图。分段控件包含两个或两个以上、统一比例的控件，单个控件包含了标题或图标。利用一个分段控件来提供功能联系非常紧密，但是又互不兼容的一些功能，比如说播放列表和唱片集。

不要把其他很容易被用户注意到的元素放在分段控件旁边。只要聚焦到这些控件上，就会被选中，所以要十分注意它与其他交互元素位置摆放，尤其是当这个分段控件与页面的其他交互元素是相关联的。如果其他容易被注意到的元素和分段控件太近，用户在切换不同控件时，可能会容易引起误操作。

考虑在屏幕上，将内容以控件形式分割成多个模块，帮助用户进行信息过滤。在分离模块环境下，用户操作导航定位和内容筛选时，会来得更加轻松。一个控件操作的难易程度，取决于该控件的放置位置。

控制好控件数量。超过7个控件就会使用户很难一眼分辨出来，而且在定位时也会变得非常费时。另外，尽量保证各个控件的大小与它所包含的内容匹配。因为所有的的控件是相同的宽度，如果一些控件里有内容，一些控件里没什么内容，这样看起来就不是很舒服。

避免把文本和图标混在一起。单独的控件可以包含文字标题或者图标，但是不要同时涵盖。最好避免在一些控件里使用文字标题，然后在其他控件里使用图标。否则，你的应用界面内容看起来就会非常多且琐碎。

在定制化分段控件中，适当地排布内容。如果你定制化了分段控件的样式，请确保内容——尤其当它们居中的时候——仍然美观。

更多的实施细则，请查看 UISegmentedControl Class Reference。

控件图标 Segment Icons

利用简单、可识别的图形来来作为控件图标。在电视屏幕上，太多细节的图标很难解释。保持图标简洁更好的传达信息。有可能的话，使用通用图标帮助理解。

控件文本 Segment Text

使用短的，具有含义的名词作为控件标题。一个控件的标题清楚地传达出当控件被选中后，它所呈现的内容类型。一般来说，标题应该使用名词。

使用大写式标题。除了文章以外，大写按钮上的每一个字，并列连词，和四个字母以下的介词。

确保文本简短，重点突出。过长的文字可能被截断，从而使其难以阅读。

6.9 提醒 Alerts

与应用或设备所处的状态相关的重要信息，且需要用户反馈时，弹出全屏提醒弹窗。提醒弹窗包含一个标题、一个或多个按钮、以及可以附加文字说明。除了上述的内容元素，提醒弹窗的样式应该是静止的，且与系统统一。

尽量减少提醒弹窗的使用。提醒弹窗会阻断用户体验，除非在非常重要紧急的情况下使用，比如执行毁灭性操作（删除等）、购买、或者出现问题需要告知用户时。提醒弹窗的不时出现会帮助用户对于当前动作提高注意力，设计者要确保每一个提醒都提供非常重要的信息以及有用的选择。

更多的实行细则，请查看 UIAlertController Class Reference。

提醒标题和信息 Alert Title and Messages

提醒标题使用多词。单个词的标题，比如说“看”或者“租”，很少能够提供有用的信息。

使用一个描述性的提醒标题，就可以代替文字段描述。用户在屏幕上所读取到的文字内容越少越好。考虑使用问问题的方式或者使用两个短句子来作为你的提醒标题，以此来避免增加附加文字段信息。

如果你必须要提供附加文字段提醒信息，保持精简，使用完整的句子。理想话来讲，要确保信息足够短，只需要在1行或者2行内展示，避免滚动查看，使用大写和合适的标点符号。

提醒按钮 Alert Buttons

一般来说，使用含有两个按钮的提醒弹窗。提醒弹窗包含2个简单的选项。如果只有单个按钮，使得用户没有选择的余地；大于等于3个按钮就会增加操作的复杂性。提醒弹窗的按钮应该简洁明了，且标题具有逻辑性。按钮标题最好由1到2个描述结果的单词组成，以下是一些是在设计提醒弹窗按钮时的一些准则：

• 所有的按钮标题，应该大写且结尾没有标点符号
• 尽可能使用与提醒弹窗标题与附加文字信息相关的动词或者动词短语，比如说“查看全部”、“回复”、“忽略”
• 简单的接受操作使用ok。避免使用yes或no
• 按钮标题避免使用你、你的、我、我的这类人称代词，因为这些字眼看起来模棱两可，且有时候用户会认为带有侮辱性

提醒弹窗的取消标签要易操作。取消提醒弹窗的按钮标签，应该足够明显，比如使用取消或撤销的字眼。

如果提醒弹窗的某个按钮操作具有破坏性，其按钮样式应该具有高辨识度。一个不可逆操作的提醒按钮，比如删除，在样式设计上强化，使其与系统相一致。更多的实行细则，请查看 UIAlertActionStyleDestructive。

允许使用遥控器来取消提醒弹窗。按下遥控器上的菜单按钮可以产生与单击取消按钮一样的效果，也就是说，你按下遥控器上的菜单按钮也可以退出提醒。如果你的提醒弹窗没有一个取消按钮，可以考虑给你的菜单按钮添加退出提醒弹窗的代码。

原文地址：https://developer.apple.com/tvos/human-interface-guidelines/

本文来自MUX

本次主要翻译了iOS Human Interface Guideline的Part 4-UI Element的后半部分，包括控件(Controls)和临时视图(Temporary Views)。本次翻译与截至2013年10月20日的苹果官方文档相匹配。
如您在阅读中发现任何疏漏，恳切地希望您提出宝贵的意见和建议，感谢。

重要：这是一份针对API或其它相关技术开发而准备的预备文档。尽管文档在专业精确程度上已经过多次审查，它仍不是最终版本。文档仅供已注册苹果开发者计划的开发者使用。苹果提供这份文档的目的，是帮助开发者根据文档来规划自身应用的开发技术与界面设计。这些信息将可能发生变化，您的应用也应当根据最新的操作系统与最终文档进行相应的调整。该文档可能会由于API与相关技术的发展而更新版本。

控件(Controls)

活动指示器(Activity Indicator)

活动指示器表明任务或进程正在进行中，如下图所示。

API提示：想要了解如何在代码中定义活动指示器，可以参考UIActivityIndicatorView Class Reference.

活动指示器：

• 当任务进行和加载时旋转，任务完成后自动消失
• 不支持用户交互行为

在工具栏或主视图中使用活动指示器来告知用户任务或加载正在进行中，但并不提示该过程何时会结束。

不要使用静止的活动指示器。用户会以为该进程停滞了。

用活动指示器来让用户知道进程仍在进行中。有些时候，告诉用户进程没有停止比告诉他们何时完成更加重要。

可以的话，最好可以设计一个与应用的风格协调的活动指示器。

添加联系人按钮(Contact Add Button)

添加联系人按钮让用户将现有联系人添加到文本框或者其它文字视图中。

API提示：想要了解如何在代码中国定义添加联系人按钮，参考Buttons.

添加联系人按钮：

• 展示联系人列表
• 帮助用户将一个联系人添加到当前联系人按钮所在的视图中

使用添加联系人按钮让用户在不需要使用键盘的情况下就可以方便地访问到联系人。举个例子，在新建邮件的界面中，用户可以点击该按钮来添加收件人，而不需要用键盘输入收件人的名字。

由于添加联系人按钮属于键盘输入联系人方法的替代品，我们不推荐在不支持键盘输入的界面中使用添加联系人按钮。

日期时间选择器(Date Picker)

日期时间选择器展示关于日期和时间的组件，比如小时，分钟，天，以及年。

API提示：想要了解如何在代码中定义日期选择器，请参考 Date Pickers.

日期时间选择器：

• 最多可以展示4个独立的滑轮，每一个滑轮表示一个不同的值，比如月份或小时等
• 在每个滑轮的中央使用深色字体来表示当前选中的值
• 日期时间选择器的大小与iPhone键盘的大小相同，并且不可更改
• 包括四种模式，每一种模式代表了一组不同的值：

· 日期和时间。日期和时间模式（默认模式）包含日期、小时、和分钟，以及一个可选的AM/PM值。

· 时间。时间模式包括小时和分钟，以及可选的AM/PM值。

· 日期。日期模式包括月份，天以及年三个值。

· 倒计时器。倒计时器模式展示了小时和分钟值。你可以精确地设定总共的倒计时间，倒计时的最大值为23小时59分钟。

使用日期时间选择器来让用户选择时间，而不是让用户自己输入一个包含了日期、时间等多个部分的时间值。

尽量地让用户在当前内容中使用日期选择器。最好避免用户在使用日期选择器的时候要进入另外一个界面。在iPad上，日期时间选择器可能会出现在一个浮层中，或者嵌入在当前内容里。

有必要的时候，改变分钟滑轮的单位刻度。在默认情况下，分钟滑轮包含从0到59共60个值，如果你要展示一个颗粒度较大的时间，你可以让分钟滑轮的单位刻度变大，只要这个刻度可以整除60。比如说你可能会设定每15分钟为一个刻度，此时分钟滑轮就有4个值，0、15、30、45。

详情展开按钮(Detail Disclosure Button)

详情展开按钮展示了与该项相关的更多详细信息与功能描述。

API提示：想要了解如何在代码中定义详情展开按钮，可以参考 UITableViewCell Class Reference 和 Buttons.

详情展开按钮以一个单独的视图展示特定项目的更多详情信息与功能。

当详情展开按钮在表格行中出现时，点击表格行的其它区域不会激活此按钮，只会选中该行，或者触发app中其它自定义的行为。

一般来说，你会在一个表格视图中使用详情展开按钮来让用户知道更多关于这个列表项的信息。当然你也可以将这个按钮用在其它类型的视图中来为用户展示更多与特定项目相关的信息和功能。

信息按钮(Info Button)

信息按钮展示了app的配置信息，有时候它会出现在当前视图的背面。

API提示：想要了解如何在代码中定义信息按钮，可以参考Buttons.

iOS包含了两种信息按钮样式：适用于浅色内容上的深色按钮，以及适用于深色内容上的浅色按钮。

使用信息按钮来显示app的配置信息或选项。你可以根据自己app的UI风格来选择最为协调的信息按钮样式。

标签(Label)

标签用于放置静态文本。

API提示：想要了解如何在代码中定义标签，可以参考UILabel Class Reference.

标签可以：

• 展示任意数量的静态文本
• 禁止除了复制文本外的任何用户交互行为

你可以使用标签来命名或解释你的部分UI，又或者用它来给用户提供一些简单的信息。标签最适合拿来展示相对简单的文本信息。

保证你的标签清晰易读。最好支持动态文本(Dynamic Type)，并使用 UIFont 中的preferredFontForTextStyle来获得标签中的展示文本。如果你要用自定义字体的话，请慎重选择字体种类，不要以牺牲清晰度为代价来换取花哨的颜色和字体效果。（想要了解关于app中字体使用的指南，可以参考 Color and Typography;想要了解更多动态文本的内容，可以参考 Text Programming Guide for iOS 里面 的 Text Styles 部分。）

网络活动指示器(Network Activity Indicator)

网络活动指示器在状态栏中出现，表示网络活动正在进行。

API提示：你可以在代码中使用 UIApplication Method networkActivityIndicatorVisible 来控制该活动指示器的可见性。

网络活动指示器：

• 出现在状态栏中，当网络活动正在进行时它会旋转，在活动停止时它则消失
• 不支持用户交互行为

当你的app正在链接网络，而这个连接过程将会持续好几秒的时候，你可以通过网络活动指示器来给用户以反馈。如果进程所需时间很短，则不需要用到它，因为很可能在用户注意到它之前，它就消失了。

页面控件(Page Control)

页面控件告诉用户当前共打开了多少个视图，还有他们正处在其中哪一个。

API提示：想要了解如何在代码中定义页面控件，可以参考 Page Controls.

页面控件：

• 包含一系列圆点，圆点的个数代表了当前打开的视图数量（从左到右，这些圆点代表了视图打开的先后顺序）。
• 默认情况下，使用不透明点来标识当前打开的视图，使用半透明点来表示所有其它视图。
• 不支持用户访问不连续的视图
• 当视图数量超过页面宽度可承载的氛围时，点的大小和间距并不会因此变小，如果需要显示的点超过一定数量，系统会把它截断。

当你的app中所有的视图都属于同级的时候，你可以使页面控件。

当你的app结构存在信息层级，请不要使用页面控件。因为页面控件不能让用户跟踪自己的访问路径，回到上一级。

将页面控件垂直居中放置于当前打开视图的底边与屏幕底边之间，这样可以保证它的可见性而又不会对内容造成干扰。避免展示太多的点，一般来说，iPhone竖屏方向最多可以容纳差不多20个点。

选择器(Picker)

选择器展示了一组值，用户可以从中选择一个。

API提示：想要了解如何在代码中定义选择器，请参考UIPickerView Class Reference.

选择器：

• 是日期时间选择器的通用模式
• 包括一个或多个滑轮，每个滑轮含有一组值
• 当前选中的值在中间，以深色标识
• 不可以自定义大小（选择器的大小与iPhone的键盘相同）

使用选择器可以让用户更容易从一系列不同的值中间进行选择。

一般来说，当用户对整组值都比较熟悉的时候，可以使用选择器。由于当滑轮静止的时候，大部分的数值会被隐藏，最好是在用户对所有数值均有预期的情况下才使用选择器。当你需要展示一大组用户并不熟悉的选项，此种选择器可能不太适合。

尽可能让让用户在当前视图中使用选择器。不要让他们在使用选择器时还要进入其它的视图。

如果你需要展示的备选项数量很多，考虑使用表格视图(Table View)而不是选择器。因为表格视图的高度较大，内容滚动起来会更快。

进度视图（Progress View）

进度视图展示了任务或进程的进度（下图是iOS默认邮件App的工具栏）。

API提示：想要了解更多如何在代码中定义进度视图，参考UIProgressView Class Reference.

进度视图：

• 是一条轨迹，随着进程的进行从左向右进行填充
• 不支持用户交互行为

iOS定义了两种进度视图样式：

• 默认(Default).默认样式适合用在app的主要内容区中。
• 进度条(Bar).此样式比默认样式细，适合用在工具栏中。

当一个任务存在明确的进程，可以使用进度条来给与用户反馈，尤其是告诉用户这个任务大约需要多少时间才能完成。

可以的话，请根据你的app的风格来设计进度条的外观。你可以自定义进度条的底色以及轨迹颜色，也可以直接使用图片。

刷新控件(Refresh Control)

刷新控件执行用户触发的内容刷新——一个典型的例子，它常在表格中出现（下图展示的是iOS默认的邮件app的mailbox列表页）。

API提示：想要了解如何在代码中定义刷新控件，请参考 UIRefreshControl Class Reference.

刷新控件：

• 看起来类似活动指示器
• 可以出现在标题中
• 默认状态下不可见，当用户在表格上缘往下拖拽以刷新内容时才出现

就算你使用了刷新控件，也不要因此就不支持内容自动刷新。尽管用户喜欢在执行刷新操作时内容立刻刷新，他们也同样会喜欢内容自动刷新。如果过于一来用户自己执行所有刷新操作的话，那些不会自动刷新的用户就会疑惑，为何你app中的数据永远都不更新。一般来说，刷新控件给了用户多一个选择，让他们可以立刻获得最新的内容，但同时，你也不能奢望用户会主动获取所有的更新信息。

只有在必要的时候才加短标题。特别需要注意的是，不要使用短标题来描述刷新控件怎么使用。

圆角矩形按钮(Rounded Rectangle Button)

iOS 7已经不再使用圆角矩形按钮，而是使用了新的系统按钮——类型为UIButtonTypeSystem的UI按钮(UIButton).使用指南可参考 System Button.

分段控件(Segmented Control)

分段控件是一组分段的线性集合，每一个分段的作用类似按钮，点击之后将切换到相应的视图。

API提示：想要了解如何在代码中定义分段控件，请参考 Segmented Controls.

分段控件：

• 由两个或以上的分段组成，每一个分段的宽度相同，与分段的数量成比例（分段数量越多，则宽度越小）；
• 可以包含文字或者图片

使用分段控件来提供密切相关而又互斥的选项。

保证每个分段都容易点击。为了保证每个分段的大小有至少44×44像素，请控制分段的数量。在iPhone上，1个分段控件最多包含5个分段。

尽可能地保持每个分段中的文字长度一致。因为每个分段都是等宽的，当文本长度差异很大时看上去会很不协调。

不要在同一个分段控件中混用文字和图片。每一个分段都仅可支持纯文字或纯图片。避免在同一个分段控件中，一些分段里使用纯文字，另一些分段里使用纯图。

如果你自定义了分段控件的外观，请在必要时调整分段控件中文本的对齐方式。如果你给分段控件添加了自定义底图，请确保控件里自动居中的文本依然清晰美观。你可以通过bar metrics APIs 来调整分段控件内文本的对齐方式(想要了解如何定义bar metrics，可以参考UISegmentedControl 中关于自定义API外观(appearance-customization APIs)的描述)。

滑块(Slider)

滑块允许用户在一个限定范围内调整某个数值或进程(下图展示的是iOS设置中亮度设置的滑块，滑块的左边和右边均为自定义图形)。

API提示：想要了解如何在代码中定义滑块，请参考 Sliders.

• 由一条水平的轨迹和一个Thumb(滑块中支持用户水平拖拽的圆形控件)组成
• 左边和右边支持使用自定义图片来表述相对的最小值与最大值的含义
• 填充轨道左边缘最小值之间到Thumb之间的部分

使用滑块来让用户精准地选择自己想要的值，或者控制当前的进程。

如果合适的话，自定义滑块的外观。比如，你可以：

• 定义Thumb的外观，让用户一看就知道滑块当前的状态
• 在轨迹的左右两端使用自定义图片来告诉用户滑块的最小值和最大值所代表的含义。比如说，一个图调整图片尺寸的滑块可以在最小值的左边放一张小图，在最大值的右边放一张大图。
• 根据Thumb所在的位置和当前滑块的状态来为滑块的轨迹定义不同的颜色

步进器(Stepper)

步进器可以以常数为幅度来增减当前数值。

API提示：想要了解如何在代码中定义步进器，请参考 Steppers.

步进器：

• 是一个两段控件，其中一段默认显示减号，另一端默认显示加号
• 支持自定义图片
• 不展示用户更改的值

当用户想要对数值进行小幅度调整时，可以使用步进器

当用户需要大幅度调整数值的时候，不要使用步进器。用户可能会在打印机里使用步进器来确定打印份数，因为这个值的变化幅度通常并不大；而当用户需要选择打印的页码范围时，使用步进器就会让操作变得繁琐，因为用户很可能要点很多下才能选定页数。

确保步进器所调整的值明显可见。步进器自身不展示任何数值，所以你需要保证让用户知道他们正在调整哪一个数值。

开关按钮(Switch)

一个开关按钮展示了两个互斥的选项或状态。

API提示：想要了解如何在代码中定义开关，参考 Switches.

开关按钮：

• 显示了一个项存在二元状态
• 仅在表格视图中可用

在表格中使用开关按钮来让用户从某一项的两个互斥状态中指定一个，比如是/否(Yes/No)，开/关(On/Off)。

你可以使用开关按钮来控制视图中的其它UI元素。根据用户的选择，新的列表项可能出现或者消失，或从激活状态变为不激活状态。

系统按钮(System Button)

系统按钮执行app中定义的行为。

API提示：在iOS 7中，UIButtonTypeRoundedRect已经被重新定义为 UIButtonTypeSystem. 如果在iOS 6中使用了圆角矩形按钮，在连接到iOS 7的时候会自动替换为新的系统按钮。想要了解如何在代码中定义系统按钮，参考 Buttons.

系统按钮：

• 默认状态下不含边界，也不含背景图
• 可以是图标或者文字标题
• 支持自定义样式，如描边或者加背景图(想要自定义按钮外观，可以使用 UIButtonTypeCustom 类型的按钮，并且提供背景图片)

使用系统按钮来执行某个动作。当你为系统按钮命名时，请遵循以下方法：

• 使用动词或动词短语来描述按钮所代表的动作。这种命名方法告诉用户这个按钮是可交互的，也提示了用户点击之后会执行什么操作
• 使用标题式大写(title-style capitalization，每个单词的首字母均大写)。除了冠词，并列连词以及少于4个字母的介词外，标题中每个单词的首字母均大写。
• 标题不要太长。太长的标题会被截断，让用户难以理解其含义。

合适的话，为内容区域内的系统按钮描边或者加入背景。大多数情况下，你可以通过定义一个清晰的按钮名称、选择一个不一样的标题颜色或提供上下文情景提示来让用户知道这是一个按钮而非普通文本。但在某些特定的内容区域内，为按钮描边或者添加背景颜色，让用户迅速地把注意力放到按钮上，也是必要的。

以iPhone为例，给数字按键添加圆形边框强化了用户拨电话号码时的心理模型，而结束(End)和隐藏(Hide)按钮的背景色让用户拥有了更大的点击范围。

文本框(Text Field)

文本框支持用户输入单行的文本。

API提示：想要了解如何在代码中定义文本框，以及在文本框中支持图片和按钮，请参考 Text Fields.

文本框：

• 高度固定，包含圆角
• 当用户点击它时，自动唤起输入键盘
• 可以包含系统提供的按钮，如书签按钮(Bookmarks)
• 可以展示多种文字样式(了解更多请参考 UITextView)

使用文本框来获取用户输入的少量信息。

你可以自定义一个文本框，帮助用户更好地理解如何使用它。举个例子，你可以在文本框的左侧或者右侧加入自定义图形，或者加入系统按钮，如书签按钮等。一般来说，文本框的左侧用于表述文本框的含义，而右侧用于展示附加的功能，如书签。

合适的话，在文本框右侧加入清除按钮。轻击清除按钮变可清空当前框内输入的全部内容，无论你原本打算在这个按钮上面展示什么其它图片。

如果可以帮助用户理解的话，可以在文本框中加入提示文字。当文本框里没有任何其它提示文字时，会展示占位符文本(placeholder text)，如名字、地址等。

根据输入内容的类型来指定不同的键盘类型。举例来说，你希望用户能更方便地输入网址、密码或者电话号码。iOS提供了各种不同的键盘类型，以便用户输入不同类型的文本。想要了解可用键盘类型，可以参考 UITextInputTraits Protocol Reference中的UIKeyboardType.想要了解如何在管理你的应用中的键盘，请参考iOS App Programming Guide中的Managing the Keyboard部分。但请注意，由于键盘的布局以及输入方法是由用户的系统语言设置决定的，这是你不能控制的。

临时视图(Temporary Views)

警告框(Alert)

警告框用于告知用户一些会影响到他们使用app或设备的重要信息。

API提示：想要了解如何在代码中定义警告，参考UIAlertView Class Reference.

警告框：

• 必须包含标题，有时候会包含正文文本
• 包含一个或多个按钮

一般来说，警告框警告出现的频率较低，也正因为如此，警告的出现通常会让用户额外重视。请严格控制你的app中警告的个数，并且保证每一个警告都能提供重要的信息，或者有用的选项。

避免出现不必要的警告框。一般来说，在以下情景中，是不需要用到警告框的：

当你在设计警告文案的时候，了解以下这些定义非常有用：

• 标题式大写(Title-style capitalization)指的是除了冠词，并列连词以及少于4个字母且不处在第一个单词位置上的介词外，标题中每个单词的首字母均大写。
• 句子式大写(Sentence-style capitalization)指的是第一个字母大写，其余除了专有名词和专有形容词外的字母均小写

简明扼要地描述当前情景，并告诉用户他们可以做什么。理想情况下，警告框中的文字应该给与用户足够的情景和上下文联想，让他们可以清楚地知道为什么警告会出现，同时帮助他们判断自己应该点哪个按钮。

保证标题足够简短，最好在一行之内。过长的标题让用户很难快速理解它的意思，还可能会被截断。

如果可以的话，使用句子片段而非完整的句子。一个简洁清晰的状态描述往往比一个完整的句子更容易理解。

尽可能的精炼你的标题文字，让警告框即使没有下面的正文信息也能完全让用户理解。举个例子，当你使用一个问题，或者两个短句来作为警告框标题的话，很可能你并不需要添加文本信息。

不用刻意避免在警告框中使用消极负面的文案。用户们理解大多数警告框是为了告诉他们发生的问题，或者对他们目前的状态作出警告。因此消极但清晰直接的文案优于积极但晦涩间接的文案。

尽可能地避免使用”你”，”你的”，”我”，”我的”这类字眼。有时候，这些直接指向的字眼容易引起歧义，有时候甚至会被误认为是一种冒犯。

适当地使用大写和标点符号，尤其是在以下这些场景中：

如果你必须为警告框添加正文文本，请使用一个完整的短句。可能的话，尽量保证句子在1到2行之间。如果句子太长，用户会需要滚动才能看完，这样的体验很糟。使用句子式大写，并在句末加上适当的标点符号。

 避免在文本中详细描述“该按哪个按钮”而导致文本过长。理想情况下，表意明确的警告文案和逻辑清晰的按钮文案已经足以让用户正确判断自己该按哪个按钮了。但如果你一定要在文案中描述这些内容，请遵循以下原则：

• 确定使用轻击(tap)来描述这个选择操作，不要用触摸(touch)、点击(click)或者选择(choose)这类字眼。
• 不要用引号，但保证大写

确保警告框在竖屏和横屏中均显示正常。横屏模式下警告框的高度会受到限制，其大小与竖屏下可能会有区别。我们推荐您限定好警告框的最大高度，保证在竖屏和横屏模式下文字均能不需要滚动便可完整地显示。

一般情况下，使用两个按钮的警告框。两个按钮的警告框是最为常见和有用的，因为它最便于用户在两个按钮中做选择。单按钮警告框不那么有用，因为它通常只是起到告知的作用，并未给予用户控制当前状态的能力。多于两个按钮的警告框太过复杂，应该尽可能地避免使用。如果你在警告框中设计了太多按钮，它也许会导致警告框被强制滚动，这也是一个非常糟糕的体验。

提示：如果你需要在警告框中给与用户超过2个选项，可以考虑使用操作列表来代替警告框。

正确地放置按钮。理想情况下，最容易点击也最不容易点错的按钮符合两个条件：它代表了用户最可能会选择的操作，即使用户一时不注意误点了它，也不会造成严重问题。尤其是：

• 如果这个按钮不会造成损害性结果，又是用户最有可能会选择的操作，那么它应该放在右边，取消按钮则应该放在左边
• 如果这个按钮会造成损害性后果，又是用户最有可能会选择的操作，那么它应该被放在左边，取消按钮应该放在右边

提示：一般来说，当警告框出现的时候，按Home键将会从该app里切回主屏幕，此时Home键的效果类似于取消按钮——当用户回到app中的时候，警告框将消失，操作也不会被执行。

为按钮设计简短而逻辑清晰的文案。好的按钮文案一般只有1到2个单词，描述用户点击按钮后的结果。设计文案时可以遵循以下指南：

• 跟其它所有按钮一样，使用标题式大写，而且不需要标点符号
• 尽可能的使用与警告文案直接相关的动词或动词词组，如”取消(Cancel)”，”允许(Allow)”和”回复(Reply)”等。
• 当没有更好的选择的时候，可以使用”OK”.避免使用”是(Yes)”或”否(No)”。
• 避免使用”你”，“你的”，“我”，“我的”这类字眼。含有这些字眼的文案可能会指代不清，还有可能造成冒犯。

操作列表(Action Sheet)

操作列表展示了与用户触发的操作直接相关的一系列选项。

API提示：想要了解如何在代码中定义操作列表，可以参考Action Sheets.

操作列表：

• 由用户某个操作行为触发
• 包含两个或以上的按钮

使用操作列表来：

提供完成一项任务的不同方法。操作列表提供一系列在当前情景下可以完成当前任务的操作，而这样的形式不会永久占用页面UI的空间。

在用户完成一项可能有风险的操作前获得用户的确认。操作列表让用户有机会停下来充分考虑当前操作可能导致的危险结果，并为他们提供了一些其它的选项，尤其是在以下这些情景下：

无论在哪种设备中，使用红色文字来表示可能存在破坏性的操作。在操作列表的顶部使用文字颜色为红色的按钮，因为越靠近列表顶部的操作越容易引起用户注意。在iPhone里，潜在风险的操作离列表底部越远，用户在关注Home键的时候就越不容易误点它。

避免让用户滚动操作列表。如果你的操作列表中存在过多按钮，用户必须要滚动才能看完所有操作。这样的体验是可能让用户不安，因为他们要花更多的时间来充分理解每个选项的区别。此外，用户在滚动的过程中将很有可能误点其它按钮。

模态视图(Modal View)

模态视图是一个以模态形式展现的视图，它为当前任务或当前工作流程提供独立的、自包含的(self-contained)功能。

API提示：想要了解如何在场景中定义模态视图，请参考UIViewController Class Reference.

模态视图：

• 占据整个屏幕，在iPad中，它也可能占据整个父视图(parent view)的区域
• 包含完成当前任务所需的文字和控件
• 通常也会包含一个完成任务的按钮（点击后即可完成任务，当前模态视图也会消失），和一个取消按钮（点击后即放弃当前任务，同时当前模态视图消失）

当需要用户完成与你的app中的基础功能相关的、独立的任务的时候，可以使用模态视图。模态视图尤其适用于那些所需元素并非常驻在app主要UI中、又包含多个步骤的子任务。

在iPad上，根据当前任务的种类和你的app的整体视觉风格来选择适当的模态视图。你可以使用以下定义的任何一种模态视图样式：

在iPad上，不要让模态视图覆盖在弹出层之上。除了警告框外，没有任何元素应该覆盖在弹出层上面。除非极其少有的情况下，用户在弹出层内进行的操作结果必须要以模态视图的形式展现，即便是这个时候，也请先将弹出层关闭，再出现模态视图。

在iPhone上，确保你的模态视图看起来与你的app的整体视觉风格相协调。举个例子，如果一个模态视图中含有导航条和取消或完成任务的按钮，这里的导航条样式应该与你的app中导航条一样。

无论是哪种设备，合适的话，在模态视图里加入可以说明任务内容的标题。你可能还需要在模态视图里加入一些补充文字，来清楚地阐明任务内容，并提供一些任务指南。

无论是哪种设备，选择一个适当的过渡动画来展示模态视图。使用与你的app一致的过渡动画，让用户可以准确地理解当前页面内容的转变与模态视图的出现。关于这一点，你可以指定以下任意一种过渡动画：

• 垂直出现(Vertical).模态视图从底部边缘滑入屏幕，也同样从屏幕底部滑出（默认模式）。
• 弹出(Flip).当前视图从右往左水平滑动，露出模态视图。从视觉上看，模态视图好像原来就处于当前视图的下面，当前视图移开时，它便出现了。离开模态视图时，原先的父视图从左边滑回屏幕右边。

如果你要改变当前的过渡动画样式，请确保这种改变对于用户而言是有用而且有意义的。用户很容易便能感知到这些改变，还会认为这些改变存在特别的意义。最好能设计出一种符合逻辑并始终保持一致的过渡方式，让用户容易感知并且记忆。在没有充分理由支持的情况下，最好不要改变这些默认的过渡方式。

翻译原文下载：iOS  Human Interface Guidelines
中文翻译PDF下载：ios人机界面指南（UI元素（下））ISUX原创翻译