สีบนแว่นตา

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

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

รูปแบบสี

รูปแบบสีของแว่นตา (ชุดโทเค็นสีหรือบทบาทในการกำหนดธีมสี ของแอป) ประกอบด้วยบทบาทสีเฉพาะจุด 3 บทบาท สีพื้นผิว 4 บทบาท (หรือบทบาทที่เป็นกลาง) และสี On-Color ที่จับคู่กัน บทบาทของสีจะคล้ายกับบทบาทของรูปแบบสีในมือถือ และควรใช้ในลักษณะเดียวกัน

องค์ประกอบการออกแบบควรยึดไว้ที่ด้านล่างของ
เฟรม

สีเฉพาะจุดสามารถใช้แทนสี On-Color ได้เพื่อเน้นแบบจำกัด

ใช้ข้อความสีขาวสำหรับเนื้อหาข้อความส่วนใหญ่ คุณใช้สีแบบอักษรกับข้อความที่เน้นได้
ใช้ข้อความสีสำหรับเนื้อหาทั้งหมด

ปรับแต่งสี

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

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

องค์ประกอบการออกแบบควรยึดไว้ที่ด้านล่างของ
เฟรม

สีของแบรนด์และสีเชิงสัญลักษณ์ที่ปรับแต่งแล้ว

สีที่แสดงถึงแบรนด์ การดำเนินการ หรือการแจ้งเตือนของระบบต้องมีลักษณะดังนี้

  • สว่างพอที่จะอ่านได้
  • อิ่มตัวพอที่จะแยกแยะเป็นสีได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับธีม Jetpack Compose Glimmer

การใช้พลังงาน

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

องค์ประกอบการออกแบบควรยึดไว้ที่ด้านล่างของ
เฟรม

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

ควรหลีกเลี่ยงพื้นผิวที่ปรับแต่ง

องค์ประกอบการออกแบบควรยึดไว้ที่ด้านล่างของ
เฟรม

สีคอนเทนเนอร์เข้ม

โดยทั่วไปแล้ว คอนเทนเนอร์ต้องมุ่งเน้นที่การแสดงเนื้อหาที่อยู่ภายใน โดยไม่ทำให้เสียสมาธิ

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

ใช้พื้นผิวสีเข้มและเนื้อหาสีสดใส
ใช้พื้นผิวที่สว่างหรือทึบ

คุณปรับแต่งเส้นขอบเพื่อเพิ่มการสร้างแบรนด์หรือ UI ที่สื่อถึงอารมณ์ได้

ใช้สีเริ่มต้น โดยเราได้ปรับให้เหมาะกับการแสดงผลบนแว่นตาเป็นอย่างยิ่ง
ใช้สีเส้นขอบหลายสี

โปรดระมัดระวังและประสานสีแบบกำหนดเองระหว่างเส้นขอบสถานะโฟกัสและสถานะเริ่มต้น

องค์ประกอบการออกแบบควรยึดไว้ที่ด้านล่างของ
เฟรม การปรับแต่งโฟกัสเส้นขอบด้วยสีน้ำเงิน: ไฮไลต์สถานะที่มีการโฟกัสประกอบด้วยเส้นขอบ 2 เส้น ใช้สีกับเลเยอร์ 2 เพื่อปรับสถานะที่มีการโฟกัส