01
Material Design 前世今生
设计语言起源、核心设计原则(材质隐喻、大胆色彩、有意义的动效)、与扁平化设计的区别。
设计理念起源
02
环境搭建与开发工具
Android Studio / Flutter / Web 环境选择、Material Components 库引入、主题与样式基础配置。
环境工具链
03
色彩系统
主色与强调色、色彩层级与可访问性、深色主题配色策略、Material Color Tool 使用。
配色可访问性
04
字体与排版
Material Type Scale、字体层级(Headline/Title/Body/Caption)、行高与字间距、Noto Sans 与 Roboto 字体应用。
字体排版
05
图标系统
Material Icons 库、图标尺寸与颜色、自定义图标与 SVG 导入、图标在按钮与列表中的使用。
图标SVG
06
布局基础
Grid 系统(4dp/8dp 网格)、间距与留白、ConstraintLayout 与 Flexbox 布局对比。
网格布局
07
Elevation 与阴影
Z轴概念、阴影层级(0dp-24dp)、Surface 与 Card 的阴影实现、自定义阴影效果。
阴影层级
08
Surface 与卡片
Card 组件详解、圆角与裁剪、Surface 作为容器、卡片列表与网格布局。
卡片Surface
09
按钮系统
Text Button、Outlined Button、Contained Button、Floating Action Button (FAB)、按钮状态与交互反馈。
按钮FAB
10
文本输入与表单
Text Field 变体(Filled/Outlined)、输入验证与错误提示、密码与数字键盘适配。
表单输入
11
选择器与控件
Checkbox、Radio Button、Switch、Slider、Dropdown Menu 的使用场景与样式定制。
控件选择器
12
导航组件
Bottom Navigation、Navigation Rail、Navigation Drawer、Tabs 的布局与切换逻辑。
导航Tab
13
Top App Bar
标准 Top App Bar、滚动行为(Collapsing/Scrolling)、搜索栏集成、上下文操作模式。
App Bar滚动
14
底部工作表与对话框
Bottom Sheet(标准与模态)、Alert Dialog、Full-screen Dialog、自定义弹窗动画。
弹窗Bottom Sheet
15
Snackbar 与 Toast
Snackbar 的交互与时长控制、Toast 的简单提示、与 FAB 的联动避让。
提示Snackbar
16
列表与网格
RecyclerView / ListView 基础、Grid List 与 Staggered Grid、Item 动画与拖拽排序。
列表网格
17
侧边栏与抽屉
Navigation Drawer 的打开/关闭逻辑、菜单项分组与图标、头部区域自定义。
抽屉侧边栏
18
进度指示器
Linear Progress、Circular Progress、确定与不确定模式、进度条在加载场景的应用。
进度加载
19
动效与过渡
Material Motion 原则、共享元素过渡(Hero Animation)、Fade/Slide 页面切换、路径动效。
动效过渡
20
手势与触摸反馈
Ripple 效果、触摸目标大小(48dp 规范)、长按与滑动操作、GestureDetector 使用。
手势反馈
21
响应式布局
断点系统(Compact/Medium/Expanded)、自适应网格、窗口尺寸变化监听、多端适配策略。
响应式断点
22
深色主题
深色主题设计规范、自动切换与手动切换、深色主题下的色彩与阴影调整、省电模式考量。
深色主题
23
无障碍设计
内容描述(Content Description)、焦点顺序、大字体适配、屏幕阅读器兼容性。
无障碍a11y
24
Material You(Material 3)
M3 新特性概述、动态色彩(Monet 引擎)、自适应布局、新组件(Navigation Bar 等)。
M3动态色彩
25
组件库集成实战 · 登录页
从零搭建一个 Material Design 登录页面(包含表单、按钮、Snackbar)。
实战登录
26
组件库集成实战 · 新闻列表
搭建新闻列表页(包含 Top App Bar、Tab、Card、下拉刷新)。
实战新闻
27
组件库集成实战 · 设置页
搭建设置页面(包含 Switch、Slider、Dropdown、Dialog)。
实战设置
28
组件库集成实战 · 商品详情
搭建商品详情页(包含 Hero 动画、Bottom Sheet、FAB、进度条)。
实战详情
29
性能优化与调试
布局层级优化、过度绘制检测、动画性能监控、内存泄漏排查。
性能调试
30
项目总结与发布
设计规范文档撰写、组件库版本管理、多平台发布注意事项、持续迭代建议。
总结发布