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

無論是否具備觸控設定功能,接收器都能在可能裝置上播放內容。接收方必須透過觸控設定以及觸控設定,立即回應傳送端應用程式中的動作。

接收者 UI 意見回饋的範例:

  • 播放中
  • 已暫停
  • 播放位置 / 跳轉
  • 緩衝處理中

  接收端 UI

必要
  A   如果是影片和音訊接收器,請建構可調整的接收器應用程式,使其符合任何螢幕解析度和顯示比例。

影片

影片接收端 UI

音訊

音訊接收器 UI


  B  如果是影片和音訊接收器,請勿顯示建議觸控手勢的元素。例如,不要顯示表示滑動手勢的迅速瀏覽元素。
  C   如果是影片和音訊接收器,不要顯示任何可能會建議觸控互動的元素。
  D   如果是音訊接收器,請勿顯示任何控制類型元素,例如進度列。


錯誤做法:顯示快速瀏覽元素、可能類似按鈕的圖示,或控制項類型元素。


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


錯誤做法:顯示中繼資料和控制項


  F  如果是音訊接收器,請將所有中繼資料元素放在保護區域上方,使其不會與系統顯示的控制項重疊。

最佳做法

  • 所有文字都必須與顯示單元 5 到 10 英尺的距離清晰可見。
 

  接收端應用程式閒置

接收者位於前景,但沒有播放任何內容,接收器會顯示閒置畫面。

必要
  A   使用應用程式標誌找出已載入的接收器應用程式。
  B   將所有元素 (包括任何應用程式標誌) 放在保護區域上方,使其不會與系統顯示的任何控制項重疊。

最佳做法

  • 顯示「已可投放」的文字,表示應用程式已經載入。
  • 如果接收器閒置 5 分鐘,請停止執行,並中斷所有已連線的傳送端應用程式的連結。停止時,裝置主畫面會隨即顯示,並有助於避免螢幕烙印。

 

  接收端應用程式載入

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

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

 

  接收端內容載入

內容載入中和開始播放前,接收器應顯示資訊,以指出內容正在載入。

必要
  A  顯示內容標題或圖片,指出正在載入的內容。
  B   顯示動畫載入旋轉圖示,辨識正在載入的內容。

最佳做法
繼續播放內容時,系統會倒轉 5 到 10 秒。在從傳送方到接收端的轉換期間,觀眾不會錯過任何內容。

 

  接收器播放

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

影片

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

音訊

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

 

  接收器已暫停

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

最佳做法

  • 除非使用者的明確要求 (例如繼續播放) 或跳過佇列中的項目,否則接收端應用程式不應繼續播放內容。
  • 如果接收器閒置 20 分鐘,請停止執行,並中斷所有已連線的傳送者應用程式的連結。裝置停止時,裝置主畫面會隨即顯示,並有助於防止螢幕烙印。
  • 確保日後實作的背景工作階段符合規範。
  • 在適用情況下,如果接收器因閒置時間而停止,請儲存暫停位置,以便使用者之後可以從該時間點繼續播放。

影片

影片已暫停播放

音訊

已暫停音訊

 

  接收端緩衝處理

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

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

影片

接收端緩衝處理

音訊

接收端緩衝處理

 

  接收器停止投放

播放停止或逾時時,接收器會顯示接收端的閒置 UI。

必要
  A   透過顯示應用程式標誌,識別已載入或閒置的接收器應用程式。
  B   將所有元素 (包括任何應用程式標誌) 放在保護區域上方,使其不會與系統顯示的任何控制項重疊。

最佳做法

  • 與接收器應用程式中斷連線,如果閒置 5 分鐘,應用程式就會停止執行。裝置停止運作時,接收器主畫面會隨即顯示,並有助於避免螢幕烙印。

 

 

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