UI เชิงพื้นที่

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

ใช้คอมโพเนนต์และเลย์เอาต์ Material Design

ใช้ประโยชน์จากคลังคอมโพเนนต์ของ Material Design และเลย์เอาต์แบบปรับเปลี่ยนได้เมื่อออกแบบแอป Android XR องค์ประกอบพื้นฐานแบบอินเทอร์แอกทีฟเหล่านี้จะช่วยเร่งการพัฒนาเพื่อให้คุณมุ่งเน้นที่ฟังก์ชันหลักและการสร้างสรรค์สิ่งใหม่ๆ ได้

Material Design สำหรับ XR ปรับปรุงคอมโพเนนต์ Material 3 และเลย์เอาต์แบบปรับเปลี่ยนได้ ด้วยลักษณะการทํางานของ UI แบบพื้นที่ การดำเนินการเหล่านี้จะทำให้แอปดูเป็นแพลตฟอร์มมากขึ้นและเพิ่มประสิทธิภาพเพื่อลดขนาด

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

ดาวน์โหลดชุดการออกแบบ Material 3 เพื่อเริ่มต้นใช้งาน

แผงพื้นที่ทำงาน

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

ทําความเข้าใจการปรับขนาดและการเลื่อน UI

แผงพื้นที่ทำงานจะปรับขนาดโดยอัตโนมัติตามระยะห่างจากผู้ใช้ การปรับขนาดแบบไดนามิกนี้ช่วยให้องค์ประกอบ UI ยังคงอ่านออกได้และโต้ตอบได้เมื่อดูจากระยะต่างๆ โดยขนาดจะคงที่อยู่ระหว่าง 0.75-1.75 เมตร จากนั้นอัตราการปรับขนาดจะเพิ่มขึ้น 0.5 เมตรต่อการขยาย 1 เมตร และองค์ประกอบจะปรากฏเล็กลง

โปรดอยู่ภายในขีดจำกัดการเคลื่อนไหวของแผงเริ่มต้นเพื่อหลีกเลี่ยงความขัดแย้งกับ UI ของระบบ

• ความลึกขั้นต่ำ: 0.75 เมตรจากผู้ใช้
• ความลึกสูงสุด: 5 เมตรจากผู้ใช้

ขนาดของแผงเสียงรอบทิศทาง

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

ในโหมดพื้นที่ทำงานแบบเต็ม แผงพื้นที่ทำงานจะไม่มีขนาดขั้นต่ำ แต่ขนาดสูงสุดคือ 2560dp x 1800dp เนื่องจากข้อจำกัดทางกายภาพ

ตําแหน่งที่จะวางแผงเชิงพื้นที่

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

สร้างเลย์เอาต์พื้นที่ของคุณเอง

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

เลย์เอาต์แถวแนวนอน	เลย์เอาต์แถวโค้ง	เลย์เอาต์ตำแหน่งที่กำหนดเอง

ยานอวกาศ

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

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

แถบนำทางแบบไม่จัดวางตามพื้นที่จาก Material Design ใน Home Space

แถบนำทางในพื้นที่จาก Material Design ในโหมดเต็มหน้าจอ

แถบนําทางแบบไม่ใช้พื้นที่จาก Material Design ใน Home Space

แถบนําทางเชิงพื้นที่จาก Material Design ในโหมดพื้นที่ทำงานแบบเต็ม

หลักเกณฑ์

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

รูปแบบการออกแบบที่ควรหลีกเลี่ยง

• หลีกเลี่ยงการซ้อนทับดาวเทียมโคจรมากกว่า 50% ของขนาดดาวเทียม
• หลีกเลี่ยงการวางดาวเทียมโคจรไว้ห่างจากแผงเชิงพื้นที่มากเกินไป
• อย่าใช้พิกัด X หรือ Y แบบสัมบูรณ์
• หลีกเลี่ยงการใช้ภาพดวงจันทร์มากเกินไป

ระดับความสูงเชิงพื้นที่

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

กล่องโต้ตอบ Material Design ในแอปหน้าจอขนาดใหญ่

กล่องโต้ตอบที่ใช้การยกระดับเชิงพื้นที่ใน Android XR

เมนูแบบเลื่อนลงของ Material Design บนหน้าจอขนาดใหญ่

เมนูแบบเลื่อนลงที่ใช้การยกระดับใน Android XR

รูปแบบการออกแบบที่ควรหลีกเลี่ยง

• หลีกเลี่ยงการทำให้ดูเหมือนมีมิติหรือยกระดับพื้นที่และระนาบขนาดใหญ่ เช่น ชีตด้านล่างและชีตด้านข้าง
• หลีกเลี่ยงการยกระดับองค์ประกอบ UI ที่มีเนื้อหาที่เลื่อนได้

ออกแบบขนาดเป้าหมายขนาดใหญ่

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

ดูข้อมูลเกี่ยวกับเป้าหมายและสถานะโฮเวอร์ของ XR

ทําให้แบบอักษรเข้าถึงได้

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

หากแอปที่มีอยู่เป็นไปตามหลักเกณฑ์ของ Material Design แสดงว่าแอปได้รับการเพิ่มประสิทธิภาพสำหรับ Android XR แล้ว คุณกำหนดแบบอักษรของแอปใหม่ตามการออกแบบวัสดุได้

ดูข้อมูลเกี่ยวกับการจัดรูปแบบตัวอักษร XR