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