การไปยังส่วนต่างๆ ของทีวี

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

AI

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

ตัวควบคุม

ตัวควบคุมมีหลายสไตล์ ตั้งแต่รีโมตคอนโทรลแบบมินิมอลไปจนถึงตัวควบคุมเกมที่ซับซ้อน ตัวควบคุมทั้งหมดมีปุ่มบังคับทิศทาง (D-pad) รวมถึงปุ่มเลือก หน้าแรก และย้อนกลับ ปุ่มอื่นๆ จะแตกต่างกันไปตามรุ่น

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

ปุ่มเลือก
เลือกรายการที่โฟกัสอยู่บนหน้าจอ

ปุ่มหน้าแรก
นำผู้ใช้ไปยังหน้าจอหลักของระบบ

ปุ่มย้อนกลับ
ช่วยให้ผู้ใช้กลับไปยังมุมมองก่อนหน้าได้

ปุ่มไมโครโฟน
เรียกใช้ Google Assistant หรือการป้อนข้อมูลด้วยเสียง

การไปยังส่วนต่างๆ ด้วย D-pad

ในอุปกรณ์ทีวี ผู้ใช้จะไปยังส่วนต่างๆ โดยใช้ D-pad หรือปุ่มลูกศร การควบคุมประเภทนี้จำกัดการเคลื่อนไหวไว้ที่ขึ้น ลง ซ้าย และขวา หากต้องการสร้างแอปที่ปรับให้เหมาะกับทีวีได้ดี คุณต้องมีรูปแบบการไปยังส่วนต่างๆ ที่ผู้ใช้สามารถเรียนรู้วิธีไปยังส่วนต่างๆ ในแอปได้อย่างรวดเร็วโดยใช้ตัวควบคุมที่จำกัดเหล่านี้

เฟรมเวิร์ก Android จะจัดการการไปยังส่วนต่างๆ ตามทิศทางระหว่างองค์ประกอบเลย์เอาต์โดยอัตโนมัติ ดังนั้นโดยปกติแล้วคุณไม่จำเป็นต้องทำสิ่งใดเพิ่มเติมสำหรับแอป อย่างไรก็ตาม คุณควรทดสอบการไปยังส่วนต่างๆ ด้วยตัวควบคุม D-pad อย่างละเอียดเพื่อค้นหาปัญหาการไปยังส่วนต่างๆ

ทำตามหลักเกณฑ์ต่อไปนี้เพื่อทดสอบว่าระบบการไปยังส่วนต่างๆ ของแอปทำงานได้ดีกับ D-pad ในอุปกรณ์ทีวี

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

แก้ไขการไปยังส่วนต่างๆ ตามทิศทาง

เฟรมเวิร์ก Android จะใช้รูปแบบการไปยังส่วนต่างๆ ตามทิศทางโดยอัตโนมัติตามตำแหน่งสัมพัทธ์ขององค์ประกอบที่โฟกัสได้ในเลย์เอาต์ ทดสอบรูปแบบการไปยังส่วนต่างๆ ที่สร้างขึ้นในแอปโดยใช้ตัวควบคุม D-pad หลังจากทดสอบแล้ว หากคุณตัดสินใจว่าต้องการให้ผู้ใช้เคลื่อนที่ผ่านเลย์เอาต์ในลักษณะที่เฉพาะเจาะจง คุณสามารถตั้งค่าการไปยังส่วนต่างๆ ตามทิศทางที่ชัดเจนสำหรับตัวควบคุมได้

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีกำหนดตัวควบคุมถัดไปที่จะได้รับโฟกัสสำหรับออบเจ็กต์เลย์เอาต์ TextView

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

ตารางต่อไปนี้แสดงรายการแอตทริบิวต์การไปยังส่วนต่างๆ ทั้งหมดที่พร้อมใช้งานสำหรับวิดเจ็ตอินเทอร์เฟซผู้ใช้ Android

หากต้องการใช้แอตทริบิวต์การไปยังส่วนต่างๆ ที่ชัดเจนเหล่านี้ ให้ตั้งค่าเป็น android:id ของวิดเจ็ตอื่นในเลย์เอาต์ อย่าลืมตั้งค่าลำดับการไปยังส่วนต่างๆ เป็นลูป เพื่อให้ตัวควบคุมสุดท้ายนำโฟกัสกลับไปยังตัวควบคุมแรก

