Material Design: แนวคิดหลัก Material You และ Material 3

Material Design คืออะไร?

Material Design (ชื่อรหัส Project Quantum) คือระบบการออกแบบของ Google ประกาศครั้งแรกในงาน Google I/O 2014 และนำมาใช้ครั้งแรกใน Android 5.0 Lollipop เป้าหมายของ Material Design คือการสร้างภาษาภาพที่เป็นหนึ่งเดียวสำหรับผลิตภัณฑ์ทั้งหมดของ Google และแอปพลิเคชัน Android โดยอิงจากคุณสมบัติทางกายภาพของกระดาษและหมึก — “วัสดุ” (material) แตกต่างจากการออกแบบแบบแบน (Flat Design) Material Design เพิ่มความลึกทางกายภาพ เงา ชั้น และแอนิเมชันที่สมจริง

ตั้งแต่ปี 2014 Material Design ผ่านสามเวอร์ชันหลัก: Material 1 (2014) — แนวทางดั้งเดิมพร้อมการ์ดและปุ่มการกระทำลอย; Material 2 (2018) — ภาษาภาพที่เรียบง่ายขึ้น ระยะห่างที่เพิ่มขึ้น เน้นการพิมพ์; Material 3 / Material You (2021) — โทนสีแบบไดนามิกที่สร้างจากวอลเปเปอร์ของอุปกรณ์ การปรับแต่งเฉพาะบุคคล ตามข้อมูล Google Play Console (2024) 78% ของ 1,000 แอปพลิเคชันชั้นนำบน Google Play ใช้ Material Components สำหรับ Android

Material Design ไม่ใช่แค่ชุด UI แต่เป็นระบบการออกแบบที่สมบูรณ์: แนวทางการเข้าถึง (a11y) แอนิเมชัน (Motion) เค้าโครงที่ปรับเปลี่ยนได้ ส่วนประกอบ (TopAppBar, BottomNavigation, Navigation Drawer) การพิมพ์ (Material Type Scale) และสัญลักษณ์ (Material Symbols) ที่ IT Sectr เราใช้ Material Design เป็นระบบการออกแบบพื้นฐานสำหรับโปรเจกต์ Android ตั้งแต่ปี 2014 โดยปรับแต่งให้เข้ากับแบรนด์ของลูกค้าผ่าน Material Theme Builder

หลักการพื้นฐานของ Material Design: ความเป็นวัตถุ ความลึก การเคลื่อนไหว

ความเป็นวัตถุ (วัสดุเป็นอุปมา) — หลักการสำคัญของ Material Design ที่ยืมคุณสมบัติทางกายภาพของกระดาษ: วัสดุมีพื้นผิว ความหนา (1dp) ทอดเงา (Elevation) และครอบครองพื้นที่ (Bounds) องค์ประกอบอินเทอร์เฟซ — การ์ด ปุ่ม แผง — ทำตัวเหมือนวัตถุทางกายภาพ: ยกขึ้นเมื่อกด (เอฟเฟกต์ระลอกคลื่น) ซ้อนทับกัน (แกน Z) และเคลื่อนไหวเมื่อปรากฏ (motion)

ความลึก (Depth) สร้างขึ้นผ่าน Elevation — คุณสมบัติของวัสดุที่กำหนดตำแหน่งบนแกน Z ยิ่ง Elevation สูง (8dp, 16dp) เงาที่ทอดโดยองค์ประกอบก็ยิ่งมากขึ้น การ์ดมี Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp ความลึกใช้เพื่อสื่อถึงลำดับชั้น: หน้าต่างโมดอลและไดอะล็อกอยู่เหนือเนื้อหาเสมอ Navigation Drawer อยู่เหนือ Action Bar ความลึกแทนที่มุมมอง 3 มิติด้วยชั้น Z แบน รักษาประสิทธิภาพการเรนเดอร์

