ออกแบบสำหรับหน้าจอขนาดใหญ่ตั้งแต่เริ่มต้น

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

พิจารณากรณีการใช้งานต่างๆ สำหรับแอปเมื่อเริ่มออกแบบ สำหรับ ตัวอย่าง:

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

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

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

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

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

ทำให้แอปสื่อปรับเปลี่ยนตามอุปกรณ์โดยค่าเริ่มต้น

หลีกเลี่ยงประสบการณ์การใช้งานที่ผิดพลาดในแอปสื่อด้วยการสร้างเลย์เอาต์ของแอป ปรับอัตโนมัติได้ในโทรศัพท์ แท็บเล็ต อุปกรณ์แบบพับได้ และอุปกรณ์ ChromeOS

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

ออกแบบตามหลักเกณฑ์

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

แอปควรมอบประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้ไม่ว่าอุปกรณ์จะอยู่ในรูปแบบใดก็ตาม ขนาดหน้าจอ โหมดการแสดงผล หรือลักษณะการใช้งาน ดังนั้นให้ออกแบบแอปของคุณตาม ตามหลักเกณฑ์ระดับ 1, 2 และ 3 ดังต่อไปนี้

หลักเกณฑ์จะกำหนดชุดข้อกำหนดด้านคุณภาพที่ครอบคลุมสำหรับ Android ประเภทต่างๆ

ระดับ 3

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

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

ระดับ 2:

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

ระดับ 1:

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

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

เลย์เอาต์ที่เพิ่มประสิทธิภาพ

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

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

เลย์เอาต์สื่อ

ทําให้แอปใช้งานได้มากขึ้นด้วยการใช้เลย์เอาต์เฉพาะสื่อสําหรับ รายละเอียดรายการ ฟีด และแผงการสนับสนุน สำหรับข้อมูลเกี่ยวกับ MDX, Flutter และ เขียนเลย์เอาต์ที่หัวข้อทรัพยากรของเลย์เอาต์

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

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

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

ดูคอลเล็กชันสื่อที่มีการดูแลจัดการได้ที่แกลเลอรีสื่อ

เลย์เอาต์โซเชียลมีเดีย

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

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

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

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

สำหรับคอลเล็กชันเลย์เอาต์โซเชียลมีเดียที่มีการดูแลจัดการ โปรดดูหน้าแกลเลอรีโซเชียลมีเดีย

แนวทางปฏิบัติที่ดีที่สุดสำหรับแอปสื่อที่มีหน้าจอขนาดใหญ่

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

การวางแนวและการปรับขนาด

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

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

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

แป้นพิมพ์ลัด

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

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

รองรับการแสดงตัวอย่างจากกล้อง

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

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

ดูข้อมูลเพิ่มเติมได้ที่แสดงตัวอย่าง CameraX หรือ การแสดงตัวอย่างใน Camera2

ท่าพับได้

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

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