แสดงโฟกัสและการเลือกที่ชัดเจน

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

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

Android มีทรัพยากรรายการสถานะ Drawable เพื่อใช้ไฮไลต์สำหรับตัวควบคุมที่โฟกัสและเลือก ตัวอย่างโค้ดต่อไปนี้แสดงวิธีเปิดใช้ลักษณะการทำงานแบบภาพสำหรับปุ่มเพื่อระบุว่าผู้ใช้ได้ไปยังส่วนต่างๆ ของตัวควบคุมแล้วเลือกตัวควบคุมนั้น

<!-- res/drawable/button.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
button.xml

ตัวอย่างโค้ด XML เลย์เอาต์ต่อไปนี้ใช้ Drawable รายการสถานะก่อนหน้ากับ Button

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

ตรวจสอบว่าได้เพิ่มระยะห่างภายในที่เพียงพอในตัวควบคุมที่โฟกัสและเลือกได้ เพื่อให้ไฮไลต์รอบๆ ตัวควบคุมมองเห็นได้อย่างชัดเจน

การไปยังส่วนต่างๆ ด้วยปุ่มย้อนกลับ

เพื่อให้แอปในแพลตฟอร์มมีความสอดคล้องกัน โปรดตรวจสอบว่าลักษณะการทำงานของปุ่มย้อนกลับเป็นไปตามหลักเกณฑ์ต่อไปนี้

ใช้ลักษณะการทำงานของปุ่มย้อนกลับที่คาดการณ์ได้

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

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

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

ตรวจสอบว่าปุ่มย้อนกลับไม่ได้ถูกจำกัดด้วยหน้าจอการยืนยันหรือเป็นส่วนหนึ่งของลูปไม่สิ้นสุด

อย่า
จำกัดการออก อนุญาตให้ผู้ใช้ออกจากแอปโดยไม่ต้อง ยืนยัน

อย่า
อย่าเข้าสู่ลูปไม่สิ้นสุดของการปิดและเปิด เมนู โดยหลักการแล้ว การกดปุ่มย้อนกลับจะออกจากแอป อย่าแสดงปุ่มออกในเมนู เว้นแต่จะเป็นกรณีพิเศษ เช่น โปรไฟล์สำหรับเด็ก

อย่าแสดงปุ่มขึ้นหรือปุ่มย้อนกลับ

ปุ่มย้อนกลับในรีโมตใช้เพื่อไปยังส่วนต่างๆ ย้อนกลับในทีวี ซึ่งแตกต่างจากอุปกรณ์แบบพกพา คุณไม่จำเป็นต้องแสดงปุ่มย้อนกลับเสมือนบนหน้าจอ

อย่า

แสดงปุ่มยกเลิกหากจำเป็น

หากการดำเนินการที่มองเห็นได้มีเพียงการยืนยัน การดำเนินการที่ทำให้เกิดความเสียหาย หรือการดำเนินการซื้อ แนวทางปฏิบัติแนะนำคือให้มีปุ่มยกเลิก ที่จะกลับไปยังปลายทางก่อนหน้า

ทำ

ใช้การไปยังส่วนต่างๆ ย้อนกลับ

โดยทั่วไปแล้ว เฟรมเวิร์ก Android จะจัดการการไปยังส่วนต่างๆ ย้อนกลับได้ดี เช่นเดียวกับ D-pad หากใช้ คอมโพเนนต์การนำทาง คุณจะรองรับกราฟการนำทางได้หลากหลาย บางครั้งคุณอาจต้องใช้ลักษณะการทำงานที่กำหนดเอง เช่น การให้ปุ่มย้อนกลับรีเซ็ตโฟกัสไปที่จุดเริ่มต้นของรายการยาว

ComponentActivity ซึ่งเป็นคลาสพื้นฐานสำหรับ FragmentActivity และ AppCompatActivity ช่วยให้คุณควบคุมลักษณะการทำงานของปุ่มย้อนกลับได้โดยใช้ OnBackPressedDispatcher ซึ่งคุณเรียกข้อมูลได้โดยเรียกใช้ getOnBackPressedDispatcher()

