สีบนแว่นตา

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

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

รูปแบบสี

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

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

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

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

กำหนดค่าสี

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

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

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

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

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

  • สว่างพอที่จะอ่านได้
  • อิ่มตัวพอที่จะแยกแยะได้ว่าเป็นสี
  • ตรวจสอบว่ามีความแตกต่างของโทนสีระหว่างสีพื้นหน้ากับสีพื้นหลังอย่างน้อย 66% โดยใช้พื้นที่สี HCT

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

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

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

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

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

ควรหลีกเลี่ยงพื้นผิวที่กำหนดเอง

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

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

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

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

ใช้พื้นผิวสีเข้มและเนื้อหาสีสว่าง
ใช้พื้นผิวสีสว่างหรือพื้นผิวที่มีสีเติม
สร้างคอนทราสต์ระหว่างพื้นผิวกับข้อความ ขอแนะนำให้ตรวจสอบความแตกต่างของโทนสีประมาณ 66
ปล่อยให้คอนทราสต์ระหว่างพื้นผิวกับข้อความใกล้เคียงกันมากเกินไป
ตรวจสอบว่าพื้นผิวและพื้นผิวตัวแปรมีความแตกต่างของโทนสีมากพอที่จะสร้างลำดับชั้นการมองเห็นที่จำเป็น
ทำให้พื้นผิวและพื้นผิวตัวแปรมีโทนสีใกล้เคียงกันมากเกินไป (แตกต่างกันประมาณ 20)

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

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

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

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

ตรวจสอบว่ามีคอนทราสต์เพียงพอในสถานะการโต้ตอบทั้งหมด
เปลี่ยนคอนทราสต์ในสถานะการโต้ตอบเป็นคอนทราสต์ต่ำสุด