设计稿基本规范 注意：以下规范适用于 Sketch 设计稿和 PSD 设计稿。 设计师注意 如果您是设计师，我们希望您在绘制设计稿时，能遵循以下规范。 0. 设计稿前置要求 模块建议都放在画板（Art…

一、设计稿基本规范

注意：以下规范适用于 Sketch 设计稿和 PSD 设计稿。

1.1 设计师注意

如果您是设计师，我们希望您在绘制设计稿时，能遵循以下规范。

0. 设计稿前置要求

模块建议都放在画板（Artboard）中
![Test](https://img.alicdn.com/tfs/TB1NutWf9slXu8jSZFuXXXg7FXa-1248-1352.png imgCooK设计稿规范)

1
同在一个画板（Artboard）中的模块，第一层的子级必须是编组(Group)，不要有非编组(Group)的图层
1. 图层的组织
1
属于同个模块的图层分到一个编组(Group)，图层命名没有要求。
2. 切图方法

imgcook 提供了一种快速识别切图的方法。将需要导出成一张位图的元素编组并在命名时添加“#merge#”即可，如果切图的尺寸和期望的不一致，可以通过在编组里添加实际尺寸和位置的 Mask（蒙版）来解决。

示例 1

下图所示的商品 1 排 4 模块，商品图与实际图片尺寸大小不一致。商品图的大小是 113x100，真实图片为一张方图，尺寸是 156 * 156，所以在商品图下添加了一个 Mask，标记真实图片的尺寸。

示例 2

下图所示原图尺寸是 842 x 465，如果不加 Mask，生成的图片就不符合预期。Mask 的尺寸设置为 702 x 394，最后生成的尺寸就是期望的 702 x 394。

3. 元素的位置尽量准确

元素的位置需要尽量准确，下图中的品牌 Logo 图是居中对齐的，左右两侧间隔都是 104px，左右可以偏差几个像素，但如果偏差太大，一边是 90px，而另外一边是 110px，生成代码时就不会是一个居中的元素，不符合预期。

4. 模块大小必须在页面宽度范围内

模块的大小如果超过了页面的范围，必须使用mask进行裁剪，适配页面宽度

imgCooK设计稿规范详解

二、imgCooK简介

imgCooK是阿里巴巴推出的智能设计稿生成代码工具，它能够将设计稿自动转换为前端代码，大大提高了开发效率。为了确保代码生成的质量，设计师需要遵循一定的设计规范。

三、设计规范的重要性

遵循设计规范可以：

  1. 提高代码生成质量：规范的设计稿能够生成更准确、更高质量的代码
  2. 减少返工：避免因设计不规范导致的代码问题
  3. 提升效率：规范的流程能够提高整体开发效率
  4. 保证一致性：确保生成代码的风格一致性

四、详细规范说明

4.1 图层组织规范

1
为什么重要：
  • 清晰的图层组织有助于工具理解设计结构
  • 便于代码生成时的模块划分
  • 提高代码的可维护性
1
最佳实践：
  • 使用有意义的图层命名
  • 保持图层的层级结构清晰
  • 避免过深的嵌套层级

4.2 切图规范

1
#merge#标记的使用：
  • 将需要合并的元素编组
  • 在编组名称中添加”#merge#”标记
  • 工具会自动识别并生成对应的图片
1
Mask的使用：
  • 当切图尺寸与期望不一致时使用Mask
  • Mask用于标记实际图片的尺寸和位置
  • 确保生成的图片符合预期

4.3 位置精度要求

  • 精确的位置信息能够生成准确的布局代码
  • 避免视觉上的偏差
  • 确保响应式布局的正确性
1
注意事项：
  • 元素位置要尽量精确
  • 居中对齐的元素要确保左右对称
  • 间距要保持一致

五、常见问题及解决方案

5.1 问题1：生成的代码布局不准确

1
原因：
  • 设计稿中元素位置不精确
  • 使用了不规范的布局方式
1
解决方案：
  • 使用对齐工具确保元素位置精确
  • 遵循标准的布局规范
  • 使用网格系统辅助对齐

5.2 问题2：切图尺寸不符合预期

  • 没有正确使用Mask标记

  • 图片尺寸与设计稿不一致

  • 正确使用Mask标记实际尺寸

  • 确保图片资源符合设计要求

  • 检查Mask的位置和大小设置

5.3 问题3：模块识别错误

  • 图层组织不规范

  • 模块边界不清晰

  • 使用画板（Artboard）组织模块

  • 确保模块的第一层子级是编组

  • 保持模块之间的清晰边界

六、设计稿检查清单

在提交设计稿前，请检查：

1
2
3
4
5
6
7
- [ ] 所有模块都放在画板中
- [ ] 模块的第一层子级都是编组
- [ ] 需要切图的元素已添加#merge#标记
- [ ] 元素位置精确，对齐正确
- [ ] 模块大小在页面宽度范围内
- [ ] 使用了Mask标记特殊尺寸
- [ ] 图层命名清晰有意义

七、工具使用技巧

1. 批量处理

  • 使用样式和组件提高效率
  • 建立设计系统规范
  • 复用常用元素

2. 优化设计稿

  • 删除不必要的图层
  • 合并相似的样式
  • 优化图片资源

3. 协作流程

  • 与开发团队沟通规范
  • 建立设计评审机制
  • 持续优化规范

八、最佳实践

  1. 建立设计系统：统一的设计规范能够提高代码生成质量
  2. 定期更新规范：根据工具更新和项目需求调整规范
  3. 团队培训：确保团队成员都了解并遵循规范
  4. 持续改进：根据实际使用情况不断优化规范

九、总结

imgCooK设计稿规范是确保代码生成质量的重要保障。通过遵循这些规范，设计师能够生成更高质量的设计稿，开发团队能够获得更准确的代码，整体开发效率将得到显著提升。

随着AI技术的不断发展，设计稿转代码的工具将越来越智能，但规范的重要性不会改变。只有遵循规范，才能充分发挥工具的优势，实现设计到代码的高效转换。

本文标题： imgCooK设计稿规范

发布时间： 2019年06月27日 00:00

最后更新： 2025年12月30日 08:54

原始链接： https://haoxiang.eu.org/20dde73d/

版权声明： 本文著作权归作者所有，均采用CC BY-NC-SA 4.0许可协议，转载请注明出处！

赏
× 喜欢就赞赏一下呗！
打赏二维码