ดูข้อมูลเพิ่มเติมได้ที่ หัวข้อระบุการไปยังส่วนต่างๆ ย้อนกลับที่กำหนดเอง

ตัวควบคุมการเล่นในทีวี

การเล่นวิดีโอเป็นหนึ่งในฟีเจอร์ที่สำคัญที่สุดในทีวี เครื่องเล่นวิดีโอในแอปต่างๆ ใน Android TV ควรมีลักษณะการทำงานเหมือนกัน โปรดดูหลักเกณฑ์ตัวควบคุม การเล่นสำหรับทีวี

การไปยังส่วนต่างๆ ในแท็บสด

นอกเหนือจากการปฏิบัติตาม ข้อกำหนดด้านคุณภาพของแอป TV แล้ว แอป ที่มีฟีดรายการทีวีสดที่ผสานรวมในแท็บ Live ต้องเป็นไปตามข้อกำหนด การเล่นที่ราบรื่นและการกลับไปที่แท็บ Live โดยตรงตามที่อธิบายไว้ในส่วนต่อไปนี้ด้วย

การเล่นที่ราบรื่น

การเล่นที่ราบรื่นใช้กับลักษณะการทำงานในแอปหลังจาก Deep Link ของช่องสดหรือช่องเชิงเส้นจาก Google TV และ Android TV

เมื่อผู้ใช้คลิก Deep Link จะมีกฎต่อไปนี้บังคับใช้

• ไม่มีการหน่วงเวลา: ระบบต้องนำผู้ใช้ไปยังการเล่นช่องโดยตรงโดยไม่มีหน้าจอที่บล็อกหรือหน่วงเวลา เช่น ขั้นตอนการลงชื่อเข้าใช้หรือลงชื่อสมัครใช้ หรือวิดีโอการสร้างแบรนด์
• ข้อยกเว้นการเปิดเครื่องใหม่: หาก Deep Link เริ่มการโหลดแอปเป้าหมายจากการเปิดเครื่องใหม่ ระบบจะอนุญาตการหน่วงเวลาการเปิดเครื่อง นอกจากนี้ยังอนุญาตวิดีโอหรือภาพเคลื่อนไหวการสร้างแบรนด์การบูตแอปในกรณีนี้ด้วย
• ข้อยกเว้นการหน่วงเวลาในการโหลด: หากการปรับไปยังช่องใช้เวลา 2-3 วินาที ระบบจะอนุญาตให้แสดงการสร้างแบรนด์ ระยะเวลาต้องนานเท่าที่ใช้ในการโหลดช่องเท่านั้น

หากผู้ใช้ลงชื่อออกหรือไม่ได้สมัครใช้บริการ คุณสามารถบล็อกการเล่นช่องที่ต้องชำระเงินเพื่อให้ผู้ใช้ดำเนินการขั้นตอนการลงชื่อเข้าใช้หรือลงชื่อสมัครใช้ให้เสร็จสมบูรณ์

การกลับไปที่แท็บสดโดยตรง

เมื่อผู้ใช้เปิดแอปจาก Deep Link ในแท็บสด แล้วกดปุ่มย้อนกลับ ระบบจะต้องนำผู้ใช้กลับไปที่แท็บสดด้วยการกดปุ่มย้อนกลับเพียงครั้งเดียว ไม่ว่าเวลาจะผ่านไปนานเท่าใดก็ตาม ลักษณะการทำงานของการกลับไปที่แท็บสดโดยตรงนี้จำเป็นสำหรับ Deep Link ทั้งหมดในแท็บสดใน Google TV และ Android TV

Deep Link ในแท็บสดจะแตกต่างกันด้วยพารามิเตอร์ Deep Link ที่ต่อท้าย ?exit_on_back=[true|false] แอปต้องแยกวิเคราะห์พารามิเตอร์นี้เพื่อกำหนดว่าแอปเปิดขึ้นจากแท็บสดหรือไม่ หาก exit_on_back เป็น true แอปต้องใช้ลักษณะการทำงานของการกลับไปที่แท็บสดโดยตรง

โปรดทราบว่าหากผู้ใช้กดปุ่มอื่นที่ไม่ใช่ปุ่มย้อนกลับเป็น ปุ่มแรกหลังจาก Deep Link ข้อกำหนดการกลับไปที่แท็บสดโดยตรงจะไม่มี ผล และแอปจะต้องมีลักษณะการทำงานของ ปุ่มย้อนกลับมาตรฐานเท่านั้น

