Material Design | Skills Pool
Material Design Google Material Design 3 实战参考。涵盖 Material You 动态色彩、排版系统、组件规格、Shape 系统、Motion 规范、Dark Theme 适配和 Jetpack Compose/Flutter 对照。适用于 Android 应用、Web 应用和跨平台应用的 UI 设计决策。
openclaw 4,189 stars Mar 3, 2026 Occupation Categories Mobile Google Material Design 3 实战参考
Material Design 3(Material You)的实战速查,覆盖色彩、排版、组件和动效。
适用场景
Android 应用 UI 设计(Jetpack Compose / XML Views)
Flutter 跨平台应用
Web 应用使用 Material 组件库(MUI / Angular Material)
审计现有 UI 是否符合 Material 3 规范
不适用
macOS / iOS 原生应用(参考 apple-hig)
Windows 原生应用(参考 fluent-design)
1. 核心设计原则
Material 3 的三大支柱:
原则 含义 实践 Personal(个性化) 适应用户偏好 Dynamic Color 从壁纸取色 Adaptive(自适应) 适应各种设备 响应式布局、折叠屏支持 Expressive(表达力) 丰富的视觉表达
Quick Install
Material Design npx skillvault add openclaw/openclaw-skills-skills-bingfoon-material-design-skill-md
stars 4,189
Updated Mar 3, 2026
Occupation
与 Apple HIG / Fluent 的区别 Apple: 做减法,克制,内容优先
Fluent: 融入环境(Mica/Acrylic),层次丰富
Material: 做加法,表达力强,色彩大胆,圆角更大
2. 色彩系统(Dynamic Color)
Material 3 色彩方案 M3 使用 色调调色板(Tonal Palette) 生成完整配色:
Source Color(种子色)
→ Primary Palette(主色调 13 级)
→ Secondary Palette(辅色调 13 级)
→ Tertiary Palette(第三色调 13 级)
→ Neutral Palette(中性色 13 级)
→ Neutral Variant Palette(中性变体 13 级)
→ Error Palette(错误色 13 级)
关键色槽(Key Color Roles) 角色 Light Dark 用途 Primary Tone 40 Tone 80 主要交互元素(FAB、按钮) On Primary Tone 100 Tone 20 Primary 上的文字/图标 Primary Container Tone 90 Tone 30 次要强调容器 On Primary Container Tone 10 Tone 90 容器上的内容 Secondary Tone 40 Tone 80 次要交互元素 Tertiary Tone 40 Tone 80 对比/强调 Surface Tone 99 Tone 6 页面主背景 Surface Variant Tone 90 Tone 30 卡片/区块背景 On Surface Tone 10 Tone 90 主文字 On Surface Variant Tone 30 Tone 80 辅助文字 Outline Tone 50 Tone 60 边框 Outline Variant Tone 80 Tone 30 弱边框/分隔线 Error #B3261E#F2B8B5错误状态 Background Tone 99 Tone 6 窗口背景
Dynamic Color(Material You) Android 12+ 支持从壁纸自动提取 Source Color:
// Jetpack Compose
val colorScheme = if (dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
dynamicLightColorScheme(context) // 或 dynamicDarkColorScheme
} else {
lightColorScheme(primary = Purple40, ...)
}
手动生成配色
3. 排版
字体栈 Android: Roboto(系统默认)
Web: 'Roboto', system-ui, sans-serif
iOS: SF Pro(Flutter 自动适配)
Type Scale 角色 字号 字重 行高 间距 用途 Display Large 57px Regular 64px -0.25px 极大数字/英雄标题 Display Medium 45px Regular 52px 0 大标题 Display Small 36px Regular 44px 0 次大标题 Headline Large 32px Regular 40px 0 页面标题 Headline Medium 28px Regular 36px 0 区块标题 Headline Small 24px Regular 32px 0 卡片标题 Title Large 22px Regular 28px 0 Top App Bar 标题 Title Medium 16px Medium 24px 0.15px Tab / Navigation 标签 Title Small 14px Medium 20px 0.1px 小标题 Body Large 16px Regular 24px 0.5px 默认正文 Body Medium 14px Regular 20px 0.25px 次要正文 Body Small 12px Regular 16px 0.4px 辅助文字 Label Large 14px Medium 20px 0.1px 按钮文字 Label Medium 12px Medium 16px 0.5px Badge Label Small 11px Medium 16px 0.5px 时间戳
与其他平台对比 Material Body Large = 16px → Apple Body = 13px (macOS) / 17px (iOS)
Material 偏大偏宽松,Apple 偏紧凑
Material 大量用 Medium 字重,Apple 偏 Regular
4. 组件规格
按钮 类型 高度 圆角 用途 Filled 40px 20px(全圆角) 主要操作 Outlined 40px 20px 次要操作 Text 40px 20px 低优先级操作 Tonal 40px 20px 介于 Filled 和 Outlined 之间 FAB (Mini) 40px 12px 次要浮动操作 FAB 56px 16px 主要浮动操作 Extended FAB 56px 16px 带文字的 FAB Icon Button 40×40px 20px 图标操作
输入 控件 高度 圆角 特征 Text Field (Filled) 56px 顶部 4px 底部下划线 Text Field (Outlined) 56px 4px 四周边框 Checkbox 18×18px 2px — Radio 20×20px 50% — Switch 32×52px 16px 大尺寸拨动 Slider 4px 轨道 2px 圆形 thumb 20px
容器 组件 圆角 阴影 Card (Filled) 12px 无(底色区分) Card (Elevated) 12px elevation 1 Card (Outlined) 12px 无(边框区分) Dialog 28px elevation 3 Bottom Sheet 28px (顶部) elevation 1 Chip 8px — Navigation Bar 0 elevation 2
触控目标 最小触控目标:48×48dp
推荐触控目标:56×56dp(FAB)
间距:至少 8dp
5. Shape 系统 Shape 级别 圆角值 适用组件 None 0dp — Extra Small 4dp Text Field, Menu Small 8dp Chip, Snackbar Medium 12dp Card, Search Bar Large 16dp FAB, Navigation Drawer Extra Large 28dp Dialog, Bottom Sheet Full 50%(圆形) FAB Mini, Icon Button
与其他平台对比 Material: 大圆角风格(Dialog 28dp, Button 20dp)
Apple: 中等圆角(Dialog ~12px, Button 5-7px)
Fluent: 小圆角(Dialog 8px, Button 4px)
Material 3 的圆角是三者中最大的,视觉上最柔和、最有表达力。
6. Elevation(海拔系统) M3 使用 Surface Tint 而非纯阴影来表达层次:
Level Tint Opacity 阴影 用途 0 0% 无 Surface 基础 1 5% 微弱 Card, Navigation Bar 2 8% 轻微 Elevated Card 3 11% 中等 FAB, Snackbar 4 12% — 较少使用 5 14% 明显 Navigation Drawer
Surface Tint 实现 /* 用 Primary 色做 overlay,opacity 按 level 递增 */
.elevation-1 {
background: linear-gradient(
rgba(var(--md-primary-rgb), 0.05),
rgba(var(--md-primary-rgb), 0.05)
), var(--md-surface);
}
Dark 模式下 Surface Tint 更重要 ——阴影在深色背景上几乎不可见,用 tint 区分层次。
7. Motion(动效系统)
Duration 类型 时长 用途 Short 1 50ms 选中/取消选中 Short 2 100ms 简单状态切换 Short 3 150ms 小组件出现 Short 4 200ms 标准交互 Medium 1 250ms 面板展开 Medium 2 300ms 标准转场 Medium 3 350ms 复杂转场 Medium 4 400ms 全屏转场 Long 1 450ms 强调动画 Long 2 500ms 复杂强调 Extra Long 1-4 700-1000ms 极少使用
Easing /* Standard — 不离开屏幕的移动 */
--md-standard: cubic-bezier(0.2, 0, 0, 1);
--md-standard-decelerate: cubic-bezier(0, 0, 0, 1);
--md-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
/* Emphasized — 更有表达力的移动 */
--md-emphasized: cubic-bezier(0.2, 0, 0, 1);
--md-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--md-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
转场模式 模式 用途 示例 Container Transform 元素展开为页面 卡片 → 详情页 Shared Axis 同层级导航 Tab 切换 Fade Through 无关联页面切换 Bottom Nav 切换 Fade 简单出现/消失 Dialog、Snackbar
8. 导航模式
按设备选择 设备 推荐导航 组件 手机(竖屏) 底部导航 Navigation Bar(3-5 项) 手机(横屏) 侧边导航 Navigation Rail 平板 侧边导航 Navigation Rail / Drawer 桌面/大屏 侧边导航 Navigation Drawer(常驻) 折叠屏 自适应 Rail(折叠)→ Drawer(展开)
Navigation Bar(底部导航) ┌───────────────────────────────────┐
│ │
│ Content Area │
│ │
├─────┬─────┬─────┬─────┬─────────┤
│ 🏠 │ 🔍 │ ➕ │ 💬 │ 👤 │
│ Home │Search│ Add │ Chat │Profile │
└─────┴─────┴─────┴─────┴─────────┘
3-5 个目的地
选中项显示 label + 指示器(pill 形状)
高度:80dp
指示器:64×32dp,圆角 16dp
Navigation Rail(侧边窄导航) ┌──┬──────────────────────┐
│🏠│ │
│──│ │
│🔍│ Content Area │
│──│ │
│💬│ │
│──│ │
│⚙️│ │
└──┴──────────────────────┘
宽度:80dp
可选 FAB 在顶部
选中项有 pill 指示器
9. Dark Theme
M3 Dark Theme 规则 Surface: 极深灰(#1C1B1F),不是纯黑 #000000
On Surface: 极浅灰(#E6E1E5),不是纯白 #FFFFFF
原则 实践 避免纯黑 Surface 用 #1C1B1F(Neutral Tone 6) 减少大面积白色 用 Surface Tint 代替白色卡片 降低饱和度 Primary 用更亮的色调(Tone 80) 反转容器关系 Light: 容器比背景浅 → Dark: 容器比背景浅(tint 更高)
与 Apple Dark Mode 对比 Apple: 深灰 #1E1E1E,偏中性
Material: 极深灰 #1C1B1F,带紫色调(从 Neutral palette 来)
Apple: 不鼓励纯黑(但 OLED 用 #000000)
Material: 明确不推荐纯黑
10. 平台差异速查 差异点 Material (Android) Apple (iOS) 主强调色 Dynamic Color(壁纸取色) System Blue #007AFF 正文字号 16dp (Body Large) 17pt (Body) 按钮圆角 20dp(全圆角) 无标准(偏 8-12px) 对话框圆角 28dp ~14px 导航 底部 Navigation Bar 底部 Tab Bar 返回 系统返回手势/按钮 左上角 Back Button 主操作 FAB(浮动操作按钮) Navigation Bar Button 下拉刷新 有 有(Pull to Refresh) Toast/提示 Snackbar(底部,可操作) Alert / Toast(中间/顶部) 触控目标 48dp 44pt 标题栏 Top App Bar(多样式) Navigation Bar(标准)
11. Checklist
设计审计
Dark Theme
Android 开发
来源 Material Design 3 (m3.material.io) + Material Theme Builder + Jetpack Compose 官方组件参考。
02
适用场景