ระบบการออกแบบคือชุดของการตัดสินใจด้านการออกแบบที่นำกลับมาใช้ใหม่ได้ ซึ่งแสดงออกในรูปแบบ คำแนะนำ คอมโพเนนต์ และรูปแบบ ระบบสามารถแบ่งออกเป็นองค์ประกอบการออกแบบที่เล็กที่สุด เช่น สี แบบอักษร หรือรูปร่าง ซึ่งจะประกอบกันเป็นชิ้นส่วนคอมโพเนนต์ที่ซับซ้อนขนาดใหญ่ขึ้น ตัวอย่างเช่น ไอคอนและป้ายกำกับข้อความประกอบกันเป็นคอมโพเนนต์ปุ่ม ในขณะที่ปุ่มหลายปุ่มและพื้นผิวประกอบกันเป็นคอมโพเนนต์การ์ด ระบบการออกแบบ ยังมีชุดคำแนะนำที่ประกอบด้วยการตัดสินใจด้านการออกแบบที่มีอยู่ เกี่ยวกับคอมโพเนนต์และรูปแบบ
Material Design เป็นระบบการออกแบบแบบโอเพนซอร์สที่ Google พัฒนาขึ้นเพื่อช่วยให้คุณสร้างผลิตภัณฑ์ที่สวยงามและมุ่งเน้นผู้ใช้ Material 3 เป็นการทำซ้ำล่าสุดของ Material Design
คอมโพเนนต์ Material Design
Material Design มีคอมโพเนนต์ที่รองรับโค้ดมากมาย ซึ่งเป็นองค์ประกอบแบบอินเทอร์แอกทีฟสำหรับการสร้างอินเทอร์เฟซผู้ใช้ โดยสามารถจัดระเบียบคอมโพเนนต์เหล่านี้ เป็น 5 หมวดหมู่ตามวัตถุประสงค์ ได้แก่ การดำเนินการ การบรรจุ การนำทาง การเลือก และการป้อนข้อความ
คอมโพเนนต์การดำเนินการ
คอมโพเนนต์การดำเนินการช่วยให้ผู้ใช้บรรลุเป้าหมาย
Material มีปุ่มหลายประเภทเพื่อช่วยกำหนดลำดับความสำคัญ ของการดำเนินการและการโต้ตอบในบริบทต่างๆ ตั้งแต่ FAB หรือ FAB แบบขยายสําหรับการกระทําหลักไปจนถึงปุ่ม ไอคอนสนับสนุนไปจนถึงการเลือกตัวเลือกด้วยปุ่ม แบบแบ่งกลุ่ม
องค์ประกอบการสื่อสาร
คอมโพเนนต์การสื่อสารให้ข้อมูลที่เป็นประโยชน์โดยการแจ้งเตือนผู้ใช้ด้วยป้าย แจ้งสถานะผ่านตัวบ่งชี้ ความคืบหน้า และแสดงข้อความกระบวนการสั้นๆ ด้วยแถบแสดงข้อความ
คอมโพเนนต์การกักเก็บ
คอมโพเนนต์คอนเทนเนอร์มีข้อมูลและการดำเนินการ ซึ่งรวมถึงคอมโพเนนต์อื่นๆ เช่น ปุ่ม เมนู หรือชิป คอมโพเนนต์ Material ส่วนใหญ่ใช้การบรรจุที่ชัดเจน โดยจัดกลุ่มเนื้อหาและการดำเนินการที่เกี่ยวข้องไว้ด้วยกันกับออบเจ็กต์ภาพ ได้แก่ การ์ด กล่องโต้ตอบ ชีตด้านล่าง ชีตด้านข้าง ภาพสไลด์ และเคล็ดลับเครื่องมือ รายการสามารถระบุได้โดยการแสดงตัวคั่นที่มองเห็นได้ คอมโพเนนต์เหล่านี้มีรูปแบบทั่วไป สำหรับการแสดงกลุ่มเนื้อหา
คอมโพเนนต์การนำทาง
คอมโพเนนต์การนำทางช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของ UI ได้ สำหรับอุปกรณ์เคลื่อนที่ แถบนำทางหรือลิ้นชักการนำทาง จะมีปลายทางการนำทางหลัก แท็บ แถบแอปด้านล่าง และแถบแอปด้านบน ช่วยให้คุณไปยังส่วนต่างๆ ของข้อมูลสนับสนุน และการดำเนินการได้หลายวิธี อ่านเพิ่มเติมเกี่ยวกับวิธีทำงานร่วมกับ การนำทางภายในเลย์เอาต์
คอมโพเนนต์การเลือก
คอมโพเนนต์การเลือกช่วยให้ผู้ใช้ระบุตัวเลือกได้ ไม่ว่าจะสร้างแบบฟอร์ม ด้วยช่องทำเครื่องหมายและปุ่มตัวเลือก การกรอง โดยใช้ชิป หรือการสลับการตั้งค่าด้วย สวิตช์และแถบเลื่อน คอมโพเนนต์การเลือก ช่วยให้ผู้ใช้ควบคุมและป้อนการตัดสินใจได้
คอมโพเนนต์การป้อนข้อความ
คอมโพเนนต์อินพุตข้อความช่วยให้ผู้ใช้ป้อนและแก้ไขข้อความได้ ช่องข้อความให้ผู้ใช้ป้อนข้อความใน UI
ระบบการออกแบบสำหรับ Compose
อ่านระบบการออกแบบใน Compose เพื่อดูรายละเอียดเกี่ยวกับวิธีใช้ Compose เพื่อ นำระบบการออกแบบไปใช้ได้อย่างราบรื่นยิ่งขึ้น และทำให้แอปมีรูปลักษณ์ที่สอดคล้องกัน ด้วยการกำหนดธีม คอมโพเนนต์ และด้านอื่นๆ ของระบบการออกแบบ