非觸控接收器應用程式
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
接收器會播放內容，並向使用者顯示內容狀態。
接收者必須立即回應傳送者應用程式中的動作。舉例來說，當接收器暫停播放內容時，會顯示暫停圖示；使用者在傳送端應用程式中按下播放鍵時，接收器會開始播放內容並移除暫停圖示。
接收端 UI 回饋範例：
必要
A 將大部分 UI 元素放在螢幕底部 1/4 的位置，並與其他 UX 保持一致。
B 請勿將元素呈現為互動式控制項。舉例來說，請勿在接收端 UI 上重現傳送端 UI。
最佳做法
- 使用轉場效果 (淡出)、透明度和細微變化，柔化視覺效果。
- 請考量使用者希望盡可能看到更多內容，使用者經常會暫停內容來仔細查看，因此請盡可能淡出不必要的 UI。
Android
寄件者 UI
接收器 UI
iOS
寄件者 UI
接收器 UI
Chrome
寄件者 UI
接收器 UI
接收器連線至傳送者，但未投放內容時，接收器會顯示閒置畫面。
必要
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 顯示應用程式標誌，指出載入的接收器應用程式
最佳做法
- 使用者經常會暫停內容來仔細查看，因此請在暫停幾秒後顯示暫停圖示，並隱藏不必要的 UI。
- 除非使用者明確要求開始播放內容 (例如繼續播放或略過佇列中的項目)，否則接收器應用程式不應繼續播放內容。
- 如果閒置 20 分鐘，請中斷與接收器應用程式的連線，並停止執行該應用程式。
停止後，接收端會顯示主畫面，避免螢幕烙印。儲存暫停的位置，以便使用者日後從該處繼續播放。
Android
傳送者已暫停傳輸作業
接收端內容已暫停
傳送者已暫停傳輸作業
接收者暫停，5 秒後
iOS
傳送者已暫停傳輸作業
接收端內容已暫停
傳送者已暫停傳輸作業
接收者暫停，5 秒後
Chrome
傳送者已暫停傳輸作業
接收端內容已暫停
傳送者已暫停傳輸作業
接收者暫停，5 秒後
如果網路延遲或其他因素導致播放延遲，接收端就會緩衝處理。
必要
A 顯示緩衝旋轉符號，指出接收器在幾秒後緩衝。等待幾秒鐘再顯示緩衝狀態，可避免在網路狀況不佳時，緩衝微調器過於頻繁地顯示
最佳做法
如果緩衝時間超過 5 秒，請找出緩衝的內容。
Android
傳送端指出接收端緩衝
接收器內容緩衝
iOS
傳送端指出接收端緩衝
接收器內容緩衝
Chrome
傳送端指出接收端緩衝
接收器內容緩衝
當播放停止或逾時時，接收器 UI 應宣傳傳送端應用程式提供的其他內容或功能。
必要
A 顯示應用程式標誌，識別已載入或閒置的接收端應用程式
最佳做法
- 在播放完畢後使用閒置畫面，根據剛才投放的內容，推薦傳送端應用程式的內容或功能
- 每隔 30 到 60 秒變更閒置畫面內容，避免螢幕烙印
- 如果閒置 5 分鐘，系統會中斷與接收器應用程式的連線，並停止執行該應用程式。
停止後，接收端會顯示主畫面，避免螢幕烙印。
Android
傳送端應用程式閒置
接收端應用程式閒置
傳送者已中斷連線
投放主畫面
iOS
傳送端應用程式閒置
接收端應用程式閒置
傳送者已中斷連線
投放主畫面
Chrome
傳送端應用程式閒置
接收端應用程式閒置
傳送者已中斷連線
投放主畫面
本設計指南中使用的圖片
由 Blender Foundation 提供，並根據著作權或創用 CC 授權分享。
- Elephant's Dream：(c) copyright 2006, Blender Foundation / Netherlands Media Art Institute /
www.elephantsdream.org
- Sintel：(c) copyright Blender Foundation | www.sintel.org
- 鋼鐵之淚：(CC) Blender Foundation | mango.blender.org
- Big Buck Bunny：(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2025-07-26 (世界標準時間)。
[null,null,["上次更新時間：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"]]
