- ระบบการออกแบบใหม่ Jetpack Compose Glimmer สำหรับ จอแสดงผลโปร่งใสของแว่น AI ช่วยสร้างอินเทอร์เฟซที่ซ้อนทับบนโลกจริงได้อย่างเป็นธรรมชาติ
- พื้นผิวทึบและเงาแบบเดิมของ Material Design ทำให้เกิด แสงฟุ้ง (halation) และ ความสามารถในการอ่านลดลง บนจอโปร่งใส จึงต้องใช้แนวทางใหม่ที่เน้นพื้นผิวมืดและคอนเทนต์สว่าง
- ข้อความถูกออกแบบตาม มุมการมองเห็น (visual angle) โดยรักษาขนาดประมาณ 0.6 องศาขึ้นไป และปรับ optical size ของ Google Sans Flex เพื่อคงรูปแบบที่อ่านง่าย
- สีถูกปรับตาม อัตราส่วนคอนทราสต์แบบบวก (additive contrast ratio) เพื่อรักษา พาเลตกลาง ที่เสถียรและคอนทราสต์สูง แม้ความสว่างของฉากหลังในโลกจริงจะเปลี่ยนแปลง
- การเคลื่อนไหวถูกออกแบบเป็น ทรานซิชันที่นุ่มนวลและเคารพการมองเห็นรอบข้างของผู้ใช้ เพื่อให้เทคโนโลยีกลมกลืนกับโลกจริง แทนที่จะคอยดึงความสนใจ
Jetpack Compose Glimmer และพื้นหลังของการออกแบบจอโปร่งใส
- Jetpack Compose Glimmer เป็นระบบการออกแบบใหม่สำหรับสภาพแวดล้อม Android XR (Extended Reality) และใช้ในการพัฒนา อินเทอร์เฟซสำหรับแว่น AI
- ต่างจากการออกแบบที่อิงจอภาพแบบเดิม เพราะโลกจริงกลายเป็นแคนวาสโดยตรง
- อินเทอร์เฟซมุ่งสู่แนวคิดจอแสดงผลแบบ ambient ที่จะแสดงขึ้นเมื่อจำเป็น และหายไปเมื่อไม่จำเป็น
- บนจอโปร่งใส องค์ประกอบพื้นฐานอย่างสี ตัวอักษร และเงา ทำงานต่างจากเดิม
- เช่น สีดำถูกมองว่าโปร่งใส และ สีสว่างจะหายไปบนฉากหลังสีฟ้าอย่างท้องฟ้า
- ด้วยคุณสมบัติเหล่านี้ จึงต้องนิยามหลักการออกแบบเดิมใหม่ในระดับพื้นฐาน
อินเทอร์เฟซในระยะความยาวแขน
- จอไม่ได้ปรากฏบนผิวเลนส์ แต่ถูกฉายให้มองเห็นที่ ระยะประมาณ 1 เมตร (ระยะความยาวแขน)
- ผู้ใช้ต้องย้ายสายตาจากโลกจริงไปยังระนาบโฟกัสนี้ ซึ่งเป็น การเปลี่ยนความสนใจอย่างตั้งใจและเชิงรุก
- การย้ายโฟกัสนี้เป็นโจทย์สำคัญของการออกแบบ และนำไปสู่แนวทางสร้าง อินเทอร์เฟซที่คุ้มค่าพอให้หันมาสนใจแม้เพียงช่วงสั้น ๆ
วิธีจัดการกับแสง
- จอโปร่งใส เพิ่มแสงได้อย่างเดียว และไม่สามารถทำให้มืดลงได้
- ดังนั้นสีดำจึงไม่ใช่สี แต่ทำงานเป็น พื้นที่ไร้แสง (พื้นที่โปร่งใส)
- พื้นผิวสว่างและเงาแบบเดิมของ Material Design ทำให้เกิด แสงจ้าและกินแบตเตอรี่ บนจอโปร่งใส
- ยังเกิด ปรากฏการณ์ halation ที่ทำให้บริเวณสว่างฟุ้งและข้อความพร่ามัว
- ทางแก้คือ นิยามสีดำใหม่ให้เป็น ‘คอนเทนเนอร์’ แล้ววางคอนเทนต์สว่างไว้บนพื้นผิวมืด
- ใช้ เงามืดที่มีมิติความลึก เพื่อสื่อชั้นลำดับและความรู้สึกของพื้นที่
- ปุ่ม การ์ด และ system slider ถูกแยกด้วย ระดับความลึกแบบลำดับชั้น
ความสามารถในการอ่านข้อความและมุมการมองเห็น
- ข้อความถูกออกแบบด้วย มุมการมองเห็น (visual angle) แทนการวัดเป็นพิกเซล
- กำหนดให้ขนาด 0.6 องศาขึ้นไป เป็นเกณฑ์ขั้นต่ำสำหรับการอ่านได้ชัด
- ใช้แกน Optical Size ของฟอนต์ Google Sans Flex เพื่อปรับพื้นที่ภายในตัวอักษรและระยะห่าง
- ขยายพื้นที่ภายในของตัวอักษรอย่าง ‘a’, ‘e’ และเพิ่มระยะของจุดใน ‘i’, ‘j’ เพื่อช่วยให้ รับรู้ตัวอักษรได้รวดเร็ว
- ในโค้ดสามารถทำ การปรับภาพเพื่อการมองเห็นให้เหมาะสมโดยอัตโนมัติ ได้โดยไม่ต้องตั้งค่าระยะห่างตัวอักษรเพิ่มเติม
- คำแนะนำ: ใช้ ฟอนต์หนาและมีระยะห่างกว้าง และ ห้ามใช้ตัวอักษรบางและเล็ก
สีและคอนทราสต์
- เนื่องจากโลกจริงเป็นฉากหลัง ความสว่างและสีจึงเปลี่ยนตลอดเวลา
- ทีมงานวัด อัตราส่วนคอนทราสต์แบบบวก (additive contrast ratio) เพื่อให้มั่นใจว่าคอนเทนต์ยังมองเห็นได้
- สีที่มีความอิ่มตัวสูงอาจหายไปหรือดูจางลงบนฉากหลังจริง
- ด้วยเหตุนี้ Glimmer จึงเลือกโครงสร้างพื้นฐานเป็น พื้นผิวกลางที่มืด + คอนเทนต์สว่าง
- ใช้พาเลตแบบ desaturated เพื่อรักษาคอนทราสต์ให้เสถียรไม่ว่าสภาพแวดล้อมจะเปลี่ยนอย่างไร
- สีจะถูกใช้แบบจำกัด โดยหลักเพื่อ เน้นองค์ประกอบที่ต้องการความสนใจ เช่น ปุ่ม
สมดุลระหว่างการเคลื่อนไหวและความสนใจ
- ใน head-up display การเคลื่อนไหวต้องไม่กลายเป็นสิ่งรบกวน
- เนื้อหาอาจปรากฏในสายตาได้ทุกเมื่อ จึงต้องใช้ ทรานซิชันที่นุ่มนวลและให้เกียรติผู้ใช้
- ทรานซิชันเริ่มต้นที่ 500ms สั้นเกินไปจนรับรู้ได้ยาก จึงปรับเป็น ทรานซิชันแบบค่อยเป็นค่อยไปราว 2 วินาที
- เพื่อพาสายตาของผู้ใช้จาก การมองเห็นรอบข้าง (periphery) เข้าสู่จุดศูนย์กลางอย่างเป็นธรรมชาติ
- อินพุตของผู้ใช้ เช่น เสียงและท่าทาง ต้องมี ฟีดแบ็กทันที
- จึงใช้ focus ring และ highlight เพื่อให้ได้ การตอบสนองที่มี latency ต่ำ
ความกลมกลืนระหว่างโลกจริงและเทคโนโลยี
- แก่นของการออกแบบจอโปร่งใสคือ ปัจจัยความเป็นมนุษย์ เช่น ความสนใจและสมาธิ
- Jetpack Compose Glimmer ตั้งเป้าให้เป็น ประสบการณ์ที่เทคโนโลยีไม่เรียกร้องความสนใจ แต่ช่วยเสริมโลกจริง
- แนวทางนี้ทำให้ แว่น AI พัฒนาไปไกลกว่าการเป็นเครื่องมือแสดงข้อมูล และมุ่งสู่การยกระดับการรับรู้โลกจริงเอง
- Google ยังมี แนวทางการออกแบบสำหรับแว่น AI และ Figma Design Kit ให้แก่นักพัฒนา
ยังไม่มีความคิดเห็น