tvOS - 图4
tvOS - 图5
Apple为其TV系统也打造了操作系统,因为未来的家场景中,智能电视将作为智能家的互动核心之一,因此各大厂商都会跟进智能电视的设计(小米、华为、安卓等)。由于屏幕的扩大,这块的交互设计通常以手势操作、遥控操作、语音助手为核心,反馈方式以焦点模式为主,通过动效、视差、声音等达成反馈,这与手机端(例如震动)、电脑端(例如指针变化)则略有不同。
在应用体验上,也打破纯电视体验,如上图所示,有apple TV、音乐、游戏、照片、APP SOTRE为默认核心区(当然也可以调整)

设计原则

协同的(Connected)

Siri Remote使人们可以通过流畅,熟悉的手势(挥动手腕、轻击、轻扫和单击)与整个房间中的内容进行交互。利用遥控器的触摸表、加速度计和陀螺仪,以令人愉悦和引人入胜的方式将人们与您的内容联系起来。

清晰的(Clear)

Apple TV应用程序应自然而直观。用户应本能地知道该怎么做以及他们始终在哪里。使用提供的布局网格,使文本清晰易读,并避免不必要的视觉装饰使界面混乱。
Apple TV使用聚焦(Focus)模式进行导航。人们使用遥控器在诸如电影海报,应用程序或按钮之类的界面元素中移动,以高亮显示每个项目。当用户突出显示项目但未单击该项目时,该元素被视为已聚焦或已聚焦。当焦点对准物体时,请保持清晰。实现预期的按钮行为,以免在导航过程中迷路-单击遥控器上的某个项目可以使您更深入地了解应用程序的层次结构,而按Menu则始终可以使您返回。

沉浸式(Immersive)

精美而逼真的艺术品将人们带入丰富的电影体验。专注于某段内容会提升它的质量,并且遥控器的触摸表面使您感觉就像在触摸屏幕一样,就像在iOS设备上一样。声音在整个系统中使用,以增强视觉体验。力求通过引人入胜的内容,细腻而流畅的动画,令人敬畏的图像以及迷人的音频,让您沉浸其中。


应用设计原则

  • 帮助人们感觉通过遥控器连接到您的应用程序。 在iOS中,人们可以看到并触摸相同的设备。在Apple TV上,人们用手触摸遥控器即可看到整个房间的屏幕。寻找机会通过人们触摸的设备(遥控器)将人们与您的应用程序联系起来。
  • 考虑观看者与屏幕的距离。 设计界面元素,使它们清晰易读,并且不会被背景图片或相邻项目淹没。确保始终清楚什么是焦点,以及对遥控器采取的措施会发生什么。(意味着信息不能过饱和,不像电脑屏幕)
  • 创建共享的体验。 人们通常在公共环境中欣赏电视。考虑一下您的应用如何吸引一群人,以及每次启动您的应用时如果查看者是不同的人会发生什么。


内容体验

实时观看应用

突出显示实时内容

