恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【自译】Apple TV 人机界面指南 3:用户交互
0.0°
2017-04-21 自译外文 规范/资料 原作者: Apple 官方 举报 3423 9 5 0

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


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




「第三章  用户交互」

章节目录

3.1  导航

3.2  焦点和选择

3.3  首次开启体验

3.4  内容加载

3.5  身份验证

3.6  辅助功能

3.7  家长控制

3.8  角标

3.9  收看电视


使用这些设计原则帮助你创建自然、流畅且符合直觉的应用,成为构建 Apple TV 沉浸式体验的一部分。



3.1   导航


用户往往会忽视应用的导航,除非它不符合用户心理预期。你的工作是建立一个既能支持应用结构以及用户目标,又不会吸引用户过多注意力的导航。导航应让用户感到自然亲切,不应占据界面太大位置,或让用户从内容中分心。 

Image title

在 Apple TV 上,用户多在堆叠的屏幕间移动、浏览内容。每一屏都可能放置前往其他屏的入口,并且通过遥控器返回上一页或主菜单。通常情况下,用户使用标准界面元素(如标签栏、表单视图、集合视图、分屏视图)在不同屏幕间切换。


简单快速,即触内容。用户想用最少的操作,最快地看到内容。简化应用的信息结构,用最少的屏幕来组织它。


利用触摸手势来实现流畅感。使用尽可能少的手势,让用户以最小阻力在焦点项之间轻松移动。 

Image title

观看视频


考虑焦点。Apple TV 的导航并不总能一步到位。由于电视采用基于焦点的选择模式,用户在与其交互之前,需要先用遥控器把焦点移动到目标元素上。如果你的导航方案需要相当多的手势才能实现目标,用户可能会感到沮丧。请遵循《Focus and Selection》指南。

 

使用「菜单」键返回。让用户能通过遥控器的「菜单」键返回,以此来创建简单、可预期的导航体验。在游戏过程中,按「菜单」键应回到游戏主菜单或切出能返回游戏主菜单的游戏内菜单。在应用或游戏的首页,按「菜单」键退出到 Apple TV 的主页。

 

隐藏返回按钮。用户知道按「菜单」键能返回,所以不要浪费界面空间去显示功能重复的控件。


必要时提供取消按钮。当界面中只存在购买或删除的按钮时,最好能提供取消按钮让用户能退回上一界面。

 

在一屏显示内容优于分屏显示。遥控器的手势让用户能轻松、快速地浏览屏幕上的大量内容。如果你有个合集内容,可以考虑在一屏内显示,让用户浏览起来更简单。


使用标准导航控件。如果应用基于 UIKit 实现用户界面,请使用标准导航控件(如翻页控件、标签栏、分段控件、表单视图、集合视图、分屏视图)。用户已经很熟悉这些控件,他们能直观地了解如何使用你的应用。 可以在《Interface Elements》中了解这些导航控件。


建议横向扩展内容。左右滑动比上下滑动更容易且更自然,在选择或设计内容布局时请考虑这一点。



3.2  焦点和选择


在 iOS 设备上,用户直接在触摸屏上轻触或滑动来与界面交互。Apple TV 没有触摸屏,用户使用遥控器间接地与房间另一头的屏幕元素交互,这是基于焦点模式的交互。通过在遥控器上按下按钮或使用手势,用户可以在元素间逐个移动焦点、停留、点击查看内容或触发动作。当焦点改变时,微妙的动画及视差效果营造的纵深感,能清晰地表明当前哪个元素正处于焦点态。

 

使用标准界面元素获取动效。如果你的应用使用 UIKit 和 focus API 实现界面,那么界面元素的焦点模式会带有相应的动效和视觉效果。这会让你的应用感觉更像平台的原生应用,并能减少用户在浏览界面时的阻力。当用户使用 Siri 遥控器操作应用时,他们会发现焦点的切换是那么的流畅且直观。 


依用户的预期方向移动焦点。Apple TV 中几乎都是间接操作——用手势移动对象间的焦点,同时系统滚动界面让焦点保持可见。如果你的应用使用间接操作,请确保焦点与手势的移动方向一致。举个例子,如果用户在遥控器上向右轻触或滑动,焦点也应向右移动,内容应向左移动; 如果用户向上轻触或滑动,焦点也应向上移动。 像照片这样的全屏元素应该使用直接操作——用手势而不是焦点移动对象。 例如,向右滑应从左向右移动照片。 

Image title

观看视频


