Material Design:关键概念,Material You和Material 3

作者: IT Sectr 发布日期: 2026-02-21 阅读时间: 14 分钟

了解什么是Material Design — Google基于物质性、深度和适应性原则的设计系统,结合了视觉语言、动画、布局和界面组件的指南。在Material Design 3(Material You)版本中,该系统包括基于设备壁纸的动态色彩方案、自适应排版和扩展组件。根据Google I/O 2024的数据,超过300万应用在Google Play中使用Material Design,使其成为Android上最广泛使用的设计系统。

要点

  • Material Design — Google的设计系统,首次于2014年推出,包含视觉语言、动画、组件和布局的指南。
  • Material 3(Material You,2021)版本引入了动态颜色 — 系统根据设备壁纸自动生成颜色调色板。
  • Material Design是Android应用的强制性设计系统,Google推荐用于所有新项目。
  • 主要组件:TopAppBar、BottomNavigation、FAB、Card、Tabs、TextField、Snackbar、BottomSheet。
  • 通过适用于Android的Material Components(MDC-Android)库和Jetpack Compose中的Material支持实现。

什么是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)— 带有卡片和Floating Action Button的原始指南;Material 2(2018)— 简化视觉语言、增加间距、强调排版;Material 3 / Material You(2021)— 基于设备壁纸生成的动态色彩方案、个性化。根据Google Play Console(2024),前1000名Google Play应用中有78%使用适用于Android的Material Components。

Material Design不仅仅是UI工具包,而是一个完整的设计系统:可访问性(a11y)、动画(Motion)、自适应布局(Responsive Layout)、组件(TopAppBar、BottomNavigation、Navigation Drawer)、排版(Material Type Scale)和图标设计(Material Symbols)的指南。在IT Sectr,我们自2014年起将Material Design用作Android项目的基础设计系统,并通过Material Theme Builder根据客户品牌进行定制。

Material Design的主要原则:物质性、深度、运动

物质性(Material as Metaphor) — 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之上。深度用扁平的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插件。

适用于Android的Material Components:通过XML和Compose实现

适用于Android的Material Components(MDC-Android)— Google官方库,提供符合Material Design指南的现成View组件。对于XML布局,该库通过依赖项com.google.android.material:material获得,截至2026年6月的当前版本为1.12.0。

XML
<?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>

示例展示了带有MaterialToolbar(TopAppBar)、具有自定义间距和边框的MaterialCardView、带有下拉列表的TextInputLayout和Material3样式的MaterialButton的Material屏幕。FAB作为锚点连接到Toolbar — 这是主从界面的标准方案。

Kotlin (Compose)
@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()
            }
        }
    }
}

代码演示了Compose中的Material You主题:dynamicLightColorScheme()根据设备壁纸自动生成色彩方案。Scaffold提供带有TopAppBar和FAB的标准框架。OutlinedTextField和Button是Material 3组件,其颜色来自动态colorScheme。当壁纸更改时,应用的所有颜色自动更新 — 无需修改代码即可实现个性化。

iOS上的Material Design:适用于iOS的Material Components

适用于iOS的Material Components(MDC-iOS)— 一个库,提供在iOS上实现Material Design的原生UIKit组件。由于iOS有自己的设计系统(Human Interface Guidelines),Material组件在iOS上使用较少,但在需要Android和iOS之间统一视觉风格的跨平台应用中是必需的。

MDC-iOS包括采用Material Design样式的AppBar、BottomNavigation、Cards、Chips、Dialogs、Snackbar、Tabs和TextFields。该库通过CocoaPods(pod 'MaterialComponents')和Swift Package Manager获得。Apple Human Interface Guidelines(2024)不建议完全用Material等效组件替换原生UIKit组件,但允许在保持原生导航(NavigationStack、UITabBarController)的前提下为自定义界面使用Material组件。