在每个屏幕上,吸引人们对实时内容的注意,并确保可以一眼就将其与视频点播(VOD)内容区分开。

  • 将实时内容放在应用程序的第一个标签中(最小化启动程序和播放内容间的间隔,无需多次点击)
  • 让人们点击一次(或完全不点击)即可开始播放(例如,您可能会在精选或最近查看的实时内容上方显示一个集中的“立即观看”按钮。当人们点击此按钮时,它会立即消失并开始播放,以全屏沉浸式观看体验取代您应用的UI。您还可以选择在闲置几秒钟后关闭您的应用程序用户界面,并自动开始播放,这样人们甚至无需轻按一次。)
  • 实时内容的样式突显实时感。(例如,并为每个项目提供一个可视指示器(例如徽章,符号或窗框),以将其标识为实时)
  • 指示当前播放实况内容的进度。人们跳入进行中的实时内容时,需要知道他们将要降落在哪里。您可以使用进度条或其他指示器向人们显示还剩余多少内容。
  • 多行动通路。(除了回放(应该始终是主要操作)之外,它还使人们可以轻松录制、重新启动和执行您支持的其他操作。在整个应用程序中以相同的顺序显示这些操作,例如,“观看”,“重新开始”,“录制”和“收藏夹”)
  • 优先使用图片而不是文字,以帮助人们与您的应用进行交互。(通过尽量减少屏幕上的文字,而是提供可视化的方式来浏览,导航和做出选择,从而鼓励人们沉浸在实时观看体验中,例如缩略图和描述性信息划分)
  • 考虑在播放过程中使用内容页脚(Content Footer)浏览频道。内容页脚可让人们浏览而无需离开实时回放体验。如果决定使用内容页脚,则应:1.对其进行细化处理(例如变暗),以使文本清晰易读,并帮助所有项目在视觉上与后面播放的内容保持明显区别。2.例如,通过标记缩略图或着色其进度条,可以使人们轻松识别代表当前播放内容的缩略图。3.将内容页脚中的类别与您的电子节目指南(EPG)中的类别相匹配.4.设计一种简单的\可预测的方式来使人们调用和关闭内容页脚(例如,如果向上滑动调用了页脚,人们期望向下滑动以消除该页脚)
  • 使用标准的tvOS手势(支持向左和向右滑动边缘,使人们可以按频道浏览。当人们将手指放在遥控器的触摸面上时,系统会提示他们可以更改通道或滑动。要更改频道,人们只需开始向左或向右滑动即可;作为响应,系统会自动删除进度条提示。要进行滑动,人们首先单击,然后滑动以移动擦洗器。发生这种情况时,系统会自动删除频道更改提示)
  • 避免在实时视频播放期间对点击做出响应(有时人们无意轻敲,所以最好避免打断播放来烦人。最好让人们在全屏视频播放期间滑动或单击以执行操作,因为这些手势往往是故意的)
  • 改变频道时,提供即时的视觉反馈(更改频道后立即显示反馈屏幕非常重要,这有两个原因。首先,人们需要确认自己已经到达所需的频道。其次,显示反馈屏幕使流式传输内容有一些加载时间)
  • 音频情境匹配(简单的说是该放的时候放,退出的时候停)

提供出色的电子节目指南(EPG)体验

tvOS - 图6tvOS - 图7
**

  • 重新思考EPG(为tvOS应用重塑体验设计)
  • 突出显示当前信息,并使其易于返回播放(人们首次打开EPG时,应该易于发现当前的节目、频道和时间。人们浏览完EPG后,只需按一下遥控器的“菜单”按钮,即可立即将他们返回到当前频道)
  • 轻松浏览EPG(典型的EPG包含很多信息,因此帮助人们轻松地进行页面滚动,滚动或跳转非常重要。例如,人们应该能够通过在遥控器的边缘上向上或向下滑动来根据需要进行快速或慢速滚动)
  • 考虑为人们提供他们喜欢的内容的捷径(人们倾向于与少数几个频道重复互动,因此最好提供一个“我的频道”或“收藏夹”组,以便快速访问最常观看的内容)
  • 将内容划分熟悉的类别便于查找(例如,您可以使用“电影”,“电视节目”,“孩子”,“运动”和“受欢迎”等类别。如果您的应用程序包含内容页脚,请使用EPG中使用的相同类别来组织内容缩略图)
  • 让人们浏览EPG而不离开其当前内容(例如,当人们浏览EPG时,您可以继续以画中画(PiP)模式或在后台播放内容)

    云硬盘录像机

    具体查看此链接https://developer.apple.com/design/human-interface-guidelines/tvos/overview/live-viewing-apps/

    TOP SHELF

    关于TOP SHELF可以看https://developer.apple.com/design/human-interface-guidelines/tvos/overview/top-shelf/

界面体验设计

电视盒子是终端设备,拓展屏幕性能,可搭配海量应用进行体验拓展(相比传统电视的封闭化)。

  • 依靠焦点进行内容浏览,相比于传统电视盒子,整体更为简洁,以应用串联使用过程。
  • 依靠选项卡栏进行页面内切换。
  • 每个焦点类似画廊的画被取下,有明显的纵深视图,有景深阴影(APPLE希望有夸张的方式突显焦点)。部分应用选项卡栏也有景深阴影(APP STORE)
  • 交互动画顺滑,每个卡片根据展示的位置,阴影和卡片的形态都会变换。按钮卡片按下也会有弹回动画。页面内滑动时,各个区块间不是平移,有类似堵车的那种延迟靠近的动画。
  • 卡片都会有展示余量出现,让用户认识到有内容
  • 依靠图方式进行展示,如APP列表都是圆角图形按钮,选中悬浮,并且展现名称。

使用场景及界面构成

场景有使用用户来切换,选择不同的用户,偏好会发生改变。

电视点播

常规之外,还可以看到每个频道的节目时间线。
image.png

应用软件安装

image.png
APPLE STORE,可以安装海量应用
image.png
image.png

网页浏览(安装FLY)

