支援觸控的接收器應用程式

接收器會在可能具備或不具備觸控控制功能的裝置上播放內容。接收器必須立即回應傳送端應用程式中的動作,以及透過觸控控制項進行的動作。

接收端 UI 回饋範例:

  • 播放中
  • 已暫停
  • 播放位置 / 搜尋
  • 緩衝處理中

  接收端 UI

必要
  A   針對影片和音訊接收器,請建構可適應任何螢幕解析度和長寬比的接收器應用程式。

影片

影片接收器使用者介面

音訊

音訊接收器使用者介面


  B   針對影片和音訊接收器,請勿顯示建議觸控手勢的元素。舉例來說,請勿顯示「偷看」元素來表示滑動手勢。
  C   針對視訊和音訊接收器,請勿顯示任何會建議觸控互動的元素。
  D   對於音訊接收器,請勿顯示任何控制項類型的元素,例如進度列。


請勿:顯示可窺視的元素、看起來像按鈕的圖示,或控制項類型的元素。


  E   影片接收器在播放期間 (包括暫停狀態) 不得顯示任何中繼資料或控制項元素,以免與系統顯示的控制項衝突。


請勿:顯示中繼資料和控制項


  F   對於音訊接收器,請將所有中繼資料元素放在受保護區域上方,以免與系統顯示的控制項重疊。

最佳做法

  • 所有文字都必須清晰可讀,且與顯示器距離 1.5 到 3 公尺。
 

  接收端應用程式閒置

接收器在前台執行但未播放任何內容時,會顯示閒置畫面。

必要
  A   使用應用程式標誌,識別載入的接收端應用程式。
  B   將所有元素 (包括任何應用程式標誌) 放在安全區域上方,以免與系統顯示的任何控制項重疊。

最佳做法

  • 顯示「Ready to cast」(準備好投放) 文字,確認應用程式已載入。
  • 如果接收器閒置 5 分鐘,請停止執行並中斷所有已連線的傳送器應用程式。停止後,裝置會顯示主畫面,以防螢幕烙印。

 

  載入接收端應用程式

使用者連線至接收器時,接收器應用程式必須先載入,才能顯示應用程式閒置狀態或開始播放內容。

必要
  A   顯示應用程式標誌,識別載入的接收端應用程式。
  B   顯示載入動畫微調器,指出接收器應用程式正在載入。

 

  接收器載入內容

載入內容時,接收器應顯示資訊,指出內容正在載入,直到開始播放為止。

必要
  A   顯示內容標題或插圖,指出載入的內容。
  B   顯示載入動畫,指出內容正在載入。

最佳做法
繼續播放內容時,請將播放時間倒轉 5 到 10 秒,確保觀眾不會在從傳送者切換到接收者的過程中錯過任何內容。

 

  接收端播放

必要
  對於影片接收器,請勿在播放期間顯示任何元素。輕觸螢幕時,系統會顯示播放器控制項。
  B   音訊接收器:將所有中繼資料元素放在受保護區域上方,且不顯示任何控制項元素。輕觸螢幕時,系統會顯示播放器控制項。

影片

使用者輕觸螢幕,顯示播放器控制項。

音訊

使用者輕觸螢幕,顯示播放器控制項。

 

  接收端已暫停

必要
  A   對於影片接收器,請勿在暫停狀態下顯示任何元素。系統會顯示播放器控制項和「播放」按鈕,表示播放已暫停。
  B   對於音訊接收器,暫停時請勿顯示任何控制項元素。系統會顯示播放器控制項和「播放」按鈕,表示播放已暫停。

最佳做法

  • 除非使用者明確要求開始播放內容 (例如繼續播放或略過佇列中的項目),否則接收器應用程式不應繼續播放內容。
  • 如果接收器閒置 20 分鐘,就會停止執行並中斷所有已連線的傳送端應用程式。停止後,裝置會顯示主畫面,以防螢幕烙印。
  • 確保與日後導入的背景工作階段一致。
  • 如果適用,當接收器因閒置時間而停止時,請儲存暫停的位置,以便使用者稍後從該處繼續播放。

影片

影片已暫停

音訊

音訊已暫停

 

  接收器緩衝

如果網路延遲或其他因素導致播放延遲,接收器就會緩衝處理。

必要
  A   即使緩衝持續數秒,也不要顯示任何元素。使用者可以輕觸螢幕顯示播放器控制項,或滑動返回。

影片

接收器緩衝

音訊

接收器緩衝

 

  接收端停止投放

如果停止播放或逾時,接收器會顯示接收器閒置使用者介面。

必要
  A   顯示應用程式標誌,識別已載入或閒置的接收端應用程式。
  B   將所有元素 (包括任何應用程式標誌) 放在安全區域上方,以免與系統顯示的任何控制項重疊。

最佳做法

  • 如果閒置 5 分鐘,系統會中斷與接收器應用程式的連線,並停止執行該應用程式。 停止後,接收端會顯示主畫面,避免螢幕烙印。

 

 

本設計指南中使用的圖片 由 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