UI切图标注一招搞定，从此告别加班！

各位互联网老江湖想必都听过UI和前端之间那剪不断、理还乱的爱恨情仇。

场景一：UI设计师兴冲冲地设计了一个酷炫的效果，满怀期待地交给前端工程师，结果却无情地被告知：“做不到！”

场景二：前端工程师一脸疑惑地向UI设计师发问：“你这个按钮，到底要多大？”

类似的场景，相信在UI和前端的日常协作中屡见不鲜。而这一切的根源，往往在于UI切图标注的不规范、不清晰。

为了打破这一僵局，今天就为大家献上一招UI切图标注的独门秘诀，助你轻松搞定切图标注，从此告别加班，提升协作效率！

第一步：选择合适的标注工具

市面上有很多免费或付费的切图标注工具，选择一款趁手的工具至关重要。推荐几个常用的工具：

• 标注侠
• Zeplin
• Sketch Measure

第二步：明确标注规范

在标注之前，需要与前端工程师协商好标注规范，包括：

• 标注格式：JSON、CSS、XML等
• 尺寸单位：px、rem、em等
• 标注精度：到小数点后几位
• 命名规则：如何命名图层、元素等

第三步：规范标注图层

• 将切图中的每一个元素都单独划分成一个图层，并赋予有意义的名称。
• 对于复杂元素，可以将其分解成多个子图层。
• 注意对图层的层次结构进行整理，方便前端工程师理解。

第四步：精准标注尺寸

• 使用标注工具中的测量工具，准确测量每个元素的尺寸，包括宽度、高度、边距、内边距等。
• 对于不规则元素，可以使用路径测量工具进行标注。

第五步：标注交互和状态

• 对于有交互或不同状态的元素，需要分别标注其不同状态下的尺寸和样式。
• 例如：按钮的正常状态、悬停状态、点击状态等。

第六步：导出标注文件

• 标注完成后，导出标注文件，并与前端工程师共享。
• 导出时，选择与协商好的标注格式。

第七步：沟通和反馈

• 前端工程师收到标注文件后，可能会提出一些问题或建议。
• 及时沟通和反馈，确保标注准确无误。

实践案例：

以下是一份规范的UI切图标注文件示例（JSON格式）：

{
  "layers": [
    {
      "name": "header",
      "type": "div",
      "width": "100%",
      "height": "60px",
      "background-color": "#f5f5f5"
    },
    {
      "name": "logo",
      "type": "img",
      "src": "logo.png",
      "width": "200px",
      "height": "40px",
      "margin-left": "20px"
    },
    {
      "name": "nav",
      "type": "ul",
      "width": "auto",
      "height": "auto",
      "margin-left": "auto",
      "padding": "0"
    }
  ]
}

写在最后：

规范的UI切图标注不仅可以提升前端工程师的工作效率，还能够促进UI设计师和前端工程师之间的沟通协作。掌握了这招秘诀，各位UI设计师们，还等什么？赶快尝试起来，从此告别加班，尽情享受创作的乐趣吧！