在IT Sectr,我们仅在从Android移植的应用(使用Flutter或Kotlin Multiplatform的跨平台项目)中使用适用于iOS的Material Components。对于原生iOS应用,我们遵循HIG并采用客户品牌下的UIKit/SwiftUI自定义样式。根据Swift Community(2024)的调查,8%的开发人员使用适用于iOS的Material Components,主要在混合项目中使用。

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 DesignApple HIGFluent Design
平台Android、Web、FlutteriOS、macOS、watchOS、tvOSWindows 10/11、.NET MAUI
色彩系统HCT(Hue-Chroma-Tone)语义 + 强调色亚克力 + Reveal highlight
排版Material Type Scale(13种样式)SF Pro(9种样式)Segoe UI Variable
个性化动态色彩(Monet)未提供强调色设置
动画Motion系统(300–500ms)UIKit弹性动画Fluent Motion(Fluent 2)
开源是(GitHub,Apache 2.0)否(封闭)是(GitHub,MIT)

Material Design的主要优势是开放性和跨平台支持。指南、组件和工具(Material Theme Builder)免费提供,使该系统在初创公司和独立开发人员中广受欢迎。Apple HIG与Apple生态系统紧密相连,但提供了与用户平台期望的最佳匹配。对于跨平台项目,Material Design凭借Flutter和Jetpack Compose Multiplatform是最佳选择。

常见问题

Android应用是否必须使用Material Design?

从技术上讲 — 不,Google不强制要求使用Material Components。建议 — 是的,Material Design是Compatibility Test Suite(CTS)和Android Design Guidelines的一部分。不使用Material组件的应用可能与Android系统应用的一致性较低。Google Play Console不会因拒绝Material Design而拒绝应用,但用户期望熟悉的模式 — FAB、BottomNavigation、TopAppBar。

如何根据品牌定制Material Design?

Material Theme Builder(material-foundation.github.io)允许上传品牌徽标并在3次点击内生成自定义主题。该工具提取关键颜色,生成15色调色板,并将主题导出为XML、Compose和Figma。此外,可以自定义排版(Material Type Scale)和组件形状(Shape scheme)——卡片、按钮和对话框的圆角处理。定制不应违反Material Design的基本规则(对比度、Elevation、Motion)。

什么是Dynamic Color及其工作原理?

Dynamic Color(Monet) — Android 12+的机制,根据设备壁纸自动生成应用的色彩方案。系统通过K-means算法分析壁纸的主色调,将其转换为HCT色彩空间,生成5个基本色调(primary、secondary、tertiary、neutral、error)和每个色调的3种变体(container、on-container、fixed)。开发人员只需在Compose中调用dynamicLightColorScheme()或在XML中应用DynamicColors.applyToActivity(),所有Material 3组件将自动采用新颜色。

Material Design与SwiftUI兼容吗?

Material Design没有直接适用于SwiftUI的移植版本。适用于iOS的Material Components是用UIKit编写的。对于SwiftUI,可以使用自定义View修饰符来重现Material样式(通过.shadow()实现Material阴影、通过.zIndex()实现高度、通过.hoverEffect()实现涟漪效果)。对于Flutter中的跨平台项目,Material Design是原生内置的 — Flutter在flutter/material.dart包中包含Material 3的完整实现。

Material Design与Material You有何关系?

Material You是Material Design 3(版本3)的市场营销名称。这不是一个独立的系统,而是Material Design最大的更新,于2021年推出。包括动态色彩(Monet)、自适应排版(Material Type Scale v2)、新组件(NavigationBar替代BottomNavigation、NavigationRail)和更新的可访问性指南。术语Material You强调个性化 — 界面通过Dynamic Color「适应您」。

总结

  • Material Design — Google的设计系统(2014),具有三个版本:原始版(2014)、Material 2(2018)、Material 3 / Material You(2021)。
  • 三个关键原则:物质性(表面的物理属性)、深度(Z轴上的Elevation)、运动(功能性动画300–500ms)。
  • Material You引入了Dynamic Color(Monet) — 通过HCT色彩空间从设备壁纸自动生成色彩方案。
  • 适用于Android的Material Components(MDC-Android) — 官方库,所有组件在XML和Jetpack Compose中实现。
  • Material Design可通过MDC-iOS(UIKit)在iOS上使用,但使用较少 — Apple HIG仍然是iOS的主要系统。
  • Material Theme Builder允许将系统定制为品牌风格,并可导出为XML、Compose和Figma。
  • Material Design是最广泛使用的设计系统:前1000名Google Play应用中有78%使用Material Components。

我们将开发一款交钥匙移动应用程序

IT Sectr自2017年以来为初创企业和企业打造iOS和Android应用程序。我们将为您提供咨询并提出最佳解决方案。

讨论项目

另请阅读