支持网页浏览
image.png
操作指南:

  1. 双击触控板切换鼠标模式和滚动网页模式
  2. Menu键返回上一页
  3. 播放键是打开快捷菜单(如键入网址并打开,获取网页连接并播放)
  4. 光标移动到屏幕下方时滚动网页
  5. 支持xbox one 手柄、ps4手柄、Mfi手柄(X播放键,A确定,B返回,左扳机:向上滚动网页,右扳机:向下滚动网页)

通知&控制栏,可控制场景下设备模式

毛玻璃+多景深
image.png

浏览照片

image.png


苹果音乐与博客image.png

可播放本地设备的内容(如iMac)

商店内INFUSE应用必买
image.png
image.png
image.png
每个内容由导航小卡片构成,右上角显示观看进度。整体背景有内容截图构成。信息上主要好在那时名称、评分、视频信息(码率、分辨率等、简介等)
image.png

用户界面元素

tvOS的界面元素主要由警告、按钮、馆藏、数据输入、组合元素(卡片、说明按钮、会标、海报)、导航栏、页面控件、进度指示器、分段控件、拆分视图、标签栏、表格、文字与搜索组成。

警告 Alert

tvOS - 图20

按钮 Button

tvOS - 图21

馆藏 Collections

数字输入视图 Date Entry View

数据输入时会涉及到与手机端的联动
tvOS - 图22

组合元素 Lookups

组合元素将多个单独的视图合并为一个交互式单元。每个组合元素都包含一个内容视图,一个页眉和一个页脚。页眉显示在主要内容的上方,页脚显示在主要内容的下方。当组合元素成为焦点时,这三个视图一起扩展和收缩。
目前tvOS主要提供了卡片、说明按钮、会标、海报4种组合元素的规范说明。

  • 锁定之间要留出足够的空间。集中的锁定会扩大大小,因此在锁定之间要留出足够的空间,以避免重叠或移动其他锁定。
  • 在行或组中使用一致的锁定大小。当所有元素的宽度和高度匹配时,一组按钮或一行内容图像在视觉上更具吸引力。

tvOS - 图23

卡片 Cards

卡片结合了页眉,页脚和内容视图,以显示媒体项目的评级和评论。
tvOS - 图24

说明按钮 Caption Button

说明按钮可以在按钮下方包含标题和字幕。字幕按钮可以包含图像或文本。
确保焦点上的字幕按钮向用户可以滑动的方向倾斜。垂直对齐时,字幕按钮应上下倾斜。水平对齐时,字幕按钮应向左和向右倾斜。当显示在网格中时,字幕按钮应在所有四个方向(上,下,左和右)上倾斜。
tvOS - 图25

会标 Monogram

会标标识人员,通常是媒体项目的演员和工作人员。每个字母组合都包含该人及其姓名的圆形图片。如果没有可用的图像,则该人的姓名缩写会代替图像出现。
tvOS - 图26

海报 Poster

海报由图像以及可选的标题和副标题组成,这些标题和副标题一直隐藏到海报成为焦点为止。海报可以是任何尺寸,但应适用于其内容。
tvOS - 图27

导航栏 Navigation Bars

通常在顶部位置,展示当前位置
tvOS - 图28

页面控件 Page Control

页面控件主要展示平级差别
tvOS - 图29

进度指示器

进度指示器主要有进度环、进度条两种。
tvOS - 图30

分段控件 Segmented Control

拆分视图 Split View

主要用于显示多层内容(如照片集)
tvOS - 图31

标签栏 Tab-bar

image.png

表格 Table

tvOS - 图33

文字和搜索 Text and Search

tvOS - 图34

tvOS - 图35
tvOS - 图36

界面视觉设计

在tvOS规范中,视觉设计的规范有详有略,主要针对动效品牌推广色彩布局材质版式进行了说明。
详情内容看https://developer.apple.com/design/human-interface-guidelines/tvos/visual-design/animation/

布局

电视的尺寸差异很大。在Apple TV上,应用程序布局不会像在iPhone或iPad上那样自动适应屏幕尺寸。相反,应用程序在每个显示器上都显示相同的界面。在设计布局时要格外小心,以便在各种屏幕尺寸下看起来都很棒。
tvOS - 图37
为大屏幕优化资产。将应用程序的用户界面设计为1920 x 1080像素(1080p)的屏幕分辨率,这意味着16:9的宽屏宽高比。所有资产应为@ 1x分辨率。

