การออกแบบวัสดุ
ภาพหน้าจอ Material Design 3 บนAndroid 12
นักพัฒนา	Google
ปล่อย	25 มิถุนายน 2557 ( 25 มิถุนายน 2014 )
การเผยแพร่ เวอร์ชันเสถียร[±] แอนดรอยด์ 1.12.0 [ 1 ]  / 2 พฤษภาคม 2024 ( 2 พฤษภาคม 2567 ) iOS (เลิกผลิตแล้ว) 124.2.0 [ 2 ]  / 26 เมษายน 2021 ( 26 เมษายน 2564 ) เว็บไซต์ (ปิดให้บริการแล้ว) 14.0.0 [ 3 ]  / 28 เมษายน 2022 ( 28 เมษายน 2565 ) เวอร์ชันทดลองใช้งาน[±] เขียนเป็น HTML , CSS , Sass (v4), JavaScript , AngularJS , Angular , Java , Objective-C , Swift , Dart แพลตฟอร์ม แอนดรอยด์ , ไอโอเอส , เว็บ พิมพ์ ภาษาการออกแบบ ใบอนุญาต Android, iOS: ใบอนุญาต Apache-2.0 Flutter: ใบอนุญาต BSD-3-Clause เว็บไซต์: ใบอนุญาต MIT เว็บไซต์ เวอร์ชั่นล่าสุด การออกแบบวัสดุ 3 เวอร์ชันที่เก็บถาวร การออกแบบวัสดุ 1 การออกแบบวัสดุ 2 ที่เก็บข้อมูล เว็บ : material-components-web แอนดรอยด์ : material-components-android iOS : material-components-ios Flutter : material-components-flutter

Material Design (รหัสชื่อQuantum Paper ) ^{[ 4 ]}เป็นภาษาการออกแบบที่พัฒนาโดยGoogleในปี 2014 โดยต่อยอดจาก UI แบบ "การ์ด" ที่เปิดตัวในGoogle Now Material Design ใช้เลย์เอาต์แบบตารางมากขึ้น แอนิเมชันและการเปลี่ยนภาพที่ตอบสนองได้ดี การเว้นระยะขอบ และเอฟเฟกต์ความลึก เช่น แสงและเงา Google ประกาศเวอร์ชันเริ่มต้นของ Material Design เมื่อวันที่ 25 มิถุนายน 2014 ในงานGoogle I/O ปี 2014 ^{[ 5 ]}

จุดประสงค์ของการพัฒนา Material Design คือการสร้างภาษาภาพแบบใหม่ โดยผสมผสานหลักการออกแบบที่ดี แบบคลาสสิก เข้ากับนวัตกรรมและศักยภาพของเทคโนโลยีและวิทยาศาสตร์ หัวหน้านักออกแบบMatías Duarteอธิบายว่า "ต่างจากกระดาษจริง วัสดุดิจิทัลของเราสามารถขยายและปรับเปลี่ยนรูปร่างได้อย่างชาญฉลาด วัสดุมีพื้นผิวและขอบที่เป็นรูปธรรม รอยต่อและเงาให้ความหมายเกี่ยวกับสิ่งที่คุณสัมผัสได้" Material Design มีพื้นฐานมาจากแนวคิดของกระดาษและหมึก รวมถึง การโต้ตอบแบบสเกวอม อร์ฟิกแต่การนำไปใช้งานนั้นล้ำหน้ากว่า^{[ 6 ] [ 7 ] [ 8 ]}

ในปี 2021 Google ได้ปรับปรุงภาษาการออกแบบใหม่ โดยภาษาใหม่นี้มีชื่อว่า Material Design 3 ^{[ 9 ]}ซึ่งให้ความยืดหยุ่นมากขึ้นสำหรับนักออกแบบในการสร้างธีมที่กำหนดเองด้วยรูปทรงเรขาคณิต สี และรูปแบบตัวอักษรที่หลากหลาย^{[ 10 ]}

ในปี 2025 วิวัฒนาการขั้นต่อไปของภาษาการออกแบบที่มีชื่อว่า "Material 3 Expressive" ได้ถูกเปิดเผย^{[ 11 ]}