การเคลื่อนไหว (Motion) — แอนิเมชันใน Material Design ไม่ใช่เพื่อการตกแต่งแต่เพื่อประโยชน์ใช้สอย แอนิเมชันควร: 1) ชี้นำความสนใจของผู้ใช้ (การ์ดขยายพร้อมรายละเอียด) 2) อธิบายความสัมพันธ์เชิงพื้นที่ (AppBar เปลี่ยนเป็น TopAppBar เมื่อเลื่อน) 3) รับประกันการเปลี่ยนภาพที่ราบรื่น (การเปลี่ยนองค์ประกอบที่ใช้ร่วมกันระหว่างหน้าจอ) ตาม Google Material Guidelines (2024) แอนิเมชันไม่ควรเกิน 300ms สำหรับการโต้ตอบระดับจุลภาคและ 500ms สำหรับการเปลี่ยนระหว่างหน้าจอ — แอนิเมชันที่นานกว่าจะถูกรับรู้ว่าเป็นความล่าช้า

Material You (Material Design 3): สีแบบไดนามิกและการปรับแต่งเฉพาะบุคคล

Material You (Material Design 3) คือการอัปเดตครั้งใหญ่ที่สุดของระบบการออกแบบ นำเสนอในปี 2021 พร้อมกับ Android 12 นวัตกรรมหลัก — สีแบบไดนามิก (Monet): ระบบแยกสีหลัก 5 สีจากวอลเปเปอร์ของอุปกรณ์โดยอัตโนมัติและสร้างจานสีที่สมบูรณ์ 15 โทน (primary, secondary, tertiary, error พร้อมตัวแปร light/dark) โดยมีอัตราส่วนความคมชัด WCAG AA ที่คำนวณแล้ว

โมเดลสีของ Material You สร้างขึ้นบน HCT (Hue, Chroma, Tone) — พื้นที่สีที่พัฒนาโดย Google ซึ่งรวมการรับรู้ของมนุษย์ (Hue) เข้ากับความอิ่มตัว (Chroma) และความสว่าง (Tone) แตกต่างจาก HSL/HSV HCT รับประกันว่าโทนสีที่สร้างขึ้นทั้งหมดมีความคมชัดที่ต้องการบนพื้นหลังสีขาวและสีดำ Google Material Guidelines (2024) แนะนำให้ใช้เฉพาะรูปแบบโทนของจานสีหลักสำหรับข้อความ โทน surface สำหรับพื้นหลัง และ primary-container สำหรับพื้นผิวที่เน้น

ผู้ใช้สามารถเลือกจาก 4 รูปแบบการปรับแต่ง: TonalSpot (สีหลักจากวอลเปเปอร์) Vibrant (สีที่อิ่มตัวมากที่สุด) Expressive (สีสว่างเพิ่มเติม) Neutral (จานสีเดียว) Material Theme Builder (material-foundation.github.io) ช่วยให้ส่งออกธีม Material 3 ไปยัง XML, Compose Theme, CSS และแม้แต่ปลั๊กอิน Figma

Material Components สำหรับ Android: การใช้งานผ่าน XML และ Compose

Material Components สำหรับ Android (MDC-Android) คือไลบรารีอย่างเป็นทางการของ Google ที่ให้ส่วนประกอบ View พร้อมใช้งานซึ่งปฏิบัติตามแนวทางของ Material Design สำหรับเค้าโครง XML ไลบรารีสามารถใช้งานได้ผ่าน dependencies com.google.android.material:material เวอร์ชันปัจจุบัน ณ เดือนมิถุนายน 2026 — 1.12.0

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="2dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/outline">

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

ตัวอย่างแสดงหน้าจอ Material พร้อม MaterialToolbar (TopAppBar), MaterialCardView พร้อมระยะห่างและเส้นขอบแบบกำหนดเอง, TextInputLayout พร้อมรายการแบบเลื่อนลง และ MaterialButton ในสไตล์ Material3 FAB ถูกยึดกับ Toolbar — รูปแบบมาตรฐานสำหรับอินเทอร์เฟซ master-detail

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("เมือง") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("ส่ง")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

