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

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

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

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

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

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

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

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

ทำให้แอปสื่อตอบสนองโดยค่าเริ่มต้น

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

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

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

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

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

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

ระดับ 3:

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

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

ระดับ 2:

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

ระดับ 1:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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