สร้างรูปแบบสีที่เข้าถึงได้ง่ายขึ้นและเหมาะกับคุณโดยเฉพาะ ซึ่งสื่อถึงลําดับชั้น สถานะ และแบรนด์ของผลิตภัณฑ์ เมื่อออกแบบอุปกรณ์ที่สวมใส่ได้ สีมีบทบาทสําคัญในการปรับปรุงความชัดเจนในการอ่าน ความสามารถในการใช้งาน ความน่าสนใจของภาพ และการแสดงออก โดยเฉพาะบนหน้าจอขนาดเล็ก
หลักการต่อไปนี้อธิบายวิธีใช้สีในธีมต่างๆ
สร้างจากสีดํา
นาฬิกาออกแบบให้มีพื้นหลังสีดําแทนพื้นหลังที่มีสีของอุปกรณ์โทรศัพท์ แม้ว่าธีมมืดจะมีไว้สำหรับสภาพแวดล้อมที่มีแสงน้อยและธีมสว่างมีไว้สำหรับกลางวัน แต่ UI ของนาฬิกาต้องทำงานได้อย่างราบรื่นทั้งกลางวันและกลางคืน ดังนั้นโทเค็นสีสำหรับนาฬิกาจึงต้องปรับให้เหมาะกับนาฬิกาโดยเฉพาะ
บทบาทสีใหม่
ระบบสีของ Material 3 ยังคงโครงสร้างของสีアクセント 3 สีและสีพื้นกลาง 2 สี แต่เพิ่มสีคอนเทนเนอร์ภายในบทบาทของสีアクセント บทบาทใหม่เหล่านี้ช่วยให้สื่อความหมายได้มากขึ้นโดยไม่รบกวนลําดับชั้นภาพ โดยพื้นฐานแล้วคือให้สีพื้นผิวที่หลากหลายขึ้นด้วยการเพิ่มสี บทบาทของคอนเทนเนอร์มีประโยชน์อย่างยิ่งในการไฮไลต์สถานะ เช่น ปุ่มเปิด/ปิด หรือเพื่อจัดสไตล์เสริมเมื่อใช้องค์ประกอบหลักแล้ว
ความหมายเชิงความหมาย
ใน UI ของนาฬิกา สีต้องสื่อความหมายอย่างชัดเจนและเข้าใจง่าย เช่น สีแดงแสดงข้อผิดพลาดและสีเขียวแสดงความสําเร็จ ซึ่งช่วยให้ผู้ใช้เข้าใจการดําเนินการหรือสถานะได้อย่างรวดเร็วโดยไม่ต้องมีคำอธิบายเพิ่มเติม การใช้สีตามความหมายนี้จะช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของ UI และดำเนินการได้อย่างมั่นใจ
การช่วยเหลือพิเศษด้วยสี (การปฏิบัติตามข้อกำหนดด้านคอนทราสต์)
ใน UI ของนาฬิกา สีต้องสื่อความหมายอย่างชัดเจนและเข้าใจง่าย เช่น สีแดงแสดงข้อผิดพลาดและสีเขียวแสดงความสําเร็จ ซึ่งช่วยให้ผู้ใช้เข้าใจการดําเนินการหรือสถานะได้อย่างรวดเร็วโดยไม่ต้องมีคำอธิบายเพิ่มเติม การใช้สีตามความหมายนี้จะช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของ UI และดำเนินการได้อย่างมั่นใจ
มีอะไรใหม่
ระบบการออกแบบภาพและวิธีที่เรายกระดับการแสดงออกผ่านการอัปเดตไลบรารีการออกแบบพื้นฐาน คอมโพเนนต์ และไทล์ต่างๆ ได้รับการอัปเดตครั้งใหญ่
ระบบสีที่สื่อความหมายของ Material 3 มีฟีเจอร์ต่อไปนี้
- ชุดความสัมพันธ์ของสีที่เข้าถึงได้ในตัว
- บทบาทสีมากกว่า 28 รายการที่แมปกับคอมโพเนนต์ Material
- สีธีมมืดในตัวสำหรับสร้างจากสีดํา
- ค่าสีที่ปิดใช้ที่ปรับปรุงแล้ว
- สีข้อผิดพลาดเพิ่มเติม
- สีฐานคงที่ที่มีการกำหนดสีเริ่มต้นให้กับบทบาทสีแต่ละบทบาท
- ฟีเจอร์สีแบบไดนามิก ซึ่งรวมถึงระบบ/หน้าปัด และธีมสีที่อิงตามรูปภาพ
แหล่งข้อมูล
ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้
หลักเกณฑ์สีของ Material Design
ดูข้อมูลเกี่ยวกับแนวทางปฏิบัติแนะนำล่าสุดสำหรับรูปแบบสีโดยใช้ Material 3 แบบ Expressive