กล่องโต้ตอบการแคสต์

กล่องโต้ตอบแคสต์จะแสดงขึ้นทุกครั้งที่กดปุ่มแคสต์ กล่องโต้ตอบแคสต์ช่วยให้ผู้ใช้เชื่อมต่อ ควบคุม และยกเลิกการเชื่อมต่อกับเว็บรีซีฟเวอร์ได้

หากคุณกำลังพัฒนาการใช้งานที่กําหนดเองหรือสร้างแอปสําหรับ iOS หรือ Chrome คุณต้องใช้งานกล่องโต้ตอบนี้อย่างสอดคล้องกันเพื่อให้ผู้ใช้จดจําและเชื่อถือว่าใช้งานได้อย่างสอดคล้องกันในอุปกรณ์ แอป และแพลตฟอร์มต่างๆ ดูตัวอย่างได้ในแอปอ้างอิง

  กล่องโต้ตอบแคสต์ ไม่เชื่อมต่อ (มีเครื่องรับ)

ต้องระบุ (ลักษณะการทำงานเริ่มต้นของ Android MediaRouter):
  ก   เมื่อแอปผู้ส่งไม่ได้เชื่อมต่อกับตัวรับการแคสต์ การแตะปุ่มแคสต์จะแสดงกล่องโต้ตอบการแคสต์
  ข   ข้อความ "แคสต์ไปยัง" จะปรากฏเป็นชื่อกล่องโต้ตอบการแคสต์
  ค   กล่องโต้ตอบการแคสต์จะแสดงรายการตัวรับเว็บที่พร้อมใช้งาน
  ง   ตัวรับแต่ละตัวที่กำลังแคสต์ควรแสดงข้อความว่า "กำลังแคสต์ ชื่อแอป"

หมายเหตุเกี่ยวกับสถานการณ์ที่มีผู้ใช้หลายคน

  • เมื่อผู้ใช้รายอื่นเชื่อมต่อกับอุปกรณ์รับที่กำลังแคสต์จากแอปและบัญชีเดียวกัน แอปที่ส่งจะมีการควบคุมเนื้อหาที่แคสต์
  • เมื่อผู้ใช้รายอื่นเชื่อมต่อกับอุปกรณ์รับที่กำลังแคสต์จากแอปที่ไม่ได้แคสต์อยู่ แอปผู้ส่งรายก่อนหน้าจะตัดการเชื่อมต่อและแอปผู้ส่งรายใหม่จะเชื่อมต่อ

Android

กล่องโต้ตอบแคสต์ ไม่ได้เชื่อมต่อ

กล่องโต้ตอบแคสต์ รูปภาพไม่ได้เชื่อมต่อ

หน้าจอหลักของ Cast

แคสต์รูปภาพหน้าจอหลัก

iOS

กล่องโต้ตอบแคสต์ ไม่ได้เชื่อมต่อ

รูปภาพกล่องโต้ตอบแคสต์ไม่เชื่อมต่อ

หน้าจอหลักของ Cast

แคสต์รูปภาพหน้าจอหลัก

Chrome

กล่องโต้ตอบแคสต์ ไม่ได้เชื่อมต่อ

รูปภาพกล่องโต้ตอบแคสต์ไม่เชื่อมต่อ

หน้าจอหลักของ Cast

แคสต์รูปภาพหน้าจอหลัก
 

  กล่องโต้ตอบแคสต์ ไม่เชื่อมต่อ (iOS เท่านั้น)

สำหรับ iOS เมื่อแคสต์เป็นครั้งแรก ผู้ใช้ต้องยินยอมให้เข้าถึงเครือข่าย LAN (LNA) เพื่อแคสต์ไปยังอุปกรณ์ ระบบจะแสดงหน้าจอข้อมูลคั่นระหว่างหน้าแก่ผู้ใช้เพื่ออธิบายถึงเหตุผลที่ต้องใช้สิทธิ์นี้ ตามด้วยกล่องโต้ตอบสิทธิ์ LNA มาตรฐานของ Apple

หลังจากแคสต์เป็นครั้งแรก หากไม่พบอุปกรณ์เมื่อแตะปุ่มแคสต์ขณะที่ผู้ใช้ใช้ Wi-Fi อยู่ ระบบจะแสดงหน้าจอความช่วยเหลือที่อธิบายสาเหตุที่ตัวรับเว็บอาจไม่พร้อมใช้งาน (เช่น ปิดใช้การเข้าถึงเครือข่ายภายใน หรือเครือข่าย Wi-Fi มีปัญหา)