tvOS - 图38
使主要内容远离屏幕边缘。 请注意从屏幕的顶部和底部到侧面分别有60像素和90像素的区域。很难看到靠近边缘的内容,并且由于旧电视的过度扫描而可能会发生意外裁剪。
tvOS - 图39
在可聚焦元素之间包括适当的填充。 如果您使用的是UIKit和focus API,那么当一个元素成为焦点时,它会变得更大。考虑元素集中时的外观,并确保它们不会无意间重叠重要信息。
tvOS - 图40
通过部分显示屏幕外元素来暗示隐藏的内容。在内容无法在单个屏幕上容纳的大型收藏集中,通过显示部分屏幕外项目来提示其他内容。

分栏

  • 遵守屏幕的安全区域。从屏幕的顶部和底部插入主要内容60个像素,从侧面插入90个像素。只有部分显示的屏幕外内容和故意在屏幕外流动的元素应出现在此区域之外。
  • 为标题行包括额外的垂直间距。如果某行有标题,请在前一个未聚焦行的底部和标题中心之间留出足够的间距,以避免拥挤。还应在标题的底部和行中未聚焦项目的顶部之间提供间距。
  • 使用一致的间距。当内容的间距不一致时,它不再看起来像网格,人们很难扫描。
  • 使部分隐藏的内容看起来对称。为了帮助您将注意力集中在完全可见的内容上,请将部分隐藏的屏幕外内容在屏幕的每一侧保持相同的宽度。

材质

在整个系统中,柔软,细腻,半透明的材料出现在窗户和覆盖层上,以传达深度感和层次结构。这些设计还为用户提供了在应用程序中的位置感,但不会分散内容的注意力。这些材料被设计为在各种颜色和各种环境下看起来都很棒。
目前主要有6种材质模式:
突出Prominent、常规Regular、超亮extra light、亮light、超黑extra dark、黑dark

超亮(extra light)
tvOS - 图41
亮(light)
tvOS - 图42
超黑(extra dark)
tvOS - 图43
黑(dark)**
tvOS - 图44

  • 考虑使用系统材料。 当用户从另一个应用程序切换到您的应用程序时,系统材料可以使您的应用程序具有原生的感觉,并创建平稳的过渡。可以使用以下材料样式。
  • 使用更轻,半透明的材料来提高含量并使它感觉新鲜。 较暗的材质会产生较重的感觉,其中内容感觉较旧,沉入背景中并可以隐藏阴影,从而降低了深度和活力。当您看不到阴影时,很难说出焦点所在。
突出 这是一种动态材质,如果启用了浅色外观,则显示多余的浅色材料;如果启用了深色外观,则显示出额外的深色材料。这是用于全屏背景的推荐材料。
常规的 这是一种动态材料,如果启用了浅色外观,则显示浅色材料,如果启用了深色外观,则显示深色材料。对于部分遮盖屏幕内容的叠加视图,推荐使用这种材料。

图标与图像

图标通常简单可识别,一个识别焦点,并且不推荐使用硬件产品或屏幕截图作为图标,且需要适当的(2-5层)图像层次(系统应用图标通常设计了5层,如下图)。
在特效上,谨慎使用渐变和阴影。 背景渐变和小插图可能会与视差效果发生冲突。对于渐变,建议使用从上到下,从浅到深的样式。
在应用程序图标中,阴影通常看起来最好是锐利的,硬边的色调,这些色调被烘烤到背景层中,并且当应用程序图标静止时不可见。
利用不同的不透明度级别来增加深度感和生动感。 创造性地使用不透明性可以使您的图标脱颖而出。例如,“照片”图标将其中心部分分成多个包含半透明部分的图层,从而使设计更加生动。
关于属性、尺寸等设计,查看https://developer.apple.com/design/human-interface-guidelines/tvos/icons-and-images/app-icon/

tvOS - 图45

多端设备联动

遥控器★

Remote 遥控器 \ Game Controllers 游戏控制器
Apple TV的主要输入方式是Siri Remote。下图是2021年新发布的遥控器,相比旧款,将顶部的触控板变成小圆形,四边有方向键,环可以转动来切换内容等操作。

  • 主按钮区以返回、主页键、播放暂停、静音和加减构成。
  • 辅助按钮主要是开关机,将语音助手放置在侧边了。

2021新款image.png以下为旧款tvOS - 图47

