Google Material Design 3 设计系统(动态色彩/Type Scale/Tonal Elevation/形状/自适应/动效/无障碍 核心主张与规则)
Google Material 3 (M3) 设计系统的核心主张与基础维度提炼,从 Will 的 Notion 设计笔记区(123 篇 .md,12 个分类)综合而成。覆盖:① M3 的灵魂——动态色彩 Dynamic Color(从壁纸/内容提取源色→算法生成 5 关键色→色调调色板 0-100→26 个语义颜色角色 Color Role,实现'个性化+自动深色模式+用户可控对比度'四件事)与底层 HCT 色彩模型(Hue 色相/Chroma 色度/Tone 色调,比 HSL 更贴近人眼);② 颜色角色体系(Primary/Secondary/Tertiary/Error/Surface + Container + On + Variant 命名法,3 档对比度 标准/中/高 对应 3:1 与 7:1);③ Type Scale 字号比例(15 样式 5 大类 Display/Headline/Title/Body/Label,Major Second 1.125 比例,可变字体 4 轴 字重/字级 grade/宽度/光学尺寸);④ Shape 形状(7 级圆角 None→Full + 圆角/切角家族);⑤ Tonal Elevation 色调高度(0-5 级 dp,M3 用色调差异+遮罩替代阴影);⑥ Layout 布局(Window Size Class 窗口尺寸类 Compact<600/Medium600-840/Expanded840-1200/Large/XL,信息密度,48dp 触控目标);⑦ Adaptive 自适应(3 策略 隐藏显示/浮动/重排);⑧ Motion 动效(缓动 emphasized/standard × duration 200-500ms);⑨ Interaction States 交互状态层(hover+8%/focus+10%/press+10%/drag+16% 不透明度叠加);⑩ Accessible 无障碍(WCAG 对比度 3:1/4.5:1)与 ⑪ Content 内容设计(20 条英文 UI 文案规则)。对 PM 的价值:审设计稿时拿它当 checklist(对比度够不够/触控目标够不够大/颜色角色用对没/文案是否句首大写),理解'设计令牌 design token'与'语义化颜色'为何能省协作成本,以及 M3 哪些是可照搬的硬约束(无障碍/触控尺寸)、哪些是可偏离的风格选择(动态色彩/圆角/字号)。与 [[nngroup-visual-design-systems]] 分工:那篇讲'设计系统是什么'的通论(Design System vs Style Guide,采用/调整/自建),本篇讲 Material 3 这一个具体设计系统的内部主张与数值规则。读者=产品经理,术语行内解释,每节带 Why。