โค้ดสาธิตธีม Material You ใน Compose: dynamicLightColorScheme() สร้างโทนสีโดยอัตโนมัติตามวอลเปเปอร์ของอุปกรณ์ Scaffold จัดเตรียมโครงสร้างมาตรฐานพร้อม TopAppBar และ FAB OutlinedTextField และ Button เป็นส่วนประกอบ Material 3 ที่สีมาจาก colorScheme แบบไดนามิก เมื่อวอลเปเปอร์เปลี่ยน สีทั้งหมดของแอปจะอัปเดตโดยอัตโนมัติ — การปรับแต่งเฉพาะบุคคลโดยไม่ต้องแก้ไขโค้ด

Material Design บน iOS: Material Components สำหรับ iOS

Material Components สำหรับ iOS (MDC-iOS) คือไลบรารีที่ให้ส่วนประกอบ UIKit ดั้งเดิมซึ่งใช้งาน Material Design บน iOS เนื่องจาก iOS มีระบบการออกแบบของตนเอง (Human Interface Guidelines) ส่วนประกอบ Material บน iOS จึงถูกใช้น้อยกว่าแต่เป็นที่ต้องการในแอปพลิเคชันข้ามแพลตฟอร์มที่ต้องการรูปแบบภาพที่เป็นหนึ่งเดียวกันระหว่าง Android และ iOS

MDC-iOS ประกอบด้วย AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs และ TextFields ที่จัดสไตล์สำหรับ Material Design ไลบรารีสามารถใช้งานได้ผ่าน CocoaPods (pod 'MaterialComponents') และ Swift Package Manager Apple Human Interface Guidelines (2024) ไม่แนะนำให้แทนที่ส่วนประกอบ UIKit ดั้งเดิมทั้งหมดด้วยส่วนประกอบที่เทียบเท่าของ Material แต่อนุญาตให้ใช้ส่วนประกอบ Material สำหรับอินเทอร์เฟซแบบกำหนดเองโดยมีเงื่อนไขว่าต้องรักษาการนำทางดั้งเดิม (NavigationStack, UITabBarController) ไว้

ที่ IT Sectr เราใช้ Material Components บน iOS เฉพาะสำหรับแอปที่พอร์ตมาจาก Android (โปรเจกต์ข้ามแพลตฟอร์มด้วย Flutter หรือ Kotlin Multiplatform) สำหรับแอป iOS ดั้งเดิม เราปฏิบัติตาม HIG และใช้ UIKit/SwiftUI พร้อมการสร้างแบรนด์แบบกำหนดเอง ตามการสำรวจของ Swift Community (2024) นักพัฒนา 8% ใช้ Material Components สำหรับ iOS โดยส่วนใหญ่ในโปรเจกต์แบบไฮบริด

Material Design เปรียบเทียบกับระบบการออกแบบอื่น

Material Design ไม่ใช่ระบบการออกแบบเดียวในตลาด คู่แข่งหลัก: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce) แต่ละระบบถูกปรับให้เหมาะสมสำหรับแพลตฟอร์มของตน: Material Design สำหรับ Android, HIG สำหรับ iOS, Fluent สำหรับ Windows การเลือกระบบการออกแบบถูกกำหนดโดยแพลตฟอร์มเป้าหมายและระบบนิเวศ

ข้อได้เปรียบหลักของ Material Design คือความเปิดกว้างและลักษณะข้ามแพลตฟอร์ม แนวทาง ส่วนประกอบ และเครื่องมือ (Material Theme Builder) มีให้ใช้ฟรี ทำให้ระบบเป็นที่นิยมในหมู่สตาร์ทอัพและนักพัฒนาอิสระ Apple HIG เชื่อมโยงอย่างแน่นหนากับระบบนิเวศของ Apple แต่รับประกันความสอดคล้องที่ดีที่สุดกับความคาดหวังของแพลตฟอร์ม สำหรับโปรเจกต์ข้ามแพลตฟอร์ม Material Design เป็นตัวเลือกที่เหมาะสมที่สุดด้วย Flutter และ Jetpack Compose Multiplatform