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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ระดับ 3:

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

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

ระดับ 2:

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

ระดับ 1:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ท่าทางแบบพับได้

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

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