“投射”按钮

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

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

如需下载“投射”按钮模板,请参阅“投射”图标

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

向用户介绍 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 设备是否可用,“投射”图标都会显示在 Chrome 和 iOS 中,以便用户能够访问 Cast 扩展程序。
  • 当与 Cast API 的连接用时超过预期时,系统会显示“正在连接(动画)”状态(Android 和 Chrome SDK 会自动为“投射”图标添加动画效果)。连接后,网络接收器应用便会启动。
  • 更新了“投射”图标的“开启 / 已连接”状态,现在它在图标帧中使用纯填充。新的 Cast 图标和图标模板可在此处找到。

Android

发送者,投射功能不可用

投射主屏幕

发送者,投射已断开连接

投射主屏幕

发送者,投射连接

投射主屏幕

发送者,投射功能已连接

Web 接收器应用加载

发送者,投射功能已连接

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

iOS

发送者,投射功能不可用

投射主屏幕

发送者,投射已断开连接

投射主屏幕

发送者,投射连接

投射主屏幕

发送者,投射功能已连接

Web 接收器应用加载

发送者,投射功能已连接

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

Chrome

发送者,投射功能不可用

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

投射主屏幕

发送者,投射已断开连接

投射主屏幕

发送者,投射连接

投射主屏幕

发送者,投射功能已连接

Web 接收器应用加载

发送者,投射功能已连接

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

 

 

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

  • 大象的梦想:(c) 版权所有 2006,Blender Foundation / Netherlands Media Art Institute / 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