遥控器手势

  • 与tvOS焦点模型保持一致。结合tvOS的焦点互动模式。
  • 帮助人们发现如何导航。在您的应用中,提供清晰的提示,向人们展示手势时会发生什么。例如,将拇指轻轻放在遥控器上可以向人们显示向下滑动的位置,以便他们可以显示信息面板。
  • 仅在您的应用有意义时定义新手势。人们熟悉标准手势,不喜欢被迫学习做相同事情的不同方法。在游戏中,自定义手势可能是体验中有趣的一部分。在其他应用中,最好使用标准手势,这样人们就不必费力去发现或记住它们。
  • 区分点击和轻敲,并避免在无意点击时触发动作。单击是非常有意的动作,通常非常适合在游戏过程中按下按钮,确认选择并启动动作。轻敲手势可用于导航或显示其他信息,更加自然。
  • 考虑使用轻敲的位置来辅助导航或游戏。遥控器可以区分触摸表面上的上,下,左和右轻击手势。

滑动 Swipe

滑动可以帮助用户快速浏览内容,根据滑动内容的变化,浏览速度也会变化。
某些滑动也会产生特定的结果:

  • 从底部向上显示一个内容脚窗
  • 没有初始点击,从边缘向右或向左更改通道
  • 初始单击后,从边缘向右或向左移动系统提供的进度条(scrubber)到播放位置
  • 从顶部向下显示系统信息面板

点击 Click

人们单击以激活控件或选择一个项目。

  • 可以单击并按住以触发特定于情境的操作,例如进入编辑模式。
  • 在滑动前单击即可激活拖动模式。

轻敲 Tap

轻触可逐一浏览项目集合。在具有基于UIKit的标准界面的应用中,点按不同区域可进行定向导航。例如,点击触摸表面的顶部可向上导航。一些应用程序使用点击手势来显示隐藏的控件。

实体按钮 Button

tvOS - 图48

按钮 应用程序中的预期行为 游戏中的预期行为
触控面(轻敲/滑动) 导航。
改变重点。
点击行为各不相同。
滑动执行定向垫的行为。
触控面(单击) 激活控件或项目。
导航更深。
执行主按钮行为。
菜单 返回上一个屏幕。
退出到Apple TV主屏幕。
暂停/继续游戏。
返回上一屏幕,退出至游戏主菜单,和/或退出至Apple TV主屏幕。
播放/暂停 激活媒体播放。
暂停/继续播放媒体。
执行辅助按钮行为。
跳过介绍性视频。

遥控器的互动

遥控器的互动说明

https://developer.apple.com/design/human-interface-guidelines/tvos/remote-and-controllers/remote/
遥控器采用蓝牙支持,背对电视依然可使用。顶部是触控区域,可以滑动、点按。
image.png

使用遥控器玩体感游戏

遥控因为具备加速度计和陀螺仪,因此可以玩简单的体感游戏。也支持游戏手柄进行操作拓展。
image.png

游戏控制器

由于apple并无自家遥控器,尽管推荐用户使用remote进行控制,但也支持了游戏控制器的互动。
tvOS - 图51
tvOS - 图52
确保控制器按钮在非游戏应用程序情境中的行为一致且可预测。尽管人们期望不同的游戏以不同的方式映射控制器的按钮,但他们倾向于期望非游戏应用程序中的按钮行为一致。这是除菜单和徽标按钮之外的所有控制器按钮的预期行为,这将在下面进行描述。

按钮 非游戏应用程序中的预期行为
方向垫(D-垫) 移动焦点。
A 激活控件或选择一个项目。
B 返回上一个屏幕。
从应用程序的根级屏幕退出到Apple TV主屏幕。
X 激活媒体播放。
暂停/继续播放媒体。
ÿ 不适用
左肩键/触发 向左导航或移动焦点。
右肩键/触发 向右导航或移动焦点。
左指拨 导航。
移动焦点。
右指拨 不适用

当人们与“菜单”按钮交互时,具有单个辅助按钮的控制器应支持以下行为。

相互作用 预期行为
返回上一个屏幕或暂停游戏
长按 退出到Apple TV主屏幕
连按两下 显示多任务UI

具有多个辅助按钮的控制器除“菜单”按钮外还包括徽标按钮。当人们与徽标和菜单按钮交互时,这种控制器应支持以下行为。

