โดยปกติแล้ว ผู้ใช้จะดูหน้าจอทีวีจากระยะห่างประมาณ 10 ฟุต และแม้ว่าหน้าจอทีวีจะมีขนาดใหญ่กว่าจอแสดงผลของอุปกรณ์อื่นๆ ที่ใช้พลังงานจาก Android ส่วนใหญ่ แต่หน้าจอทีวีก็ไม่ได้แสดงรายละเอียดและสีในระดับเดียวกับหน้าจอของอุปกรณ์ขนาดเล็ก ปัจจัยเหล่านี้กำหนดให้คุณต้องสร้างเลย์เอาต์ของแอปโดยคำนึงถึงอุปกรณ์ทีวีเพื่อสร้างประสบการณ์ของผู้ใช้ในห้องนั่งเล่นที่เป็นประโยชน์และสนุกสนาน
หลักการพื้นฐานของเลย์เอาต์
เลย์เอาต์สำหรับอุปกรณ์ทีวีต้องเป็นไปตามหลักเกณฑ์พื้นฐานบางประการเพื่อให้แน่ใจว่าเลย์เอาต์จะใช้งานได้และมีประสิทธิภาพบนหน้าจอขนาดใหญ่ ทำตามเคล็ดลับต่อไปนี้เพื่อสร้างเลย์เอาต์ที่ปรับให้เหมาะกับหน้าจอทีวี
- สร้างเลย์เอาต์ที่มีการวางแนวแนวนอน หน้าจอทีวีจะแสดงในโหมดแนวนอนเสมอ
- วางส่วนควบคุมการไปยังส่วนต่างๆ บนหน้าจอไว้ที่ด้านซ้ายหรือด้านขวาของหน้าจอ และเก็บพื้นที่แนวตั้งไว้สำหรับเนื้อหา
- ใช้การปรับขนาดแบบยืดหยุ่นและแบบสัมพัทธ์ (เช่น หน่วย
dpและsp) เพื่อให้ UI ปรับขนาดได้อย่างราบรื่นในความละเอียดของจอแสดงผลต่างๆ - เพิ่มระยะขอบและระยะห่างภายในที่เพียงพอระหว่างส่วนควบคุมเลย์เอาต์เพื่อหลีกเลี่ยงไม่ให้ UI ดูรก
โอเวอร์สแกน
เลย์เอาต์สำหรับทีวีมีข้อกำหนดเฉพาะบางประการเนื่องจากการพัฒนามาตรฐานทีวีเพื่อนำเสนอภาพแบบเต็มหน้าจอแก่ผู้ชม ด้วยเหตุนี้ อุปกรณ์ทีวีจึงอาจตัดขอบด้านนอกของเลย์เอาต์แอปเพื่อให้แน่ใจว่าจอแสดงผลทั้งหมดจะเต็ม ลักษณะการทำงานนี้โดยทั่วไปเรียกว่า โอเวอร์สแกน
วางองค์ประกอบหน้าจอที่ผู้ใช้ต้องมองเห็นได้ตลอดเวลาไว้ในพื้นที่ปลอดภัยจากการโอเวอร์สแกน การเพิ่มระยะขอบ 5% หรือ 48 dp ที่ขอบด้านซ้ายและขวา และ 27 dp ที่ขอบด้านบนและด้านล่างของเลย์เอาต์จะช่วยให้มั่นใจได้ว่าองค์ประกอบหน้าจอในเลย์เอาต์จะอยู่ในพื้นที่ปลอดภัยจากการโอเวอร์สแกน
อย่าปรับองค์ประกอบหน้าจอพื้นหลังที่ผู้ใช้ไม่ได้โต้ตอบด้วยโดยตรง และอย่าตัดองค์ประกอบให้พอดีกับพื้นที่ปลอดภัยจากการโอเวอร์สแกน แนวทางนี้จะช่วยให้มั่นใจได้ว่าองค์ประกอบหน้าจอพื้นหลังจะดูถูกต้องบนหน้าจอทั้งหมด
สร้างข้อความและส่วนควบคุมที่ใช้งานได้
ทำตามเคล็ดลับเหล่านี้เพื่อให้ข้อความและส่วนควบคุมในแอป TV มองเห็นได้ง่ายขึ้นจากระยะไกล
- แบ่งข้อความออกเป็นส่วนเล็กๆ ที่ผู้ใช้สแกนได้อย่างรวดเร็ว
- ใช้ข้อความสีอ่อนบนพื้นหลังสีเข้ม รูปแบบนี้อ่านง่ายกว่าบนทีวี
- หลีกเลี่ยงแบบอักษรที่มีน้ำหนักเบาหรือแบบอักษรที่มีทั้งเส้นที่แคบมากและกว้างมาก ใช้แบบอักษร Sans-Serif และการป้องกันการเกิดรอยหยักเพื่อเพิ่มความสามารถในการอ่าน
- ทำให้วิดเจ็ตมุมมองทั้งหมดมีขนาดใหญ่พอที่ผู้ที่นั่งห่างจากหน้าจอ 10 ฟุตจะมองเห็นได้อย่างชัดเจน ใช้หน่วยความหนาแน่นของพิกเซลอิสระ (
dp) แทนหน่วยพิกเซลสัมบูรณ์ และหน่วยพิกเซลที่ปรับขนาดได้ (sp) สำหรับการจัดตัวอักษร
ดูข้อมูลเพิ่มเติมเกี่ยวกับพิกเซลอิสระจากความหนาแน่นและการสร้างเลย์เอาต์เพื่อ รองรับขนาดหน้าจอที่ใหญ่ขึ้นได้ที่ ภาพรวมความเข้ากันได้ของหน้าจอ
จัดการแหล่งข้อมูลเลย์เอาต์สำหรับทีวี
ทีวีมีขนาดหน้าจอที่แตกต่างกันและรองรับความละเอียดที่แตกต่างกัน รวมถึง 720p, 1080p และ 4K เช่นเดียวกับอุปกรณ์ Android อื่นๆ ตรวจสอบว่าแอปของคุณ รองรับขนาดหน้าจอที่แตกต่างกัน
ขนาดหน้าจอและความละเอียดที่แตกต่างกันมีความหนาแน่นของพิกเซลที่แตกต่างกัน กำหนดขนาด UI โดยใช้พิกเซลอิสระจากความหนาแน่น (dp) เพื่อรักษารูปลักษณ์ของ UI ในขนาดหน้าจอ ความละเอียด และความหนาแน่นของพิกเซลที่แตกต่างกัน ตารางต่อไปนี้แสดงความหนาแน่นของพิกเซลหน้าจอสำหรับความละเอียดของแผงทีวีต่างๆ
| ความละเอียดของแผง | ความหนาแน่นของพิกเซลหน้าจอ |
|---|---|
| 720p | tvdpi |
| 1080p | xhdpi |
| 4K | xxxhdpi |
ดูข้อมูลเพิ่มเติมได้ที่หัวข้อรองรับความหนาแน่นของพิกเซลที่แตกต่างกันและ ภาพรวมความเข้ากันได้ของหน้าจอ
รูปแบบเลย์เอาต์ที่ควรหลีกเลี่ยง
มีแนวทางบางอย่างในการสร้างเลย์เอาต์ที่ทำงานได้ไม่ดีบนอุปกรณ์ทีวี หลีกเลี่ยงรูปแบบอินเทอร์เฟซผู้ใช้ต่อไปนี้เมื่อพัฒนาเลย์เอาต์สำหรับทีวี
- การนำเลย์เอาต์ของโทรศัพท์หรือแท็บเล็ตกลับมาใช้ซ้ำ: อย่าใช้เลย์เอาต์จากแอปโทรศัพท์หรือ แท็บเล็ตซ้ำโดยไม่มีการแก้ไข เลย์เอาต์ที่สร้างขึ้นสำหรับรูปแบบของอุปกรณ์อื่นๆ ที่ใช้พลังงานจาก Android ไม่เหมาะกับอุปกรณ์ทีวีและต้องทำให้ง่ายขึ้นเพื่อใช้งานบนทีวี
- การใช้แถบการทำงานหรือเมนูของโทรศัพท์: แถบการทำงานด้านบนและเมนูแบบเลื่อนลง ไม่เหมาะกับอินเทอร์เฟซทีวีเนื่องจากยากต่อการไปยังส่วนต่างๆ ในเมนูเหล่านี้ ด้วยรีโมตคอนโทรล
- การใช้การไปยังส่วนต่างๆ ด้วยการปัดเท่านั้น: การเลื่อนหรือปัดระหว่างหน้าจออาจทำงานได้ ดีบนโทรศัพท์หรือแท็บเล็ต แต่ไม่ควรใช้ท่าทางสัมผัสแบบปัดเท่านั้นบนทีวีที่ ผู้ใช้ต้องใช้รีโมต D-pad
ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบเลย์เอาต์ที่เหมาะกับทีวีได้ที่ หัวข้อการออกแบบสำหรับทีวี
จัดการบิตแมปขนาดใหญ่
อุปกรณ์ทีวีมีหน่วยความจำจำกัด หากเลย์เอาต์ของแอปใช้รูปภาพที่มีความละเอียดสูงมาก แอปอาจถึงขีดจำกัดหน่วยความจำอย่างรวดเร็วและทำให้เกิดข้อผิดพลาดหน่วยความจำไม่เพียงพอ ใช้ไลบรารีการโหลดและการถอดรหัสรูปภาพที่มีประสิทธิภาพ (เช่น Coil หรือ Glide) เพื่อดึงข้อมูล ถอดรหัส และแสดงบิตแมปในแอป
ดูข้อมูลเพิ่มเติมเกี่ยวกับการได้รับประสิทธิภาพที่ดีที่สุดเมื่อใช้ บิตแมปได้ที่ แนวทางปฏิบัติแนะนําด้านกราฟิกของ Android
แสดงโฆษณาที่มีประสิทธิภาพ
สำหรับสภาพแวดล้อมในห้องนั่งเล่น เราขอแนะนำให้ใช้โซลูชันโฆษณาวิดีโอแบบเต็มหน้าจอและปิดได้ภายใน 30 วินาที ฟังก์ชันการทำงานสำหรับการโฆษณาบน Android TV เช่น ปุ่มปิดและคลิกผ่าน ต้องเข้าถึงได้โดยใช้ D-pad แทนการสัมผัส
Android TV ไม่มีเว็บเบราว์เซอร์ โฆษณาต้องไม่พยายามเปิดเว็บเบราว์เซอร์หรือเปลี่ยนเส้นทางไปยังเนื้อหาใน Google Play Store ที่ไม่ได้รับอนุมัติสำหรับอุปกรณ์ Android TV