ผู้รับจะเล่นเนื้อหาและแสดงสถานะของเนื้อหาแก่ผู้ใช้ ผู้รับต้องตอบสนองต่อการทำงานในแอปของผู้ส่งทันที ตัวอย่างเช่น เมื่อเนื้อหา หยุดชั่วคราวบนตัวรับ จะมีไอคอนหยุดชั่วคราว และเมื่อผู้ใช้กดเล่นในแอปของผู้ส่ง ผู้รับจะเริ่มเล่นเนื้อหานั้นและนำไอคอนหยุดชั่วคราวออก
ตัวอย่างความคิดเห็นเกี่ยวกับ UI ของผู้รับ
- กำลังเล่น
- หยุดชั่วคราว
- ตำแหน่งการเล่น / การกรอวิดีโอ
- กำลังบัฟเฟอร์
UI ของผู้รับ
จำเป็น
A วางองค์ประกอบ UI ส่วนใหญ่ไว้ภายใน 1/4 ส่วนล่างของหน้าจอและสอดคล้องกับ UX อื่นๆ ของคุณ
B อย่านำเสนอองค์ประกอบเป็นตัวควบคุมแบบอินเทอร์แอกทีฟ เช่น อย่าสร้าง UI ของผู้ส่งซ้ำใน UI ของผู้รับ
แนวทางปฏิบัติแนะนำ
- ใช้การเปลี่ยนภาพ (จางลง) ความโปร่งใส และความแตกต่างเพียงเล็กน้อยเพื่อทำให้เอฟเฟกต์ภาพดูนุ่มนวลขึ้น
- พิจารณาถึงข้อเท็จจริงที่ว่าผู้ใช้ต้องการเห็นเนื้อหาให้มากที่สุด ผู้ใช้มักหยุดเนื้อหาชั่วคราวเพื่อตรวจสอบเนื้อหา ดังนั้นพยายามทำให้ UI ที่ไม่จำเป็นหายไปเมื่อเป็นไปได้
Android
UI ของผู้ส่ง
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=4&hl=th)
UI ของเครื่องรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=4&hl=th)
iOS
UI ของผู้ส่ง
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=4&hl=th)
UI ของเครื่องรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=4&hl=th)
Chrome
UI ของผู้ส่ง
![UI ของผู้ส่ง](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.png?authuser=4&hl=th)
UI ของเครื่องรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=4&hl=th)
แอปของผู้รับไม่มีการใช้งาน
หน้าจอเมื่อไม่มีการใช้งานจะแสดงบนเครื่องรับ เมื่อเครื่องรับเชื่อมต่อกับผู้ส่ง แต่ไม่ได้แคสต์
ต้องระบุ
A ระบุว่าแอปตัวรับใดโหลดขึ้นมา
แนวทางปฏิบัติแนะนำ
- ใช้หน้าจอที่ไม่มีการใช้งานเพื่อโปรโมตเนื้อหาหรือฟีเจอร์จากแอปของผู้ส่ง
- เปลี่ยนเนื้อหาทุก 30-60 วินาทีเพื่อให้แสดงผลมากขึ้นและป้องกันจอเบิร์น
- ยกเลิกการเชื่อมต่อกับแอปตัวรับสัญญาณและหยุดไม่ให้ทำงานหากไม่มีการเคลื่อนไหวเป็นเวลา 5 นาที เมื่อหยุดแล้ว หน้าจอหลักของผู้รับจะปรากฏขึ้นและจะช่วยป้องกันจอเบิร์น
Android
กล่องโต้ตอบแคสต์ เชื่อมต่อแล้วแต่ไม่ได้แคสต์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-connected1.png?authuser=4&hl=th)
โหลดแอปตัวรับสัญญาณแล้ว / ไม่มีการใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=4&hl=th)
iOS
กล่องโต้ตอบแคสต์ เชื่อมต่อแล้วแต่ไม่ได้แคสต์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-connected1.png?authuser=4&hl=th)
โหลดแอปตัวรับสัญญาณแล้ว / ไม่มีการใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=4&hl=th)
กำลังโหลดแอปของผู้รับ
เมื่อผู้ใช้เชื่อมต่อกับเครื่องรับ แอปเครื่องรับจะต้องโหลดขึ้นมาก่อนจึงจะแสดงสถานะไม่มีการใช้งานของแอปหรือเริ่มเล่นเนื้อหา
ต้องระบุ
A ระบุแอปรีซีฟเวอร์ที่กำลังโหลดอยู่โดยการแสดง
โลโก้แอป
B ระบุว่าแอปฝั่งผู้รับกำลังโหลดอยู่โดยการแสดง
ไอคอนหมุนกำลังโหลดแบบเคลื่อนไหว
Android
กำลังเชื่อมต่อผู้ส่ง
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=4&hl=th)
กําลังโหลดแอปตัวรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=4&hl=th)
iOS
กำลังเชื่อมต่อผู้ส่ง
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=4&hl=th)
กําลังโหลดแอปตัวรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=4&hl=th)
Chrome
กำลังเชื่อมต่อผู้ส่ง
![กำลังเชื่อมต่อผู้ส่ง](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=4&hl=th)
กําลังโหลดแอปตัวรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=4&hl=th)
การโหลดเนื้อหาของผู้รับ
เมื่อโหลดแอปตัวรับสัญญาณแล้ว เนื้อหาจะสามารถเริ่มสตรีมไปยังเครื่องรับได้
ต้องระบุ
A ระบุว่าเนื้อหาใดบ้างที่กำลังโหลดโดยการแสดงชื่อเนื้อหาหรืออาร์ตเวิร์ก
B ระบุว่าเนื้อหากำลังโหลดอยู่โดยการแสดงไอคอนหมุนของการโหลดแบบเคลื่อนไหว
แนวทางปฏิบัติแนะนำ
เมื่อกลับมาเล่นเนื้อหาที่หยุดชั่วคราวต่อ ให้กรอวิดีโอกลับ 5-10 วินาทีเพื่อให้ผู้ชมไม่พลาด
อะไรไประหว่างการเปลี่ยนจากผู้ส่งเป็นผู้รับ
Android
กำลังโหลดเนื้อหาของผู้ส่ง
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements1.gif?authuser=4&hl=th)
กำลังโหลดเนื้อหาของตัวรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=4&hl=th)
iOS
กำลังโหลดเนื้อหาของผู้ส่ง
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements1.gif?authuser=4&hl=th)
กำลังโหลดเนื้อหาของตัวรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=4&hl=th)
Chrome
กำลังโหลดเนื้อหาของผู้ส่ง
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements1.gif?authuser=4&hl=th)
กำลังโหลดเนื้อหาของตัวรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=4&hl=th)
การเล่นของผู้รับ
ต้องระบุ
A ระบุเพลงที่กำลังเล่นเมื่อเนื้อหาเริ่มเล่น
B ระบุตำแหน่งการเล่นเมื่อมีการปรับตำแหน่ง
C ระบุว่าผู้รับกำลังมองหาเนื้อหาเมื่อ
เปลี่ยนตำแหน่งการเล่น แต่ยังไม่ได้เล่น
Android
ผู้ส่งกำลังปรับตำแหน่งการเล่น
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=4&hl=th)
การกรอเนื้อหารีซีฟเวอร์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=4&hl=th)
iOS
ผู้ส่งกำลังปรับตำแหน่งการเล่น
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=4&hl=th)
การกรอเนื้อหารีซีฟเวอร์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=4&hl=th)
Chrome
ผู้ส่งกำลังปรับตำแหน่งการเล่น
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=4&hl=th)
การกรอเนื้อหารีซีฟเวอร์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=4&hl=th)
ผู้รับหยุดชั่วคราว
ต้องระบุ
A ระบุว่าเนื้อหาหยุดชั่วคราวโดยการแสดงไอคอนหยุดชั่วคราวและตำแหน่งการเล่น
B ระบุว่าเนื้อหาใดหยุดชั่วคราวโดยการแสดงชื่อหรืออาร์ตเวิร์กของเนื้อหา
C ระบุว่าแอปผู้รับแอปใดโหลดโดยการแสดงโลโก้แอป
แนวทางปฏิบัติแนะนำ
- ผู้ใช้มักหยุดเนื้อหาไว้ชั่วคราวเพื่อตรวจสอบ จึงควรใช้ UI ที่ไม่จำเป็นค่อยๆ เลือนหายไปเมื่อหยุดชั่วคราวเป็นเวลา 2-3 วินาทีโดยแสดงไอคอนหยุดชั่วคราว
- แอปตัวรับสัญญาณไม่ควรเล่นเนื้อหาต่อ เว้นแต่จะมีคำขอที่ชัดแจ้งจากผู้ใช้ให้เริ่มเล่น เช่น เล่นต่อหรือข้ามรายการในคิว
- ยกเลิกการเชื่อมต่อกับแอปตัวรับสัญญาณและหยุดไม่ให้ทำงานหากไม่มีการเคลื่อนไหวเป็นเวลา 20 นาที เมื่อหยุดแล้ว หน้าจอหลักของผู้รับจะปรากฏขึ้นและจะช่วยป้องกันจอเบิร์น จัดเก็บตำแหน่งที่หยุดชั่วคราวไว้เพื่อให้ผู้ใช้เล่นต่อจากจุดนั้นในภายหลังได้
Android
ผู้ส่งหยุดชั่วคราว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=4&hl=th)
เนื้อหาของผู้รับหยุดชั่วคราว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=4&hl=th)
ผู้ส่งหยุดชั่วคราว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=4&hl=th)
ตัวรับสัญญาณหยุดชั่วคราวหลังจากผ่านไป 5 วินาที
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=4&hl=th)
iOS
ผู้ส่งหยุดชั่วคราว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=4&hl=th)
เนื้อหาของผู้รับหยุดชั่วคราว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=4&hl=th)
ผู้ส่งหยุดชั่วคราว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=4&hl=th)
ตัวรับสัญญาณหยุดชั่วคราวหลังจากผ่านไป 5 วินาที
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=4&hl=th)
Chrome
ผู้ส่งหยุดชั่วคราว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=4&hl=th)
เนื้อหาของผู้รับหยุดชั่วคราว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=4&hl=th)
ผู้ส่งหยุดชั่วคราว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=4&hl=th)
ตัวรับสัญญาณหยุดชั่วคราวหลังจากผ่านไป 5 วินาที
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=4&hl=th)
การบัฟเฟอร์ของผู้รับ
การบัฟเฟอร์ในอุปกรณ์รับจะเกิดขึ้นเมื่อเวลาในการตอบสนองของเครือข่ายหรือปัจจัยอื่นๆ ทำให้การเล่นล่าช้า
ต้องระบุ
A ระบุว่ารีซีฟเวอร์กำลังบัฟเฟอร์หลังจากผ่านไป 2-3 วินาทีโดยการแสดงตัวหมุนบัฟเฟอร์ รอ 2-3 วินาทีเพื่อระบุว่าการบัฟเฟอร์จะขัดขวางไม่ให้ตัวหมุนบัฟเฟอร์แสดงบ่อยเกินไปภายใต้สภาพเครือข่ายที่ไม่ดี
แนวทางปฏิบัติแนะนำ
ระบุว่าเนื้อหาใดกำลังบัฟเฟอร์อยู่หากยังคงบัฟเฟอร์ต่อเนื่องหลังผ่านไป 5 วินาที
Android
ผู้ส่งระบุว่าผู้รับกำลังบัฟเฟอร์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=4&hl=th)
การบัฟเฟอร์เนื้อหาของตัวรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=4&hl=th)
iOS
ผู้ส่งระบุว่าผู้รับกำลังบัฟเฟอร์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=4&hl=th)
การบัฟเฟอร์เนื้อหาของตัวรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=4&hl=th)
Chrome
ผู้ส่งระบุว่าผู้รับกำลังบัฟเฟอร์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=4&hl=th)
การบัฟเฟอร์เนื้อหาของตัวรับ
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=4&hl=th)
ผู้รับหยุดแคสต์
เมื่อการเล่นหยุดหรือหมดเวลา UI ของผู้รับควรโปรโมตเนื้อหาหรือฟีเจอร์อื่นๆ ที่มีในแอปผู้ส่ง
ต้องระบุ
ก ระบุแอปของผู้รับซึ่งโหลดหรือไม่มีการใช้งานโดยการแสดงโลโก้แอป
แนวทางปฏิบัติแนะนำ
- ใช้หน้าจอที่ไม่มีการใช้งานหลังจากเล่นเพื่อแนะนำเนื้อหาหรือฟีเจอร์จากแอปผู้ส่ง โดยอิงตามเนื้อหาที่เพิ่งแคสต์
- เปลี่ยนเนื้อหาบนหน้าจอเมื่อไม่มีการใช้งานทุก 30-60 วินาทีเพื่อป้องกันหน้าจอไหม้
- ยกเลิกการเชื่อมต่อกับแอปตัวรับสัญญาณและหยุดไม่ให้ทำงานหากไม่มีการเคลื่อนไหวเป็นเวลา 5 นาที เมื่อหยุดแล้ว หน้าจอหลักของผู้รับจะปรากฏขึ้นและจะช่วยป้องกันจอเบิร์น
Android
แอปผู้ส่งไม่มีการใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=4&hl=th)
แอปตัวรับไม่มีการใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=4&hl=th)
ยกเลิกการเชื่อมต่อกับผู้ส่งแล้ว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states2.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
iOS
แอปผู้ส่งไม่มีการใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=4&hl=th)
แอปตัวรับไม่มีการใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=4&hl=th)
ยกเลิกการเชื่อมต่อกับผู้ส่งแล้ว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
Chrome
แอปผู้ส่งไม่มีการใช้งาน
![แอปผู้ส่งไม่มีการใช้งาน](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=4&hl=th)
แอปตัวรับไม่มีการใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=4&hl=th)
ยกเลิกการเชื่อมต่อกับผู้ส่งแล้ว
![ยกเลิกการเชื่อมต่อกับผู้ส่งแล้ว](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
รูปภาพที่ใช้ในคู่มือการออกแบบนี้ได้รับความเอื้อเฟื้อจาก Blender Foundation ที่แชร์ภายใต้ลิขสิทธิ์หรือใบอนุญาตครีเอทีฟคอมมอนส์
- Elephant's Dream: (c) ลิขสิทธิ์ 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel: (ค) มูลนิธิ Blender ลิขสิทธิ์ | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org