按钮 相互作用 预期行为
商标 显示控制中心
长按 退出到Apple TV主屏幕
连按两下 显示多任务UI
菜单 暂停游戏
  • 支持可点击的遥控杆(如果有)。一些控制器包括遥控杆,人们可以单击或按住并旋转它们。这些按钮(也称为L3和R3)通常使人们可以通过旋转遥控杆来修改启用的操作。例如,单击或按住启用动作的左手拇指杆可能会使人们以不同的速度移动。单击或按住控制相机方向的右指杆可能会使人们放大或“蹲伏”。当您考虑支持可点击指尖的方法时,请以人们在各种游戏类型中期望的行为为指导。
  • 通常,更喜欢使用左拇指操纵杆或D-pad按钮在当前屏幕上移动焦点。通常,人们并不期望在游戏中使用正确的指尖来进行焦点导航。
  • 通常,避免使用触发器或肩膀按钮来执行UI导航。除非您的游戏具有需要加速导航的深层嵌套UI,否则通常最好使人们使用A和B按钮进行导航。
  • 自定义屏幕说明以匹配所连接的游戏控制器。不同的控制器可以使用不同的颜色或符号来表示相似的按钮。例如,在Xbox控制器上,B按钮为红色;在MFI控制器上,相同的按钮为绿色。为避免使人感到困惑,请使用所连接控制器的标签方案来参考按钮。
  • 尽可能让人们在您的游戏中使用Siri遥控器。

iphone

用iphone充当TV的内容输入部分

当需要密码或文字输入时,iphone会自动弹出输入框
image.png

手机隔空播放

除本身隔空播放功能外,也支持手机软件内投屏、手机屏幕共享
image.png

其他智能设备

  • 例如音频输入联动(HOMEPOD),可以快速协同
  • 内容输入协同(iphone投屏等)
  • 内容联动(调用iMac文件)等
  • 调用本地存储器的内容(Infuse调用NAS的4K影片)


应用架构★

应用架构上,tvOS主要是验证、焦点与选择、加载、导航、新手引导等5个状态为主。

A 验证

Apple TV设计用于娱乐而非数据输入。要求人们仅进行身份验证以换取价值,例如个性化体验、访问其他功能、购买内容或同步数据。
可以用遥控器选择、语音录入或者用其他设备辅助(例如手机)

  • 最好让人们使用其他设备进行注册或身份验证。
  • 尽可能延迟登录。(先浏览发现内容,再提示登录)
  • 解释身份验证的好处以及如何注册您的服务(更加清晰的说明,提高用户信任感)
  • 最小化数据输入
  • 保持多个配置文件支持的直观性。

tvOS - 图55

B 焦点与选择★

焦点模式主要通过遥控互动(点击、滑动等),伴随的聚集元素状态变化、视差变化(基于分层图像)构成。
在Apple TV上,人们使用遥控器与整个房间中的屏幕元素进行间接交互。此交互基于焦点模式。通过按下按钮并使用遥控器上的手势,人们可以将焦点从一个元素移到另一个元素,停在特定的元素上,然后单击以访问内容或启动操作。随着焦点的变化,细微的动画和视差效果会产生一种深度感,可以清楚地识别出当前处于焦点的项目。

为何产生?

焦点(Focus)是为提供出色的专注体验而生,是结合远程和观看体验而产生的方式,提供清晰感和情境感。提供固定数量的选项时,请使用焦点模式。(为追求清晰明了,将其用于按钮、菜单、媒体选择以及应用程序中出现清晰的选择)

基本互动旅程★

在Apple TV上,当图标、图像、按钮或其他界面元素是当前突出显示的元素时,则被视为焦点(Focus)。

  • 当一个元素成为焦点时,它会随着手指在遥控器触摸表面上的微妙移动而轻轻地升高到前景并摇摆互动。
  • 发生这种情况时,光效将应用于该项目,使其表面看起来发亮。
  • 一段时间不活动后,失焦的内容会变暗,而聚焦的元素会变得更大。

这些效果共同作用以保持与坐在沙发上的人的联系。它们提供了清晰感和情境感,增强了信息重点。

如何进行体验设计?★

认知

  • 使用标准界面元素(利用用UI KIT组件)来获得动画效果(提高原生性,提高体验认知)。
  • 尺寸间距-创建合适大小的可聚焦元素( 使用小间距,大物体,也更容易适应视力障碍者)

互动

  • 为间接操纵-手势操作考虑符合用户预期的互动方式。(主要使用在间接操纵-手势操作对象之间移动焦点,并且系统滚动界面以使焦点突出的项目可见。间接操纵需确保焦点朝手势的方向移动。例如,如果有人在遥控器上轻击或向右滑动,则焦点应向右移动,这意味着内容可能向左移动。如果有人轻拍或向上滑动,则焦点应向上移动。例外是全屏元素(例如照片)应改用直接操作-手势移动对象,而不是焦点。例如,向右滑动可将照片从左向右移动)
  • 指示-不显示指针(大屏幕更适合焦点而非小指针,当然也有例如例如游戏或飞行模拟时的十字准线)

