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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

หลัก

1. เสียงหลัก
2. บนอุปกรณ์หลัก

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

Primary-Dim

1. Primary-Dim
2. บนอุปกรณ์หลัก

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

Primary-Container

1. Primary-Container
2. On-Primary-Container

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

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

Tertiary-Dim

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

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

Tertiary-Container

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

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

ข้อผิดพลาด

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

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

Error-Dim

1. Error-Dim
2. On-Error

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

Error-Container

1. Error-Container
2. On-Error-Container

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

Surface-Container-Low

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

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

Surface-Container

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

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

Surface-Container-High

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

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