文档截图使用说明¶

📸 截图存放位置¶

所有文档使用的截图应该存放在 docs/assets/screenshots/ 目录中。

📁 推荐目录结构¶

docs/
├── assets/
│   ├── screenshots/           # 所有截图存放在这里
│   │   ├── download-page.png  # 下载页面
│   │   ├── select-folder.png  # 选择文件夹界面
│   │   ├── preview-results.png # 预览结果界面
│   │   ├── execute-rename.png  # 执行重命名
│   │   └── ...                 # 其他截图
│   └── images/                 # 其他图片（logo、图标等）

🖼️ 当前需要的截图清单¶

优先级 🔥🔥🔥（必需）¶

这些截图在多篇文章中被引用，应该优先创建：

文件名	用途	被引用文章	尺寸建议
`select-folder.png`	选择文件夹界面	`how-to/rename-pdf-by-title.md`	1200x800
`preview-results.png`	预览重命名结果	`how-to/rename-pdf-by-title.md`	1200x800

📝 截图规范¶

1. 尺寸要求¶

推荐宽度: 1200px - 1600px
推荐高度: 800px - 1200px
纵横比: 3:2 或 4:3
格式: PNG（支持透明背景，文件更清晰）

2. 质量标准¶

✅ 清晰度: 保证文字可读，不模糊
✅ 亮度: 避免过暗或过曝
✅ 对比度: UI 元素清晰可见
✅ 隐私: 不包含敏感信息（个人文件名、路径等）

3. 内容要求¶

✅ 聚焦: 突出要展示的功能
✅ 简洁: 避免杂乱的背景
✅ 示例数据: 使用通用的、非敏感的示例文件名
✅ 统一风格: 所有截图使用相同的操作系统和主题

🎨 截图最佳实践¶

示例文件命名规范¶

在截图中使用的示例文件应该： - ✅ 使用通用名称: Document_1.pdf, Research_Paper.pdf - ✅ 避免真实信息: 不使用真实的论文标题或个人文件 - ✅ 多样化: 展示不同类型的文件（PDF、图片、文档等）

建议的操作系统外观¶

Windows: 使用浅色主题（更通用）
macOS: 使用浅色模式
隐藏任务栏/菜单栏: 聚焦应用本身

标注和高亮¶

如果需要在截图中标注： - 使用红色或橙色箭头指向重要按钮 - 使用半透明的高亮框圈出关键区域 - 保持标注简洁，不遮挡太多内容

📤 如何在文档中引用截图¶

Markdown 语法¶

![截图描述文字](../../assets/screenshots/文件名.png)

示例¶

# 中文文档（在 docs/how-to/ 目录）
![选择文件夹](../../assets/screenshots/select-folder.png)

# 英文文档（在 docs/en/how-to/ 目录）
![Select Folder](../../assets/screenshots/select-folder.png)

Alt 文本规范¶

✅ 描述性: 简洁说明截图内容
✅ 关键词: 包含相关的 SEO 关键词
✅ 无障碍: 帮助视障用户理解图片内容

好的示例:

![Renomee AI 批量重命名 PDF 文件预览界面](../../assets/screenshots/preview-results.png)

不好的示例:

![图片](../../assets/screenshots/preview-results.png)

🚫 暂时的解决方案¶

如果截图暂时不可用，可以：

方案 1：移除图片引用（当前采用）¶

直接删除 ![...](...png) 行，保留文字说明。

优点： - 文档仍然完整可读 - 不会出现404图片链接

缺点： - 缺少视觉辅助

方案 2：使用占位符¶

创建简单的占位符图片（可选）：

!!! info "截图待添加"
    此处将展示文件夹选择界面的截图。

📊 截图状态追踪¶

当前状态¶

文件名	状态	优先级	使用位置
`select-folder.png`	❌ 缺失	🔥🔥🔥	`how-to/rename-pdf-by-title.md`
`preview-results.png`	❌ 缺失	🔥🔥🔥	`how-to/rename-pdf-by-title.md`
`download-page.png`	✅ 已删除引用	-	不再需要（用真实链接替代）

下一步行动¶

立即: 创建 docs/assets/screenshots/ 目录
本周: 截取 select-folder.png 和 preview-results.png
后续: 根据新文章需要添加更多截图

🔧 技术实施¶

创建截图目录¶

# 如果目录不存在，创建它
mkdir -p docs/assets/screenshots

图片优化建议¶

在添加截图前，建议优化文件大小：

压缩 PNG: 使用 TinyPNG 或 ImageOptim
目标大小: 尽量控制在 200KB 以下
权衡: 清晰度 vs. 文件大小

ReadTheDocs 配置¶

确保 mkdocs.yml 中包含 assets 目录：

# mkdocs.yml
docs_dir: docs

ReadTheDocs 会自动包含 docs/ 下的所有文件。

❓ 常见问题¶

Q: 截图必须是英文界面吗？¶

A: 不必须。但如果中英文文档都引用同一张截图，建议使用英文界面（更通用）。或者分别创建中英文截图。

Q: 可以使用其他工具的截图吗？¶

A: 不建议。应该使用 Renomee 的真实截图，保持品牌一致性。

Q: 截图需要水印吗？¶

A: 不需要。保持截图干净，不添加水印。

Q: 截图在 Git 中会占用很多空间吗？¶

A: 经过优化的截图（200KB 以下）不会占用太多空间。但避免频繁替换同一截图。

📞 需要帮助？¶

如果你在准备截图时遇到问题：

查看现有文章: 参考其他产品文档的截图规范
使用占位符: 暂时不添加图片，保持文档可读
标记 TODO: 在文档中标记

最后更新: 2026-06-06

文件名	用途	说明
`main-interface.png`	主界面	Renomee 启动后的主界面
`rule-input.png`	规则输入框	展示自然语言规则输入
`batch-processing.png`	批量处理中	显示进度条和处理状态
`settings.png`	设置界面	展示配置选项
`undo-feature.png`	撤销功能	展示撤销历史记录