figma-restoration-tools/src/restoration-tips/截图对比-3倍图缩放与样式尺寸设置.md

Professional Figma Component Restoration Kit - MCP tools with snapDOM-powered high-quality screenshots, intelligent shadow detection, and smart debugging for Vue component restoration. Includes figma_compare and snapdom_screenshot tools.

# 截图对比：3倍图缩放与样式尺寸设置

## 问题描述
在Figma组件还原过程中，容易误解expected.png和actual.png的尺寸含义。这些对比图片是3倍分辨率图片，如果直接按照图片显示的像素尺寸设置CSS样式，会导致组件尺寸过大，造成严重的布局差异。

## 问题分析

### 典型错误场景
- **预期图片**: expected.png显示组件高度为192px
- **错误理解**: 以为组件实际高度应该设置为192px
- **实际需求**: 组件真实高度应该是64px (192÷3)
- **错误结果**: 组件被放大3倍，布局完全错位

### 根本原因
1. **工具输出特性**: 截图对比工具为了保证高分辨率和细节清晰度，输出3倍scale图片
2. **视觉误导**: 大尺寸图片在显示时看起来像是"实际尺寸"
3. **缺乏区分意识**: 没有区分"对比图片尺寸"和"设计尺寸"的概念

## 解决方案

### 1. 理解图片缩放规则
**3倍图转换公式**:
```
实际CSS尺寸 = 图片显示尺寸 ÷ 3
```

**示例转换**:
- 图片高度: 192px → CSS高度: 64px
- 图片宽度: 933px → CSS宽度: 311px  
- 图片padding: 24px → CSS padding: 8px

### 2. 以layout-analysis.json为准
**正确的尺寸来源优先级**:
1. **优先**: layout-analysis.json中的1倍尺寸 ✅
2. **参考**: Figma JSON中的boundingBox尺寸
3. **对比**: expected.png/actual.png (仅用于视觉验证，不用于尺寸设置)

### 3. 图片用途明确区分
**图片文件用途**:
- **expected.png**: 视觉目标参考，元素识别，结构分析
- **actual.png**: 当前实现效果
- **diff.png**: 像素差异可视化 (橙色/红色 = 差异区域)

**不应该从图片直接读取的信息**:
- ❌ 组件尺寸和CSS属性值
- ❌ 字体大小和行高  
- ❌ 间距和定位数值

## 代码示例

### 错误做法 ❌
```css
/* 直接按3倍图尺寸设置 */
.folder-list-item {
  width: 933px;    /* 错误：3倍图宽度 */
  height: 192px;   /* 错误：3倍图高度 */
  padding: 24px;   /* 错误：3倍图padding */
}
```

### 正确做法 ✅
```css
/* 基于layout-analysis.json的1倍尺寸 */
.folder-list-item {
  width: 311px;    /* 正确：设计尺寸 */
  height: 64px;    /* 正确：设计尺寸 */
  padding: 8px;    /* 正确：设计尺寸 */
}
```

## 实际案例分析

### 案例：FolderListItem高度设置
**问题过程**:
1. 观察expected.png，看到组件高度显示为192px
2. 错误设置 `height: 192px`
3. 截图对比发现组件过大，还原度下降

**正确过程**:
1. 从layout-analysis.json读取 `height: "64px"`
2. 设置CSS `height: 64px` 
3. 3倍图显示为192px是正确的 (64×3=192)

## 改进效果
- **避免尺寸错误**: 防止组件被意外放大3倍
- **布局精确性**: 确保组件尺寸与设计稿完全一致
- **对比有效性**: 截图对比在正确尺寸下才有意义
- **开发效率**: 减少因尺寸错误导致的反复调整

## 关键经验

### 1. 尺寸来源层级
**明确的优先级顺序**:
1. **layout-analysis.json** (1倍设计尺寸) - 主要依据
2. **Figma JSON boundingBox** (1倍设计尺寸) - 验证依据  
3. **图片观察** (视觉验证) - 辅助判断

### 2. 3倍图理解
**正确认知**:
- 3倍图是为了细节清晰，不代表实际尺寸
- 所有CSS数值都应该是1倍尺寸
- 图片主要用于视觉识别和差异对比

### 3. diff.png解读
**差异图含义**:
- **橙色/红色区域**: 像素不匹配的区域
- **不是设计元素**: 差异颜色是对比工具叠加的，不是组件应该显示的颜色
- **分析维度**: 关注差异位置和形状，而非颜色值

## 注意事项

### 1. 工具配置验证
- 确认截图工具的scale设置为3
- 验证对比工具使用相同的缩放参数
- 保持工具配置的一致性

### 2. 尺寸转换验证
- 设置CSS后，验证3倍图是否显示为预期的3倍尺寸
- 使用浏览器开发者工具确认元素实际渲染尺寸
- 对比Figma设计稿中的尺寸标注

### 3. 特殊情况处理
- 某些设计可能本身就是高分辨率设计，需要具体分析
- 响应式设计中的断点尺寸要特别注意缩放关系
- 字体渲染在高分辨率下可能有不同的表现

## 适用场景
- **所有Figma组件还原项目**
- **使用高分辨率截图对比的场景**  
- **需要精确尺寸控制的UI组件**
- **跨设备适配的响应式组件**

## 延伸应用
- **移动端适配**: 理解设备像素比与CSS像素的关系
- **图标设计**: 多倍图素材的尺寸规划
- **UI组件库**: 标准化的尺寸定义和使用规范