第三章 文本与图片排版：文字样式、图片填充、遮罩、混合模式
3.1 用户场景与业务问题
在界面原型中，文本与图片的排版质量直接影响用户对产品专业度的第一印象。典型场景包括：
- 品牌落地页——标题字体需体现品牌调性，配图需与文案形成视觉合力，而非简单堆砌。
- 商品详情卡——图片需适应不同尺寸容器，文字需在复杂背景上保持可读。
- 社交动态流——用户头像与昵称、图文混排、遮罩实现“查看更多”截断效果。
业务痛点集中在：文字层级混乱（字号/字重无系统）、图片填充变形（拉伸/裁剪失控）、遮罩不精准（形状与内容脱节）、混合模式滥用（叠加后文字不可读）。
决策权衡：Figma 不支持图片的“背景-位置-尺寸”三属性独立控制，需通过“裁剪 + 位置手动调整”模拟，原型阶段应与开发对齐是否使用
object-fit: cover 实现等价效果。
3.2 文字样式系统
Figma 的 Text Style 功能将字号、行高、字重、字间距、颜色封装为可复用的“样式令牌”。
| 属性 | 典型值（移动端） | 业务含义 |
|---|---|---|
| Headline 1 | 28px / Bold / -0.5% tracking | 页面主标题，最多 1 行 |
| Headline 2 | 22px / SemiBold / 0% tracking | 区块标题，最多 2 行 |
| Body | 16px / Regular / +0.2% tracking | 正文阅读，行高 1.5 |
| Caption | 12px / Regular / +0.5% tracking | 辅助说明，用于时间戳、标签 |
操作步骤：选中文本 → 右侧 Text 面板 → 点击 Style 下拉 → Create Style → 命名如 Body / Regular / 16px。团队协作时，通过 Publish Styles 同步到共享库。
避坑：不要将“行高”写死为固定 px 值，应使用“% / Auto”或“Line height multiplier”，否则缩放时文字行距会断裂。
3.3 图片填充与裁剪
Figma 提供三种图片填充模式，通过右侧 Fill 面板中的 Image 类型控制：
| 模式 | 触发方式 | 原型表现 | 对应 CSS |
|---|---|---|---|
| Fill | 默认 | 拉伸填满容器，可能变形 | background-size: 100% 100% |
| Fit | 下拉选择 | 按比例完整显示，留白 | object-fit: contain |
| Crop | 下拉选择 | 按比例裁剪溢出部分 | object-fit: cover |
最佳实践：原型中的商品图、用户头像统一使用 Crop 模式，避免变形。双击图片可调整裁切偏移，模拟 object-position。
3.4 遮罩（Mask）技术
遮罩让图片只透过特定形状显示，是图文排版的“精准剪裁器”。
- 矢量遮罩：用矩形、圆形、多边形或贝塞尔曲线作为遮罩层，置顶后选中下层对象 → 右键 Use as Mask（快捷键 Ctrl+Alt+M）。
- 文字遮罩：将文字图层置顶，下层放图片 → 同法创建遮罩，图片只透过文字笔画显示，形成“纹理字”效果。
- 渐变遮罩：在遮罩层填充 Linear Gradient，从纯白（不透明）到纯黑（透明），实现图片边缘淡出效果。
原型示例：社交个人页背景图使用“渐变遮罩 + Cropped 图片”，顶部 60% 清晰显示，底部 40% 逐渐过渡为纯色，保障头像和昵称的可读性。
3.5 混合模式（Blend Mode）
混合模式定义上下两个图层的像素计算方式。在 Layer 面板的顶部 Blend Mode 下拉中选择。
| 模式 | 效果 | 典型场景 |
|---|---|---|
| Multiply | 加深，白色消失 | 纹理叠加在图片上产生质感 |
| Screen | 提亮，黑色消失 | 光晕/高光叠加 |
| Overlay | 增强对比 | 文字底部的半透明色块 |
| Darken / Lighten | 取通道最小值/最大值 | 快速抠出浅底或深底元素 |
决策权衡：混合模式在 Figma 中实时渲染，但 开发实现可能不一致（尤其 Android 的 PorterDuff 模式映射），原型中需用标注注明“仅参考视觉效果，建议用 CSS mix-blend-mode 或 SVG feBlend 实现”。
3.6 核心工作流：文本与图片排版交互流程
下图展示了从“原始素材”到“完成排版”的完整决策链路：
流程说明：先确定文字样式（保证可读），再设置图片填充模式（保证比例），然后应用遮罩（控制显示区域），最后叠加混合模式（增强视觉层次）。每一步都需返回检查文字是否清晰。
3.7 组件规范与验收标准
将排版能力固化为 原子组件，纳入设计系统：
| 组件 | 属性 | 验收标准 |
|---|---|---|
| 图文卡片 | 标题样式 / 图片填充模式 / 遮罩开关 | 切换图片不拉伸；文字在深/浅背景均保持对比度 ≥ 4.5:1 |
| 头像 | 尺寸 32/40/56 / Crop 模式 / 圆形遮罩 | 任意比例原图不溢出、不空白 |
| 渐变遮罩条 | 方向 / 停止点颜色 / 不透明度 | 图片边缘平滑过渡，不出现硬边 |
| 混合叠加层 | 模式选择 / 不透明度 | 下方文字仍可辨识，WCAG 2.1 AA 级 |
3.8 原型说明与交付标注
在 Figma 原型中，需为开发添加明确的 标注注释（使用 @ 提及）：
- 文字样式：
@font-style: Heading 1; line-height: 1.3; - 图片填充：
@image-fit: cover; crop-position: center 30%; - 遮罩：
@mask: overlay gradient (90deg, #fff 60%, #000 100%); - 混合模式：
@mix-blend-mode: multiply; opacity: 0.85;
验收 checklist：
✅ 所有文本使用 Style 而非手动调整
✅ 图片均指定 Fill / Fit / Crop 模式
✅ 遮罩边界与内容对齐，无漏边
✅ 混合模式不导致文字消失或重影
✅ 原型交互中缩放/旋转后排版不崩坏
✅ 所有文本使用 Style 而非手动调整
✅ 图片均指定 Fill / Fit / Crop 模式
✅ 遮罩边界与内容对齐，无漏边
✅ 混合模式不导致文字消失或重影
✅ 原型交互中缩放/旋转后排版不崩坏
3.9 设计决策权衡总结
| 决策项 | 方案 A | 方案 B | 推荐 |
|---|---|---|---|
| 图片填充 | Fill（拉伸） | Crop（裁剪） | Crop，保持比例 |
| 遮罩形状 | 精确贝塞尔 | 标准几何形 | 几何形优先，性能好 |
| 混合模式 | Multiply | Overlay | Overlay，文字可读更佳 |
| 文字在图片上 | 纯色背景块 | 渐变遮罩底 | 渐变遮罩，更自然 |
小结：本章从文本样式系统出发，串联图片填充、遮罩和混合模式，形成完整的图文排版能力链。掌握了这些基础操作与决策逻辑，即可在 Figma 中产出既美观又具备开发可行性的高质量原型。