Apple TV 人机界面指南 4：视觉设计

2017-04-19 14:34:00

此文译自苹果发布的《tvOS Human Interface Guidelines》。希望能帮助中国的设计师们更好地了解 Apple TV 的设计规范。

译时仓促，如在阅读中发现错误与疏漏之处，欢迎发邮件至 liz1916@163.com 告知我。后续也会给出 Google TV、Fire TV 的译作，敬请关注。

「第四章视觉设计」

章节目录

4.1 布局

4.2 字体

4.3 品牌传播

4.4 颜色

4.5 质感

4.6 视频

4.7 动效

Apple TV 上的应用是具有独特设计及用户体验考量的全沉浸式应用。以下这些原则有助于设计你的应用，并会在用户使用应用时，反映应用的品牌调性。

4.1 布局

电视的尺寸五花八门，但 Apple TV 的应用布局却不像 iOS 应用那样会自动适配屏幕尺寸。事实上，它们在不同显示器上显示的界面分辨率都是一样的。因此设计时要特别注意，让应用在各种屏幕尺寸上都呈现完美的布局。

为大屏优化图片素材。以 1920 x 1080 像素（1080p）的屏幕分辨率设计应用的用户界面，这意味着是 16：9 的宽屏比例。所有图片素材都应是 @1x 的分辨率。

使主要内容与屏幕边缘保持一定距离。留意距屏幕上下边缘 60px、左右边缘 90px 的区域。与这些区域靠得太近会导致内容难以辨识，而且，在老式电视上由于溢出扫描的原因，会发生裁切图像这类意外。

可获取焦点的元素之间要有适当的间距。如果你使用 UIKit 和焦点 API，元素在获得焦点时会变大。考虑元素焦点态时的显示，确保它们不会无意中遮挡住重要信息。

显示部分屏外内容，以暗示有隐藏内容。在内容很多无法于一屏放下时，可以展示部分屏幕外的内容，来暗示用户还有更多的内容。

使用布局模版创建媒体为主的应用。如果你的应用布局仅需要极少的自定义，同时又要求内容展示精美，建议使用预设的布局模版。请参阅《 Layout Templates 》。

4.1.1 栅格

Apple TV 上的栅格形式可以更好地展现内容集合。这种形式的呈现效果非常出色，而且方便用户在远距离使用遥控器快速浏览内容。

以下栅格布局提供了最佳视觉体验。确保在非焦点项的水平、垂直方向均留出适当的间距，避免元素在切换为焦点态时发生遮挡。

如果你使用 UIKit 提供的内容流样式，那么栅格列数会依据内容的宽度和间距自动做出调整。相关开发者指南，请参阅《 UI Collection View Flow Layout 》。

遵守屏幕的安全区限制。将主要内容展示在距上下边缘 60px、左右边缘 90px 的区域内。只有少部分故意露出的当前屏外内容或元素能显示在上述区域外。

为标题行设置额外的垂直间距。如果一行内容有标题，请在标题行中部与非焦点态的上一行底部间留出适当的间距。接着，在标题底部与非焦点态的内容顶部间留出额外间距。

使用统一的间距。不一致的间距会使栅格看起来不像栅格，并且不利于用户浏览。

保持屏幕两边的隐藏内容尺寸左右对称。为了让可见内容更快获得用户注意力，确保屏幕两边的屏外隐藏内容宽度一致。

4.1.2 布局模版

Apple TV 提供美观且布局一致的模版摆放内容，使内容成为视觉中心。这些模版基于 JavaScript 以及 Apple TV 标记语言(TVML)开发。使用应用时，它们会动态加载并填充内容。在 Apple TV 上使用预设布局的模版，可以帮助你灵活创建显示精良的丰富内容，是流媒体应用的理想选择。

自定义模版时，保持品位与克制。虽然布局模版可高度自定义（可以控制背景、颜色、尺寸、布局，甚至更多），在设计应用时仍要尽量遵循内容优先原则，避免出现会分散用户注意力、不和谐或突兀的自定义内容。

在使用模版前了解它的目的。如果你的自定义使基础模版难以识别，请考虑使用其他模版或者构建完全自定义的界面。

关于在应用中使用模版的具体细节，请参阅《 Apple TV Markup Language Reference 》。

通知模版

通知模版可以在屏幕上显示信息并向用户请求许可执行操作，比如确认购买、或删除这类消极操作。

