资源命名需与代码结构对应
别名: 切图命名 · 资源路径映射 · 导出文件名 · 模块对齐
概念解释
导出的图标、插图、位图,文件名必须能映射到消费它的代码结构(code-mapped asset naming):模块、组件、路由,而不是画板上的外观描述。icon-settings 对得上 settings/Icon.tsx;blue-btn-final-2 在仓库里谁也搜不到。构建系统按路径和标识符解析文件,不按「看起来像什么」解析。
对应不是美化文件名,而是让资源进入与代码同一套寻址空间。对不上的文件会变成孤儿:找不到、不敢删、换新时只能再丢一份进去。
机制
设计工具按图层树导出,图层树按视觉分组命名——颜色、状态、设计师的版本口头禅。代码按功能模块树寻址,构建器只认模块路径。两棵树若不共享一段可拼接的名字,导入步骤就变成人工翻译:有人记得「那张蓝按钮其实是 Primary 在 Settings 里」。记忆一断,仓库里留下 final、final2、use-this。
替换失败是这条机制的可见后果。要改一枚图标,正确动作是打开该组件的目录换成同名文件,让引用点全部跟上。名字若不能指向目录,替换者只能在平铺的切图包里靠缩略图找,找错就留下双重引用:旧文件仍被某条遗漏的路径吃着,新文件只被新代码吃着。删除同样危险——孤儿没有引用计数可查。
边界
一次投放用完即弃的营销素材、不进应用包的外部投放图,可以按战役命名,不必映射组件树。多品牌共用一张图、由主题层在运行时换肤的资源,映射的是语义角色(icon.nav.home)而不是某一个品牌目录;硬编码品牌名反而在换肤时碎掉。位图若由构建流水线按源文件生成多倍图,人手命名的是源,不是生成物;给 @2x 手工起一个与模块无关的名字会和流水线抢权。第三方图标集自带的短名,可在封装层做一次映射表,不必改源包文件名。
怎么落地
- 导出前按代码模块写命名表:
{domain}/{component}/{slot}-{state},禁止final、颜色词、作者名进文件名。 - 切图直接落到对应模块目录,或进构建会按同名规则搬运的资源管道,不要先堆进桌面上的「导出」文件夹再靠人搬运。
- 新增资源必须能从组件文件里用标识符引用到;引用点写外观描述(
blueIcon)视为未完成。 - 验证:在仓库里搜导出文件名,命中路径应落在消费该资源的模块下。再做一次替换演练——只凭组件名找到文件并换掉,引用点应全部跟上且旧文件不再被引用。搜到多份
final或搜不到,命名没有对应。