4、设计文件整理：图层命名规范、分组逻辑、标注规范、切图资源整理

设计文件交付是UI设计项目从“视觉创作”走向“工程落地”的关键转折点。一个未经整理、图层混乱、命名随意的PSD或Figma文件，往往会导致前端开发效率下降30%以上，甚至引发还原度偏差、返工和团队信任危机。本章将系统拆解设计文件整理的四大核心模块：图层命名规范、分组逻辑、标注规范与切图资源整理，帮助设计师建立一套可复用、可检查、可追溯的交付标准。

4.1 图层命名规范：让每一个图层“自解释”

核心原理

图层命名的本质是降低沟通成本。当开发人员打开设计源文件时，他不需要逐个图层去猜测“这个矩形是什么”，而是通过命名就能快速定位目标元素。规范的命名体系应当包含四个关键信息：元素类型、业务名称、状态描述、尺寸或倍率。例如：btn_primary_login_default_48 表示“主按钮-登录-默认态-高度48px”。这种命名方式让图层在列表中即可被快速检索，也便于自动化工具（如Zeplin、蓝湖）正确识别。

命名规则与操作流程

推荐命名格式：类型_业务名_状态_尺寸，各部分以下划线连接，全部小写。对于图标类资源，建议增加前缀ic_，例如ic_cart_default_24。对于背景或装饰元素，使用bg_前缀，如bg_gradient_blue。

案例拆解：电商App商品卡片命名

假设设计一个商品卡片组件，包含商品图片、名称、价格、加入购物车按钮。未规范命名时，图层可能叫“矩形1”“椭圆2”“文本3”；规范后应如下：

card_product_item
├── img_product_photo_default
├── txt_product_name_default
├── txt_product_price_default
├── btn_add_cart_default_32
└── bg_card_white

开发人员看到btn_add_cart_default_32，即可明确这是一个“加入购物车按钮”，默认状态，高度32px，无需再询问设计意图。

常见误区与复盘

• 误区一：命名过于简短（如“btn1”“btn2”），导致无法区分业务含义。
• 误区二：命名过于冗长（如“这是一个首页右上角的用户头像点击后跳转到个人中心的按钮”），反而降低可读性。
• 误区三：忽略状态命名，导致开发需要自行猜测悬停态和按下态。
• 复盘建议：在项目启动时，团队应共同制定一份《命名规范速查表》，并在设计评审中检查命名是否符合规范。

4.2 分组逻辑：构建清晰的层级结构

核心原理

分组逻辑决定了设计文件的可浏览性和可维护性。一个合理的分组结构应当遵循“页面→模块→组件→元素”的四层体系。页面层对应设计稿的完整画板；模块层对应页面中的功能区域（如导航栏、内容区、底部栏）；组件层对应可复用的UI组件（如按钮、输入框、卡片）；元素层则是组件内部的具体图形、文本和图标。分组逻辑的核心目标是：让任何人在5秒内找到任意一个元素。

分组操作流程

1. 按页面划分：每个独立页面（如首页、详情页、个人中心）使用独立画板或顶级分组。
2. 按模块划分：在页面内，按功能区域建立二级分组，命名如header、content、footer。
3. 按组件划分：在模块内，将可复用的组件单独分组，命名如card_product、nav_tab。
4. 按元素划分：组件内部，将图形、文本、图标分别放置，并遵循命名规范。

实战场景：从混乱到有序

某SaaS后台项目，设计文件最初将所有内容平铺在画板中，图层数量超过300个，开发每次查找元素都需要花费2-3分钟。经过分组重构后，按照“侧边栏-顶部栏-内容区-弹窗”四大模块划分，每个模块内再按组件细分，开发查找元素的时间缩短至10秒以内。同时，由于分组清晰，设计修改时也能快速定位到需要调整的组件，避免误改其他区域。

常见误区与总结

• 误区一：分组层级过深（超过5层），导致展开列表冗长，反而降低效率。
• 误区二：分组命名与图层命名混淆，分组应使用名词性短语，图层应使用“类型_名称_状态”格式。
• 误区三：忽略空分组，删除无内容的分组，保持文件整洁。
• 总结：分组逻辑是设计文件的“骨架”，骨架清晰，内容才能各归其位。

