这是 Google Material Design 3(简称 M3,也叫 Material You) 这个具体设计系统的内部主张提炼。Material Design 是 Google 给 Android / Web / 跨端做的一整套官方 UI 设计语言——告诉你颜色怎么配、字怎么排、圆角多大、阴影怎么打、动画多快、什么尺寸的按钮才点得到。M1(2014)拟物纸片化,M2(2018)收敛,M3(2021 起)最大的革命是"动态色彩 Dynamic Color":UI 配色能从用户的手机壁纸自动生成,每个人的 App 长得都不一样,但又都满足无障碍。
本篇 ≠ 组件 API 手册。M3 官网有上百个组件(按钮/卡片/对话框…),本篇不抄组件清单,而是提炼"M3 的设计哲学 + 各基础维度的核心规则 + 标志性数值",让 PM 做产品 / 审设计稿时能用上。
先把几个反复出现、最容易被术语吓退的概念讲人话:
- 设计令牌 Design Token:给"颜色/字号/圆角"这些数值起个语义名字当变量,而不是写死具体值。比如不说"用 #6750A4 这个紫",而说"用
primary这个角色"。好处:换皮肤 / 切深色模式 / 换品牌色时,改一个变量,全 App 跟着变。这是整个 M3 的工程底座。- 颜色角色 Color Role:不按"红绿蓝"想颜色,按"这块颜色是干嘛用的"想——
primary(主强调)、surface(背景)、error(报错)、on-primary(主色上面的文字)。设计师只管把角色贴到元素上,具体什么色由系统按主题/对比度自动算。这就是"语义化颜色"。- dp(密度无关像素):Android 的尺寸单位,自动适配不同屏幕清晰度,1dp 在标准屏=1 物理像素。M3 所有尺寸(48dp 触控目标、24dp 图标)都用 dp,这样在高清屏和普通屏上"看起来一样大"。
- HCT / 色调 Tone:M3 自己的色彩模型(色相 Hue + 色度 Chroma + 色调 Tone),其中 Tone 色调 = 明暗,0 是纯黑、100 是纯白。M3 用"两个色调差多远"来保证对比度,这是它能自动算无障碍配色的数学基础。
全文九维 + 两个应用层:① 设计哲学(动态色彩 + 个性化)→ ② 颜色系统(HCT + 颜色角色 + 对比度)→ ③ 字体 Type Scale → ④ 形状 Shape → ⑤ 高度 Elevation → ⑥ 布局 Layout(窗口尺寸类 + 密度)→ ⑦ 自适应 Adaptive → ⑧ 动效 Motion → ⑨ 交互状态 States → ⑩ 无障碍 Accessible → ⑪ 内容设计 Content → ⑫ 对 PM:何时照搬 vs 何时偏离。每节带心法 / Why / 反例。
一、M3 设计哲学:动态色彩 + 个性化(Dynamic Color & Personalization)
来源:Color system / Dynamic Color Schemes / Content design「Dynamic color makes personal devices feel personal」
心法:M3 的灵魂不是某个具体颜色,而是"一套颜色生成机器"。想象 UI 每个元素都被编号(像数字油画的格子),每个编号绑一个"颜色角色",系统从单一源色出发,自动把整套配色填满。源色变了,整个 App 配色跟着变——而且永远满足无障碍对比度。
动态色彩的完整生成流程(M3 标志性的 6 步):
| 步 | 干什么 | 关键数值 / 细节 |
|---|---|---|
| 1 选源色 | 三种来源:① 用户壁纸(量化分析选一个主色)② 应用内内容(缩略图/图片/视频预览)③ 设计师手动指定(如 M3 基础静态配色的那个紫) | 单一源色起步 |
| 2 送算法 | 用 Google 开源的 Material Color Utilities 处理 | 三种算法:用户生成色 / 内容基色(匹配图片主色还保对比度)/ 自定义品牌色 |
| 3 生成 5 关键色 | 算法把源色扩成 5 个 key colors | Primary 主色 / Secondary 次色 / Tertiary 辅色 / Neutral 中性色 / Neutral Variant 中性变体 |
| 4 建色调调色板 | 每个关键色拉出一条完整明暗梯度 | 色调 Tone 范围 0(纯黑)到 100(纯白),含 10/20/…/95/98/99 等档,数越小越深 |
| 5 分配色调给角色 | 算法按"够不够对比度"把具体色调钉给 26 个颜色角色 | 浅色 / 深色主题用同一套角色名,只是底层色调翻转 |
| 6 应用到 UI | 26 个角色预设到 UI 元素;源色一变,全 App 自动更新 | 自动深色模式 + 用户可控对比度 |
动态色彩给用户带来的 4 件事(M3 反复强调的卖点):① 个性化 UI;② 自动满足无障碍对比度;③ 用户可手动调对比度;④ 自动深色主题(不用设计师画两套)。
三种动态配色来源(实操选哪种):
- 用户生成色 User-generated:从壁纸提取,"我的手机我的色",个性化最强(Android 系统级)。
- 基于内容色 Content-based:App 随当前图片/视频变色,看起来"很智能"(音乐 App 随专辑封面变色)。
- 多来源 Multiple:同时吃壁纸 + 内容。
Why:M3 想解决的是"千人千面但不失控"——以前个性化要么没有(所有人一个样),要么放飞(用户乱配色导致看不清字)。动态色彩用算法兜底:无论源色多奇怪,生成的配色都满足 3:1 / 7:1 对比度。对 PM 的意义:这是 Android 原生 App 的差异化点;但如果你做的是品牌强绑定的产品(银行、奢侈品),反而要关掉动态色彩、用固定品牌色——见第十二节。
二、颜色系统:HCT 模型 + 颜色角色 + 三档对比度(Color)
来源:Color system / Color Roles / Choosing a Scheme / Static & Dynamic schemes / Advanced customizations
2.1 底层:HCT 色彩模型(为什么不用 HSL)
心法:M3 自创 HCT 模型——色相 Hue(0-360°,红橙黄…循环)+ 色度 Chroma(0 完全中性灰 到 ~120 最鲜艳)+ 色调 Tone(0 纯黑 到 100 纯白 = 明暗)。
Why 用 HCT 不用传统 HSL/HSV:HCT 更贴近人眼真实感知。关键是 Tone 色调直接决定对比度——两个颜色的 Tone 差得越远,对比度越高。这让"够不够无障碍"变成一道纯数学题(算 Tone 差),系统能自动配出合规颜色。默认按钮:容器用深色调、文字用浅色调,Tone 差拉到 3:1;用户开高对比度,算法就把两者 Tone 拉到更远,达 7:1。
2.2 颜色角色:按"用途"而非"颜色"思考(Color Roles)
心法:颜色角色 = "数字油画的数字",把 UI 元素和它该用的颜色连起来。M3 共 26 个标准角色,命名靠 5 个词根拼出来,记住词根就懂了:
| 词根 | 含义 | 例 |
|---|---|---|
| Surface 表面 | 大面积、低强调的背景 | 屏幕底、卡片底 |
| Primary / Secondary / Tertiary | 前景强调色(主/次/第三),用来突出或弱化 | FAB 用 primary,筛选标签用 secondary |
| Container 容器 | 按钮等前景元素的填充色(注意:不能拿来当文字/图标色) | primary container = 主色按钮的底 |
| On(前缀) | 配对父色"之上"的文字/图标色 | on-primary = primary 底上面的字 |
| Variant(后缀) | 同色的低强调版 | outline variant = 比 outline 更淡的分隔线 |
核心配对铁律:用了某个 container 当底,文字就必须用对应的 on-xxx——这对组合系统已保证至少 3:1 对比度。自己乱配(如 primary 底 + surface 文字)就会在切对比度时糊掉。
几个实用角色族:
- Surface 表面族:
surface(默认背景)+on-surface(背景上的字)+on-surface-variant(次要信息的淡字)。再加 5 级容器surface-container-lowest/low/(default)/high/highest,做扩展布局的层次(最常见组合:主体区用surface,导航区用surface-container)。 - Error 错误族:
error/on-error/error-container/on-error-container,专门传达报错(密码错、表单校验)。别用普通红色硬写,用 error 角色,深色模式才会跟着翻转。 - Outline 轮廓族:
outline(主边框/分隔线)vsoutline-variant(低强调分隔)。反例:卡片内部分隔用 outline 会太抢眼,该用 outline-variant;反过来相邻按钮之间用 outline-variant 会太糊,该用 outline。 - Inverse 反向族:
inverse-surface等,用于 Snackbar 这种"反差色块"。 - Fixed 固定族 / Bright·Dim:进阶,大多数产品用不到——固定色跨主题不变(想让某色无论深浅模式都不变时用),Bright/Dim 是恒亮/恒暗的表面。M3 明说"不确定就忽略它们"。
Why:语义化颜色 = 一次定义、全局复用、自动适配主题与对比度。设计师贴角色不贴色值,开发用 token 不用硬编码,深色模式 / 高对比度模式"免费"得到。
2.3 三档对比度(Standard / Medium / High)
除了深/浅主题,M3 颜色角色还内置三档对比度,自动适配深浅两主题:
| 档 | 对比度 | 适用 |
|---|---|---|
| 标准 Standard(默认) | 高低对比混用,减轻视觉负担 | 大多数用户 |
| 中等 Medium | 3:1 | 需更高可读性 |
| 高 High | 7:1 | 视障用户,突出重点 |
Why:把"无障碍"从设计师的人工活变成系统的一个开关——用户在系统设置里调,所有用对了颜色角色的组件自动响应,设计师不用画第三套稿。
三、字体:Type Scale 字号比例 + 可变字体 4 轴(Typography)
来源:Type scale & tokens / Default typefaces / Applying type
心法:Type Scale = 一组预设好的应用级文字样式(令牌化),保证全 App 排版一致。M3 基于 Roboto 提供 15 种样式,分 5 大类(每类各 Large/Medium/Small 三档):
| 类 | 用途 |
|---|---|
| Display | 最大的展示性大标题(营销/启动页) |
| Headline | 页面/区块标题 |
| Title | 卡片标题、对话框标题等中等标题 |
| Body | 正文段落 |
| Label | 按钮文字、标签、辅助小字 |
自定义规则:默认用 "Major Second"比例 = 1.125 缩放因子(每一档比上一档大 12.5%),以 14 号正文为基准。
反例 / 实操建议:
- 大多数产品不需要全 15 种样式——挑 5 种经典档就够。
- 保持对比:别用两个相邻得几乎一样的字号(如 15 和 16),视觉层级会糊;字号之间要有明显跳变。
可变字体 4 轴(Variable Font Axes)——一个字体文件无级调节 4 个属性:
| 轴 | 是什么 | 关键 |
|---|---|---|
| Weight 字重 | 笔画粗细(Regular→Bold,可无级) | 反例:太细的字在小尺寸读不清;标题可轻、正文要稍厚 |
| Grade 字级 | 也调粗细,但更细微、不改字宽 | 深色模式同样字重显得更粗,用负 grade 拉回均衡(Roboto Flex 提供 +150/-200);可调视觉重点而不重排 |
| Width 宽度 | 横向占位(窄→宽) | 标签/工具栏空间紧用窄字省位;过宽会溢出 |
| Optical Size 光学尺寸 | 同一字针对不同字号优化的版本 | 小字需更清晰笔画、大字可展现细节;用与字号匹配的光学尺寸 |
Why:Type Scale 令牌化让"改全站标题字号"= 改一个 token;可变字体让一个文件覆盖全部粗细/宽度,省下载体积还能精调深浅模式观感。对 PM:审稿时数一下"这个界面用了几种字号"——超过 4-5 种通常是层级没想清楚。
四、形状:7 级圆角 + 圆角/切角家族(Shape)
来源:Shape scale & Tokens
心法:M3 把圆角令牌化成 7 个级别,每个级别绑一组组件,保证"同一类组件圆角一致":
| 级别 | 典型组件 |
|---|---|
| 1 None 无圆角 | 横幅、底部应用栏、全屏对话框、列表、导航栏/轨、进度条、选项卡、顶部应用栏 |
| 2 Extra small | 菜单、下拉选择、Snackbar、文本输入框 |
| 3 Small | 标签 Chips、富文本工具提示 |
| 4 Medium | 卡片、小型 FAB |
| 5 Large | 扩展 FAB、FAB、导航抽屉 |
| 6 Extra large | 底部面板、对话框、浮动面板、大型 FAB、时间选择器 |
| 7 Full 完全圆角(胶囊形) | 徽章、按钮、图标按钮、滑块、开关、搜索栏 |
两个维度:① 对称性——对称(四角同圆角)vs 非对称(顶/底/起/终各设);② 形状家族——圆角 Rounded vs 切角 Cut corner(45° 斜切)。
自定义粒度:可整风格调(把所有 Medium 级组件一起改),也可只调单个组件。
反例:① 切角 Cut corner 会侵占内容区,影响文字对齐 / 图片裁切(圆角一般不会);② 圆角尺寸过大会吃掉内容、影响阅读。
Why:圆角是品牌调性的低成本杠杆(圆润=友好亲和,方正/切角=硬朗专业)。令牌化让换风格只改令牌。对 PM:圆角是"可偏离项",改它不伤可用性,是体现品牌个性最安全的地方。
五、高度:Tonal Elevation 色调层级(Elevation)
来源:Elevation 视觉层级-高度
心法:Elevation = z 轴上两个表面的距离(单位 dp),表达"谁在上谁在下"。M3 最大的转变:从"用阴影表达高度"转向"用色调差异 Tonal Elevation 表达高度"——越高的表面色调越浅(底层叠一层半透明主色),阴影退居次要。
高度分级:所有表面/组件都有默认 Elevation 值,正常状态 0~+3,+4/+5 留给悬停或拖动时"浮起来"的瞬间。例:FAB 默认 +3,悬停临时升到 +4;所有 Material 按钮悬停 +1 级。默认值不建议改,且同类元素的高度变化要一致。
区分层级的 3 种手段(两个同色重叠表面):① 色调差异(M3 默认)② 阴影 ③ 遮罩层 Scrim(半透明覆盖)。
阴影 Shadows:M3 更倾向用色调差,阴影仅必要时用。规则:小而清晰阴影 = 离背景近;大而模糊阴影 = 更"悬浮"。何时该用可见阴影:① 保护元素(FAB 避免与背景混)② 引导交互(悬停升高增强反馈)。
遮罩 Scrim:模态弹窗时压暗背景、聚焦前景,默认不透明度 32%。
对交互组件的硬约束:相邻表面之间的边缘对比度必须达到/超过无障碍对比度(否则看不出是两层)。
Why:阴影在深色模式里几乎不可见,而色调差异在深浅模式都成立——这是 M3 为了深色模式原生支持做的根本性选择。对 PM:别让设计稿堆一堆重阴影显"高级",M3 的层次是靠色调和容器角色(surface-container-*)拉开的。
六、布局:窗口尺寸类 + 信息密度 + 触控目标(Layout)
来源:Window Size Classes / Density / Layout basics / Spacing / Pane layouts(列表-详情/辅助窗格/信息流)
6.1 窗口尺寸类 Window Size Class(响应式断点)
心法:别按"具体设备型号"做适配,按"窗口尺寸类"做——这是 M3 响应式的核心抽象。按宽度(dp)分:
| 类别 | 宽度(dp) | 常见设备 |
|---|---|---|
| 紧凑 Compact | <600 | 手机竖屏 |
| 中等 Medium | 600–840 | 小平板竖屏、折叠屏展开 |
| 扩展 Expanded | 840–1200 | 手机横屏、平板横屏、桌面 |
| 大 Large(Web/桌面) | 1200–1600 | 桌面 |
| 超大 Extra-large | ≥1600 | 超宽桌面 |
Why 按类不按设备:同一台设备横竖屏属于不同类;用户分屏 / 折叠屏展开会动态改变可用宽度。盯断点,不盯型号。
关键设计动作——窗口变大时:
- 该露什么:小窗默认折叠 UI(如收起导航);大窗同屏并列多窗格(列表 + 详情,减少页面切换)。
- 保持一致:不同尺寸应是"同一体验的伸缩",不是两个完全不同的 App。
- 可调元素:卡片、信息流、列表、面板——手机的横向卡片到平板变方正;文本列表保持每行 40–60 字符最佳可读;扩展屏可加第二列/瀑布流/更多留白。
- FAB 跨尺寸始终居中对齐,相对位置保持一致。
三种规范窗格布局(M3 给的现成模板):列表-详情 List-detail(邮件/聊天)、辅助窗格 Supporting Pane(主内容+辅助信息)、信息流 Feed(网格/瀑布流)。
6.2 信息密度 + 触控目标(Density)
心法:信息密度 = 单位屏幕空间塞多少内容。可通过调间距控制。
- 桌面端偏好高密度,移动端偏低;除非用户主动改,密度不随窗口/方向自动变。
- 高密度适合信息密集型(新闻、金融门户);低密度适合重美观/突出重点。
- 组件缩放:密度级从 0 起,空间减小变负(-1 至 -3),每级减 4dp 内边距/高度。
铁律:可访问的最小触控目标 = 48×48 dp(CSS 像素同理)。组件缩放再密也不能让目标小于 48×48。要给用户开高密度的选项 + 简单的恢复方式。
反例:日期选择器月份选项挤到点击区极小;连接超时提示内容被挤压、文字截断。
Why:48dp 来自人手指触摸的物理尺寸,是硬无障碍约束,不可偏离。对 PM:审稿第一刀就量"最小的可点元素够不够 48dp"——这是最常见、最该打回的问题。
七、自适应:三种布局策略(Adaptive Design)
来源:Adaptive design
心法:自适应 = 界面随上下文(设备 / 窗口大小 / 输入方式)自动调整。适应三种条件:设备(全屏/分屏/折叠屏)、窗口大小、输入方式(触控/手写笔/外接键鼠/眼动)。
三种布局策略:
- 隐藏与显示 Hide and show:按空间显隐内容(空间够就多露,如折叠式导航栏展开)。
- 浮动 Levitate:元素调整以适应不同设备/输入(FAB 随窗口变形态)。
- 重排 Reflow:重新排列组件,让内容更好读/操作(单列→双列)。
组件三种适应:① Resizing 大小调整(按钮适配界面)② Hiding/showing(大屏列表项露更多)③ Presentation changes(颜色/字体/大小变,FAB 随窗口变)。
Why:一套设计覆盖手机到桌面到折叠屏,降低多端维护成本。对 PM:跨端产品要明确"哪些内容在小屏被藏、点哪里能调出来"——别让小屏丢功能。
八、动效:缓动 × 持续时间(Motion / Animation & Transitions)
来源:Easing and duration / Easing and duration Specs / Transition patterns / Applying transitions
心法:动效靠两个参数——缓动 Easing(快慢节奏曲线)× 持续时间 Duration(多少毫秒)。现实中物体不会瞬间启停,要加速减速;没缓动的过渡生硬机械。M3 的缓动比 iOS 更强表现力:起始快、结束柔。
M3 推荐的缓动 × 时长配对:
| 缓动 | 时长 | 过渡类型 |
|---|---|---|
| 强调 Emphasized | 500ms | 进入+退出屏幕 |
| 强调减速 | 400ms | 进入屏幕 |
| 强调加速 | 200ms | 退出屏幕 |
| 标准 Standard | 300ms | 进入+退出 |
| 标准减速 | 250ms | 进入 |
| 标准加速 | 200ms | 退出 |
选缓动集:强调 Emphasized → 主要动画(更显 Material 风格);标准 Standard → 次要动画(更快更简洁)。
选缓动类型(按相对屏幕怎么动):屏内开始结束=强调(快进慢停,强调结束)/ 进入=强调减速(峰值速度起、缓停)/ 永久退出=强调加速(静止起、峰速结束,"走了别回来了")/ 临时退出=强调(平稳结束,留可恢复感)。
选时长 3 标准:① 过渡范围小→短(200ms),大→长(500ms);② 退出比进入短(退出 200ms,用户注意力已转走;进入 500ms,让用户看清新内容);③ 别太短(生硬)也别太长(拖沓)。
Why:动效是"用运动说话"——传反馈、提示状态变化、防方向感丢失,但任何不相关的动效都是干扰(人眼对运动天生敏感)。对 PM:这套数值可当审稿标尺——主转场 ~300-500ms、微交互 ~200ms;超过感觉拖,低于感觉跳。(动效的 6 大用途与暗黑模式滥用见 NNGroup 设计系统·图标·视觉风格·动效·视觉测试(19 篇 · 设计系统vs风格指南 · 图标可用性4标准/识别度vs解释性 · 拟物/玻璃拟态/扁平/新拟态 · 可点击元素识别+横幅盲视 · 动画动效6用途 · 视觉测试态度vs行为/Desirability Toolkit/情绪板) 第五节。)
九、交互状态:状态层叠加(Interaction States)
来源:Interaction / States / Gestures / Inputs / Selection
心法:M3 用"状态层 State Layer"统一表达交互状态——在组件上叠一层固定不透明度、用内容色的半透明覆盖,把普通态变成状态态。三层结构(下到上):容器 Container → 状态层 State layer → 内容 Content。
关键数值——不同状态加多少不透明度:
| 状态 | 不透明度 | 触发 |
|---|---|---|
| Hover 悬停 | +8% | 光标停留 |
| Focus 焦点 | +10% | 键盘 Tab / 语音(显示环形键盘焦点指示器) |
| Press 按下 | +10% | 点击不放 |
| Drag 拖动 | +16% | 按住移动 |
尺寸:状态层 40dp,而交互目标 48dp(呼应第六节触控约束)。
几条规则:① 状态可组合(选中+悬停)② 全组件保持一致 ③ 一个布局同时只能有一个 hover / 一个 pressed / 一个 dragged ④ 状态要有两个视觉指示器(不能只靠颜色,得再加边框/下划线/图标——为色盲用户)。
Enabled/Disabled:禁用态=淡色 + 无悬停 + 无需满足对比度;且禁用态无法获焦/拖/按。反例:操作不可用的 FAB 不该禁用,应直接不出现。各状态有明确的"适用/不适用组件清单"(如 App Bar / 对话框整体不继承 hover/press)。
Why:状态层把"hover/focus/press 长啥样"标准化成几个百分比,跨组件零思考一致;"两个视觉指示器"是无障碍硬要求。对 PM:审稿看"键盘 Tab 时有没有焦点环"——很多稿子漏了焦点态,键盘/读屏用户就迷路。
十、无障碍:对比度是底线(Accessible)
来源:Color & contrast / Structure / Text resizing / Text truncation
心法:对比度 = 两色亮度差,1:1 到 21:1。M3 把 W3C/WCAG 标准当硬约束:
| 内容 | 最低对比度 |
|---|---|
| 大文本(14pt 粗 / 18pt 正常及以上)+ 图形/图标 | 3:1 |
| 小文本(普通正文) | 4.5:1 |
| 禁用态元素 | 无需满足 |
非文本元素:按钮容器等需 ≥3:1 与背景区分;多个组件聚在一起时,每个都要单独达 3:1。例外:FAB 本身够突出,不需满足 3:1。
其它无障碍维度:Structure 结构(语义层级、读屏顺序)、Text resizing 文本缩放(用户放大字体时布局不崩)、Text truncation 截断(超长文本怎么省略号、什么不该截)。
Why:对比度是法律/合规级要求(很多市场强制 WCAG),也直接决定低视力 / 强光下能否用。对 PM:这是绝对不可偏离项。审稿拿对比度检查器(如 coolors contrast checker)采样验证,别靠肉眼"感觉够"。M3 的颜色角色体系就是为了让你"用对角色=自动达标",所以第二节的角色配对铁律本质是无障碍工具。
十一、内容设计:UI 文案 20 条(Content Design)
来源:Style guide / Global writing / Notifications / Dynamic color...(这部分主要针对英文 UI 文案,中文产品部分规则需本地化迁移)
心法:文案也是设计的一部分。M3 内容指南(基本沿用 AP 美联社风格)给英文 UI 写作 20 来条规则,核心几条对中文产品也有迁移价值:
- 说清后果,别威胁/说教:确认弹窗第一句直接问"是否移到垃圾桶",第二句只给关键信息(30 天后删),别加无谓的"你确定吗"增加认知负担。
- 可扫读:分层标题 + 简洁文本,让用户快速定位。
- 句首大写 Sentence case:全部 UI 文本(标题/标签/菜单/按钮)只首字母大写,不用 Title Case,更现代易读。禁止整块大写 CAPS。
- 用第二人称 "you/your":更有对话感("Your mail isn't available" 比 "Mail not available" 友好);别混用第一/第二人称(统一 "Your photos" 或干脆不用代词,别 "My photos");慎用 "I/we"(大公司用显生硬)。
- 标点:单行句不加句号;慎用感叹号(只在庆祝时刻)、省略号(只表进行中,别用在菜单/按钮);用牛津逗号(Oxford comma)消歧义;标题不用冒号(正文列表可);括号只用来定义术语/缩写。
- 缩写:慎用(空间够就拼全);但用口语缩写让语气自然(用 "don't / can't" 不用 "do not / cannot")。
- 慎用斜体(难读,改用加粗)、慎用长破折号(打断句子流畅)。
Why:一致、人性化的文案降低认知负担、统一品牌口吻。对 PM:做出海英文产品时这是现成的文案 checklist;做中文产品则迁移"说清后果不说教 / 第二人称对话感 / 别整块大写 / 标点克制"这几条心法。
十二、对 PM:何时照搬 M3、何时偏离
这一节是把上面九维拍成"决策表",回答"我做产品/审稿时,M3 哪些必须守、哪些可以改"。
| 维度 | 照搬(硬约束,不可偏离) | 可偏离(风格选择,体现品牌) |
|---|---|---|
| 无障碍对比度 | 必守 3:1 / 4.5:1 / 7:1(法规+可用性底线) | —— |
| 触控目标 | 必守 最小 48×48 dp | —— |
| 交互状态 | 焦点态必有(键盘可达)、状态需两个视觉指示器(非纯色) | hover/press 的具体不透明度可微调 |
| 颜色角色体系 | 建议守语义化 + 角色配对(否则失去自动主题/对比度) | 具体源色、是否开动态色彩 |
| 动态色彩 | —— | 看品牌:Android 原生求个性化就开;品牌强绑定(银行/奢侈品/明确 VI)就关、用固定品牌色 |
| 字号比例 | 守"相邻字号有明显对比""≤5 种样式" | 具体字体、缩放因子、用哪几档 |
| 形状/圆角 | —— | 最安全的品牌杠杆(圆润=亲和,方正/切角=硬朗),随便改不伤可用性 |
| 高度/阴影 | 相邻交互层对比度要够(看得出分层) | 用色调差还是阴影、阴影强度 |
| 动效时长 | 守"退出比进入短""别太短太长" | 具体 ms、缓动曲线风格 |
| 窗口尺寸类 | 守"按类不按设备""文本 40-60 字符/行""FAB 居中" | 各断点具体布局形态 |
一句话给 PM 的审稿心法:先查红线(对比度够不够 / 最小可点元素 ≥48dp / 键盘焦点态有没有 / 颜色角色配对对不对),这些不过直接打回;再看品牌项(动态色彩开关 / 圆角 / 字体),这些是和设计师讨论调性的空间,不是对错。M3 的工程化(设计令牌 + 语义颜色)真正的价值是让"改一处、全站一致"成立,审稿时也可反过来问设计师:"这个值是写死的还是走 token 的?"——走 token 才扛得住后续换肤/深色/多端。
综合提炼自 Will 的 Notion 设计笔记区 Google Material Design(123 篇 .md,12 分类)。因体量大做了综合提炼(ingest_quality: synthesized):重点 Read 了各分类的总览/Guidelines 级文档 + 颜色/字体/形状/高度/布局/交互/无障碍/内容的核心规则页,组件细节(按钮/卡片/对话框等约 70 篇 Guidelines)按"形状级别/状态适用清单"的代表性维度提炼,未逐篇全抄。原文的图片/视频(.mp4 动效演示、配色截图、网格图)含中文空格路径且 gitignore,保留在 sources,本篇以文字描述替代。设计系统的"是什么"通论(Design System vs Style Guide / 采用·调整·自建 / 图标可用性 / 视觉风格周期)见 NNGroup 设计系统·图标·视觉风格·动效·视觉测试(19 篇 · 设计系统vs风格指南 · 图标可用性4标准/识别度vs解释性 · 拟物/玻璃拟态/扁平/新拟态 · 可点击元素识别+横幅盲视 · 动画动效6用途 · 视觉测试态度vs行为/Desirability Toolkit/情绪板);视觉设计原则见 NNGroup 视觉设计原理·格式塔分组·视觉层次·排版·色彩·图像(19 篇 · 五大视觉原则/格式塔接近-相似-闭合-共同区域/视觉层次-网格-黄金比例/字体术语-搭配-阅读字体/色彩60-30-10/图片优势效应-照片-意象/美学-可用性效应/术语表)。