อุปกรณ์ทีวีมีชุดควบคุมการนำทางสำหรับแอปแบบจำกัด การสร้าง รูปแบบการนำทางที่มีประสิทธิภาพสำหรับแอป TV จะขึ้นอยู่กับการทำความเข้าใจ เหมือนควบคุมสิ่งต่างๆ ได้ ข้อจำกัดขณะใช้งานแอป ในขณะที่คุณสร้างแอป Android สำหรับทีวี โปรดให้ความสนใจเป็นพิเศษกับวิธีที่ผู้ใช้ ไปยังส่วนต่างๆ เมื่อใช้ปุ่มรีโมตคอนโทรลแทนหน้าจอสัมผัส
หลักการต่างๆ
เป้าหมายคือเพื่อให้การนำทางรู้สึกถึงความเป็นธรรมชาติและคุ้นเคย โดยไม่ดึงดูดความสนใจของผู้ใช้ หรือการเบี่ยงเบนความสนใจจากเนื้อหา หลักการต่อไปนี้ช่วยให้ เกณฑ์พื้นฐานสำหรับประสบการณ์ของผู้ใช้ที่สะดวกและสอดคล้องกันในทุกแอปทีวี
ทำให้เข้าถึงเนื้อหาได้อย่างรวดเร็วและง่ายดาย ผู้ใช้ต้องการเข้าถึงเนื้อหา อย่างรวดเร็วโดยใช้จำนวนคลิกน้อยที่สุด จัดระเบียบข้อมูลของคุณใน วิธีนี้ต้องใช้หน้าจอน้อยที่สุด
ทำตามแนวทางปฏิบัติแนะนำและคำแนะนำเพื่อไปยังส่วนต่างๆ ที่ผู้ใช้คาดการณ์ได้ อย่าคิดค้นรูปแบบการนำทางใหม่ๆ โดยไม่จำเป็น เนื่องจากจะทำให้เกิดความสับสนและคาดเดาไม่ได้
ทำให้การนำทางง่ายพอที่จะรองรับผู้ใช้ที่ใช้งานกันอย่างแพร่หลายได้อย่างราบรื่น พฤติกรรมของคุณ อย่าทำให้ซับซ้อนเกินไปด้วยการเพิ่มเลเยอร์การนำทางที่ไม่จำเป็น
ตัวควบคุม
ตัวควบคุมมีให้เลือกหลากหลายสไตล์ ตั้งแต่รีโมตคอนโทรลสไตล์มินิมอลไปจนถึง เกมคอนโทรลเลอร์ที่ซับซ้อน ตัวควบคุมทั้งหมดมีแป้นบังคับทิศทาง (D-pad) Plus เลือก ปุ่มหน้าแรก และปุ่มย้อนกลับ ปุ่มอื่นๆ จะแตกต่างกันไปตามรุ่น
D-pad
วิธีการนำทางหลักบนทีวีคือใช้ D-pad ซึ่งจะรวมถึง
ขึ้น ลง ซ้าย และขวา
ปุ่มกด D-pad จะโอนโฟกัสจากวัตถุหนึ่งไปยังวัตถุที่ใกล้ที่สุด
ตามทิศทางของปุ่มที่กด
เลือกปุ่ม
เลือกรายการบนหน้าจอที่มีโฟกัส
ปุ่มหน้าแรก
นำผู้ใช้ไปยังหน้าจอหลักของระบบ
ปุ่มย้อนกลับ
ทำให้ผู้ใช้กลับไปยังมุมมองก่อนหน้าได้
ปุ่มไมโครโฟน
เรียกใช้ Google Assistant หรือการป้อนข้อมูลด้วยเสียง
การนำทางด้วย D-pad
ในอุปกรณ์ทีวี ผู้ใช้จะไปยังส่วนต่างๆ โดยใช้ D-pad หรือลูกศร คีย์ การควบคุมประเภทนี้จะจำกัดการเคลื่อนที่เป็นขึ้น ลง ซ้าย และขวา ถึง สร้างแอปที่ดีสำหรับทีวี คุณต้องจัดทำรูปแบบการนำทางที่ ผู้ใช้สามารถเรียนรู้วิธีไปยังส่วนต่างๆ ในแอปได้อย่างรวดเร็วโดยใช้การควบคุมที่จำกัดเหล่านี้
เฟรมเวิร์ก Android จะจัดการการนำทางแบบมีทิศทางระหว่างองค์ประกอบเลย์เอาต์ โดยอัตโนมัติ ดังนั้นโดยทั่วไปแล้วคุณจึงไม่ต้องดำเนินการใดๆ เพิ่มเติมกับแอปของคุณ อย่างไรก็ตาม คุณควรทดสอบการนำทางด้วยตัวควบคุม D-pad เพื่อ ค้นพบปัญหาการนำทางต่างๆ
ทำตามหลักเกณฑ์เหล่านี้เพื่อทดสอบว่า ระบบการนำทางของแอปทำงานได้ดีกับ D-pad บนอุปกรณ์ทีวี:
- ตรวจสอบว่าผู้ใช้ที่มีตัวควบคุม D-pad จะไปยังตัวควบคุม D-pad ทั้งหมดที่แสดงได้ บนหน้าจอ
- สำหรับรายการแบบเลื่อนที่มีโฟกัส ต้องแน่ใจว่าปุ่ม D-pad ขึ้นและลง เลื่อนรายการ และปุ่มเลือกจะเลือกรายการที่ต้องการ โปรดยืนยันว่า ผู้ใช้สามารถเลือกองค์ประกอบในรายการ โดยรายการจะยังคงเลื่อนเมื่อ ไว้
- ตรวจสอบว่าการสลับการควบคุมเป็นเรื่องง่ายและคาดการณ์ได้
แก้ไขการนำทางตามทิศทาง
เฟรมเวิร์ก Android จะใช้รูปแบบการไปยังส่วนต่างๆ แบบกำหนดทิศทางโดยอัตโนมัติ ตามตำแหน่งสัมพัทธ์ขององค์ประกอบที่โฟกัสได้ในเลย์เอาต์ ทดสอบ รูปแบบการนำทางที่สร้างขึ้นในแอปของคุณโดยใช้ตัวควบคุม D-pad หลัง หากคุณตัดสินใจว่าต้องการให้ผู้ใช้ ไปยังหน้าต่างๆ ในเลย์เอาต์ คุณสามารถตั้งค่าการนำทางที่ชัดเจนสำหรับการควบคุมของคุณ
ตัวอย่างโค้ดต่อไปนี้แสดงวิธีกำหนดการควบคุมถัดไปที่จะได้รับโฟกัส
สำหรับออบเจ็กต์เลย์เอาต์ TextView
<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />
ตารางต่อไปนี้แสดงแอตทริบิวต์การนำทางที่มีอยู่ทั้งหมดสำหรับ Android วิดเจ็ตอินเทอร์เฟซผู้ใช้:
| แอตทริบิวต์ | การทำงาน |
|---|---|
nextFocusDown |
กำหนดมุมมองถัดไปที่จะได้รับโฟกัสเมื่อผู้ใช้เลื่อนลง |
nextFocusLeft |
กำหนดมุมมองถัดไปเพื่อรับโฟกัสเมื่อผู้ใช้เลื่อนไปทางซ้าย |
nextFocusRight |
กำหนดมุมมองถัดไปเพื่อรับโฟกัสเมื่อผู้ใช้นำทางไปทางขวา |
nextFocusUp |
กำหนดมุมมองถัดไปที่จะได้รับโฟกัสเมื่อผู้ใช้เลื่อนขึ้น |
หากต้องการใช้หนึ่งในแอตทริบิวต์การนำทางที่ชัดเจนเหล่านี้ ให้ตั้งค่าเป็น
android:idของวิดเจ็ตอื่นในเลย์เอาต์ อย่าลืมตั้งค่า
ลำดับการนำทางเป็นลูป เพื่อให้ตัวควบคุมล่าสุดเปลี่ยนโฟกัสกลับไปยัง
อันแรก
ให้การมุ่งเน้นและการเลือกที่ชัดเจน
ความสำเร็จของรูปแบบการนำทางของแอปในอุปกรณ์ทีวีจะขึ้นอยู่กับความง่าย มีไว้สำหรับผู้ใช้ในการพิจารณาว่าองค์ประกอบใดของอินเทอร์เฟซผู้ใช้ที่อยู่ในโฟกัส ถ้า คุณไม่ได้ระบุสินค้าที่เน้นอย่างชัดเจน และสิ่งใดบ้างที่ ผู้ใช้จะดำเนินการบางอย่างได้ ผู้ใช้อาจหงุดหงิดและออกจากแอปได้อย่างรวดเร็ว ด้วยเหตุผลเดียวกันนี้ สิ่งสำคัญคือการมุ่งเน้นให้ผู้ใช้เห็น สามารถดำเนินการได้ทันทีหลังจากที่แอปเริ่มทำงานหรือเมื่อไม่มีการใช้งาน
ในเลย์เอาต์และการติดตั้งใช้งานของแอป ให้ใช้สี ขนาด ภาพเคลื่อนไหว หรือ แอตทริบิวต์เหล่านี้ร่วมกัน เพื่อช่วยให้ผู้ใช้ระบุการทำงานที่ สามารถดำเนินการต่อไป ใช้รูปแบบแบบเดียวกันเพื่อบ่งบอกจุดมุ่งเน้นใน แอปพลิเคชัน
Android มีทรัพยากรรายการสถานะที่ถอนได้ เพื่อใช้ไฮไลต์สำหรับการควบคุมที่มุ่งเน้นและที่เลือก รหัสต่อไปนี้ ตัวอย่างที่สาธิตวิธีการเปิดใช้ลักษณะการทำงานของภาพสำหรับปุ่มเพื่อระบุว่า ผู้ใช้ได้ไปยังตัวควบคุมแล้วเลือกตัวควบคุมนั้น:
<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<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>
โค้ดตัวอย่าง XML ของเลย์เอาต์ต่อไปนี้จะใช้รายการสถานะก่อนหน้าที่ถอนออกได้
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, แอปต่างๆ โดยฟีดรายการทีวีสดที่ผสานรวมอยู่ในแท็บ "สด" ก็ต้องเป็นไปตามข้อกำหนด ข้อกำหนดการเล่นและการกลับมาโดยตรง ตามที่อธิบายไว้ในส่วนต่อไปนี้
การเล่นที่ลื่นไหล
การเล่นที่ลื่นไหลมีผลกับลักษณะการทำงานในแอปหลังจากการถ่ายทอดสด/เชิงเส้น Deep Link ของช่องจาก Google TV และ Android TV
ผู้ใช้ที่คลิก Deep Link ของช่องแบบสด/เชิงเส้นจาก Google TV และ Android ต้องนำทีวีไปยังการเล่นของช่องโดยตรง โดยไม่มีการบล็อกหรือหน่วงเวลา หน้าจอจากแอปเป้าหมาย ขั้นตอนการลงชื่อเข้าใช้ ขั้นตอนการลงชื่อสมัครใช้ วิดีโอการสร้างแบรนด์ และความล่าช้าอื่นๆ ไม่อนุญาต
อย่างไรก็ตาม หาก Deep Link เริ่มโหลดแอปเป้าหมายจาก Cold เมื่อเปิดเครื่อง การหน่วงเวลาเปิดเครื่องนี้ก่อนที่จะอนุญาตการเล่น การเปิดเครื่องแอป อนุญาตให้ใช้วิดีโอหรือภาพเคลื่อนไหวสร้างแบรนด์ได้ในกรณีนี้ เปิดเครื่องไม่ติด ไม่น่าจะเกิดขึ้นมากกว่า 1 ครั้งต่อเซสชัน
นอกจากนี้ หากการปรับแต่งช่องที่ทำ Deep Link ใช้เวลาสองสามวินาที การแสดง อนุญาตให้แสดงแบรนด์ของช่องและ/หรือบริการ อย่างไรก็ตาม ระยะเวลาควรนานพอๆ กับการโหลดช่อง (และ กับเวลาที่ใช้ในการโหลดของช่องโดยเฉลี่ยภายในแอป)
หากผู้ใช้ออกจากระบบหรือไม่ได้ติดตาม คุณสามารถบล็อกการเล่นสำหรับ ช่องแบบชำระเงินเพื่อให้ขั้นตอนการลงชื่อเข้าใช้หรือลงชื่อสมัครใช้เสร็จสมบูรณ์
ขากลับโดยตรง
เมื่อผู้ใช้เปิดแอปจาก Deep Link ในแท็บ "ถ่ายทอดสด" ให้กด ปุ่มย้อนกลับ ก็จะต้องนำกลับไปยังแท็บ "สด" ใน การกดย้อนกลับ 1 ครั้ง ไม่ว่าจะผ่านไปนานเท่าไร การกลับมาโดยตรง ต้องมีลักษณะการทำงานสำหรับ Deep Link ของแท็บ "สด" ทุกลิงก์ใน Google TV และ Android TV
Deep Link ของแท็บที่เผยแพร่อยู่แตกต่างจากพารามิเตอร์ Deep Link ที่ต่อท้าย ดังนี้
?exit_on_back=[true|false] แอปต้องแยกวิเคราะห์พารามิเตอร์นี้เพื่อระบุ
มีการเปิดแอปจากแท็บ "ถ่ายทอดสด" หรือไม่ หาก exit_on_back คือtrue
แอปต้องใช้ลักษณะการทำงานของการย้อนกลับโดยตรง
โปรดทราบว่าหากผู้ใช้กดปุ่มอื่นๆ ที่ไม่ใช่ปุ่มย้อนกลับเป็น การกดปุ่มแรกหลังจาก Deep Link แล้ว ข้อกําหนดการย้อนกลับโดยตรงจะไม่ และจะมีเพียงปุ่ม ย้อนกลับ แบบมาตรฐานเท่านั้น ต้องระบุ
ตัวอย่างเช่น สมมติว่าหลังจากคลิกลิงก์ในรายละเอียด ผู้ใช้กดปุ่ม D-pad ปุ่มเลือก ซึ่งจะแสดงการวางซ้อนการควบคุมขึ้นมา ผู้ใช้กำลังรอ ให้วางซ้อนอยู่ให้หายไป แล้วกดปุ่มย้อนกลับ ตั้งแต่ปุ่มแรก ที่กดหลังจากคลิกลิงก์ในรายละเอียด คือปุ่มเลือก D-pad แต่ไม่มีผลกับข้อกำหนดการติดต่อกลับโดยตรง แต่แอปแบ็กสแต็กปกติ ใช้ตรรกะ
การกดปุ่มย้อนกลับซ้ำๆ ต้องนำผู้ใช้ไปยังรูทของแอป แล้วก็กลับไปที่ Google TV หรือ Android TV ได้โดยไม่มีการวนซ้ำไม่สิ้นสุด สำหรับข้อมูลเพิ่มเติม โปรดดูที่ปุ่มย้อนกลับที่คาดการณ์ได้ พฤติกรรม
สถาปัตยกรรมการนำทาง
ปลายทางเริ่มต้นแบบคงที่
หน้าจอแรกที่ผู้ใช้จะเห็นเมื่อเปิดแอปจาก Launcher เป็นหน้าจอสุดท้ายที่ผู้ใช้จะเห็นเมื่อกลับไปยัง Launcher หลังจากกดปุ่มย้อนกลับ
การทำ Deep Link จะจำลองการนำทางด้วยตนเอง
ไม่ว่าจะเป็นการทำ Deep Link หรือการไปยังปลายทางที่ระบุด้วยตนเอง ผู้ใช้สามารถ ใช้ปุ่มย้อนกลับเพื่อนำทางผ่านปลายทางกลับไปยังจุดเริ่มต้น ปลายทาง
การทำ Deep Link ไปยังแอปจากแอปอื่นจะจำลองการนำทางด้วยตนเอง สำหรับ ตัวอย่างเช่น หากผู้ใช้ไปยังหน้ารายละเอียดบนแอป Moviestar โดยตรง จากนั้น Google TV แล้วกดปุ่มย้อนกลับ วิดีโอจะถูกนำไปยังหน้าแรกของ แอป Moviestar
ล้างเส้นทางไปยังองค์ประกอบที่โฟกัสได้ทั้งหมด
ให้ผู้ใช้ไปยัง UI ของคุณด้วยทิศทางที่ชัดเจน หากไม่มี เส้นทางตรงไปยังการควบคุม ให้พิจารณาย้ายตำแหน่ง
ควรทำ
วางตัวควบคุม เช่น การค้นหาที่แสดงที่นี่ ไว้ในตำแหน่งที่ไม่ซ้อนทับกัน
กับองค์ประกอบอื่นๆ ที่คลิกได้
ไม่ควรทำ
หลีกเลี่ยงเลย์เอาต์ที่มีตัวควบคุมในสถานที่ที่เข้าถึงได้ยาก กำลังเข้าถึง
การค้นหาที่แสดงที่นี่ไม่ใช่เรื่องง่ายที่จะจัดการด้วย D-pad
แกน
ออกแบบเลย์เอาต์เพื่อใช้ประโยชน์จากทั้งแกนแนวนอนและแนวตั้ง ระบุฟังก์ชันเฉพาะสำหรับแต่ละทิศทาง ทำให้ไปยังส่วนต่างๆ ได้อย่างรวดเร็ว ลำดับชั้น
ควรทำ
คุณสามารถข้ามหมวดหมู่ได้จากแกนแนวตั้ง และข้ามรายการภายในแต่ละหมวดได้
หมวดหมู่สามารถเรียกดูได้บนแกนแนวนอน
ไม่ควรทำ
หลีกเลี่ยงลำดับชั้นของเลย์เอาต์ที่ซับซ้อนและซ้อนกัน