接收器會播放內容,並向使用者顯示其狀態。接收者必須立即回應傳送者應用程式中的動作。舉例來說,當接收端暫停播放內容時,系統會顯示暫停圖示,當使用者在傳送端應用程式中按下播放時,接收端就會開始播放內容,並移除暫停圖示。
接收者 UI 意見回饋的範例:
- 播放中
- 已暫停
- 播放位置 / 跳轉
- 緩衝處理中
接收端 UI
必要
A 請將多數 UI 元素放在螢幕下方 1/4 的位置,並與其他使用者體驗保持一致。
B 請勿將元素做為互動控制項呈現。舉例來說,請勿在接收端 UI 上重現傳送者 UI。
最佳做法
- 利用轉場效果 (淡出)、透明度和細微差異,柔化視覺效果。
- 請考慮使用者希望盡可能看到更多內容。使用者通常會暫停內容以便查看,因此請盡可能隱藏不必要的 UI。
Android
寄件者 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=9&hl=zh-tw)
接收端 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=9&hl=zh-tw)
iOS
寄件者 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=9&hl=zh-tw)
接收端 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=9&hl=zh-tw)
Chrome
寄件者 UI
![寄件者 UI](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.png?authuser=9&hl=zh-tw)
接收端 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=9&hl=zh-tw)
接收端應用程式閒置
當接收方連線至傳送者但未投放時,接收端會顯示閒置畫面。
必要
A 找出已載入的接收器應用程式
最佳做法
- 使用閒置畫面來宣傳傳送者應用程式的內容或功能。
- 每隔 30 到 60 秒變更一次內容,以便顯示更多內容,並防止螢幕烙印。
- 與接收器應用程式中斷連線,如果閒置 5 分鐘,應用程式就會停止執行。裝置停止運作時,接收器主畫面會隨即顯示,並有助於避免螢幕烙印。
Android
投放對話方塊,已連線但未投放
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-connected1.png?authuser=9&hl=zh-tw)
接收端應用程式載入 / 閒置
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=9&hl=zh-tw)
iOS
投放對話方塊,已連線但未投放
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-connected1.png?authuser=9&hl=zh-tw)
接收端應用程式載入 / 閒置
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=9&hl=zh-tw)
接收端應用程式載入
當使用者連線到接收器時,接收器應用程式必須先載入,才會顯示應用程式閒置狀態或開始播放內容。
必要
A 顯示應用程式標誌,找出正在載入的接收器應用程式
B 顯示動畫載入旋轉圖示,辨識接收器應用程式正在載入
Android
寄件者連線中
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=9&hl=zh-tw)
正在載入接收端應用程式
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=9&hl=zh-tw)
iOS
寄件者連線中
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=9&hl=zh-tw)
正在載入接收端應用程式
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=9&hl=zh-tw)
Chrome
寄件者連線中
![寄件者連線中](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=9&hl=zh-tw)
正在載入接收端應用程式
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=9&hl=zh-tw)
接收端內容載入
接收器應用程式載入完成後,內容就能開始串流至接收器。
必要
A 顯示內容標題或圖片,指出正在載入的內容
B 顯示動畫載入旋轉圖示,確定正在載入的內容
最佳做法
繼續播放暫停的內容時,則可倒轉 5 到 10 秒,這樣在從傳送者到接收端的轉換期間,觀眾不會錯過任何內容。
Android
正在載入寄件者內容
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements1.gif?authuser=9&hl=zh-tw)
正在載入接收器內容
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=9&hl=zh-tw)
iOS
正在載入寄件者內容
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements1.gif?authuser=9&hl=zh-tw)
正在載入接收器內容
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=9&hl=zh-tw)
Chrome
正在載入寄件者內容
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements1.gif?authuser=9&hl=zh-tw)
正在載入接收器內容
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=9&hl=zh-tw)
接收器播放
必要
A 找出內容開始播放時正在播放的內容
B 找出位置調整時的播放位置
C 識別接收方在播放位置改變後正在搜尋內容
Android
傳送者調整播放位置
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=9&hl=zh-tw)
接收端內容搜尋
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=9&hl=zh-tw)
iOS
傳送者調整播放位置
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=9&hl=zh-tw)
接收端內容搜尋
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=9&hl=zh-tw)
Chrome
傳送者調整播放位置
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=9&hl=zh-tw)
接收端內容搜尋
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=9&hl=zh-tw)
接收器已暫停
必要
A 透過顯示暫停圖示和播放位置,找出內容已暫停
B 顯示內容標題或圖片,找出已暫停的內容
C 顯示應用程式標誌會載入哪個接收器應用程式
最佳做法
- 使用者通常會暫停以便查看內容,因此如果暫停幾秒鐘,則顯示暫停圖示時,使用者介面會淡出。
- 除非使用者的明確要求 (例如繼續播放) 或跳過佇列中的項目,否則接收端應用程式不應繼續播放內容。
- 與接收器應用程式中斷連線,如果閒置超過 20 分鐘,該應用程式就會停止執行。裝置停止運作時,接收器主畫面會隨即顯示,並有助於避免螢幕烙印。請儲存暫停的位置,讓使用者可以在稍後繼續播放。
Android
寄件者已暫停
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=9&hl=zh-tw)
接收器內容已暫停
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=9&hl=zh-tw)
寄件者已暫停
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=9&hl=zh-tw)
接收器暫停 5 秒後
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=9&hl=zh-tw)
iOS
寄件者已暫停
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=9&hl=zh-tw)
接收器內容已暫停
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=9&hl=zh-tw)
寄件者已暫停
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=9&hl=zh-tw)
接收器暫停 5 秒後
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=9&hl=zh-tw)
Chrome
寄件者已暫停
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=9&hl=zh-tw)
接收器內容已暫停
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=9&hl=zh-tw)
寄件者已暫停
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=9&hl=zh-tw)
接收器暫停 5 秒後
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=9&hl=zh-tw)
接收端緩衝處理
網路延遲或其他因素會導致播放延遲,訊息接收器才會緩衝。
必要
A 透過顯示緩衝旋轉圖示,指出接收器在幾秒後進行緩衝處理。等待幾秒鐘才能表示緩衝處理,可防止緩衝旋轉圖示在網路條件不佳下過度顯示
最佳做法
如果緩衝在 5 秒後持續進行,請找出正在緩衝處理的內容。
Android
寄件者表示接收者正在緩衝處理
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=9&hl=zh-tw)
接收端內容緩衝處理
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=9&hl=zh-tw)
iOS
寄件者表示接收者正在緩衝處理
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=9&hl=zh-tw)
接收端內容緩衝處理
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=9&hl=zh-tw)
Chrome
寄件者表示接收者正在緩衝處理
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=9&hl=zh-tw)
接收端內容緩衝處理
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=9&hl=zh-tw)
接收器停止投放
播放停止或逾時時,接收器 UI 應宣傳傳送端應用程式提供的其他內容或功能。
必要
A 透過顯示應用程式標誌,識別已載入或閒置的接收器應用程式
最佳做法
- 播放後使用閒置畫面,根據剛投放的內容推薦傳送者應用程式的內容或功能
- 每 30 到 60 秒變更閒置畫面內容一次,避免螢幕烙印
- 與接收器應用程式中斷連線,如果閒置 5 分鐘,應用程式就會停止執行。裝置停止運作時,接收器主畫面會隨即顯示,並有助於避免螢幕烙印。
Android
寄件者應用程式閒置中
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=9&hl=zh-tw)
接收端應用程式閒置中
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=9&hl=zh-tw)
傳送者已中斷
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states2.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
iOS
寄件者應用程式閒置中
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=9&hl=zh-tw)
接收端應用程式閒置中
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=9&hl=zh-tw)
傳送者已中斷
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
Chrome
寄件者應用程式閒置中
![寄件者應用程式閒置中](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=9&hl=zh-tw)
接收端應用程式閒置中
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=9&hl=zh-tw)
傳送者已中斷
![傳送者已中斷](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
這份設計指南中使用的圖片是由 Blender Foundation 提供,並依版權或創用 CC 授權分享。
- 大象的夢幻:(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