接收器播放内容并将其状态反映给用户。接收方必须立即响应发送方应用中的操作。例如,如果内容在接收设备上暂停,则会显示暂停图标;当用户按下发送器应用中的播放时,接收设备会开始播放内容并移除暂停图标。
接收器界面反馈示例:
- 正在游戏中
- 已暂停
- 播放位置 / 跳转
- 正在缓冲
接收器界面
必需
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