反馈

  • 突出-使重点突出(当人们远处选择和操作屏幕上的元素,需要让他清晰了解重点。如果不直接用UI KIT,可以显示标签或更改标签的颜色以标识重点项目。在游戏中,您可以为焦点项目设置动画,并在焦点发生变化时播放声音)
  • 视差反馈-使用视差可以使焦点项目对用户交互的响应更加灵敏。遥控器上的触控运动可以使被聚焦的物品产生柔和的实时运动(类似真的在摆弄卡片)。这样的反馈可以增强对内容连接的感知,并有助于增强重点。UIKit内置的视差效果使用分层图像使聚焦的项目充满活力。使用视差来创建更身临其境的互动体验。
  • 互动状态-针对不同的焦点项目状态进行设计。在Apple TV上,可聚焦的项目最多可以具有五个不同的状态(未聚焦、聚焦、高亮、选中、禁用),每个状态在视觉上都应该看起来截然不同。让界面元素在不同状态下都保持易用。在Apple TV上,专注于某个项目通常会稍微增加该项目的规模。在设计界面时,请考虑项目的未聚焦状态以及聚焦状态。为更大,更集中的大小提供资产,以确保它们始终看起来清晰。
  • 动效-焦点变化时保持流畅(如果聚焦时有颜色或动画改变,则退出时也需要自然变化)

image.png

焦点设计的5个状态

image.png

状态 描述
Unfocused 未聚焦 查看器当前未与该项目交互,但可以使该项目成为焦点。未聚焦的项目看起来不如聚焦的项目突出。
Focused 重点突出 查看者当前正在与该项目进行交互。响应于遥控器触摸表面上细微的手指移动,该项目从屏幕上的其他内容通过突出显示到前景,通过光效和动画在视觉上脱颖而出。
Highlighted 突出显示 外观上的快速变化表示单击了重点项目。例如,当观看者单击焦点对准的按钮时,该按钮可能会短暂地反转其颜色并进行动画处理,然后再返回其原始外观。
Selected 已选中 表示已以某种方式选择或激活了该项目(无论是集中还是未集中)。例如,一个应用程序可能包括一个用于收藏照片的心形按钮。按钮可能在选择时是蓝色的,不选中是灰色。
Disabled 禁用 该项目在视觉上似乎处于非活动状态,因此无法使其处于焦点或单击状态。

聚集与视差★

视差是一种微妙的视觉效果,可在整个系统中使用,以在焦点对准元素时传达深度和动态感。通过图像分层、透明度、缩放和运动,视差可产生具有真实感和生命力的3D效果。支持视差效果的图像分层是您的应用程序图标所必需的,并且对于主屏幕上的动态顶部架子内容也受支持。强烈建议您在应用中驻留基于焦点的,基于图像的内容的任何位置进行图像分层。
image.pngimage.pngimage.png

分层图像:视差实现的机制

分层的图像由两到五个不同的层组成,它们在一起形成一个图像。
层之间的分隔以及透明的使用产生了深度感。当某人与图像进行交互时,更靠近表面的图层会抬高并缩放,将更深的较低图层交叠在一起,从而产生3D效果。
分层图像是Apple TV用户体验的本质。结合视差效果,当人们与屏幕上的内容进行交互时,它们会产生一种真实感和活力,唤起认知联系。
可聚焦的元素都推荐采用分层图像的方式,而不仅仅是应用图表。

tvOS - 图61
建议使用以下公式根据未聚焦时图像的尺寸计算分层图像的尺寸。

聚焦/安全区大小 真实大小
最长边 最长未聚焦面的长度+ 70pt 最长聚焦边的长度×106%
最短边 基于最长边的比例 基于最长边的比例

关于开发者如何创建分层图像,这里提供了一些资源(PS插件和Xcode)https://developer.apple.com/design/human-interface-guidelines/tvos/icons-and-images/layered-images/

C 加载状态

总的来说就是提供进度指示器进行反馈,而不是空白(下图是个骨架屏例示),也可以通过教育或娱乐方式度过加载时间

tvOS - 图62
image.png
tvOS - 图64

D 导航