显示固定数量选项时使用焦点模式。 焦点模式旨在使选择清晰简单,用于按钮、菜单、媒体选择,以及任何需要在应用中显示清晰选项的时侯。


突出显示焦点态。用户在远处选择、操作屏幕上的元素,因此让用户时刻知道当前焦点在哪至关重要。通常情况下,如果你使用 UIKit 中的界面元素,系统会自动做到这一点。如果你想自定义焦点模式,请保证焦点足够显眼。举个例子,在图片合集中,可以在显示标签或者改变标签颜色来突出焦点。在游戏中,可以为焦点设置动画,并在切换焦点时发出声音。

Image title

使用视差效果提高焦点的交互响应度。在触摸板上轻轻划圈,对应的焦点项会实时产生轻柔的位移。这种反馈增强了用户与内容的连接感知,并且有助于加强焦点。内置于 UIKit 的视差效果使用分层图像给予焦点活力感。使用视差能营造更具沉浸感的互动体验。 了解更多信息,请参阅《Focus and Parallax》《Layered Images》

Image title

观看视频


创建尺寸合适的焦点元素。间距适当的较大元素比较小元素更易于浏览和选择,对于有视觉障碍的用户来说,更大的元素也更容易识别。

 

界面元素的焦点态和非焦点态都应设计得美观。在 Apple TV 上,处于焦点的项目通常会微微放大。设计界面时,应该同时考虑元素的焦点态和非焦点态。为更大尺寸的焦点态提供相应的素材,确保元素不管在焦点还是非焦点态都是锐利的。可以在《Icons and Images》中查看图片尺寸指南。

 

切换焦点时保持流畅性。元素变为焦点态时,会变换颜色或伴随微妙的动画;当焦点再次发生变化时,让它自然地恢复成非焦点态,不要让过渡显得生硬。

 

不要显示光标。用户期望通过切换焦点浏览有限的内容,而不是试着去拖拽大屏幕上一个小小的光标。自由移动模式在游戏过程中可能有意义,但像在寻找隐藏对象或驾驶飞机时,在导航菜单及其他大部分界面元素上都应采用焦点模式。如果应用要求光标,确保它具有极高可见性,并且像是应用的一部分。例如,飞行模拟器会显示十字光标以辅助定向。


设计可获得焦点项目的不同状态。在 Apple TV 上,可获得焦点的项目最多有五个不同的状态,每个状态都应在视觉上作出明显区分。

Image title

了解更多如何在应用中使用焦点,请参阅《App Programming Guide for tvOS》



3.3  首次开启体验


启动阶段是你吸引新用户或挽留老用户的首次机会。请设计一个富有趣味,能引导用户同时又不妨碍他正常流程的启动体验。


仅保留必要的引导。为初学者提供引导是个好主意,但无法替代将程序设计得更完美这一工作。最重要的是让应用操作直观。如果需要特别多的引导,最好重新审视你的应用设计。


快速开始。用户观看 Apple TV 是为了消磨时间。所以,最好不要一开始就显示闪屏、菜单以及操作说明,避免让用户在看到内容前就花太长时间。相反,可以让用户直接开始操作。如果应用一定要提供教程或简介,请提供跳过的方法,并且不向老用户展示。


使学习有趣且易于发现。在实践中学习比看一长段说明来得有意思、有效率的多。可以在应用场景中利用动画及互动教会用户技能。


提前考虑用户需求。主动发觉用户需要帮助的时刻。比如说,游戏会在暂停或角色静止时随机显示有用的提示。假如你做了教程,最好可以让用户回放,这样即便用户第一次错过了也不要紧。


使用非标准控件时,提供操作说明。如果应用使用非标准控件(例如使用横向模式的遥控器),请尽快告知用户。尽可能使用动画或图片代替大段的文字来指导用户。


使用一致且有关联的用语和图片。时刻保证用户引导在当前场景下是恰当的。举个例子,假如用户使用的是 Siri 遥控器,则应隐藏游戏手柄的提示或图片。请使用与平台一致的用语。例如,「轻触」、「点击」、「滑动」遥控器的触摸板、按下遥控器或游戏手柄的按键。



3.4  内容加载


加载内容时显示空白或静止的屏幕会让应用看起来好像停止响应。这会引发用户困惑并对应用感到失望,进而可能导致用户流失。


确保加载状态明确。至少显示一个旋转的 Spinner(加载小菊花)表示正在响应。更好的做法是显示明确的进度,方便用户依此估计还要等多长时间。 

Image title

观看视频


等待加载时,引导或安抚用户。可以考虑展示游戏相关线索,有意思的视频或富有趣味的占位图。 

