投放按鈕

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

「投放」按鈕隨即開啟一個對話方塊,讓你與「網站接收器」連線、控制及中斷連線。

如要下載投放按鈕範本,請參閱「投放」圖示

請注意,「投放」按鈕不是 Google Cast 專用的按鈕,可用於代表網路和非網頁接收器 (例如藍牙耳機)。網路接收器應一律顯示在投放對話方塊下方,絕對不會出現在其他對話方塊、選單或控制項下方。

向使用者介紹 Cast

推出「投放」按鈕有助於現有使用者瞭解寄件者應用程式現已支援投放功能,並協助使用者造福 Google Cast。

必要
A 首次顯示網路接收器時,顯示 Cast 簡介畫面。如果是 iOS 寄件者,請在首次顯示「投放」按鈕時顯示投放簡介畫面。
B 透過在按鈕上以醒目方式顯示「投放」按鈕
C 說明「投放」功能的用法 (例如) {3/}

Android

Cast 簡介

投放主畫面

iOS

Cast 簡介

投放主畫面

Chrome

Cast 簡介

投放主畫面

 

投放按鈕適用情況

必要
A 這個控制項也會顯示在 Chrome 的全域標頭中。
B 針對 iOS 以外的寄件者,當 Web Receiver 無法使用時,也可隱藏「投放」按鈕。如果是 iOS 寄件者,當裝置連上 Wi-Fi 時,系統應一律顯示「投放」按鈕,因此,如果使用者關閉了區域網路存取權,導致裝置找不到配對連線,系統即可提供適當的說明 (詳情請參閱 iOS 權限與探索)。
C 如果是行動應用程式,投放按鈕應位於右側。
D 在 Chrome 中,投放按鈕應置於內容媒體控制項 (例如觀看內嵌影片) 的右側。如果媒體控制項含有全螢幕按鈕,請將「投放」按鈕放在按鈕左側。

注意

Google Cast 採用多工處理模式,可讓使用者在投放時瀏覽寄件者的應用程式和其他應用程式。「投放」按鈕必須顯示在可播放內容的所有畫面上,讓使用者不必尋找或停止在電視上播放的內容。

Android

寄件者已中斷連線

投放主畫面

iOS

寄件者已中斷連線

投放主畫面

Chrome

寄件者已中斷連線

投放主畫面

 

投放按鈕狀態

必要值
A

最佳做法
針對每個按鈕狀態,請使用與應用程式其他 UI 元素的樣式相符的顏色。針對「開啟」/「已連結」狀態使用醒目顯示的醒目顯示顏色,例如黃色。

注意事項

  • Chrome 和 iOS 中會顯示「投放」圖示,以便在支援 Cast 裝置的情況下存取 Cast 擴充功能。
  • 當 Cast API 的連線時間超出預期時,畫面上會顯示「連線 (動畫)」狀態 (Android 和 Chrome SDK 會自動為 Cast 圖示建立動畫)。連線後,Web Receiver 應用程式就會啟動。
  • 「投放」圖示的「開啟 / 連線」狀態已更新,現在會在圖示架構中使用實心填滿。請按這裡使用新的投放圖示和圖示範本。

Android

寄件者,投放功能無法使用

投放主畫面

寄件者、投放已中斷連線

投放主畫面

寄件者、投放連線

投放主畫面

寄件者、投放已連線

正在載入 Web Receiver 應用程式

寄件者、投放已連線

已載入網路接收器 / 閒置應用程式

iOS

寄件者,投放功能無法使用

投放主畫面

寄件者、投放已中斷連線

投放主畫面

寄件者、投放連線

投放主畫面

寄件者、投放已連線

正在載入 Web Receiver 應用程式

寄件者、投放已連線

已載入網路接收器 / 閒置應用程式

Chrome

寄件者,投放功能無法使用

「投放」圖示會在 Chrome 中顯示,無論連線狀態為何,您都可以存取 Cast 擴充功能。

投放主畫面

寄件者、投放已中斷連線

投放主畫面

寄件者、投放連線

投放主畫面

寄件者、投放已連線

正在載入 Web Receiver 應用程式

寄件者、投放已連線

已載入網路接收器 / 閒置應用程式

 

 

本設計指南中使用的圖片由 Blender Foundation 提供,並由版權或創用 CC 授權提供。

  • 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
  • Big Buck Bunny:(c) 2008 年版權所有,Blender Foundation / www.bigbuckbunny.org