สเกล ขนาด และการออกแบบภาพ

หากมีแอป Android และต้องการรักษาสไตล์ภาพ คุณสามารถคงภาษาการออกแบบนั้นไว้ใน Android XR ได้ สําหรับแอปใหม่หรือการออกแบบใหม่ ให้พิจารณาปฏิบัติตามหลักเกณฑ์ Material Design สําหรับขนาด UI, การช่วยเหลือพิเศษ, การจัดรูปแบบตัวอักษร, รูปแบบสี และคอมโพเนนต์

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

หากมีหรือกำลังสร้างแอป Unity, Open XR หรือ WebXR คุณสามารถใช้ภาษาการออกแบบใดก็ได้ คําแนะนําด้านการออกแบบจาก Material Design จะช่วยคุณใช้สี ระยะห่าง ขนาด ปุ่ม และการจัดรูปแบบตัวอักษร

วิธีทดสอบการออกแบบรูปลักษณ์ของแอป

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

ใช้โปรแกรมจําลอง เครื่องจําลอง และอุปกรณ์จริง

• หากคุณกำลังพัฒนาแอป Android ให้ทดสอบแอปในโปรแกรมจำลอง Android XR วิธีนี้ช่วยให้คุณระบุปัญหาที่อาจเกิดขึ้นและปรับปรุงได้อย่างรวดเร็วโดยไม่ต้องมีอุปกรณ์จริง

รายการตรวจสอบการทดสอบการออกแบบภาพ

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

รวบรวมความคิดเห็นของผู้ใช้

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

เป้าหมายใน Android XR

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

องค์ประกอบ UI แบบอินเทอร์แอกทีฟทั้งหมดควรพิจารณาสิ่งต่อไปนี้

• ขนาดเป้าหมายที่แนะนำ: 56dp x 56dp ขึ้นไป
• การแสดงภาพ: 48dp x 48dp ขึ้นไป
• การออฟเซตระหว่างเป้าหมายกับสิ่งกระตุ้นทางสายตา: 4dp
• เป้าหมายเคอร์เซอร์ขององค์ประกอบ UI ต่างๆ ไม่ควรทับซ้อนกันเพื่อให้การโต้ตอบถูกต้อง

อย่าลืมเพิ่มสถานะโฮเวอร์

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

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

ระยะห่างระหว่างเป้าหมาย

Material Design แนะนำให้เว้นระยะห่างระหว่างเป้าหมายอย่างน้อย 8dp ซึ่งรวมถึงปุ่ม ระยะห่างนี้ช่วยให้ผู้ใช้แยกความแตกต่างระหว่างองค์ประกอบแบบอินเทอร์แอกทีฟและหลีกเลี่ยงการเลือกโดยไม่ตั้งใจได้

ระยะห่างที่แน่นอนระหว่างปุ่มอาจแตกต่างกันไปตามบริบทและขนาดของปุ่ม ปัจจัยที่ควรพิจารณามีดังนี้

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

ขนาดและมาตราส่วนแผง

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

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

คำแนะนำ

• แผงมีมุมโค้งมน 32dp คุณลบล้างค่าเริ่มต้นนี้ได้

ลักษณะการทำงานของความลึกของแผง

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

เมื่อแอปอยู่ห่างจากผู้ใช้ 1.75 เมตร

• 1024dp จะแสดงผลเป็น 1556.24 มิลลิเมตร
• 720dp จะแสดงผลเป็น 1,093.66 มิลลิเมตร
• 1 เมตรในชีวิตจริง = 1 เมตรใน XR

ปุ่มและไอคอน

หากมีแอป Android อยู่แล้ว คุณไม่จําเป็นต้องออกแบบคอมโพเนนต์พิเศษสําหรับ Android XR ทำตามหลักเกณฑ์ของ Material Design สำหรับปุ่มและไอคอน หากมีแอป Unity, OpenXR หรือ WebXR คุณจะใช้ปุ่มและไอคอนเดิมหรือจะรับแรงบันดาลใจจาก Material Design ก็ได้

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

สี

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

ธีมมืดและธีมสว่างใน XR

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับชุดสีของ Material Design

การพิมพ์ใน XR

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

หากต้องการสร้างแอปที่ใช้งานง่าย ให้ลองทำตามคำแนะนำด้านแบบอักษรของ Material Design

แนวทางปฏิบัติแนะนำสำหรับการจัดรูปแบบตัวอักษรใน XR

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

การจัดรูปแบบแบบอ่านง่ายใน XR

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