สี
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
สร้างรูปแบบสีที่เข้าถึงได้ง่ายขึ้นและเหมาะกับคุณโดยเฉพาะ ซึ่งสื่อถึงลําดับชั้น สถานะ และแบรนด์ของผลิตภัณฑ์ เมื่อออกแบบอุปกรณ์ที่สวมใส่ได้ สีมีบทบาทสําคัญในการปรับปรุงความชัดเจนในการอ่าน ความสามารถในการใช้งาน ความน่าสนใจของภาพ และการแสดงออก โดยเฉพาะบนหน้าจอขนาดเล็ก
หลักการต่อไปนี้อธิบายวิธีใช้สีในธีมต่างๆ
สร้างจากสีดํา
นาฬิกาออกแบบให้มีพื้นหลังสีดําแทนพื้นหลังที่มีสีของอุปกรณ์โทรศัพท์ แม้ว่าธีมมืดจะมีไว้สำหรับสภาพแวดล้อมที่มีแสงน้อยและธีมสว่างมีไว้สำหรับกลางวัน แต่ UI ของนาฬิกาต้องทำงานได้อย่างราบรื่นทั้งกลางวันและกลางคืน ดังนั้นโทเค็นสีสำหรับนาฬิกาจึงต้องปรับให้เหมาะกับนาฬิกาโดยเฉพาะ
บทบาทสีใหม่
ระบบสีของ Material 3 ยังคงโครงสร้างของสีアクセント 3 สีและสีพื้นกลาง 2 สี แต่เพิ่มสีคอนเทนเนอร์ภายในบทบาทของสีアクセント
บทบาทใหม่เหล่านี้ช่วยให้สื่อความหมายได้มากขึ้นโดยไม่รบกวนลําดับชั้นภาพ โดยพื้นฐานแล้วคือให้สีพื้นผิวที่หลากหลายขึ้นด้วยการเพิ่มสี
บทบาทของคอนเทนเนอร์มีประโยชน์อย่างยิ่งในการไฮไลต์สถานะ เช่น ปุ่มเปิด/ปิด หรือเพื่อจัดสไตล์เสริมเมื่อใช้องค์ประกอบหลักแล้ว
ความหมายเชิงความหมาย
ใน UI ของนาฬิกา สีต้องสื่อความหมายอย่างชัดเจนและเข้าใจง่าย เช่น สีแดงแสดงข้อผิดพลาดและสีเขียวแสดงความสําเร็จ ซึ่งช่วยให้ผู้ใช้เข้าใจการดําเนินการหรือสถานะได้อย่างรวดเร็วโดยไม่ต้องมีคำอธิบายเพิ่มเติม การใช้สีตามความหมายนี้จะช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของ UI และดำเนินการได้อย่างมั่นใจ
การช่วยเหลือพิเศษด้วยสี (การปฏิบัติตามข้อกำหนดด้านคอนทราสต์)
ใน UI ของนาฬิกา สีต้องสื่อความหมายอย่างชัดเจนและเข้าใจง่าย เช่น สีแดงแสดงข้อผิดพลาดและสีเขียวแสดงความสําเร็จ ซึ่งช่วยให้ผู้ใช้เข้าใจการดําเนินการหรือสถานะได้อย่างรวดเร็วโดยไม่ต้องมีคำอธิบายเพิ่มเติม การใช้สีตามความหมายนี้จะช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของ UI และดำเนินการได้อย่างมั่นใจ
มีอะไรใหม่
ระบบการออกแบบภาพและวิธีที่เรายกระดับการแสดงออกผ่านการอัปเดตไลบรารีการออกแบบพื้นฐาน คอมโพเนนต์ และไทล์ต่างๆ ได้รับการอัปเดตครั้งใหญ่
ระบบสีที่สื่อความหมายของ Material 3 มีฟีเจอร์ต่อไปนี้
- ชุดความสัมพันธ์ของสีที่เข้าถึงได้ในตัว
- บทบาทสีมากกว่า 28 รายการที่แมปกับคอมโพเนนต์ Material
- สีธีมมืดในตัวสำหรับสร้างจากสีดํา
- ค่าสีที่ปิดใช้ที่ปรับปรุงแล้ว
- สีข้อผิดพลาดเพิ่มเติม
- สีฐานคงที่ที่มีการกำหนดสีเริ่มต้นให้กับบทบาทสีแต่ละบทบาท
- ฟีเจอร์สีแบบไดนามิก ซึ่งรวมถึงระบบ/หน้าปัด และธีมสีที่อิงตามรูปภาพ
แหล่งข้อมูล
ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้
หลักเกณฑ์สีของ Material Design
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 UTC
[null,null,["อัปเดตล่าสุด 2025-07-26 UTC"],[],[],null,["# Color\n\nCreate more accessible, personal color schemes communicating your product's\nhierarchy, state, and brand. When designing for wearables, color plays a crucial\nrole in enhancing legibility, usability, visual appeal, and expression,\nespecially on smaller screens.\n\nThe following principles explain how to use color across themes.\n\nBuild from black\n----------------\n\n\nWatches are designed with a black background, instead of the tinted background\nthat phone devices use. While dark themes are meant for low-light environments\nand light themes for daylight, watch UIs need to function seamlessly both day\nand night. Therefore, color tokens for watches must be specifically tailored. \n\n\u003cbr /\u003e\n\nNew color roles\n---------------\n\n\nThe Material 3 color system retains the structure of three accent colors and two\nneutral surface colors, but introduces container colors within the accent roles.\nThese new roles enable greater expressive potential without disrupting visual\nhierarchy, essentially providing surface color variations with increased chroma.\nContainer roles are particularly useful for highlighting states, such as toggle\nbuttons, or for providing complementary styling when the primary accent is\nalready utilized. \n\n\u003cbr /\u003e\n\nSemantic meaning\n----------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nColor accessibility (contrast compliance)\n-----------------------------------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nWhat's new\n----------\n\nThere are substantial updates to the visual design system and how we elevate\nexpression throughout updates to our style foundations, components, and tiles\ndesign libraries.\n\nThe Material 3 Expressive color system includes the following features:\n\n- Built-in set of accessible color relationships\n- 28+ color roles mapped to Material components\n- Built-in dark theme colors for building from black\n- Improved disabled color values\n- Additional error colors\n- Static baseline color with default colors assigned to each color role\n- Dynamic color features, including System/Watch face, and image-based color themes\n\nResources\n---------\n\nTo learn more, view the following resources.\n\n### Material Design color guidelines\n\n\n[Learn about the latest best practices](https://material.io/color) for color schemes using Material 3\nExpressive. \n\n\u003cbr /\u003e"]]