ต้องระบุ
  การแคสต์ครั้งแรก: หลังจากแตะปุ่มแคสต์เป็นครั้งแรก ระบบต้องแสดงโฆษณาคั่นระหว่างหน้าเพื่ออธิบายให้ผู้ใช้ทราบว่าเหตุใดจึงควรอนุญาตให้แอปเข้าถึงอุปกรณ์เครือข่ายภายใน โฆษณาคั่นระหว่างหน้าควรมีข้อมูลเกี่ยวกับเหตุผลที่จำเป็นต้องเข้าถึงเครือข่ายภายใน เพื่อเพิ่มโอกาสที่ผู้ใช้จะยอมรับสิทธิ์เข้าถึงในเครื่อง
  B   ตัวรับไม่พร้อมใช้งาน: การแตะปุ่มแคสต์จะแสดงหน้าจอความช่วยเหลือที่อธิบายสาเหตุที่เป็นไปได้ที่ผู้ใช้ไม่สามารถค้นหาตัวรับเว็บ รวมถึงลิงก์ไปยังการตั้งค่าเพื่อแก้ไขปัญหาสิทธิ์ LNA

การแคสต์ครั้งแรก (iOS)

การแคสต์ครั้งแรก: สิทธิ์เข้าถึงโฆษณาคั่นระหว่างหน้าและเครือข่ายภายใน

ขั้นตอนการยอมรับการเข้าถึงเครือข่ายภายในของ Cast

ผู้รับไม่พร้อมใช้งาน

ผู้รับไม่พร้อมใช้งาน

ขั้นตอนการแคสต์ การเข้าถึงเครือข่าย LAN ปิดอยู่
 

  กล่องโต้ตอบแคสต์ เชื่อมต่อแล้วแต่ไม่แคสต์

ต้องระบุ
  ก   เมื่อแอปผู้ส่งเชื่อมต่อกับตัวรับเว็บแล้ว การแตะปุ่มแคสต์จะแสดงกล่องโต้ตอบแคสต์
  ข   กล่องโต้ตอบแคสต์จะแสดงชื่อ "ชื่อผู้รับ" (Receiver-Name)
  ค   กล่องโต้ตอบแคสต์จะแสดงปุ่มหยุดแคสต์ โดยมีป้ายกำกับปุ่ม "หยุดแคสต์" (ดูข้อมูลเพิ่มเติมเกี่ยวกับการยกเลิกการเชื่อมต่อได้ที่ผู้ส่งหยุดแคสต์)

Android

กล่องโต้ตอบแคสต์ เชื่อมต่อแล้วแต่ไม่แคสต์

แอปตัวรับสัญญาณโหลด / ไม่ได้ใช้งาน

iOS

กล่องโต้ตอบแคสต์ เชื่อมต่อแล้วแต่ไม่แคสต์

แอปตัวรับสัญญาณโหลด / ไม่ได้ใช้งาน

 

  กล่องโต้ตอบแคสต์ขณะแคสต์

ต้องระบุ
  ก   ชื่อกล่องโต้ตอบแคสต์ "ชื่อผู้รับ" จะปรากฏขึ้น
  ข   ผู้รับหรือเนื้อหาที่กำลังแคสต์จะแสดงอยู่ใต้ชื่อ
  ค   กล่องโต้ตอบแคสต์จะแสดงปุ่ม "หยุดแคสต์" ที่จะหยุดแคสต์ (ดูข้อมูลเพิ่มเติมที่ผู้ส่งหยุดแคสต์)

แนวทางปฏิบัติแนะนำ

  • นอกเหนือจากการควบคุมในกล่องโต้ตอบ Cast แล้ว ให้ระบุการควบคุมแบบถาวรเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด

Android

กล่องโต้ตอบแคสต์ขณะแคสต์

ตัวรับที่เล่นเนื้อหา

iOS

กล่องโต้ตอบแคสต์ขณะแคสต์

ตัวรับที่เล่นเนื้อหา

Chrome

กล่องโต้ตอบแคสต์ขณะแคสต์

กล่องโต้ตอบแคสต์ขณะแคสต์

ตัวรับที่เล่นเนื้อหา

 

 

รูปภาพที่ใช้ในคู่มือการออกแบบนี้ได้รับความอนุเคราะห์จากมูลนิธิ Blender ซึ่งแชร์ภายใต้ลิขสิทธิ์หรือสัญญาอนุญาตครีเอทีฟคอมมอนส์

  • Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
  • Sintel: (c) copyright Blender Foundation | www.sintel.org
  • Tears of Steel: (CC) Blender Foundation | mango.blender.org
  • Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org