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

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

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

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

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

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

ภาพต่อกันขององค์ประกอบจากชุดเครื่องมือการออกแบบ Material 3 ดาวน์โหลดชุดการออกแบบ Material 3 เพื่อเริ่มต้นใช้งาน

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

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

แอป Android XR ที่มีแสงเหนือและภูเขาที่มีหิมะ เมนูควบคุมของผู้ใช้ 3 เมนูอยู่ในยานอวกาศ โดยวางไว้เหนือแผงหลัก 1 ตัวทางด้านซ้าย ขวา และด้านล่าง

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

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

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

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

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

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

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

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

ภาพการแสดงผลของผู้ใช้ที่อยู่ห่างจากแอป XR 1.75 เมตร

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

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

ผู้ใช้กำลังดูแอป XR โดยระดับสายตาเป็นระดับธรรมชาติที่ต่ำกว่าตรงกลางแผง 5 องศา

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

ผู้ใช้กําลังมองแผงตรงกลางในมุมมอง 41 องศา

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

ผู้ใช้สามารถย้ายไปรอบๆ ในพื้นที่ทำงานได้ โดยแผงพื้นที่ทำงานจะยังคงอยู่ในตำแหน่งเดิม

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

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

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

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

บุคคลกำลังดูแผง 3 แผงที่จัดเรียงไว้ข้างกันในแถวแนวนอน บุคคลกำลังมองแผงแบน 3 แผงที่จัดเรียงไว้ข้างๆ กันในแถวโค้ง โดยแผงด้านนอกด้านขวาและซ้ายอยู่ใกล้กว่า บุคคลกำลังมองแผงแบน 3 แผงขนาดต่างกันในตำแหน่งต่างๆ โดยแผงด้านขวาและซ้ายด้านนอกอยู่ห่างจากบุคคล

เลย์เอาต์แถวแนวนอน

เลย์เอาต์แถวโค้ง

เลย์เอาต์ตำแหน่งที่กำหนดเอง

ยานอวกาศ

องค์ประกอบที่โคจรเป็นองค์ประกอบ 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