Material Design 是 Google 推出的一套设计语言,旨在为开发者提供统一的视觉和交互设计规范。Material Design 3(简称 MD3)是 Material Design 的最新版本,引入了更多现代化的设计元素和主题定制功能。本章节将介绍 Material Design 3 的核心设计原则、组件、主题定制以及在 Jetpack Compose 中的应用,帮助学员理解并应用 MD3 设计规范来构建美观、统一的 Android 应用。
7.1 Material Design 3 简介
-
Material Design 的历史与发展:
- Material Design 1.0 于 2014 年发布,旨在为跨平台应用提供一致的设计语言。
- Material Design 2.0 于 2018 年发布,引入了更多自定义选项和动态色彩。
- Material Design 3(MD3)于 2021 年发布,进一步优化了设计语言,提供了更灵活的主题定制和更现代化的视觉风格。
-
Material Design 3 的核心目标:
- 个性化: 提供更强大的主题定制功能,允许开发者根据品牌需求自定义颜色、字体、排版等。
- 可访问性: 增强可访问性设计,确保应用对所有用户友好。
- 动态: 支持动态色彩和主题切换,提升用户体验。
- 现代化: 采用更现代化的视觉风格和设计元素。
7.2 Material Design 3 的核心设计原则
-
1. 层次分明:
- 使用阴影、深度和层次来表达 UI 元素之间的关系。
- 例如,按钮、卡片、对话框等元素通过阴影和层次来区分。
-
2. 响应式设计:
- UI 元素应具有响应性,能够适应不同屏幕尺寸和方向。
- 使用
ConstraintLayout
,LazyColumn
,LazyRow
等组件实现响应式布局。
-
3. 动态色彩:
- 支持动态色彩主题,允许用户根据个人喜好或系统设置切换主题。
- MD3 提供了丰富的色彩系统,包括主色、辅助色、背景色等。
-
4. 可访问性:
- 确保应用对所有用户友好,包括视力障碍用户。
- 使用高对比度颜色、足够的触摸目标大小、语义化的内容描述等。
-
5. 动效:
- 使用平滑、流畅的动效来增强用户体验。
- 例如,按钮点击动画、页面切换动画等。
7.3 Material Design 3 主题定制
-
主题配置:
- 在
Theme.kt
文件中配置 MD3 主题。 - MD3 提供了
MaterialTheme
组件,用于定义主题的颜色、字体、排版等。
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.darkColorScheme import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composableval LightColorScheme = lightColorScheme(primary = Color(0xFF6200EE),onPrimary = Color.White,secondary = Color(0xFF03DAC5),onSecondary = Color.Black,background = Color.White,onBackground = Color.Black,surface = Color.White,onSurface = Color.Black, )val DarkColorScheme = darkColorScheme(primary = Color(0xFFBB86FC),onPrimary = Color.Black,secondary = Color(0xFF03DAC5),onSecondary = Color.Black,background = Color.Black,onBackground = Color.White,surface = Color.Black,onSurface = Color.White, )uiltin">@Composable fun MyTheme(darkTheme: Boolean = isSystemInDarkTheme(),content: uiltin">@Composable () -> Unit ) {val colorScheme = if (darkTheme) DarkColorScheme else LightColorSchemeMaterialTheme(colorScheme = colorScheme,typography = Typography,shapes = Shapes,content = content) }
- 在
-
动态色彩:
- MD3 支持动态色彩,可以根据用户的系统设置自动切换主题。
- 使用
isSystemInDarkTheme()
函数获取系统主题模式。
-
自定义主题:
- 可以根据品牌需求自定义主题颜色、字体、排版等。
- 例如,定义品牌主色、品牌辅助色、品牌背景色等。
val BrandColorScheme = lightColorScheme(primary = Color(0xFF4CAF50),onPrimary = Color.White,secondary = Color(0xFFFF5722),onSecondary = Color.White,background = Color(0xFFECEFF1),onBackground = Color.Black,surface = Color.White,onSurface = Color.Black, )
作者简介
前腾讯电子签的前端负责人,现 whentimes tech CTO,专注于前端技术的大咖一枚!一路走来,从小屏到大屏,从 Web 到移动,什么前端难题都见过。热衷于用技术打磨产品,带领团队把复杂的事情做到极简,体验做到极致。喜欢探索新技术,也爱分享一些实战经验,帮助大家少走弯路!
温馨提示:可搜老码小张公号联系导师