从界面截图提取 UI 图标，用于原型设计

当设计文件里没有独立素材时，可以从产品截图中提取图标来搭建原型。目标是获得边缘干净的独立图标，而不是连按钮底色、文字和分隔线一起截下来。如果还能打开原始设计文件，优先直接导出素材；截图里的图层已经被合并。

1. 先判断截图值不值得处理

选择原始 PNG 或质量最高的图片，避免从聊天缩略图反复放大。先按原型中实际使用的大小查看图标，再决定是否修边。请使用自己拥有或有权使用的素材。

纯色工具栏通常比照片背景更容易分离。如果背景纹理穿过图标，或者角标挡住了一部分图形，提取无法找回被遮住的轮廓。此时应寻找更好的源图，或重新绘制这个图标。

2. 只选中图标，不把整个控件带进去

一组间距清楚的图标可以先自动识别，再逐个核对选区。文字、分隔线和通知圆点可能被识别成额外区域。对于拥挤界面中的单个控件，使用手动框选：框内保留完整轮廓和少量边距，尽量避开邻近文字。

无线信号、铃铛下沿等分离笔画可能属于图标本身，不要一并裁掉。两个对象真正接触时，缩小框选可以去掉邻居，但不能恢复被挡住的边缘。复杂情况可结合英文的相邻图标残片排查指南判断。

3. 同时检查外轮廓与内部填充

进入修图界面，切换浅色和深色背景。白色背景上看不出的浅色光边，放到深色原型里可能很明显。相机内部的白色也可能是设计的一部分；先检查原始提取结果，再决定是否开启内部清理或轻微收边，不要把一个强参数直接套到所有图标。

4. 按原型的实际显示尺寸验收

需要保留截图外观时优先使用 PNG，保留一份原尺寸参考，并按用途命名。放大输出不能补回源图丢失的细节。SVG 是重新构建的矢量轮廓，不是恢复原设计师的矢量文件，使用前需要单独对比。

• 检查标签文字和按钮底色是否已排除。
• 确认分离笔画及有意保留的白色区域没有丢失。
• 在深浅两种原型底色上查看 PNG。
• 按真正的控件尺寸检查整组图标，再交付使用。

接下来可以查看完整的图标提取案例，或进入手动框选。