ตัวอย่างเช่น สมมติว่าหลังจากทำตาม Deep Link ผู้ใช้กดปุ่มเลือกของ D-pad ซึ่งจะแสดงการวางซ้อนตัวควบคุม ผู้ใช้รอให้การวางซ้อนหายไป แล้วกดปุ่มย้อนกลับ เนื่องจากปุ่มแรกที่กดหลังจากทำตาม Deep Link คือปุ่มเลือกของ D-pad ข้อกำหนดการกลับไปที่แท็บสดโดยตรงจึงไม่มีผล แต่ระบบจะใช้ตรรกะ Back Stack ของแอปตามปกติ

การกดปุ่มย้อนกลับซ้ำๆ จะต้องนำผู้ใช้ไปยังรูทของแอป แล้วกลับไปที่ Google TV หรือ Android TV โดยไม่มีลูปไม่สิ้นสุด ดูข้อมูลเพิ่มเติมได้ที่ส่วนลักษณะการทำงานของปุ่มย้อนกลับที่คาดการณ์ได้

สถาปัตยกรรมการนำทาง

สถาปัตยกรรมการไปยังส่วนต่างๆ ที่กำหนดไว้อย่างดีจะช่วยให้ผู้ใช้เข้าใจว่าตนเองอยู่ที่ใดในแอปและวิธีเข้าถึงเนื้อหาต่างๆ ลองพิจารณามุมมองต่อไปนี้ของการออกแบบการไปยังส่วนต่างๆ

ปลายทางเริ่มต้นคงที่

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

การทำ Deep Link จะจำลองการไปยังส่วนต่างๆ ด้วยตนเอง

ไม่ว่าจะเป็นการทำ Deep Link หรือการไปยังส่วนต่างๆ ไปยังปลายทางที่เฉพาะเจาะจงด้วยตนเอง ผู้ใช้สามารถใช้ปุ่มย้อนกลับเพื่อไปยังส่วนต่างๆ ผ่านปลายทางต่างๆ กลับไปยังปลายทางเริ่มต้น

การทำ Deep Link จากแอปอื่นไปยังแอปหนึ่งจะจำลองการไปยังส่วนต่างๆ ด้วยตนเอง ตัวอย่างเช่น หากผู้ใช้ไปที่หน้ารายละเอียดในแอป Moviestar จาก Google TV โดยตรง แล้วกดปุ่มย้อนกลับ ระบบจะนำผู้ใช้ไปยังหน้าแรกของแอป Moviestar

เส้นทางที่ชัดเจนไปยังองค์ประกอบที่โฟกัสได้ทั้งหมด

อนุญาตให้ผู้ใช้ไปยังส่วนต่างๆ ใน UI ของคุณด้วยทิศทางที่ชัดเจน หากไม่มีเส้นทางตรงไปยังตัวควบคุม ให้ลองย้ายตำแหน่ง

ทำ
วางตัวควบคุม เช่น การดำเนินการค้นหาที่แสดงที่นี่ ในตำแหน่งที่ไม่ทับซ้อน กับองค์ประกอบอื่นๆ ที่คลิกได้

อย่า
หลีกเลี่ยงเลย์เอาต์ที่มีตัวควบคุมในตำแหน่งที่เข้าถึงยาก การเข้าถึง การดำเนินการค้นหาที่แสดงที่นี่อาจทำได้ยากด้วย D-pad

แกน

ออกแบบเลย์เอาต์เพื่อใช้ประโยชน์จากทั้งแกนแนวนอนและแนวตั้ง กำหนดฟังก์ชันที่เฉพาะเจาะจงให้กับแต่ละทิศทาง เพื่อให้การไปยังส่วนต่างๆ ในลำดับชั้นขนาดใหญ่ทำได้อย่างรวดเร็ว

ทำ
สำรวจหมวดหมู่ต่างๆ ได้ในแกนแนวตั้ง และดูรายการต่างๆ ภายในแต่ละ หมวดหมู่ได้ในแกนแนวนอน

อย่า
หลีกเลี่ยงลำดับชั้นเลย์เอาต์ที่ซับซ้อนและซ้อนกัน