更多请参阅《 Interface Elements 》中的《 [Alerts](https://developer.apple.com/tvos/human-interface-guidelines/interface-elements/# alerts) 》。

目录模版

使用目录模版可以展示成组相关项目，例如某个电影流派或电视节目分类。左侧显示分组列表，移动焦点到某个分组上可以在右侧查看该分组下的内容。

专辑模版

专辑模版可以展示项目包含的元素，例如专辑里的歌曲或播放列表历史。多用于显示音频相关的内容。

描述性通知模版

描述性通知模版可以在屏幕上展示大段文本，以及请求用户执行某项操作，例如同意条款或许可协议。

避免使用纯文字描述。尽量避免使用纯文字描述。看看是否能用更易于理解的方式传达一样的信息，比如说使用图像。

保持简短，避免滚屏。在远距离阅读大量文字不仅费眼，而且很无趣。请慎重考虑应用要显示的文字数量。

若信息需要滚屏，请左右并排放置按钮。这样的话，上下滚动可以浏览文字信息，左右滚动可以切换按钮的焦点。

更多请参阅《 Interface Elements 》中的《 [Alerts](https://developer.apple.com/tvos/human-interface-guidelines/interface-elements/# alerts) 》。

表单模版

表单模版用于展示键盘以及可以输入信息的一个或更多文本框，例如名称或电子邮件地址。

更多请参阅《 Interface Elements 》中的《 [Text and Search](https://developer.apple.com/tvos/human-interface-guidelines/interface-elements/# text-and-search) 》。

列表模版

列表模版可以在右侧展示项目列表，例如电影或电视节目。移动焦点到某项上会在左侧显示相应内容，比如说插图或详情描述。

加载模版

向服务器获取内容时，界面上会短暂地显示带有一个进度指示器及文字描述的加载模版，用来表明应用当前状态，让应用看起来不像没有响应的样子。

确保加载提示文案简洁、有效。如果加载速度很快，用户可能来不及在信息消失前读完大段的文字，会让他们感觉遗漏了一些信息。

更多请参阅《 Interface Elements 》中的《 [Progress Indicators](https://developer.apple.com/tvos/human-interface-guidelines/interface-elements/# progress-indicators) 》。

主菜单模版

主菜单模版可以显示一张底部带有菜单栏的全屏图片。常用于电影主页，包含播放影片、选择章节或其它功能等菜单项。

菜单栏模版

菜单栏模版作为内容的入口页，是专为顶层导航设计的。包含一个横穿界面的顶部菜单。移动焦点至某个菜单项会在菜单栏下方展示相应的内容。

保持菜单栏简洁。每增加一个额外的显示项都会增加用户选择思考的时间，同时，还会增加应用的复杂度。

在屏幕上常置菜单项。当焦点在菜单栏上时，所有菜单项都必须可见。通常来说，为避免菜单栏过于拥挤或者太长需要滚屏，请尽量将带有短标签的菜单项数量控制在 7 个以内。

更多请参阅《 Interface Elements 》中的《 [Tab Bars](https://developer.apple.com/tvos/human-interface-guidelines/interface-elements/# tab-bars) 》。

陈列模版

陈列模版可以连续预览当前焦点所在组的内容，例如某个特定流派的电影或专辑。在右侧展示分组列表。移动焦点至某个组会在屏幕左侧自动连续播放该组下的内容。

产品模版

产品模版可以展示电影，电视节目或其他产品。通常包括一张产品图，背景以及描述信息。在产品内容的底部，会显示相关的产品，用户可以向下滚动查看更多信息，例如演职员列表、评分以及评论。

确保自定义背景不会影响其他内容。在定制背景前，请谨慎选择图片和文字的颜色。默认情况下，背景会显示经过模糊处理的产品图片来营造互补的视觉效果。

产品集模版

产品集模版可以展示系列电视节目、电影和其它产品。通常包括一张图片，背景以及描述信息。内容下方会展示集合内的产品，例如某一季的电视剧集。用户可以向下滚动查看更多信息，例如演职员列表、评分以及评论。

评分模版

评分模版可以让用户给特定项目（比如某部电影或某首歌）评分。

搜索模版

搜索模版可以让用户搜索内容以及查看结果，包括一个搜索框、键盘以及结果列表。

堆栈模版

堆栈模版可以逐行展示产品组（例如不同流派的电影）。每组产品都直接在上一组的下方显示。

4.2 字体

Apple TV 的系统字体是 San Francisco。这个字体有两个变体：San Francisco Text 和 San Francisco Display，都是专为大屏设计的高辨识度字体。

在标签或其他界面元素的文字上使用系统字体时，Apple TV 会依据不同的字号自动应用最适合的文本样式。在有需要时，也会自动切换字体并遵循辅助功能设置。

简化文字。展示，而不是单纯的文字描述。在远距离阅读大量文字不仅费眼，而且很无趣。请慎重考虑你的应用要显示的文字数量，看看是否能用图片或动画代替文字来与用户交流。假如使用图片，确保提供了备选文字标签，以便有视觉障碍的用户可以使用 VoiceOver 来描述图像。

设计时请选择恰当的系统字体。首先，字体必须在远处仍具辨识度。不超过 39 号（points）的字请使用 San Francisco Text 字体。对超过 40 号（points）的字来说，San Francisco Display 字体是更好的选择。

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

确保自定义字体在远处仍具辨识度。Apple TV 支持显示自定义字体，但是有可能在远处难以阅读，特别是在字体过于纤细的时候。除非应用有迫切使用自定义字体的理由（例如为了宣传品牌或营造具有沉浸感的游戏体验），否则，请坚持使用系统字体。如果使用自定义字体，请确保用户在房间另一头浏览时，文字仍具有易读性。

实现自定义字体的辅助功能。系统字体会自动响应辅助功能，例如启用粗体文本。使用自定义字体的应用也应该执行与系统字体相同的行为：检查是否启用辅助功能，并在收到功能变更通知时做好调整。请参阅《 [Accessibility](https://developer.apple.com/tvos/human-interface-guidelines/user-interaction/# accessibility) 》。

可以在《 Resources 》中下载 San Francisco 字体。

4.3 品牌传播

成功的品牌传播不仅只是将品牌元素添加到应用中而已。伟大的应用通过绝妙的字体运用、颜色以及图片的选择来传达独一无二的品牌调性。可以在应用场景中适当地向用户传达品牌，但不要过度。

优雅、含蓄地植入品牌。人们使用应用是为了消遣、获取信息或处理事务，而不是为了看广告。为了实现最佳用户体验，在设计应用时应尽量含蓄地传达品牌。在界面上使用与应用图标一样的颜色是营造情境的一个好方法。

内容重于品牌。在屏幕上常置一条顶部栏的做法，除了用来展示品牌外什么也做不了，还会压缩内容的展示空间。相反，应该考虑使用干扰更少的方式来传达品牌，比如使用自定义的配色、字体，或微妙的自定义背景。

抵住在应用中过度展示品牌标志的诱惑。除非展示品牌标志对营造情境很重要，否则请不要过度展示。

遵循 Apple 的商标使用指南。Apple 商标不应出现在你的应用名称或图片里。请参阅《Apple Trademark List》和《 Guidelines for Using Apple Trademarks 》。

4.4 颜色

Apple TV 平台的设计简洁且低调。色彩的运用应有助于营造沉浸感体验，能吸引用户去关注内容而不是界面本身。选择怎么用以及在哪使用颜色时，请考虑这个颜色是否有助于凸显内容。

通常做法是选择应用图标上的颜色。巧妙地运用颜色也是一种传达品牌的好方法。

在真实的电视上预览颜色。你在电脑屏幕和电视上看到的颜色并不总是一样的。为了获得最佳效果，请使用 sRGB 色域，同时经常在真实电视上测试，以了解你所选择的色彩在大屏上将如何呈现。有条件的话，可以在多台不同的电视上预览你的应用，因为不同的电视型号可能导致极大的色差。

考虑色盲以及文化背景不同的人对色彩的认知。人们对色彩的认知是不同的。比如说，很多色盲人士很难区分红色与绿色（以及带灰度的颜色），或者蓝色与橙色。因此，需要避免将这些颜色组合作为唯一区分状态或数值的方式。可以使用红色方块和绿色圆代替红、绿圆形来表示离线和在线。某些图片编辑软件也会提供验证色盲的功能。另外，还要考虑你的颜色运用在其他国家或文化中会被如何认知。比如，在某些文化中，红色表示危险；而在另一些文化中，红色却带有积极含义。确保应用中的颜色传达了恰当的信息。

不只用颜色来表示焦点态。当元素处于焦点态时，微微放大元素以及响应式动效是 Apple TV 上用来提示用户可交互的主要手段。

在不同显示条件下预览色彩。电视上的颜色因不同厂商、亮度和显示设置会有所不同。如果某些设置导致内容混在一起或难以辨认，请重新考虑你的颜色运用。

条件允许时，使用深色主题测试应用。为了营造更深层的电影体验，用户可能会将默认的浅色主题切换为深色主题。启用深色主题后，会将原先浅色主题的背景以及标准界面元素替换为深色的，同时用深色主题的文字替换浅色主题的文字。确保您的应用无论在浅色还是深色主题下看起来都很棒。必要时，提供两种版本的图片、内容和自定义界面元素，并基于当前的主题设置显示相应的版本。