“投放”按钮会打开一个对话框,供您连接、控制和断开与 Web 接收器的连接。
请参阅投射图标,下载“投射”按钮模板。
请注意,“投射”按钮并非 Google Cast 专用;它可以用来表示网络接收器和非网络接收器(例如蓝牙耳机)。Web 接收器应始终显示在“投射”对话框下方,而绝不应显示在其他对话框、菜单或控件下。
向用户介绍 Cast
引入“投射”按钮不仅有助于现有用户了解发送设备应用现在支持投射功能,而且还有助于初次使用 Google Cast 的用户。
必需
A 在 Web 接收器首次可用时显示 Cast 简介屏幕。对于 iOS 发送器,在“投射”按钮首次出现时显示 Cast 简介屏幕。
B 通过环绕按钮在视觉上突出显示“投射”按钮
C 介绍“投射”按钮的工作原理(例如,显示“轻触即可将视频投放到电视”之类的消息)
Android
Google Cast 简介

投放主屏幕

iOS
Google Cast 简介

投放主屏幕

Chrome
Google Cast 简介

投放主屏幕

“投射”按钮的可用性
必需
A “投射”按钮必须在每个包含可播放内容的屏幕上可见,并且在浏览或播放内容时应位于一致的位置。它还会显示在 Chrome 的标题中,以便进行全局控制。
B 在 Chrome 中,当网络接收器不可用时,可以隐藏“投射”按钮。对于 Android 和 iOS 发送设备,当设备连接到 Wi-Fi 时,应始终显示“投射”按钮,以便在用户关闭本地网络访问权限后无法检测到设备(请参阅 iOS 权限和发现,了解更多详情)。
C 在移动应用中,“投射”按钮应位于右侧。
D 在 Chrome 中,“投射”按钮应位于内容媒体控件的右侧(例如,参见嵌入式视频)。如果媒体控件包含全屏按钮,请将“投射”按钮放在其左侧。
备注
Google Cast 采用多任务模式,使用户可以在投射期间浏览发送器应用和其他应用。必须在具有可播放内容的每个屏幕上都能看到“投射”按钮,以便用户不必四处寻找要暂停或停止电视上播放内容的位置。
Android
发送者已断开连接

投放主屏幕

iOS
发送者已断开连接

投放主屏幕

Chrome
发送者已断开连接

投放主屏幕

“投射”按钮的状态
必需
A 已断开连接:当网络接收器可用时,系统会显示“投放”按钮
B 连接:网络接收器连接时,“投放”按钮会以动画形式呈现图标中的波浪(如需了解详情,请参阅下文)
C 已连接:当此应用与“投射”按钮相连时,
最佳实践
对于每种按钮状态,使用与应用中其他界面元素样式一致的颜色。为开启 / 已连接状态使用独特的突出显示颜色(例如黄色)是可选操作。
备注
- Cast 图标会显示在 Chrome、Android 和 iOS 上,以便用户使用 Cast 扩展程序(无论 Cast 设备是否可用)。
- 当连接到 Cast API 的用时超出预期时,系统会显示“正在连接”(动画效果)状态(Android 和 Chrome SDK 会自动为 Cast 图标添加动画效果)。连接后,Web 接收器应用会启动。
- “投放”图标的“开启 / 连接”状态已更新,现在在图标框架内使用纯色填充。新的 Cast 图标和图标模板可在 此处找到。
Android
发送者,投放已断开连接

投放主屏幕

发送器,Cast 正在连接

投放主屏幕

发送器,Cast 已连接

正在加载 Web 接收器应用

发送器,Cast 已连接

网络接收器应用已加载 / 闲置

iOS
发送者,无法投放

投放主屏幕

发送者,投放已断开连接

投放主屏幕

发送器,Cast 正在连接

投放主屏幕

发送器,Cast 已连接

正在加载 Web 接收器应用

发送器,Cast 已连接

网络接收器应用已加载 / 闲置

Chrome
发送者,无法投放

无论连接状态如何,Chrome 中都会显示 Cast 图标,以便用户访问 Cast 扩展程序。
投放主屏幕

发送者,投放已断开连接

投放主屏幕

发送器,Cast 正在连接

投放主屏幕

发送器,Cast 已连接

正在加载 Web 接收器应用

发送器,Cast 已连接

网络接收器应用已加载 / 闲置

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