ภาพรวม
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
Material 3 Expressive เป็นระบบการออกแบบล่าสุดสำหรับหน้าจอที่เล็กที่สุดของเราอย่างนาฬิกา ออกแบบมาเพื่อเพิ่มประสิทธิภาพให้กับอุปกรณ์ทรงกลม โดยมีการอัปเดตการออกแบบที่เน้นความพรีเมียมและการแสดงออกในระดับที่สูงขึ้น ออกแบบและสร้างแอปสำหรับนาฬิกาที่สวยงามและสื่ออารมณ์ด้วย Material 3 Expressive
หลักการในการออกแบบที่สื่อความหมาย
การออกแบบที่สื่อความหมายช่วยยกระดับเลเยอร์ UI แต่ละเลเยอร์ด้วยรูปทรง ภาพเคลื่อนไหว สี และการจัดรูปแบบตัวอักษรที่ผ่านการคิดมาอย่างดี
รอบ Embrace
Material 3 Expressive เปิดตัวเฟรมเวิร์กรูปร่างที่ออกแบบมาสำหรับหน้าจอกลม โดยจะใช้พื้นที่แคนวาสทั้งหมดเพื่อเพิ่มประสิทธิภาพการมองเห็นได้อย่างรวดเร็วและความสมดุลของภาพ
การเคลื่อนไหวและสปริงระดับพรีเมียม
การอัปเดต Material 3 Expressive ช่วยให้การนำทางดูเป็นธรรมชาติ พรีเมียม และมีความสอดคล้องกันในทุกการเปลี่ยน ตอนนี้ Motion จะเชื่อมต่อพื้นผิวในเชิงพื้นที่
โดยตอบสนองต่อท่าทางสัมผัสของผู้ใช้ได้อย่างแม่นยำยิ่งขึ้น ทําให้การไปยังส่วนต่างๆ ของเว็บไซต์เป็นไปอย่างง่ายดาย
การเปลี่ยนรูปร่าง
Material 3 Expressive เปิดตัวเฟรมเวิร์กการเปลี่ยนรูปร่างสำหรับรายการและปุ่มเลือก ซึ่งเพิ่มประสิทธิภาพเพื่อให้ดูพรีเมียมยิ่งขึ้น รายการมีการเลื่อนที่ราบรื่นในอุปกรณ์ทรงกลม
สีสัน
ระบบสีได้รับการขยายให้ใช้ชุดโทนสีที่เข้มขึ้นและชุดโทเค็นที่หลากหลายมากขึ้นซึ่งรวมอยู่ใน Material 3 Expressive การเพิ่มสีไฮไลต์ที่ 3 พร้อมกับโทเค็นรูปแบบต่างๆ เพิ่มเติมและบทบาทของสีที่เฉพาะเจาะจงมากขึ้น จะช่วยให้ระบบการออกแบบมีความหลากหลายและลึกซึ้งยิ่งขึ้น
แบบอักษรที่ปรับแต่งได้
Material 3 Expressive จะแทนที่ Roboto ทั้งหมดด้วย Roboto Flex
มาตราส่วนประเภทพื้นฐานได้รับการปรับแต่งและเพิ่มประสิทธิภาพให้เหมาะกับหน้าจอที่โค้งมนของนาฬิกา
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-26 UTC"],[],[],null,["# Overview\n\nMaterial 3 Expressive is the latest design system for our smallest\nscreen: the watch. Optimized for the round form factor, it brings a design\nupdate which emphasizes premium and a greater level of expression. Design and\nbuild beautiful and expressive watch apps with Material 3 Expressive.\n\nExpressive design principles\n----------------------------\n\nExpressive design elevates each UI layer with thoughtful shape, animation,\ncolor, and typography treatments.\n\n### Embrace round\n\n\nMaterial 3 Expressive introduces a shape framework designed for round\nscreens. It uses the entire canvas to optimize glanceability and visual\nbalance. \n\n\u003cbr /\u003e\n\n### Premium motion and springs\n\n\nMaterial 3 Expressive updates make navigation feel natural, premium, and\nconsistent across all transitions. Motion now spatially connects surfaces.\nThey respond more accurately to user gestures, making navigation more\nintuitive. \n\n\u003cbr /\u003e\n\n### Shape morphing\n\n\nMaterial 3 Expressive introduces a shape morphing framework for lists and\nselect buttons, optimized for a more premium feel. Lists feature smooth\nscrolling on a round form factor. \n\n\u003cbr /\u003e\n\n### Rich color\n\n\nThe color system expands to adopt the deeper tonal palettes and wider\ntoken set included with Material 3 Expressive. The addition of a third\naccent color, along with more token variants and more specific color roles,\nbrings both depth and variety to the design system. \n\n\u003cbr /\u003e\n\n### Variable fonts\n\n\nMaterial 3 Expressive replaces all instances of Roboto with Roboto Flex.\nA baseline type scale is tailored and optimized for the watch's rounded screen. \n\n\u003cbr /\u003e"]]