Image title

自定义加载页。尽管标准进度条也能用,但在某些场景下仍然显得不太和谐。自定义与应用或游戏风格更匹配的动画还有界面元素,来设计一个更具有沉浸感的体验。

一个定制的非常规进度页:

Image title

观看视频


一个定制的常规进度页: 

Image title

观看视频


尽快显示屏幕内容。不要在用户还未确定想看哪一屏之前就等待内容加载。使用占位的文本、图片或动画能立即加载页面并提示有哪些内容未加载。一旦相应内容加载完成,会自动替换这些占位符。尽可能在后台加载即将显示的内容,例如在后台加载当前未播的动画,或在用户浏览一行内容或菜单时在后台预加载。

Image title

更多请参阅《Progress Indicators》



3.5  身份验证


Apple TV 为娱乐而生,而非输入设备。最好仅在真正能为用户提供价值的少数服务上启用身份验证,例如个性化体验、使用额外的功能,购买内容或同步数据。如果应用要求身份验证,请保证登录过程快速、简单、不唐突,只有这样才不会有损应用的体验。


尽可能延缓登录。当用户被迫在登录前做太多没有帮助的事情时,他们很可能会卸载应用。在用户做出承诺前,给他们一个爱上你的应用的理由。例如,在购物应用中让用户一启动应用就能浏览商品,并且只在他们准备付款时才要求登录;在流媒体应用中,让用户在登录前就能看到你为游客提供了哪些播放内容。


最少化数据输入。大多数人使用遥控器而不是键盘来与 Apple TV 交互。不要让数据输入变得琐碎,尽量收集最少的必要信息。如果你需要收集大量信息,请告知用户使用其他设备访问网站。当要求用户输入电子邮件地址时,请在屏幕上显示带有最近输入的地址列表的键盘页面。


说明进行身份验证的好处以及如何注册服务。如果应用要求进行身份验证,请在登录界面显示一行简短且友好的说明文字,解释这么做的原因以及好处。此外,请记住,不是每个用户在刚开始用你的应用时都会有一个帐户。确保你解释了如何获取账号,或提供了简单的应用内注册方法。



3.6  辅助功能


Apple TV 为失明、失聪及有其他身体缺陷的人群提供了大量的辅助功能。大多数基于 UIKit 实现的应用都可以花很少的成本,使所有人享受同样动人的体验。


为图片、图标及其他界面元素提供备选文字标签。它们可以描述屏幕上的内容但并不真在屏幕上显示出来。VoiceOver 可以朗读文字标签,让有视觉障碍的人能更方便地浏览。


响应辅助功能设置。如果应用基于 UIKit 实现用户界面,文本和界面元素会自适应某些辅助功能(如粗体文本)。在恰当的时候,应用会检查并响应辅助功能设置(比如是否开启减弱动态效果)。使用自定义字体的应用应尝试匹配系统字体的辅助行为。


使用辅助功能测试你的应用。除了改变文本及动态效果外,辅助功能选项还可以改变对比度以及降低透明度。 开启这些设置,然后观察对于开启了这些功能的用户,应用会如何呈现及运行。


包含隐藏式字幕和音频描述。隐藏式字幕有助于失聪或有听力障碍的人在观看视频时,察觉到语音对话和其他可听内容。音频描述能为视觉障碍者提供重要视频内容的口头叙述。


关于 Apple TV 辅助功能的信息,请参阅《tvOS Accessibility》《Accessibility Programming Guide for iOS》



3.7  家长控制


Apple TV 提供的家庭影院体验,是由各个年龄段的家庭成员共享的。


重视家长控制。请注意,许多家庭使用「家长控制」功能过滤色情以及某些特定分级内容。适时遵循这些限制。相关开发者指南,请参阅《App Programming Guide for iOS》中的《Respecting Restrictions》部分。



3.8  角标


有可获取的程序更新或重要信息时,应用会在程序图标上显示包含白色数字的小红点以通知用户。


使角标直观。用户需要知道为什么应用图标被打上角标、他们如何在应用内找到角标相关的信息。


尽量少用角标。不要在那些经常更新的大量信息上使用角标,以免让用户被信息淹没。相反,应该在焦点、要求用户关注的必要信息、以及用户很可能感兴趣的非典型内容更新上使用角标。


用多种方式突出关键信息。用户不一定都会注意到应用图标上的角标,如果你完全依赖角标来传递信息,会面临被用户遗漏的风险。确保关键信息在应用内也清晰地提示。


