แนวทางการออกแบบที่ตอบสนองกับขนาดหน้าจอ

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

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

ปรับให้เข้ากับขนาดหน้าจอ

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

ใช้คอนเทนเนอร์แบบจัดวางอัตโนมัติ

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

ปิดใช้งาน การปรับมาตราส่วนให้พอดี และจัดการอัตราส่วนกว้างยาวและการวางแนว

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

ใช้เค้าโครงที่ตอบสนองกับขนาดหน้าจอ

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

ใช้สูตรสำหรับเค้าโครงแบบไดนามิก

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

วางแผนสำหรับอุปกรณ์ที่หลากหลาย

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

การใช้งานจริง

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

ทรัพยากร

ขั้นตอนต่อไป

ความสามารถในการอ่านโค้ด

  • Last updated on