非触摸接收器应用

接收器播放内容并将其状态反映给用户。接收方必须立即响应发送方应用中的操作。例如,如果内容在接收设备上暂停,则会显示暂停图标;当用户按下发送器应用中的播放时,接收设备会开始播放内容并移除暂停图标。

接收器界面反馈示例:

  • 正在游戏中
  • 已暂停
  • 播放位置 / 跳转
  • 正在缓冲

  接收器界面

必需
  A  将大部分界面元素放在屏幕底部 1/4 的范围内,并使其与其他用户体验保持一致。
  B   请勿以互动控件形式显示元素。例如,请勿在接收者界面上重现发送者界面。

最佳做法

  • 使用过渡(淡出淡入)、透明度和细微差别来柔化视觉效果。
  • 设想用户希望尽可能多地看到内容这一事实。用户通常会暂停内容以进行检查,因此应尽可能淡出不必要的界面。

Android

发送者界面

接收器界面

iOS

发送者界面

接收器界面

Chrome

发送者界面

发送者界面

接收器界面

 

  接收器应用处于空闲状态

当接收器已连接到发送设备但未进行投射时,接收器上会显示空闲屏幕。

必需
  A   确定加载了哪个接收方应用

最佳做法

  • 使用空闲屏幕推广发送方应用的内容或功能。
  • 每 30-60 秒更改一次内容,以显示更多内容并防止屏幕烧屏。
  • 断开与接收设备应用的连接,并在其空闲 5 分钟后停止运行。 停止后,系统会显示接收器主屏幕,这有助于防止屏幕烧屏。

Android

投放对话框,已连接但未投放

接收器应用已加载 / 空闲

iOS

投放对话框,已连接但未投放

接收器应用已加载 / 空闲

 

  接收器应用加载

当用户连接到接收器后,接收设备应用必须先加载,然后才能显示应用闲置状态或开始播放内容。

必需
A 显示应用徽标来确定接收方应用正在加载
B 显示具有动画效果的加载旋转图标,确定接收方应用正在加载

Android

发送者正在连接

正在加载接收器应用

iOS

发送者正在连接

正在加载接收器应用

Chrome

发送者正在连接

发送者正在连接

正在加载接收器应用

 

  接收器内容加载

接收端应用加载完成后,内容即可开始流式传输到接收端。

必需
A 通过显示内容标题或封面确定正在加载的内容
B 通过显示动画加载旋转图标来标识内容正在加载

最佳实践
恢复已暂停的内容时,快退播放 5 到 10 秒,确保观看者在从发送方转换为接收方的过程中不会错过任何内容。

Android

正在加载发件人内容

正在加载接收器内容

iOS

正在加载发件人内容

正在加载接收器内容

Chrome

正在加载发件人内容

正在加载接收器内容

 

  接收器播放

必需
A 识别内容开始播放时正在播放的内容
B 在位置调整后确定播放位置
C 在播放位置发生变化但尚未播放时,确定接收方正在寻找内容

Android

发送器调整播放位置

接收方内容跳转

iOS

发送器调整播放位置

接收方内容跳转

Chrome

发送器调整播放位置

接收方内容跳转

 

  接收器已暂停

必需
A 通过显示已暂停的图标和播放位置来标识内容已暂停
B 通过显示内容标题或图片来确定已暂停的内容
C 通过显示应用徽标来确定正在加载的接收设备应用

最佳做法

  • 用户经常会暂停内容以进行检查,因此应通过显示暂停图标,在暂停几秒钟时将不必要的界面淡出。
  • 除非用户明确要求开始播放内容(例如恢复播放或跳过队列中的内容),否则接收端应用不应继续播放内容。
  • 断开与接收设备应用的连接,并在其空闲 20 分钟后停止运行。 停止后,系统会显示接收器主屏幕,这有助于防止屏幕烧屏。存储暂停的位置,以便用户稍后可以从该位置继续播放。

Android

发送者已暂停

接收者内容已暂停

发送者已暂停

接收器在 5 秒后暂停

iOS

发送者已暂停

接收者内容已暂停

发送者已暂停

接收器在 5 秒后暂停

Chrome

发送者已暂停

接收者内容已暂停

发送者已暂停

接收器在 5 秒后暂停

 

  接收器缓冲

当网络延迟或其他因素导致播放延迟时,接收器上就会进行缓冲。

必需
  A   通过显示缓冲旋转图标,确定接收器是否正在缓冲。等待几秒钟表示正在缓冲,这样可以防止在网络条件不佳的情况下,缓冲旋转图标出现过于频繁

最佳实践
如果缓冲 5 秒后继续,确定哪些内容正在缓冲。

Android

发送者指示接收者正在缓冲

接收器内容缓冲

iOS

发送者指示接收者正在缓冲

接收器内容缓冲

Chrome

发送者指示接收者正在缓冲

接收器内容缓冲

 

  接收器停止投射

当播放停止或超时时,接收设备界面应提升发送设备应用中提供的其他内容或功能。

必需
  A  通过显示应用徽标来标识哪个接收方应用处于已加载或空闲状态

最佳做法

  • 播放后,在空闲屏幕上根据刚刚投射的内容推荐发送方应用中的内容或功能
  • 每 30-60 秒更改一次空闲屏幕内容,以防止屏幕烧屏
  • 断开与接收设备应用的连接,并在其空闲 5 分钟后停止运行。 停止后,系统会显示接收器主屏幕,这有助于防止屏幕烧屏。

Android

发送者应用处于空闲状态

接收器应用处于空闲状态

发送者已断开连接

投放主屏幕

iOS

发送者应用处于空闲状态

接收器应用处于空闲状态

发送者已断开连接

投放主屏幕

Chrome

发送者应用处于空闲状态

发送者应用处于空闲状态

接收器应用处于空闲状态

发送者已断开连接

发送者已断开连接

投放主屏幕

 

 

本设计指南中使用的图片由 Blender Foundation 提供,并根据版权或知识共享许可共享。

  • 大象之梦:(c) 版权所有 2006,Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
  • Sintel:(c) 版权 Blender Foundation | www.sintel.org
  • Tears of Steel:(CC) Blender Foundation | mango.blender.org
  • Big Buck Bunny:(c) 版权所有 2008,Blender Foundation / www.bigbuckbunny.org