投射对话框

每当按下“投放”按钮时,系统都会显示“投放”对话框。借助“投射”对话框,用户可以连接、控制和断开网络接收器。

如果您要开发自定义实现,或者要构建适用于 iOS 或 Chrome 的应用,则必须以一致的方式实现此对话框,以便用户能够识别并信任该对话框,使其在各种设备、应用和平台上以一致的方式运行。如需查看示例,请参阅参考应用

  投射对话框未连接(有接收器可用)





注意多用户场景

  • 当其他用户连接到目前通过同一应用和帐号投射的接收器时,发送器应用将提供对投射内容的控件。
  • 当另一用户连接到目前未用于投放的应用进行投放的接收器时,上一个发送者应用会断开连接,然后新的发送者应用就会建立连接。

Android

投放对话框,未连接

投放对话框,而非已连接的图片

投放主屏幕

投放主屏幕图片

iOS

投放对话框,未连接

“投放对话框未连接”图片

投放主屏幕

投放主屏幕图片

Chrome

投放对话框,未连接

“投放对话框未连接”图片

投放主屏幕

投放主屏幕图片
 

  投放对话框,未连接(仅限 iOS)

对于 iOS,首次投射时,用户必须同意允许本地网络访问 (LNA) 才能投放设备。系统向用户显示插页式广告信息屏幕,说明需要此权限的原因,然后显示标准的 Apple LNA 权限对话框。

首次投放后,如果用户在使用 Wi-Fi 时点按“投放”按钮时未找到设备,则系统会显示一个帮助屏幕,说明 Web 接收器可能不可用的原因(例如,本地网络访问权限被停用,或者 Wi-Fi 网络存在问题)。

必需
  A  首次投放:首次点按“投放”按钮后,必须显示插页式广告,向用户说明为什么应允许其访问本地网络设备。插页式广告应包含有关需要本地网络访问权限的原因的信息,以提高用户接受本地权限访问权限的可能性。
  B   接收器不可用:点按“投放”按钮后,系统会显示一个帮助屏幕,其中会显示用户无法发现 Web 接收器的可能原因,以及用于解决 LNA 权限问题的链接。

首次投放 (iOS)

首次投放:插页式广告和本地网络访问权限

投射本地网络访问权限接受流程

接收器不可用

接收器不可用

投放流程,已关闭本地网络访问权限
 

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

必需
A 当发送者应用连接到网络接收器后,点按“投放”按钮会显示“投放”对话框
B 系统会显示投射对话框标题“接收者姓名”
C “投放”对话框中显示一个用于停止投放的按钮,带有“停止投放”按钮(如需详细了解如何断开连接,请参阅发送设备停止投射)

Android

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

接收者应用已加载 / 空闲

iOS

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

接收者应用已加载 / 空闲

 

  投射期间的投放对话框

必需
A “投射”对话框标题“接收器名称”出现
B 当前投射的接收器或内容显示在标题下方
C “投射”对话框会显示“停止投放”按钮,该按钮会停止投放 (如需了解详情,请参阅发送者停止投射

最佳实践

  • 为了提供最佳用户体验,除了投放对话框中的控件之外,还应提供永久性控件

Android

投放时对话框

接收方正在播放内容

iOS

投放时对话框

接收方正在播放内容

Chrome

投放时对话框

投放时对话框

接收方正在播放内容

 

 

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

  • 大象之梦:(c) 版权所有 2006,Blender Foundation / 荷兰媒体艺术学院 / www.elephantsdream.org
  • Sintel:(c) Blender Foundation 版权 | www.sintel.org
  • 钢轨的撕裂:(CC) Blender Foundation | mango.blender.org
  • Big Buck Bunny:(c) 2008 年版权所有,Blender Foundation / www.bigbuckbunny.org