ปรับเลย์เอาต์

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

วิธีใช้เลย์เอาต์แบบปรับอัตโนมัติอย่างมีประสิทธิภาพ

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

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

• อนุญาตให้เลย์เอาต์ตอบสนองต่อขนาดต่างๆ ด้วยวิธีแบบปรับอัตโนมัติ ได้แก่ การจัดเรียงใหม่ การแสดง และการเปลี่ยนแปลงการนำเสนอ

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

cancel

สิ่งที่ไม่ควรทำ

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

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

คิดแบบปรับอัตโนมัติ

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

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

วิธีการและคุณภาพ

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

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

check_circle

ควรทำ

ตั้งค่าความกว้างสูงสุดสำหรับเนื้อหาและคอมโพเนนต์เพื่อป้องกันไม่ให้ยืดจนเต็มความกว้าง

cancel

สิ่งที่ไม่ควรทำ

อนุญาตให้เนื้อหายืดจนเต็มความกว้าง

check_circle

ควรทำ

คิดในแง่ของการจำกัดขอบเขตหรือแผง

check_circle

ควรทำ

อนุญาตให้คอมโพเนนต์เปลี่ยนการนำเสนอ เช่น Bottom Sheet สามารถกลายเป็นชีตด้านข้างในขนาดที่ใหญ่ขึ้น

cancel

สิ่งที่ไม่ควรทำ

อย่าขยายคอมโพเนนต์ แต่ให้อนุญาตให้คอมโพเนนต์เปลี่ยน การนำเสนอและตั้งค่าความกว้างสูงสุด

ตรวจสอบว่าไม่ได้ขยายอินพุตและปุ่ม

คิดในแง่ของการจำกัดขอบเขตและแผง

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

ขนาดกะทัดรัดควรใช้เลย์เอาต์แผงเดียว

ขนาดกลางสามารถใช้เลย์เอาต์ 1-2 แผง

ขนาดใหญ่และขนาดใหญ่พิเศษสามารถใช้เลย์เอาต์หลายแผง

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

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

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

พิจารณาสเกลและปริมาณเนื้อหาที่แสดง

กริดวิดีโอขนาดเล็กในโทรศัพท์จะแน่นและดูยากในแท็บเล็ต อัปเดตสเกลขององค์ประกอบ UI ตามขนาดหน้าจอ ความหนาแน่น และอินพุต

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับเลย์เอาต์ได้ที่หน้าทำความเข้าใจเลย์เอาต์ Material Design 3 (M3)

ใช้ประโยชน์จากขนาดรูปแบบอุปกรณ์ที่ไม่เหมือนใคร

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

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

ใช้องค์ประกอบ Anchor เช่น ปุ่มเล่นขนาดใหญ่ เพื่อปรับเนื้อหาโดยรอบและให้ภาพ Hero กลายเป็นพื้นหลังในหน้าจอปก เพื่อช่วยให้ผู้ใช้ปรับตัวได้

นอกเหนือจากคลาสขนาด

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

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

ดูตัวอย่างกรณีศึกษา Pawparrazzi ซึ่งสร้างและออกแบบด้วย API แบบปรับอัตโนมัติและคำแนะนำการออกแบบล่าสุด