บทบาทและโทนสี

หลัก

1. เสียงหลัก
2. ในบทบาทหลัก

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

Primary-Dim

1. Primary-Dim
2. ในบทบาทหลัก

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

Primary-Container

1. Primary-Container
2. ในคอนเทนเนอร์หลัก

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

รอง

1. เสียงรอง
2. ในเครือข่ายรอง

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

Secondary-Dim

1. Secondary-Dim
2. เสียงรอง

บทบาท Secondary-Dim จะให้คอนทราสต์ที่ลดลงสำหรับองค์ประกอบแบบพาสซีฟในพื้นที่ที่มีความหนาแน่น โดยจะช่วยเสริมสีรองในขณะที่เพิ่มมิติที่ละเอียดอ่อน ทำให้ UI ดูสะอาดตาและช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ได้

Secondary-Container

1. Secondary-Container
2. On-Secondary-Container

ใช้ Secondary-Container เพื่อจัดระเบียบองค์ประกอบรองในเลย์เอาต์ที่หนาแน่น ซึ่งจะ สร้างโครงสร้างและแยกเนื้อหา เพื่อให้มั่นใจว่าเนื้อหาที่รองลงมาจะแยกแยะได้ แต่จะไม่โดดเด่น

ระดับอุดมศึกษา

1. เสียงลำดับสาม
2. On-Tertiary

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

Tertiary-Dim

1. Tertiary-Dim
2. เสียงลำดับสาม

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

Tertiary-Container

1. Tertiary-Container
2. On-Tertiary-Container

ใช้ Tertiary-Container สำหรับพื้นหลังที่จัดกลุ่มเนื้อหาที่เกี่ยวข้องกับระดับที่สาม เช่น คอลเล็กชันป้ายหรือสติกเกอร์ โดยจะเน้นองค์ประกอบระดับที่ 3 ขณะที่ ยังคงความสมดุลและโครงสร้างใน UI

ข้อผิดพลาด

1. ข้อผิดพลาด
2. On-Error

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

ข้อผิดพลาด-มืด

1. Error-Dim
2. On-Error

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

Error-Container

1. ข้อผิดพลาด - คอนเทนเนอร์
2. On-Error-Container

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

Surface-Container-Low

1. Surface-Container-Low
2. บนพื้นผิว
3. On-Surface-Variant

เหมาะสำหรับคอนเทนเนอร์ที่ขยายซึ่งต้องอยู่ใต้ Surface-Container เช่น การ์ดที่ขยายในการแจ้งเตือน นอกจากนี้ยังใช้กับ การ์ดแบบไม่โต้ตอบได้ด้วย ซึ่งเนื้อหายังคงได้รับประโยชน์จากการจำกัด

Surface-Container

1. Surface-Container
2. บนพื้นผิว
3. On-Surface-Variant

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

Surface-Container-High

1. Surface-Container-High
2. บนพื้นผิว
3. On-Surface-Variant

เหมาะสำหรับคอมโพเนนต์ที่มีการเน้นสูงซึ่งต้องอยู่ด้านบนหรือรวมกับ Surface-Container สีนี้ช่วยเน้นและจัดลำดับความสำคัญของพื้นที่สำคัญ ใน UI