“投射”按钮

“投放”按钮会打开一个对话框,供您连接、控制和断开网络接收器。

请参阅“投放”图标,下载“投放”按钮模板。

请注意,“投放”按钮并非专用于 Google Cast;它可用于代表网络接收器和非网络接收器(如蓝牙耳机)。Web 接收器应始终显示在“投射”对话框下方,而绝不会出现在另一个对话框、菜单或控件下。

向用户介绍 Cast

推出“投放”按钮可以帮助现有用户了解发送器应用现在支持投放功能,还可以帮助初次使用 Google Cast 的用户。

必需
A 当网络接收器首次可用时,显示 Cast 简介屏幕。对于 iOS 发送者,当“投射”按钮首次出现时,显示“投射简介”屏幕。
B 通过绕行按钮直观地突出显示“投放”按钮)
C 说明“投放”按钮的工作原理(例如,显示“轻触将视频投放到您的电视”这样的消息)

Android

投放简介

投放主屏幕

iOS

投放简介

投放主屏幕

Chrome

投放简介

投放简介

投放主屏幕

 

投射按钮可用性

必需
A 当有可播放的内容且在浏览或播放内容时位于一致位置时,“投射”按钮必须始终可见。它还会显示在 Chrome 的标头中,以便进行全局控制。
B 对于 iOS 以外的发送者,当网络接收器不可用时,可以隐藏“投放”按钮。对于 iOS 发送者,当设备连接到 Wi-Fi 时,应始终显示“投放”按钮,因此,如果用户已关闭本地网络访问权限并且设备因此而变为不可用,可相应地获得帮助(如需了解详情,请参阅 iOS 权限和发现)。
C 在移动应用中,“投放”按钮应位于右侧。
D 在 Chrome 中,“投放”按钮应位于内容媒体控件的右侧(例如,查看嵌入式视频)。如果媒体控件包含全屏按钮,请将“投射”按钮放置在该按钮左侧。

备注

Google Cast 采用多任务模式,可让用户在投放期间浏览发送者的应用和其他应用。“投射”按钮必须显示在每个有可播放内容的屏幕上,因此用户无需寻找时间来暂停或停止在电视上播放内容。

Android

已断开与发送者的连接

投放主屏幕

iOS

已断开与发送者的连接

投放主屏幕

Chrome

已断开与发送者的连接

已断开与发送者的连接

投放主屏幕

 

投射按钮状态

必需
A 不可用:对于 Android 应用,当网络接收器不可用时,“投放”按钮不会显示
B 已断开连接:当网络接收器可用时,系统会显示“投放”按钮
C 连接:当网络接收器正在连接时,“投放”按钮会“以动画形式呈现”图标(在下方)

最佳做法
对于每种按钮状态,请使用与应用的其他界面元素的样式相一致的颜色。为“开启/已连接”状态使用不同的突出显示颜色(例如黄色)。

备注

  • 无论 Cast 设备的可用性如何,Cast 图标都会显示在 Chrome 和 iOS 中,以便用户能够访问 Cast 扩展程序。
  • 当与 Cast API 的连接比预期更长时(Android SDK 和 Chrome SDK 会自动为投放图标添加动画效果)显示“正在连接(动画)”状态。连接后,Web Receiver 应用便会启动。
  • “投放”图标的“开启 / 已连接”状态已更新,现在在图标框架内使用固体填充。全新的投放图标和图标模板请点击此处获取。

Android

发送者,无法使用投放功能

投放主屏幕

发送者,投放已断开

投放主屏幕

发送者,投放连接

发送者,投放连接

投放主屏幕

发送者,投放已连接

Web 接收器应用加载

Web 接收器应用加载

发送者,投放已连接

Web 接收器应用已加载 / 空闲

iOS

发送者,无法使用投放功能

投放主屏幕

发送者,投放已断开

投放主屏幕

发送者,投放连接

发送者,投放连接

投放主屏幕

发送者,投放已连接

Web 接收器应用加载

Web 接收器应用加载

发送者,投放已连接

Web 接收器应用已加载 / 空闲

Chrome

发送者,无法使用投放功能

发送者,无法使用投放功能

“投射”图标会显示在 Chrome 中,这样无论连接状态如何,都可以访问 Cast 扩展程序。

投放主屏幕

发送者,投放已断开

发送者,投放已断开

投放主屏幕

发送者,投放连接

发送者,投放连接

投放主屏幕

发送者,投放已连接

发送者,投放已连接

Web 接收器应用加载

Web 接收器应用加载

发送者,投放已连接

发送者,投放已连接

Web 接收器应用已加载 / 空闲

 

 

本设计指南中使用的图片由 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