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

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

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

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

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

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

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

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

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

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

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

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

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

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

หลักเกณฑ์เหล่านี้กำหนดชุดข้อกำหนดด้านคุณภาพที่ครอบคลุมสำหรับแอป Android ส่วนใหญ่

ระดับ 3:

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

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

ระดับ 2:

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

ระดับ 1:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ท่าทางของอุปกรณ์แบบพับได้

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

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