避免同时使用通知和角标。即便存在可获取的程序更新或重要信息,用户也不希望一打开应用就看到通知。相反,应该关注如何使信息易于发现。


保持角标更新。用户看完相应的信息应立即刷新应用的角标。你只想让用户知道已经看过这些信息,而不是让用户认为又有新的或重要的信息。



3.9  收看电视

TV 应用集成

TV 应用在整个系统提供世界各地都能观看的「最热门」、「最近播放」、「电影推荐」、「电视节目推荐」等内容。 使用本指南为用户提供操作高度便捷、一致的享乐体验。 

Image title

1. 开始和断点续播:

TV 应用会自动打开你的应用,并在用户启动内容播放时向应用发送通知。


确保流畅过渡到你的应用。TV 应用在切换到你的应用时会变黑,并且不会显示你的应用启动页。因此,你的应用应该在开始或续播内容前,立即显示自己的黑色画面,来维持跳转的视觉延续性。


立即显示预期内容。用户期望所选的内容在跳转到你的应用后立即开始播放。请直接跳过黑色画面进入内容。避免显示闪屏、详情页、介绍动画或任何会延长触达内容时间的障碍。这在断点续播时尤其重要。


不要询问用户是否要断点续播。可以断点续播时应自动进行续播,无需再向用户确认。


保证内容的播放对象是对的。如果应用支持多个使用者,TV 应用可以在发出播放请求时指定用户。应用会在开始播放前自动切换到这个用户。如果播放请求未指定用户,请要求用户在播放开始之前选择一个,以便未来可以提供此信息。



2. 加载内容:

如果加载时长超过两秒,最好显示一个简洁的、只有界面中心旋转着的  spinner(加载小菊花)的加载页。


避免过度使用加载页。如果内容载入快速,则不需要加载页。


尽快开始播放。加载完足够播放的内容后就不需要再显示加载页了,尽快开始播放,在后台继续加载余下内容即可。


设计黑色的加载页。加载页可能会在切至播放内容时出现。因此最好是黑色的,这样就能与 TV 应用的「褪至黑色」功能相融。


简化加载页内容。如果必须在加载页加上品牌标志或形象,请以保持黑色背景并无缝过渡至播放的方式,尽量简化内容。



3. 退出播放:

按遥控器上的「菜单」键会退出播放,但用户仍会留在你的应用中,而不是立即返回到 TV 应用。这种体验不会让用户遗失方向感。


保持场景连贯性,注意后续操作的衔接。退出播放时,请在屏幕上显示用户刚观看的内容的详情及续播按钮。没有详情的话,就显示包括用户刚观看的内容的菜单或你的应用主菜单。


时刻为退出做好准备。在收到播放通知后请尽快准备一个退出页,这样即便用户刚开始播放就退出也依然能看到。


提供顺畅的路径返回 TV 应用。用户永远不需要按遥控器上的「菜单」键三次以上才能返回到 TV 应用。第一次按下「菜单」键,应退出播放并在屏幕上显示相关内容;第二次按下「菜单」键,应显示你的应用主菜单或退出应用;第三次按下「菜单」键,有需要的话,应该退出你的应用。一旦退出你的应用,系统会自动返回到TV 应用。



4. 单点登录:

许多主流电视提供商允许用户在系统级登录帐户,不需要再进行逐个应用的身份验证。如果你的应用要求在电视提供商进行身份验证,请使用此功能提供最高效的使用体验。 

Image title

当用户在系统级别登录时,应用内应隐藏注销选项。如果你的应用必须包含注销选项,请直接调用系统的「设置」> 「账户」> 「电视提供商」来注销帐户。


切勿通过更改隐私设置来引导用户注销。「设置」>「通用」>「隐私」中的电视提供商控件不是用于注销的。用户使用这些设置管理那些可获取其电视提供商帐户的应用。





更新:2017-04-21

收藏

9人已收藏

栗子被占了

精益是一种素质。

  • 5

    作品

  • 13

    粉丝

  • 4

    关注

  • 【自译】Fire TV 体验设计指南
  • 【自译】Apple TV 人机界面指南 4:视觉设计
  • 【自译】Apple TV 人机界面指南 2:遥控与手柄
  • 【自译】Apple TV 人机界面指南 1:概述

    猜你喜欢

      2017-04-21 自译外文 规范/资料 原作者: Apple 官方 举报 3423 9 5 0

      【自译】Apple TV 人机界面指南 3:用户交互

      0.0°

      你确定要举报【自译】Apple TV 人机界面指南 3:用户交互

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年04月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      9
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录