非触摸接收器应用
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
接收器播放内容并向用户反映其状态。
接收器必须立即响应发送器应用中的操作。例如，当接收器上的内容暂停时，它会显示暂停图标；当用户在发送器应用上按播放按钮时，接收器会开始播放内容并移除暂停图标。
接收器界面反馈示例：
必需
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
发送方指示接收方缓冲
接收器内容缓冲
当播放停止或超时时，接收器界面应宣传发送器应用中提供的其他内容或功能。
必需
通过显示应用徽标来标识已加载或处于空闲状态的接收器应用
最佳做法
- 在播放结束后使用空闲屏幕，根据刚刚投放的内容推荐发送方应用中的内容或功能
- 每 30-60 秒更改一次空闲屏幕内容，以防止屏幕烧屏
- 如果空闲时间达到 5 分钟，则断开与接收器应用的连接并停止运行该应用。
停止后，接收器会显示主屏幕，有助于防止屏幕烧屏。
Android
发送方应用处于空闲状态
接收器应用处于空闲状态
发送者已断开连接
投放主屏幕
iOS
发送方应用处于空闲状态
接收器应用处于空闲状态
发送者已断开连接
投放主屏幕
Chrome
发送方应用处于空闲状态
接收器应用处于空闲状态
发送者已断开连接
投放主屏幕
本设计指南中使用的图片由 Blender Foundation 提供，并根据版权或知识共享许可进行分享。
- Elephant's Dream：（c）版权所有 2006，Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel：(c) 版权所有 Blender Foundation | www.sintel.org
- 钢铁之泪：(CC) Blender Foundation | mango.blender.org
- 《大雄兔》：(c) 版权所有 2008，Blender Foundation / www.bigbuckbunny.org
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-07-26。
[null,null,["最后更新时间 (UTC)：2025-07-26。"],[[["\u003cp\u003eReceiver UIs should be minimally intrusive, displaying playback status and content information primarily in the lower quarter of the screen, without replicating sender app controls.\u003c/p\u003e\n"],["\u003cp\u003eWhen the receiver is idle or loading, clear app identification and loading indicators are crucial for a smooth user experience.\u003c/p\u003e\n"],["\u003cp\u003eContent loading and playback states should be clearly communicated to the user, with provisions for buffering and seeking.\u003c/p\u003e\n"],["\u003cp\u003eThe receiver should transition to an idle state when paused or playback is complete, displaying app branding and potentially promoting content to avoid screen burn-in.\u003c/p\u003e\n"],["\u003cp\u003eThroughout all states, visual feedback such as icons, spinners, and content metadata contribute to an intuitive and responsive user interface.\u003c/p\u003e\n"]]],["The receiver displays content and mirrors its state based on sender actions. Key actions include playing, pausing, seeking, and buffering, each visually represented on the receiver. When idle, the receiver shows the app logo and may promote content. When the app is loading or content is loading, it also displays its logo along with a loading spinner. When the receiver stops casting, it reverts to an idle state promoting other content or features.\n"],null,["# Non-Touch Receiver App\n\nThe receiver plays content and reflects its state to the user.\nThe receiver must respond immediately to actions in the sender app . For example, when content is\npaused on the receiver, it displays a pause icon and when the user presses play on the sender app,\nthe receiver starts playing the content and removes the pause icon.\n\nExamples of receiver UI feedback:\n\n- Playing\n- Paused\n- Playback position / seeking\n- Buffering\n\n### [Receiver UI](#receiver-ui-elements)\n\n\n**Required**\n\n\nA Place most UI elements within the lower 1/4 of the screen\nand keep it consistent with your other UX's.\n\n\nB Do not present elements as interactive controls. For\nexample, do not reproduce the sender UI on the receiver UI.\n\n\n**Best practices**\n\n- Use transition (fade), transparency, and nuance to soften the visual effect.\n- Consider the fact that users want to see as much of the content as possible. Users will often pause content to examine it, so fade away unnecessary UI when possible.\n\n### Android\n\nSender UI \nReceiver UI \n\n### iOS\n\nSender UI \nReceiver UI \n\n### Chrome\n\nSender UI \nReceiver UI \n\n### [Receiver app idle](#receiver-ui-idle)\n\nAn idle screen is displayed on the receiver, when the receiver is connected to a sender but not\ncasting.\n\n\n**Required**\n\n\nA Identify which receiver app is loaded\n\n**Best practices**\n\n- Use the idle screen to promote content or features from the sender app.\n- Change the content every 30-60 seconds to display more and prevent screen burn.\n- Disconnect from the receiver app and stop it from running if idle for 5 minutes. When stopped, the receiver home screen appears and will help prevent screen burn.\n\n### Android\n\nCast dialog, connected but not casting \nReceiver app loaded / idle \n\n### iOS\n\nCast dialog, connected but not casting \nReceiver app loaded / idle \n\n### [Receiver app loading](#receiver-player-loading)\n\nWhen a user connects to a receiver, the receiver app must first load before it can display the\napp idle state or begin playing content.\n\n\n**Required**\n\n\nA Identify which receiver app is loading by displaying the\napp logo\n\n\nB Identify that the receiver app is loading by displaying\nthe animated loading spinner \n\n### Android\n\nSender connecting \nReceiver app loading \n\n### iOS\n\nSender connecting \nReceiver app loading \n\n### Chrome\n\nSender connecting \nReceiver app loading \n\n### [Receiver content loading](#receiver-content-loading)\n\nOnce the receiver app has loaded, content can begin streaming to the receiver.\n\n\n**Required**\n\n\nA Identify what content is being loaded by displaying the\ncontent title or artwork\n\n\nB Identify that content is loading by displaying an\nanimated loading spinner\n\n\n**Best practices**\n\n\nWhen resuming paused content, rewind playback 5-10 seconds so the viewer doesn't miss anything\nduring the transition from sender to receiver. \n\n### Android\n\nSender content loading \nReceiver content loading \n\n### iOS\n\nSender content loading \nReceiver content loading \n\n### Chrome\n\nSender content loading \nReceiver content loading \n\n### [Receiver playback](#receiver-ui-seek)\n\n\n**Required**\n\n\nA Identify what is playing when content starts\n\n\nB Identify playback position when position is adjusted\n\n\nC Identify that the receiver is seeking content when the\nplayback position is changed, but not yet playing \n\n### Android\n\nSender adjusting play position \nReceiver content seeking \n\n### iOS\n\nSender adjusting play position \nReceiver content seeking \n\n### Chrome\n\nSender adjusting play position \nReceiver content seeking \n\n### [Receiver paused](#receiver-ui-pause)\n\n\n**Required**\n\n\nA Identify that content is paused by displaying a paused\nicon and playback position\n\n\nB Identify what content is paused by displaying content\ntitle or artwork\n\n\nC Identify which receiver app is loaded by displaying an\napp logo\n\n**Best practices**\n\n- Users will often pause content to examine it, so have unnecessary UI fade away when paused for a few seconds by displaying a pause icon.\n- The receiver app should not continue content playback unless there is an explicit request from the user to begin playback such as resume, or skipping an item on the queue.\n- Disconnect from the receiver app and stop it from running if idle for 20 minutes. When stopped, the receiver home screen appears and will help prevent screen burn. Store the paused location so that the user can resume playback from that point at a later time.\n\n### Android\n\nSender paused \nReceiver content paused \nSender paused \nReceiver paused, after 5 seconds \n\n### iOS\n\nSender paused \nReceiver content paused \nSender paused \nReceiver paused, after 5 seconds \n\n### Chrome\n\nSender paused \nReceiver content paused \nSender paused \nReceiver paused, after 5 seconds \n\n### [Receiver buffering](#receiver-ui-buffer)\n\nBuffering on the receiver happens when network latency or other factors cause a delay in playback.\n\n\n**Required**\n\n\nA Identify that the receiver is buffering after a few\nseconds by displaying a buffering spinner. Waiting a few seconds to indicate buffering will\nprevent the buffering spinner from appearing too frequently under bad network conditions\n\n\n**Best practices**\n\n\nIdentify what content is buffering if buffering continues after 5 seconds. \n\n### Android\n\nSender indicates receiver buffering \nReceiver content buffering \n\n### iOS\n\nSender indicates receiver buffering \nReceiver content buffering \n\n### Chrome\n\nSender indicates receiver buffering \nReceiver content buffering \n\n### [Receiver stops cast](#receiver-ui-complete)\n\nWhen playback stops or times out, the receiver UI should promote other content or features\navailable in the sender app.\n\n\n**Required**\n\n\nA Identify which receiver app is loaded or idle by\ndisplaying an app logo\n\n**Best practices**\n\n- Use the idle screen after playback to recommend content or features from the sender app, based on what was just cast\n- Change the idle screen content every 30-60 seconds to prevent screen burn\n- Disconnect from the receiver app and stop it from running if idle for 5 minutes. When stopped, the receiver home screen appears and will help prevent screen burn.\n\n### Android\n\nSender app idle \nReceiver app idle \nSender disconnected \nCast home screen \n\n### iOS\n\nSender app idle \nReceiver app idle \nSender disconnected \nCast home screen \n\n### Chrome\n\nSender app idle \nReceiver app idle \nSender disconnected \nCast home screen \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