导航设计上,主张勿打扰导航,即是只有用户对当前内容不满意时才显示导航。
在Apple TV上,人们通常通过在堆叠的内容屏幕中移动来进行导航。每个屏幕都可以显示其他屏幕的入口点,并提供一种通过遥控器返回上一个屏幕或主菜单的方式。通常,人们通过使用标准界面元素(例如标签栏,表格视图,集合视图和拆分视图)在屏幕之间移动。
tvOS - 图65

信息架构

使其快速而轻松地获取内容。 人们希望通过最少的轻敲、点击和滑动来快速访问内容。简化您的信息结构,并以需要最少屏幕的方式进行组织。
**

互动体验设计

  • 使用触摸手势创建流畅性。 以最小的阻碍和尽可能少的手势,轻松移动可聚焦的项目。
  • 考虑重点。 Apple TV上的导航并不总是一键即可。由于电视具有基于焦点的选择模型,因此用户在与遥控器进行交互之前必须将遥控器的焦点移至界面元素。放置太多手势容易造成用户沮丧。
  • 通过菜单按钮实现向后导航。 要创建轻松且可预测的导航体验,请让用户使用遥控器的“菜单”按钮向后导航。在玩游戏的过程中,按Menu(菜单)应返回游戏主菜单,或切换游戏内菜单以使您返回游戏主菜单。在应用程序或游戏的顶层菜单页面时,按菜单应始终退出Apple TV主屏幕。
  • 不显示后退按钮。 人们知道按Menu可以使它们退回,所以不要使用可重复此行为的额外控件来浪费应用程序中的空间。
  • 如有必要,显示“取消”按钮。 如果唯一可见的按钮购买或删除了某些东西,则最好包括一个“取消”按钮,该按钮返回上一屏幕。
  • 支持内容的水平导航。 与上下滑动相比,向一侧滑动更容易,更自然。在选择或设计内容布局时,请考虑这一点。

内容展现与设计

  • 在单个屏幕上显示内容集合,而不是拆分内容。 遥控器上的手势使您可以轻松地在包含大量内容的屏幕中快速移动。如果您具有可聚焦元素的集合,请考虑将其显示在单个屏幕上,以保持导航的简单性。
  • 使用标准导航组件。 如果您的应用程序使用UIKit来实现其用户界面,请使用标准导航控件,提升直观性。

**

E 新手引导

坚持教程中的要点。 可以为初学者提供指导,但是教育不能替代出色的应用程序设计。首先,使您的应用程序直观。如果需要太多指导,请重新访问应用程序的设计。

  • 快速采取行动。 人们将Apple TV视为娱乐节目。避免显示启动屏幕,菜单和说明,以使到达内容所需的时间更长。相反,让人们跳到正确的位置。如果您的应用需要教程或介绍序列,请提供一种跳过它们或不向回头用户显示的方式。
  • 使学习变得有趣且容易发现。 边做边学比阅读一系列说明更加有趣和有效。使用动画和互动来逐步地和在上下文中进行教学。
  • 预期需要帮助的情况。 主动寻找可能会卡住的时间。例如,游戏在暂停或角色不前进时可以随意显示有用的提示。如果您确实实施了教程,请让人们在第一次错过某些内容时重播它们。
  • 当控件与规范不符时,请提供说明。 如果您的应用程序使用非标准控件,例如将遥控器置于横向模式,则可以使人们快速定向。尽可能使用动画或图形进行教育,而不要使用冗长的文字屏幕。
  • 使用相关且一致的语言和图像。 始终确保指南适合当前情况。例如,如果有人在使用Siri Remote,请不要显示游戏控制器提示或图形。使用与平台一致的语言。人们点按,单击,然后在遥控器的触摸屏上滑动;他们按下遥控器或游戏控制器上的按钮。

优劣势

优势

  • 视觉、交互、动画细节丰富,一定程度加大应用开发难度,需要为应用开发者提供强大的组件才行。
  • 信息简洁、易用,以可视化方式进行互动。

劣势

  • 不支持中国区,因此国内电视盒子主要以安卓系统为主。
  • 这种模式是否适用于汉字内容展示需要商榷(汉字的增加能高效提升内容信息效率,因此可以看到其他家盒子都会保留相当多的汉字内容)。
  • 很少看到对家中智能设备的控制设置(可能推荐使用手机进行控制?)
  • 因为通过“菜单”按钮进行向后导航,可能在初次使用时会有不习惯的地方(因此可以看到新款遥控器菜单取消了,图标直接变成返回样式)

参照资料

Apple HIG-tvOS

视频-Apple TV 是什么?有什么用?

视频-Apple TV 4K 真实使用感受