4.3 标注规范：让开发“不提问”

核心原理

标注是设计稿与开发之间的“翻译层”。标注的核心目标是消除歧义，让开发无需向设计师提问即可完成还原。标注内容应覆盖五个维度：尺寸标注、间距标注、颜色标注、字体标注、状态标注。尺寸标注包括元素的宽高、圆角、边框宽度；间距标注包括元素与父容器、兄弟元素之间的margin和padding；颜色标注需提供HEX或RGB值；字体标注需提供字号、字重、行高、字间距；状态标注需说明默认、悬停、按下等不同状态下的视觉变化。

标注操作流程

1. 使用标注工具：推荐使用Figma的“Dev Mode”、Zeplin、蓝湖或Marketch，这些工具可以自动生成尺寸和颜色标注。
2. 手动补充关键信息：对于自动标注无法覆盖的内容（如交互状态、特殊对齐方式），使用文本注释或标注框手动补充。
3. 建立标注图例：在文件首页或独立画板中，建立标注图例，说明不同颜色标注线的含义（如红色代表间距、蓝色代表尺寸）。
4. 标注密度控制：避免过度标注，只标注开发需要的关键信息，否则会干扰视觉判断。

案例拆解：登录页标注

以登录页的输入框为例，标注应包含：输入框宽度（320px）、高度（48px）、圆角（8px）、边框颜色（#E2E8F0）、聚焦时边框颜色（#2563EB）、字体（16px/Regular/#1E293B）、placeholder文字（“请输入手机号”）、输入框与上方标签的间距（8px）、输入框与下方按钮的间距（24px）。这些信息完整后，开发无需任何沟通即可完成实现。

常见误区与复盘

• 误区一：只标注尺寸，不标注状态。
• 误区二：标注信息过期，设计修改后未同步更新标注。
• 误区三：标注工具使用不当，例如在Figma中未开启“Dev Mode”导致开发无法查看标注。
• 复盘建议：将标注检查纳入设计评审的必检项，由另一位设计师交叉检查。

4.4 切图资源整理：高效输出与清晰目录

核心原理

切图资源是开发直接使用的图片文件，其质量直接影响App包体积和加载性能。切图整理的核心目标是“按需提供、格式正确、命名清晰、目录有序”。切图应遵循“1x/2x/3x”倍率规范，适配不同分辨率的设备。格式选择上，图标和UI元素推荐使用PNG（支持透明），照片和复杂渐变推荐使用JPG，矢量图标推荐使用SVG。切图命名应与图层命名保持一致，便于开发对照。

切图操作流程

1. 确定切图范围：只导出开发需要的资源，避免导出整个画板。
2. 设置导出倍率：在Figma中，选中元素后，在“Export”面板中添加1x、2x、3x倍率。
3. 选择格式：图标和UI元素使用PNG，照片使用JPG，简单矢量图形使用SVG。
4. 命名与归档：按照“模块_组件_状态_倍率”的格式命名，并放入对应目录。

实战场景：切图优化前后对比

某电商App项目，最初切图资源全部放在一个文件夹中，命名混乱（如“未标题-1.png”“副本2.png”），且同时存在1x和2x资源，但未标注倍率。开发需要逐个打开图片确认内容，耗时且易错。优化后，按照“模块-组件-状态”三级目录归档，命名统一为ic_cart_default_24.png，并分别放入1x、2x、3x子文件夹。开发只需根据命名即可找到对应资源，且能明确倍率，无需额外沟通。

常见误区与总结

• 误区一：切图包含不必要的透明边距，导致开发需要手动裁剪。
• 误区二：切图格式选择错误，例如将照片导出为PNG导致文件过大。
• 误区三：切图命名与图层命名不一致，导致开发无法对应。
• 总结：切图资源是设计交付的“最后一公里”，规范整理能显著提升开发效率，减少因资源问题导致的返工。