设计稿完成后,导出文件杂乱、倍率不对、命名不统一,是设计交付最常见的返工原因。在Lovart中文版里,这类问题可以在导出前用一套配置模板解决:先把画板尺寸和导出倍率固定下来,再通过命名规则与目录模板让资源名直接对应项目工程的引用路径,导出后做一次文件信息检查,最后拿着交接清单逐项确认。
解决团队交接乱象,核心是把导出配置与项目工程约定绑定。适用场景是设计稿定稿后的资源交付阶段;操作动作是统一根画板尺寸、按 1x/2x/3x 设置导出倍率,在命名规则中加 btn_/icon_/img_ 前缀,并按页面/组件自动分目录;验证方式是导出后用文件管理器检查尺寸、命名和零字节文件;风险边界是 Lovart 中文版不同版本对字段名称和导出面板的呈现有差异,需以当前实际界面为准,不要指望一条配置通吃所有项目。
统一画板尺寸与导出倍率
在Lovart中文版中,根画板尺寸可以在画板属性面板里找到,通常显示为“宽度”和“高度”两个输入框,需要填的是逻辑分辨率,而不是导出像素。以iOS为基准的团队,通常把根画板设为375×812;Android团队可以沿用同一基准,按倍率切图。导出倍率则在导出资源面板的“倍率”区域勾选,iOS端一般需要2x和3x两套,Android端根据目标设备选择1x、2x、3x甚至4x。
画板:375 × 812(逻辑分辨率)
倍率:1x / 2x / 3x
导出像素:375×812 / 750×1624 / 1125×2436这里要特别检查:如果画板尺寸填错,导出图片的长宽会比预期多一倍或少一半,开发合入后会出现模糊或不准的问题。
配置资源命名前缀与目录结构
命名规则是导出规范里最值得花时间设置的部分。在Lovart中文版的“命名设置”中,可以编辑资源名称模板。建议把模板设为“类型前缀_图层名_倍率”。类型前缀按资源作用区分:按钮用 btn_,图标用 icon_,插图和背景用 img_。这样开发在代码里看到名字就能判断资源类型,不需要追问设计师。目录结构同样在导出设置中配置,支持按页面生成子文件夹,或者按组件自动分组。如果开发工程本身就按模块分目录,那么导出目录就要按页面名建文件夹,每个页面内部的切片留在对应页面文件夹下,避免所有png堆在一个根目录里。
资源命名示例:
icon_home_2x.png
btn_submit_3x.png
img_banner_2x.png
导出目录示例:
assets/
├─ login/
│ ├─ btn_login_2x.png
│ └─ icon_user_2x.png
├─ home/
│ └─ icon_home_2x.png
└─ common/
└─ img_banner_2x.png这里有一个容易忽略的坑:Lovart中文版的命名模板里,如果误用了空格或中文符号,导出的文件会带上这些字符,开发在打包时很容易遇到路径或匹配问题。建议在模板里只用英文字母、下划线和斜杠层级。
运行批量导出并检查文件信息
批量导出后,不要直接把压缩包发给开发。先停在导出目录里做一次快速检查,能省掉后面很多来回。检查顺序固定为:文件尺寸、命名规范、零字节文件。
先看尺寸:如果导出的是1x、2x、3x,那么同一张图在三个文件夹里的大小应该按规律递增。如果出现同倍率下两个文件大小明显不一致,可能是源图层尺寸不对。用文件管理器按“大小”列排序,把特别小或特别大的文件单独挑出来。再看命名:打开“显示文件扩展名”,确认文件名里没有空格、中文括号或残余的“副本”字样。命名规则未生效时,文件名会退回成图层名,例如“矩形 3 @2x.png”,这种文件在开发工程里需要手动改名,容易漏改。最后看有没有零字节文件。在导出目录下运行下面任意一条命令,能快速定位空文件:
# macOS / Linux
find . -size 0 -name "*.png" -print
# Windows PowerShell
Get-ChildItem -Recurse | Where-Object { $_.Length -eq 0 }如果发现零字节文件,先检查源组件是否被隐藏或切片范围是否为零,再重新导出,不要手动补一个空白png顶替。
与开发交接的最终校验清单
资源导出只是完成了一半,交割时还需要按清单逐项打勾。下面这张清单可以直接复制成团队协作模板,每次交付前照着过一遍。
- 切图完整性:对照设计稿中的切片标记,确认每个已命名切片都有对应导出文件,且文件不为空。切片遗漏时优先回到Lovart中补充,不要用源文件里的旧图混过去。
- 标注可见性:检查设计稿里的标注图层(尺寸、间距、圆角)是否解锁且可见,开发打开源文件就能读到参数,不需要设计师逐个回复。
- 字体文件是否随包:如果界面用了非系统字体,需要把字体文件一并放入资源包,并在交接文档中注明字体名、字重和使用位置。没有授权可商用的字体,不建议进入交付流程。
- 颜色值是否正确:核对设计稿中的颜色样式已导出为HEX或RGBA,与开发使用的色板一致。重点检查渐变、透明色和深色模式下的颜色,这些最容易出现色差。
这四项都通过后,再打包上传。后续如果开发提出漏图或错图,优先检查清单中对应项,而不是整个导出流程重跑一遍。