แอปตัวรับสัญญาณแบบไม่ใช่ระบบสัมผัส
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ตัวรับจะเล่นเนื้อหาและแสดงสถานะแก่ผู้ใช้
ผู้รับต้องตอบกลับการดำเนินการในแอปของผู้ส่งทันที เช่น เมื่อหยุดเนื้อหาชั่วคราวในตัวรับ ระบบจะแสดงไอคอนหยุดชั่วคราว และเมื่อผู้ใช้กดเล่นในแอปตัวส่ง
ตัวรับจะเริ่มเล่นเนื้อหาและนำไอคอนหยุดชั่วคราวออก
ตัวอย่างความคิดเห็นเกี่ยวกับ UI ของตัวรับมีดังนี้
- กำลังเล่น
- หยุดชั่วคราว
- ตำแหน่งการเล่น / การกรอ
- กำลังบัฟเฟอร์
ต้องระบุ
ก. วางองค์ประกอบ UI ส่วนใหญ่ไว้ในส่วนล่าง 1/4 ของหน้าจอ
และทำให้สอดคล้องกับ UX อื่นๆ
B อย่าแสดงองค์ประกอบเป็นตัวควบคุมแบบอินเทอร์แอกทีฟ เช่น อย่าทำซ้ำ UI ของผู้ส่งใน UI ของผู้รับ
แนวทางปฏิบัติแนะนำ
- ใช้การเปลี่ยนฉาก (จาง) ความโปร่งใส และความแตกต่างเล็กๆ น้อยๆ เพื่อลดความเข้มของเอฟเฟกต์ภาพ
- พิจารณาข้อเท็จจริงที่ว่าผู้ใช้ต้องการดูเนื้อหาให้ได้มากที่สุด ผู้ใช้มักจะ
หยุดเนื้อหาชั่วคราวเพื่อตรวจสอบ ดังนั้นให้ค่อยๆ ซ่อน UI ที่ไม่จำเป็นเมื่อเป็นไปได้
Android
UI ของผู้ส่ง
UI ของตัวรับ
iOS
UI ของผู้ส่ง
UI ของตัวรับ
Chrome
UI ของผู้ส่ง
UI ของตัวรับ
หน้าจอที่ไม่มีการใช้งานจะแสดงบนตัวรับเมื่อตัวรับเชื่อมต่อกับตัวส่งแต่ไม่ได้
แคสต์
ต้องระบุ
A ระบุแอปตัวรับสัญญาณที่จะโหลด
แนวทางปฏิบัติแนะนำ
- ใช้หน้าจอที่ไม่ได้ใช้งานเพื่อโปรโมตเนื้อหาหรือฟีเจอร์จากแอปของผู้ส่ง
- เปลี่ยนเนื้อหาทุกๆ 30-60 วินาทีเพื่อแสดงเนื้อหาให้มากขึ้นและป้องกันจอเบิร์น
- ยกเลิกการเชื่อมต่อจากแอปตัวรับและหยุดการทำงานหากไม่มีการใช้งานเป็นเวลา 5 นาที
เมื่อหยุดแล้ว หน้าจอหลักของตัวรับจะปรากฏขึ้นและช่วยป้องกันการเกิดภาพค้าง
Android
กล่องโต้ตอบแคสต์ เชื่อมต่อแล้วแต่ไม่ได้แคสต์
แอปตัวรับสัญญาณโหลดแล้ว / ไม่ได้ใช้งาน
iOS
กล่องโต้ตอบแคสต์ เชื่อมต่อแล้วแต่ไม่ได้แคสต์
แอปตัวรับสัญญาณโหลดแล้ว / ไม่ได้ใช้งาน
เมื่อผู้ใช้เชื่อมต่อกับเครื่องรับ แอปเครื่องรับต้องโหลดก่อนจึงจะแสดง
สถานะไม่มีการใช้งานของแอปหรือเริ่มเล่นเนื้อหาได้
ต้องระบุ
A ระบุแอปตัวรับสัญญาณที่กำลังโหลดโดยแสดง
โลโก้แอป
B ระบุว่าแอปตัวรับสัญญาณกำลังโหลดโดยแสดง
วงกลมโหลดแบบเคลื่อนไหว
Android
ผู้ส่งกำลังเชื่อมต่อ
การโหลดแอปตัวรับสัญญาณ
iOS
ผู้ส่งกำลังเชื่อมต่อ
การโหลดแอปตัวรับสัญญาณ
Chrome
ผู้ส่งกำลังเชื่อมต่อ
การโหลดแอปตัวรับสัญญาณ
เมื่อแอปตัวรับสัญญาณโหลดแล้ว เนื้อหาจะเริ่มสตรีมไปยังตัวรับสัญญาณได้
ต้องระบุ
ก ระบุเนื้อหาที่กำลังโหลดโดยแสดง
ชื่อเนื้อหาหรืออาร์ตเวิร์ก
ข ระบุว่าเนื้อหากำลังโหลดโดยแสดง
วงกลมโหลดแบบเคลื่อนไหว
แนวทางปฏิบัติแนะนำ
เมื่อเล่นเนื้อหาที่หยุดชั่วคราวต่อ ให้กรอการเล่นย้อนกลับไป 5-10 วินาทีเพื่อให้ผู้ชมไม่พลาดเนื้อหา
ในระหว่างการเปลี่ยนจากอุปกรณ์ที่ส่งไปยังอุปกรณ์ที่รับ
Android
การโหลดเนื้อหาของอุปกรณ์ที่ส่ง
การโหลดเนื้อหาของตัวรับ
iOS
การโหลดเนื้อหาของอุปกรณ์ที่ส่ง
การโหลดเนื้อหาของตัวรับ
Chrome
การโหลดเนื้อหาของอุปกรณ์ที่ส่ง
การโหลดเนื้อหาของตัวรับ
ต้องระบุ
A ระบุสิ่งที่กำลังเล่นเมื่อเนื้อหาเริ่มเล่น
B ระบุตำแหน่งการเล่นเมื่อมีการปรับตำแหน่ง
C ระบุว่าตัวรับกำลังค้นหาเนื้อหาเมื่อมีการเปลี่ยนตำแหน่ง
การเล่น แต่ยังไม่ได้เล่น
Android
ผู้ส่งปรับตำแหน่งการเล่น
การค้นหาเนื้อหาในตัวรับสัญญาณ
iOS
ผู้ส่งปรับตำแหน่งการเล่น
การค้นหาเนื้อหาในตัวรับสัญญาณ
Chrome
ผู้ส่งปรับตำแหน่งการเล่น
การค้นหาเนื้อหาในตัวรับสัญญาณ
ต้องระบุ
A ระบุว่าเนื้อหาหยุดชั่วคราวโดยแสดงไอคอนหยุดชั่วคราว
และตำแหน่งการเล่น
B ระบุว่าเนื้อหาใดหยุดชั่วคราวโดยแสดงชื่อเนื้อหา
หรืออาร์ตเวิร์ก
C ระบุว่าแอปตัวรับสัญญาณใดโหลดอยู่โดยแสดงโลโก้แอป
แนวทางปฏิบัติแนะนำ
- ผู้ใช้มักจะหยุดเนื้อหาชั่วคราวเพื่อตรวจสอบ ดังนั้นให้ UI ที่ไม่จำเป็นจางหายไปเมื่อหยุดชั่วคราวเป็นเวลา
2-3 วินาทีโดยแสดงไอคอนหยุดชั่วคราว
- แอปตัวรับไม่ควรเล่นเนื้อหาต่อ เว้นแต่ผู้ใช้จะขอให้เริ่มเล่นอย่างชัดเจน เช่น เล่นต่อ หรือข้ามรายการในคิว
- ยกเลิกการเชื่อมต่อจากแอปตัวรับและหยุดการทำงานหากไม่มีการใช้งานเป็นเวลา 20 นาที
เมื่อหยุดแล้ว หน้าจอหลักของตัวรับจะปรากฏขึ้นและช่วยป้องกันการเกิดภาพค้าง จัดเก็บตำแหน่งที่หยุดชั่วคราว
เพื่อให้ผู้ใช้เล่นต่อจากจุดนั้นได้ในภายหลัง
Android
ผู้ส่งหยุดชั่วคราว
หยุดเนื้อหาของตัวรับสัญญาณชั่วคราว
ผู้ส่งหยุดชั่วคราว
ผู้รับหยุดชั่วคราวหลังจาก 5 วินาที
iOS
ผู้ส่งหยุดชั่วคราว
หยุดเนื้อหาของตัวรับสัญญาณชั่วคราว
ผู้ส่งหยุดชั่วคราว
ผู้รับหยุดชั่วคราวหลังจาก 5 วินาที
Chrome
ผู้ส่งหยุดชั่วคราว
หยุดเนื้อหาของตัวรับสัญญาณชั่วคราว
ผู้ส่งหยุดชั่วคราว
ผู้รับหยุดชั่วคราวหลังจาก 5 วินาที
การบัฟเฟอร์ในเครื่องรับจะเกิดขึ้นเมื่อเวลาในการตอบสนองของเครือข่ายหรือปัจจัยอื่นๆ ทำให้การเล่นล่าช้า
ต้องระบุ
ก ระบุว่าตัวรับกำลังบัฟเฟอร์หลังจากผ่านไป 2-3 วินาทีโดยแสดงวงกลมบัฟเฟอร์ การรอสัก 2-3 วินาทีเพื่อระบุว่ามีการบัฟเฟอร์จะช่วยป้องกันไม่ให้วงกลมการบัฟเฟอร์ปรากฏบ่อยเกินไปในกรณีที่เครือข่ายไม่ดี
แนวทางปฏิบัติแนะนำ
ระบุเนื้อหาที่บัฟเฟอร์หากบัฟเฟอร์ยังคงเกิดขึ้นหลังจากผ่านไป 5 วินาที
Android
ผู้ส่งระบุการบัฟเฟอร์ของผู้รับ
การบัฟเฟอร์เนื้อหาของตัวรับ
iOS
ผู้ส่งระบุการบัฟเฟอร์ของผู้รับ
การบัฟเฟอร์เนื้อหาของตัวรับ
Chrome
ผู้ส่งระบุการบัฟเฟอร์ของผู้รับ
การบัฟเฟอร์เนื้อหาของตัวรับ
เมื่อการเล่นหยุดหรือหมดเวลา UI ของตัวรับควรโปรโมตเนื้อหาหรือฟีเจอร์อื่นๆ
ที่มีในแอปของผู้ส่ง
ต้องระบุ
ก ระบุแอปตัวรับสัญญาณที่โหลดหรือไม่ได้ใช้งานโดย
แสดงโลโก้แอป
แนวทางปฏิบัติแนะนำ
- ใช้หน้าจอเมื่อไม่มีการใช้งานหลังการเล่นเพื่อแนะนำเนื้อหาหรือฟีเจอร์จากแอปผู้ส่ง โดยอิงตามสิ่งที่เพิ่งแคสต์
- เปลี่ยนเนื้อหาบนหน้าจอที่ไม่ได้ใช้งานทุกๆ 30-60 วินาทีเพื่อป้องกันการเกิดภาพค้าง
- ยกเลิกการเชื่อมต่อจากแอปตัวรับและหยุดการทำงานหากไม่มีการใช้งานเป็นเวลา 5 นาที
เมื่อหยุดแล้ว หน้าจอหลักของตัวรับจะปรากฏขึ้นและช่วยป้องกันการเกิดภาพค้าง
Android
แอปผู้ส่งไม่ได้ใช้งาน
แอปตัวรับสัญญาณไม่ได้ใช้งาน
ผู้ส่งยกเลิกการเชื่อมต่อ
แคสต์หน้าจอหลัก
iOS
แอปผู้ส่งไม่ได้ใช้งาน
แอปตัวรับสัญญาณไม่ได้ใช้งาน
ผู้ส่งยกเลิกการเชื่อมต่อ
แคสต์หน้าจอหลัก
Chrome
แอปผู้ส่งไม่ได้ใช้งาน
แอปตัวรับสัญญาณไม่ได้ใช้งาน
ผู้ส่งยกเลิกการเชื่อมต่อ
แคสต์หน้าจอหลัก
รูปภาพที่ใช้ในคำแนะนำการออกแบบนี้
ได้รับความอนุเคราะห์จาก Blender Foundation และแชร์ภายใต้ลิขสิทธิ์หรือสัญญาอนุญาตครีเอทีฟคอมมอนส์
- 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
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-26 UTC"],[[["\u003cp\u003eReceiver UIs should be minimally intrusive, displaying playback status and content information primarily in the lower quarter of the screen, without replicating sender app controls.\u003c/p\u003e\n"],["\u003cp\u003eWhen the receiver is idle or loading, clear app identification and loading indicators are crucial for a smooth user experience.\u003c/p\u003e\n"],["\u003cp\u003eContent loading and playback states should be clearly communicated to the user, with provisions for buffering and seeking.\u003c/p\u003e\n"],["\u003cp\u003eThe receiver should transition to an idle state when paused or playback is complete, displaying app branding and potentially promoting content to avoid screen burn-in.\u003c/p\u003e\n"],["\u003cp\u003eThroughout all states, visual feedback such as icons, spinners, and content metadata contribute to an intuitive and responsive user interface.\u003c/p\u003e\n"]]],["The receiver displays content and mirrors its state based on sender actions. Key actions include playing, pausing, seeking, and buffering, each visually represented on the receiver. When idle, the receiver shows the app logo and may promote content. When the app is loading or content is loading, it also displays its logo along with a loading spinner. When the receiver stops casting, it reverts to an idle state promoting other content or features.\n"],null,["# Non-Touch Receiver App\n\nThe receiver plays content and reflects its state to the user.\nThe receiver must respond immediately to actions in the sender app . For example, when content is\npaused on the receiver, it displays a pause icon and when the user presses play on the sender app,\nthe receiver starts playing the content and removes the pause icon.\n\nExamples of receiver UI feedback:\n\n- Playing\n- Paused\n- Playback position / seeking\n- Buffering\n\n### [Receiver UI](#receiver-ui-elements)\n\n\n**Required**\n\n\nA Place most UI elements within the lower 1/4 of the screen\nand keep it consistent with your other UX's.\n\n\nB Do not present elements as interactive controls. For\nexample, do not reproduce the sender UI on the receiver UI.\n\n\n**Best practices**\n\n- Use transition (fade), transparency, and nuance to soften the visual effect.\n- Consider the fact that users want to see as much of the content as possible. Users will often pause content to examine it, so fade away unnecessary UI when possible.\n\n### Android\n\nSender UI \nReceiver UI \n\n### iOS\n\nSender UI \nReceiver UI \n\n### Chrome\n\nSender UI \nReceiver UI \n\n### [Receiver app idle](#receiver-ui-idle)\n\nAn idle screen is displayed on the receiver, when the receiver is connected to a sender but not\ncasting.\n\n\n**Required**\n\n\nA Identify which receiver app is loaded\n\n**Best practices**\n\n- Use the idle screen to promote content or features from the sender app.\n- Change the content every 30-60 seconds to display more and prevent screen burn.\n- Disconnect from the receiver app and stop it from running if idle for 5 minutes. When stopped, the receiver home screen appears and will help prevent screen burn.\n\n### Android\n\nCast dialog, connected but not casting \nReceiver app loaded / idle \n\n### iOS\n\nCast dialog, connected but not casting \nReceiver app loaded / idle \n\n### [Receiver app loading](#receiver-player-loading)\n\nWhen a user connects to a receiver, the receiver app must first load before it can display the\napp idle state or begin playing content.\n\n\n**Required**\n\n\nA Identify which receiver app is loading by displaying the\napp logo\n\n\nB Identify that the receiver app is loading by displaying\nthe animated loading spinner \n\n### Android\n\nSender connecting \nReceiver app loading \n\n### iOS\n\nSender connecting \nReceiver app loading \n\n### Chrome\n\nSender connecting \nReceiver app loading \n\n### [Receiver content loading](#receiver-content-loading)\n\nOnce the receiver app has loaded, content can begin streaming to the receiver.\n\n\n**Required**\n\n\nA Identify what content is being loaded by displaying the\ncontent title or artwork\n\n\nB Identify that content is loading by displaying an\nanimated loading spinner\n\n\n**Best practices**\n\n\nWhen resuming paused content, rewind playback 5-10 seconds so the viewer doesn't miss anything\nduring the transition from sender to receiver. \n\n### Android\n\nSender content loading \nReceiver content loading \n\n### iOS\n\nSender content loading \nReceiver content loading \n\n### Chrome\n\nSender content loading \nReceiver content loading \n\n### [Receiver playback](#receiver-ui-seek)\n\n\n**Required**\n\n\nA Identify what is playing when content starts\n\n\nB Identify playback position when position is adjusted\n\n\nC Identify that the receiver is seeking content when the\nplayback position is changed, but not yet playing \n\n### Android\n\nSender adjusting play position \nReceiver content seeking \n\n### iOS\n\nSender adjusting play position \nReceiver content seeking \n\n### Chrome\n\nSender adjusting play position \nReceiver content seeking \n\n### [Receiver paused](#receiver-ui-pause)\n\n\n**Required**\n\n\nA Identify that content is paused by displaying a paused\nicon and playback position\n\n\nB Identify what content is paused by displaying content\ntitle or artwork\n\n\nC Identify which receiver app is loaded by displaying an\napp logo\n\n**Best practices**\n\n- Users will often pause content to examine it, so have unnecessary UI fade away when paused for a few seconds by displaying a pause icon.\n- The receiver app should not continue content playback unless there is an explicit request from the user to begin playback such as resume, or skipping an item on the queue.\n- Disconnect from the receiver app and stop it from running if idle for 20 minutes. When stopped, the receiver home screen appears and will help prevent screen burn. Store the paused location so that the user can resume playback from that point at a later time.\n\n### Android\n\nSender paused \nReceiver content paused \nSender paused \nReceiver paused, after 5 seconds \n\n### iOS\n\nSender paused \nReceiver content paused \nSender paused \nReceiver paused, after 5 seconds \n\n### Chrome\n\nSender paused \nReceiver content paused \nSender paused \nReceiver paused, after 5 seconds \n\n### [Receiver buffering](#receiver-ui-buffer)\n\nBuffering on the receiver happens when network latency or other factors cause a delay in playback.\n\n\n**Required**\n\n\nA Identify that the receiver is buffering after a few\nseconds by displaying a buffering spinner. Waiting a few seconds to indicate buffering will\nprevent the buffering spinner from appearing too frequently under bad network conditions\n\n\n**Best practices**\n\n\nIdentify what content is buffering if buffering continues after 5 seconds. \n\n### Android\n\nSender indicates receiver buffering \nReceiver content buffering \n\n### iOS\n\nSender indicates receiver buffering \nReceiver content buffering \n\n### Chrome\n\nSender indicates receiver buffering \nReceiver content buffering \n\n### [Receiver stops cast](#receiver-ui-complete)\n\nWhen playback stops or times out, the receiver UI should promote other content or features\navailable in the sender app.\n\n\n**Required**\n\n\nA Identify which receiver app is loaded or idle by\ndisplaying an app logo\n\n**Best practices**\n\n- Use the idle screen after playback to recommend content or features from the sender app, based on what was just cast\n- Change the idle screen content every 30-60 seconds to prevent screen burn\n- Disconnect from the receiver app and stop it from running if idle for 5 minutes. When stopped, the receiver home screen appears and will help prevent screen burn.\n\n### Android\n\nSender app idle \nReceiver app idle \nSender disconnected \nCast home screen \n\n### iOS\n\nSender app idle \nReceiver app idle \nSender disconnected \nCast home screen \n\n### Chrome\n\nSender app idle \nReceiver app idle \nSender disconnected \nCast home screen \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]