Material Design ได้ถูกนำมาใช้กับผลิตภัณฑ์เว็บและมือถือของ Google อย่างค่อยเป็นค่อยไป ทำให้ได้รับประสบการณ์ที่สม่ำเสมอในทุกแพลตฟอร์มและแอปพลิเคชัน นอกจากนี้ Google ยังได้เปิดตัวApplication Programming Interfaces (APIs) สำหรับนักพัฒนาบุคคลที่สามเพื่อนำภาษาการออกแบบนี้ไปใช้ในแอปพลิเคชันของตน^{[ 12 ] [ 13 ] [ 14 ]}

การใช้งาน Material Design แบบโอเพนซอร์สที่เป็นมาตรฐาน สำหรับอินเทอร์เฟซผู้ใช้เว็บแอปพลิเคชันเรียกว่า Material Web ^{[ 15 ]} อย่างไรก็ตาม ยังมีวิธีการอย่างเป็นทางการอื่นๆ อีก ด้วย เช่น การใช้Flutter ^{[ 16 ]}หรือJetpack Compose ^{[ 17 ]}

Material Design 2 (2018)

Material Design 3 (2021)

หลังจากการปรับปรุงครั้งใหญ่ในปี 2018 Google เริ่มออกแบบแอปส่วนใหญ่ใหม่โดยอิงตามหลักการและแนวทางที่ได้รับการปรับปรุงใหม่ที่เรียกว่า "Material Design 2" ซึ่งปรากฏในAndroid Pie [ ^{18 ] โดย}เน้นการปรับแต่งส่วนประกอบ Material Design พื้นฐานให้เข้ากับแบรนด์ของผลิตภัณฑ์ที่ใช้งานอยู่มากขึ้น^{[ 19 ]} แนวทางที่ได้รับการปรับปรุงใหม่นี้เน้นพื้นที่ว่าง มุมโค้งมน ไอคอนสีสันสดใส และแถบนำทางด้านล่างอย่างมาก Google เริ่มใช้ฟอนต์ Product Sansเวอร์ชันพิเศษที่ปรับขนาดให้เหมาะสมเรียกว่า Google Sans ^{[ 20 ]}

ในงาน Google I/Oเดือนพฤษภาคม 2021 Google ได้ประกาศแนวคิดใหม่บนAndroid 12ที่เรียกว่า "Material You" (หรือที่รู้จักกันในชื่อ "Material Design 3" ^{[ 21 ]} ) โดยเน้นที่แอนิเมชั่นที่เพิ่มขึ้น ปุ่มขนาดใหญ่ขึ้น และความสามารถในการสร้างธีม UI แบบกำหนดเองจากวอลเปเปอร์ของผู้ใช้^{[ 22 ]} Material You ได้ทยอยเปิดตัวให้กับแอปต่างๆ ของ Google บน Android เวอร์ชันเก่าในช่วงหลายเดือนต่อมา และเป็นจุดสนใจหลักในสมาร์ทโฟนซีรีส์Pixel 6และPixel 6 Pro ^{[ 23 ] [ 24 ] [ 25 ]}

ในงาน The Android Show: I/O Editionในเดือนพฤษภาคม 2025 Google ได้ประกาศ "Material 3 Expressive" สำหรับAndroid 16และWear OS 6 Material Design เวอร์ชันนี้มีความคล้ายคลึงกับเวอร์ชันก่อนหน้า และมีการปรับปรุงแอนิเมชัน รวมถึงการออกแบบที่มีสีสันและสนุกสนานมากขึ้น^{[ 26 ]}มีการทยอยเปิดใช้งานในโทรศัพท์ Pixel (Pixel 6 และรุ่นใหม่กว่า) และแท็บเล็ต Pixelตั้งแต่เดือนกันยายน 2025 เป็นต้นไป^{[ 27 ]}

• ดีไซน์เรียบง่าย
• ระบบการออกแบบฟลูเอนท์
• แนวทางการใช้งานอินเทอร์เฟซสำหรับมนุษย์
• เมโทร (ภาษาการออกแบบ)
• บริษัท เมมฟิส
• ลิควิด กลาส

Wikimedia Commons มีสื่อที่เกี่ยวข้องกับMaterial Design

• เว็บไซต์อย่างเป็นทางการ
  • การออกแบบวัสดุ 1
  • การออกแบบวัสดุ 2
  • การออกแบบวัสดุ 3