เมื่อสร้างแอปที่แตกต่างสำหรับ Android XR คุณอาจต้องการใช้ UI เชิงมิติพื้นที่เพื่อวางเนื้อหาในสภาพแวดล้อมจริงหรือสภาพแวดล้อมเสมือนจริงของผู้ใช้ คุณสามารถแยกแอปออกเป็นแผงเชิงมิติ แผงควบคุม และเพิ่มระดับความสูงเชิงมิติ (อธิบายรายละเอียดเพิ่มเติมในหน้านี้) นอกจากนี้ คุณยังรวมวิดีโอเชิงมิติพื้นที่ไว้ในการออกแบบได้ด้วย
แผงเชิงพื้นที่
แผงเชิงพื้นที่เป็นองค์ประกอบพื้นฐานของแอป Android XR คุณสามารถใช้ API เหล่านี้เพื่อสร้างประสบการณ์การใช้งาน XR ที่แตกต่างบนจอแสดงผลแบบไม่จำกัด โดยเนื้อหาจะขยายไปทั่วพื้นที่ของผู้ใช้ แผงเชิงพื้นที่ทำหน้าที่เป็นคอนเทนเนอร์สำหรับองค์ประกอบ UI, คอมโพเนนต์แบบอินเทอร์แอกทีฟ และเนื้อหาที่สมจริง
ทำความเข้าใจวิธีปรับขนาดและย้าย UI
แผงเชิงมิติพื้นที่จะปรับขนาดโดยอัตโนมัติตามระยะห่างจากผู้ใช้ การปรับขนาดแบบไดนามิกนี้ช่วยให้มั่นใจได้ว่าองค์ประกอบ UI จะยังคงอ่านได้และโต้ตอบได้เมื่อดูจากระยะห่างที่แตกต่างกัน ขนาดจะคงที่ระหว่าง 0.75 เมตรถึง 1.75 เมตร จากนั้นอัตราการปรับขนาดจะเพิ่มขึ้น 0.5 เมตรต่อเมตร และองค์ประกอบจะดูเล็กลง
โปรดปฏิบัติตามขีดจำกัดการเคลื่อนไหวของแผงเริ่มต้นเพื่อหลีกเลี่ยงความขัดแย้งกับ UI ของระบบ ดังนี้
- ความลึกขั้นต่ำ: 0.75 เมตรจากผู้ใช้
- ความลึกสูงสุด: 5 เมตรจากผู้ใช้
ผู้ใช้สามารถปรับขนาดแผงเชิงพื้นที่ให้ใหญ่ขึ้นหรือเล็กลงเพื่อให้มีขนาดใหญ่พอที่จะมองเห็นได้ชัดเจน ไม่ว่าจะอยู่ห่างจากผู้ใช้เท่าใดก็ตาม เมื่อผู้ใช้ย้ายแผงเชิงมิติพื้นที่ Android XR จะปรับขนาดโดยอัตโนมัติ
ขนาดแผงเชิงพื้นที่
Android XR ออกแบบมาเพื่อให้แอปของคุณใช้งานได้สะดวก อ่านง่าย และเข้าถึงได้สำหรับกลุ่มเป้าหมายที่หลากหลาย ระบบจะใช้ 0.868 dp-to-dmm เพื่อให้ได้รับประสบการณ์การใช้งานที่ดีที่สุด เมื่อดูบนชุดหูฟัง แอปของคุณจะปรากฏห่างจากผู้ใช้มากกว่าเมื่อดูแอปบนโทรศัพท์หรือแท็บเล็ต ดังนั้นแอปจึงต้องมีขนาดใหญ่ขึ้นเพื่อให้ใช้งานได้ง่าย
ใน Full Space แผงเชิงมิติพื้นที่จะไม่มีขนาดขั้นต่ำ และขนาดสูงสุดคือ 2560dp x 1800dp เนื่องจากข้อจำกัดทางกายภาพ
ตำแหน่งที่จะวางแผงเชิงมิติพื้นที่
ใน Full Space คุณสามารถกำหนดตำแหน่งของแผงได้ทั้งในสภาพแวดล้อมแบบพาสทรูและสภาพแวดล้อมเสมือนจริง เมื่อผู้ใช้เปลี่ยนจาก Home Space เป็น Full Space องค์ประกอบต่างๆ จะยังคงอยู่ในตำแหน่งที่คาดการณ์ได้เหมือนเดิม เว้นแต่คุณจะกำหนดตำแหน่งที่กำหนดเอง
สร้างศูนย์กลางแผงให้ห่างจากแนวสายตาของผู้ใช้ 1.75 เมตร วางกึ่งกลางแนวตั้งของแผงให้ต่ำกว่าระดับสายตาของผู้ใช้ 5° เพื่อให้ผู้ใช้รู้สึกสบายตามากที่สุด เนื่องจากผู้ใช้มักจะมองลงด้านล่าง
วางเนื้อหาไว้ตรงกลาง 41° ของขอบเขตการมองเห็นของผู้ใช้เพื่อความสบายสูงสุด ซึ่งจะช่วยให้มองเห็นได้อย่างชัดเจนและลดความจำเป็นในการขยับศีรษะหรือร่างกายมากเกินไป
ผู้ใช้สามารถเคลื่อนที่ไปรอบๆ พื้นที่ทำงานได้ และแผงเชิงพื้นที่จะยังคงอยู่ที่เดิม
Android XR มีรูปแบบการโต้ตอบที่พร้อมใช้งานเพื่อให้ผู้ใช้จัดการองค์ประกอบต่างๆ ได้อย่างราบรื่นและลดความซับซ้อนของกระบวนการพัฒนา ผู้ใช้สามารถย้ายองค์ประกอบต่างๆ เพื่อปรับให้เข้ากับพื้นที่ส่วนตัวได้ คุณกำหนดค่าลักษณะการทำงานของการย้ายและปรับขนาดได้
หากต้องการช่วยให้ผู้ใช้จัดตำแหน่งองค์ประกอบ UI ให้สัมพันธ์กับวัตถุในชีวิตจริงในพื้นที่ของตน คุณสามารถอนุญาตให้ผู้ใช้ตรึงแผงเชิงพื้นที่ไว้กับตำแหน่งที่เฉพาะเจาะจงในชีวิตจริงได้ เช่น พื้น เก้าอี้ ผนัง เพดาน หรือโต๊ะ การตรึงพร้อมใช้งานในโหมดส่งผ่านเท่านั้น
คุณสามารถอนุญาตให้ผู้ใช้ตรึงแผงเชิงพื้นที่ไว้กับตำแหน่งที่เฉพาะเจาะจงในโลกจริง เช่น พื้น เก้าอี้ ผนัง เพดาน หรือโต๊ะ เพื่อช่วยให้ผู้ใช้รู้สึกมั่นคงและปรับตัวได้ดี การตรึงพร้อมใช้งานในโหมดส่งผ่านเท่านั้น
สร้างเลย์เอาต์เชิงพื้นที่ของคุณเอง
คุณสามารถแยกแอปออกเป็นแผงเชิงพื้นที่หลายแผงในเลย์เอาต์ใดก็ได้ที่เลือก API ของ UI เชิงมิติพื้นที่ไม่จำกัดจำนวนแผง ซึ่งรวมถึงความสามารถในการสร้างเลย์เอาต์ที่มีแถวและคอลัมน์ รวมถึงแถวแบบแบนและแบบโค้ง ตำแหน่งของแผงเชิงพื้นที่อาจเป็นตำแหน่งที่เฉพาะเจาะจงหรือกำหนดเองก็ได้ ดูวิธีพัฒนาเลย์เอาต์ของ UI เชิงพื้นที่
เลย์เอาต์แถวแบบแบนราบ
เลย์เอาต์แถวโค้ง
เลย์เอาต์ตำแหน่งที่กำหนดเอง
วิดีโอเชิงมิติพื้นที่
วิดีโอเชิงมิติพื้นที่ช่วยเพิ่มมิติและความรู้สึกสมจริงให้กับเนื้อหาได้ คุณสามารถรวมวิดีโอเหล่านี้ไว้ในการออกแบบเป็นวิดีโอแบบโมโนสโคปิกหรือสามมิติที่แสดงบนพื้นผิวแบน ทรงครึ่งวงกลม 180° หรือทรงกลม 360°
Orbiters
Orbiter คือองค์ประกอบ UI แบบลอยที่มักใช้เพื่อควบคุมเนื้อหาภายในแผงเชิงพื้นที่และเอนทิตีอื่นๆ ที่ยึดไว้ โฆษณาประเภทนี้ช่วยให้เนื้อหามีพื้นที่มากขึ้น และผู้ใช้สามารถเข้าถึงฟีเจอร์ต่างๆ ได้อย่างรวดเร็วขณะที่เนื้อหาหลักยังคงมองเห็นได้ Orbiter ช่วยให้คุณผสานรวมคอมโพเนนต์ UI ที่มีอยู่หรือสร้างคอมโพเนนต์ใหม่ได้อย่างอเนกประสงค์
ควรใช้ Orbiter อย่างจำกัดและพิจารณาความต้องการและเจตนาของผู้ใช้อย่างรอบคอบ องค์ประกอบ UI เชิงพื้นที่จำนวนมากอาจทำให้ผู้ใช้รู้สึกเหนื่อยล้ากับเนื้อหาและรู้สึกว่ามีตัวเลือกการดำเนินการมากเกินไป ขอแนะนำให้ปรับคอมโพเนนต์การนำทางที่สำคัญบางอย่าง เช่น แถบข้างนำทางหรือแถบนำทาง
แถบนำทางด้านข้างแบบไม่ใช่เชิงพื้นที่จาก Material Design ใน Home Space
แถบนำทางเชิงพื้นที่จาก Material Design ใน Full Space
แถบนำทางแบบไม่ใช่เชิงพื้นที่จาก Material Design ใน Home Space
แถบนำทางเชิงพื้นที่จาก Material Design ใน Full Space
หลักเกณฑ์
- ปรับระยะห่างจากขอบของแผงเพื่อกำหนดตำแหน่งแบบยืดหยุ่นหรือเปอร์เซ็นต์
- กำหนดออฟเซ็ตของวงโคจร ระยะห่างที่มองเห็นได้ที่แนะนำคือ 20dp
- ปรับระดับความสูงของ Orbiter หากจำเป็นโดยใช้ระดับความสูงเชิงพื้นที่ โดยค่าเริ่มต้น ปุ่มจะยกขึ้น 15dp ในความลึกแกน Z
- ขนาดอาจคงที่หรือยืดหยุ่นเมื่อปรับขนาดแผง
- พิจารณาว่าคุณต้องการให้ Orbiter ขยายแบบไดนามิกเพื่อให้พอดีกับเนื้อหาหรือไม่
รูปแบบการออกแบบที่ควรหลีกเลี่ยง
- หลีกเลี่ยงการวางซ้อนทับลูกแก้วเกิน 50% ของขนาดลูกแก้ว
- หลีกเลี่ยงการวางออร์บิเตอร์ไว้ห่างจากแผงเชิงพื้นที่มากเกินไป
- อย่าใช้พิกัด X หรือ Y แบบสัมบูรณ์
- หลีกเลี่ยงการใช้ภาพโคจรรอบวัตถุมากเกินไป
ระดับความสูงเชิงพื้นที่
เมื่อคุณเพิ่มระดับความลึกเชิงพื้นที่ให้กับคอมโพเนนต์ คอมโพเนนต์จะแสดงเหนือแผงเชิงพื้นที่บนแกน Z ซึ่งจะช่วยดึงดูดความสนใจของผู้ใช้ สร้างลำดับชั้นที่ดีขึ้น และปรับปรุงความสามารถในการอ่าน
| ระดับความสูงเชิงพื้นที่ | ส่วนประกอบ | DP |
|---|---|---|
| 0 | ยังไม่ได้กำหนด | .1dp |
| 1 | ยานอวกาศ | 16dp |
| 2 | ไม่ได้รับมอบหมาย | 24dp |
| 3 | SpatialPopup | 32dp |
| 4 | ไม่ได้รับมอบหมาย | 40dp |
| 5 | SpatialDialog | 56dp |
กล่องโต้ตอบ Material Design ในแอปบนหน้าจอขนาดใหญ่
กล่องโต้ตอบที่ใช้ระดับความสูงเชิงพื้นที่ใน Android XR
เมนูแบบเลื่อนลงของ Material Design ในแอปบนหน้าจอขนาดใหญ่
เมนูแบบเลื่อนลงที่ใช้ระดับความสูงใน Android XR
รูปแบบการออกแบบที่ควรหลีกเลี่ยง
- หลีกเลี่ยงการทำให้พื้นที่และระนาบขนาดใหญ่ เช่น Bottom Sheet และ Side Sheet มีมิติหรือยกขึ้น
- หลีกเลี่ยงการยกระดับองค์ประกอบ UI ที่มีเนื้อหาที่เลื่อนได้
ออกแบบขนาดเป้าหมายให้ใหญ่
ในแอป XR เป้าหมายคือพื้นที่ที่ชี้ได้ซึ่งผู้ใช้โต้ตอบด้วย Android XR เป็นไปตามหลักเกณฑ์เป้าหมายของ Material Design และแนะนำเป้าหมายที่ใหญ่ขึ้นเพื่อเพิ่มความแม่นยำ ความสะดวกสบาย และความสามารถในการใช้งาน
ดูข้อมูลเกี่ยวกับเป้าหมายและสถานะการวางเมาส์เหนือของ XR
ทำให้ตัวพิมพ์เข้าถึงได้ง่าย
ความสามารถในการอ่านแบบอักษรเป็นสิ่งสำคัญต่อประสบการณ์ของผู้ใช้ที่สะดวกสบายใน XR เราขอแนะนำให้ใช้ตัวเลือกสเกลประเภทที่มีขนาดแบบอักษร 14dp ขึ้นไป และน้ำหนักแบบอักษรปกติหรือสูงกว่าเพื่อให้อ่านง่ายขึ้น
หากแอปที่มีอยู่เป็นไปตามหลักเกณฑ์ของ Material Design แสดงว่าแอปได้รับการเพิ่มประสิทธิภาพสำหรับ Android XR แล้ว คุณสามารถกำหนดรูปแบบตัวพิมพ์ของแอปใหม่ตาม Material Design
ดูข้อมูลเกี่ยวกับการจัดพิมพ์ใน XR
ใช้คอมโพเนนต์และเลย์เอาต์ของ Material Design
ใช้ประโยชน์จากไลบรารีคอมโพเนนต์ของ Material Design และเลย์เอาต์แบบปรับอัตโนมัติเมื่อออกแบบแอป Android XR บล็อกที่ใช้สร้างแบบอินเทอร์แอกทีฟเหล่านี้ช่วยเร่งการพัฒนาเพื่อให้คุณมุ่งเน้นที่ฟังก์ชันหลักและนวัตกรรมได้
Material Design สำหรับ XR ปรับปรุงคอมโพเนนต์และเลย์เอาต์แบบปรับอัตโนมัติของ Material 3 ด้วยลักษณะการทำงานของ UI เชิงพื้นที่ ซึ่งจะช่วยให้แอปของคุณดูเป็นส่วนหนึ่งของแพลตฟอร์มมากขึ้นและเพิ่มประสิทธิภาพพื้นที่เก็บข้อมูล
นอกจากนี้ คุณยังสามารถทำให้คอมโพเนนต์ UI ที่มีอยู่เป็นแบบเชิงมิติพื้นที่ได้โดยวางไว้ใน Orbiter และใช้ระดับความสูงเชิงมิติพื้นที่ตามที่อธิบายไว้ในหน้านี้
ดาวน์โหลดชุดการออกแบบ Material 3 เพื่อเริ่มต้นใช้งาน