ข้อมูลเบื้องต้นเกี่ยวกับเลย์เอาต์

ภาพพื้นฐานของเลย์เอาต์ฮีโร่

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

เริ่มต้นใช้งาน

เริ่มออกแบบเลย์เอาต์ Android โดยศึกษาโครงสร้างของแอป จากนั้นดูวิธีจัดโครงสร้างเนื้อหาของแอป

สรุปประเด็นสำคัญ

การวางแนวเลย์เอาต์

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

ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำเกี่ยวกับ การปรับเลย์เอาต์ และ เลย์เอาต์มาตรฐาน

พื้นที่ปลอดภัยของอุปกรณ์

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

ควรทำ

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

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

ซ่อนอินพุต แม้ในหน้าจอขนาดเล็ก ผู้ใช้อาจไม่ทราบหรือเลื่อนหน้าจอไม่ได้
การยศาสตร์ของการโต้ตอบ

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

กลุ่มที่มีการจำกัด

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

การจัดแนว

จัดแนวเนื้อหาและองค์ประกอบ UI ที่คล้ายกันให้สอดคล้องกัน

ควรทำ

กำหนดระยะห่างที่สอดคล้องกันระหว่างองค์ประกอบที่คล้ายกัน

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

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

อย่าทำให้ผู้ใช้สับสนด้วยการดำเนินการมากเกินไปต่อการดู 1 ครั้ง

ระบุข้อกำหนดของเลย์เอาต์

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