UD5工具箱
随机占位图生成器使用教程
本教程将详细介绍如何使用随机占位图生成器来快速创建高质量的占位图片。无论您是初次接触还是希望深入了解高级功能，以下步骤都能帮助您高效完成工作。
第一步：选择图片尺寸
打开工具页面后，您会看到预设尺寸按钮区域。工具提供了 8 种常用的预设尺寸，包括 1920×1080（全屏横幅）、1280×720（标准视频比例）、1024×768（平板横屏）、800×600、640×480、480×320、320×240（移动端小屏）和 200×200（头像尺寸）。直接点击对应的预设按钮，宽度和高度数值会自动填入输入框。如果您需要特殊的自定义尺寸，可以在宽度和高度输入框中手动输入所需的像素值。例如，如果您正在为一个博客文章设计封面图，建议选择 1200×630 这个适合社交媒体分享的标准尺寸。
第二步：设置背景颜色
接下来，您需要为占位图选择一个合适的背景颜色。工具提供了三种颜色设置方式供您选择。第一种是颜色选择器，点击色盘图标即可打开取色面板，您可以在此精确选择任何颜色。第二种是预设色板，工具提供了一系列常用的背景颜色预设，直接点击色块即可应用。第三种是随机配色功能，点击"随机颜色"按钮，系统会自动生成一组和谐的背景色和文字颜色搭配。如果您希望快速生成一批不同颜色的占位图用于 A/B 测试或视觉对比，随机配色功能将是一个非常实用的选择。此外，您还可以通过"随机背景"按钮快速切换背景颜色，通过"随机文字"按钮单独切换文字颜色，实现更精细的颜色控制。
第三步：输入自定义文字
在文字输入框中，您可以输入任何想要显示在占位图上的文字内容。这些文字会以居中对齐的方式显示在图片的正中央。常见的使用场景包括：输入页面标题（如"首页横幅"）、品牌名称、项目代号，或任何能够帮助团队成员理解图片用途的说明性文字。如果您不输入任何文字并保持输入框为空，系统会自动在图片中央显示当前的尺寸信息，例如"1920 × 1080"，这在需要快速识别不同图片尺寸时非常有用。
第四步：调整字体大小
字体大小调节器是一个滑块控件，范围从 12px 到 200px。您可以根据图片的实际尺寸和文字长度来调整字体大小。通常来说，图片尺寸越大，字体也需要相应调大才能保持视觉上的协调。如果您不想手动调整字体大小，可以将滑块设置为 0，此时系统会根据图片的宽高自动计算最佳的字体大小。自动计算功能会综合考虑图片面积和文字长度，确保文字既能清晰辨认，又不会超出图片边界。
第五步：选择导出格式
在导出格式选项中，您可以根据实际使用场景选择最合适的图片格式。PNG 格式适合需要透明背景或无损压缩的场景；JPEG 格式适合照片类型的占位图，文件体积相对较小；WebP 格式是现代网页的推荐格式，具有优秀的压缩率和画质表现；SVG 格式则适合需要无限缩放的矢量图形场景。如果您选择了 JPEG 或 WebP 格式，还可以通过质量滑块（1%-100%）来调节图片的压缩质量。较高的质量值会产生更清晰的图片但文件体积更大，较低的质量值则相反。建议在原型设计阶段使用 80% 左右的质量值，既能保证视觉效果又不会占用过多存储空间。
第六步：预览与输出
所有参数设置完成后，右侧的预览窗口会实时显示最终效果。确认效果满意后，您可以选择三种输出方式之一。点击"下载图片"按钮，图片会自动保存到您的默认下载目录。点击"复制 Base64"按钮，图片的 Base64 编码会被复制到系统剪贴板，您可以直接粘贴到 HTML 代码中使用（例如 <img src="data:image/png;base64,...">）。点击"复制 SVG 代码"按钮（仅在 SVG 格式下可用），完整的 SVG 代码会被复制到剪贴板，方便您直接嵌入到网页中。Base64 方式特别适合快速原型开发阶段，可以省去配置图片服务器的步骤，直接在代码中内联使用图片数据。
进阶使用技巧
在实际工作中，您可能需要批量生成多张占位图。建议的做法是：先确定一个基础尺寸和配色方案，然后利用随机颜色功能快速生成一批不同颜色的同尺寸占位图，用于测试页面布局在不同色彩方案下的视觉表现。另外，在进行响应式设计测试时，建议分别使用手机端（320×240 或 480×320）、平板端（1024×768）和桌面端（1920×1080）的预设尺寸来生成占位图，以确保布局在各种设备尺寸下都能正常显示。对于需要频繁使用的尺寸和参数组合，建议记录下来以便后续快速复用。