了解什么是Material Design — Google基于物质性、深度和适应性原则的设计系统,结合了视觉语言、动画、布局和界面组件的指南。在Material Design 3(Material You)版本中,该系统包括基于设备壁纸的动态色彩方案、自适应排版和扩展组件。根据Google I/O 2024的数据,超过300万应用在Google Play中使用Material Design,使其成为Android上最广泛使用的设计系统。
要点
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 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)— 设计系统最大的更新,于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(MDC-Android)— Google官方库,提供符合Material Design指南的现成View组件。对于XML布局,该库通过依赖项com.google.android.material:material获得,截至2026年6月的当前版本为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>示例展示了带有MaterialToolbar(TopAppBar)、具有自定义间距和边框的MaterialCardView、带有下拉列表的TextInputLayout和Material3样式的MaterialButton的Material屏幕。FAB作为锚点连接到Toolbar — 这是主从界面的标准方案。
@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 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 — 并非市场上唯一的设计系统。主要竞争对手:Apple Human Interface Guidelines(iOS/macOS)、Fluent Design(Microsoft)、Carbon(IBM)、Polaris(Shopify)、Lightning(Salesforce)。每个系统都针对其平台进行了优化:Material Design针对Android、HIG针对iOS、Fluent针对Windows。设计系统的选择取决于目标平台和生态系统。
| 特性 | Material Design | Apple HIG | Fluent Design |
|---|---|---|---|
| 平台 | Android、Web、Flutter | iOS、macOS、watchOS、tvOS | Windows 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是最佳选择。
常见问题
从技术上讲 — 不,Google不强制要求使用Material Components。建议 — 是的,Material Design是Compatibility Test Suite(CTS)和Android Design Guidelines的一部分。不使用Material组件的应用可能与Android系统应用的一致性较低。Google Play Console不会因拒绝Material Design而拒绝应用,但用户期望熟悉的模式 — FAB、BottomNavigation、TopAppBar。
Material Theme Builder(material-foundation.github.io)允许上传品牌徽标并在3次点击内生成自定义主题。该工具提取关键颜色,生成15色调色板,并将主题导出为XML、Compose和Figma。此外,可以自定义排版(Material Type Scale)和组件形状(Shape scheme)——卡片、按钮和对话框的圆角处理。定制不应违反Material Design的基本规则(对比度、Elevation、Motion)。
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的移植版本。适用于iOS的Material Components是用UIKit编写的。对于SwiftUI,可以使用自定义View修饰符来重现Material样式(通过.shadow()实现Material阴影、通过.zIndex()实现高度、通过.hoverEffect()实现涟漪效果)。对于Flutter中的跨平台项目,Material Design是原生内置的 — Flutter在flutter/material.dart包中包含Material 3的完整实现。
Material You是Material Design 3(版本3)的市场营销名称。这不是一个独立的系统,而是Material Design最大的更新,于2021年推出。包括动态色彩(Monet)、自适应排版(Material Type Scale v2)、新组件(NavigationBar替代BottomNavigation、NavigationRail)和更新的可访问性指南。术语Material You强调个性化 — 界面通过Dynamic Color「适应您」。
总结
我们将开发一款交钥匙移动应用程序
IT Sectr自2017年以来为初创企业和企业打造iOS和Android应用程序。我们将为您提供咨询并提出最佳解决方案。