【UI设计师必看】摹客iDoc“独门绝技”之标注切图篇

thomas2

对于设计师来说，标注和切图是工作中非常重要的一部分。最早的标注切图都是由设计师手动进行，不仅浪费时间精力，还极容易遗漏出错。随着设计流程不断被简化，越来越多的标注切图工具应运而生。

摹客iDoc作为新一代的产品协作设计平台，快速简单的智能标注和自动切图功能，完美地解决了产品开发流程中标注和切图的难题，更是凭借多种“独门绝技”，成为许多设计师日常工作中必不可少的工具之一。今天，就跟随小摹的脚步一起来看看，摹客iDoc在标注、切图部分有哪些独家功能吧~

「自动+手动」标注更全面

熟悉摹客iDoc的小伙伴们对iDoc的标注功能一定不陌生。「自动+手动」的标注方式，可以帮助设计师轻松交付设计稿。

除了基础的多选标注、百分比标注等标注方式，iDoc还可以将某个图层设置为百分比参照，当鼠标点击、hover设计图上的其他图层，会自动以该区域作为参照计算百分比，查看百分比标注更准确更便捷。

在标注中切换单位时，经常会发生出现小数的情况。在iDoc中，可以自由设置标注是否显示小数位数，随心保留0~3位小数，让标注信息更精确。

点击页面左上方的“放大镜”按钮或按下Z键，就能召唤放大镜，细微标注也能轻松查看。

切换单位时，iDoc不仅提供常见的移动端设备以供快速切换，还可以自定义设备，自由设置设备尺寸。

除了PS、Sketch、Adobe XD这三大主流设计工具的设计稿外，Axure、Mockplus的原型图也支持在iDoc中进行智能标注哦！

图层管理更便捷

当我们点击的位置有多个图层时，如何才能精确地选择我们需要的图层呢？

在摹客iDoc中，有两种方式精确选择图层。一种是直接双击设计稿召唤图层面板，即可显示该位置的所有图层。

另一种方式就是打开页面左侧的图层树，展示当前设计稿所有的图层信息。当遇到图层遮挡的情况，可以在图层树或图层面板上禁用图层。

选中图层后，可以对图层进行标记，标记后的图层就会显示在图层数据面板中，可以直接将位置、尺寸、颜色、透明度、字体、字号等属性以JSON格式导出，以便完成一些后续UI生成的批量处理工作。也可以在图层信息面板中一键下载所有标记图层的JSON文件，帮助开发快速还原设计稿。

此外，还可以在图层中添加备注信息提醒开发人员，备注信息同样会记录在JSON文件中，帮助设计师在交付设计稿时更准确地传达信息。

规范生成更专业

为了保证产品的统一性，打磨产品体验细节，提升团队工作效率，定义和整理一套完整的设计规范非常重要，它可以帮助团队成员快速在规范中找到有效信息并获得指导。

项目上传至摹客iDoc后，可以借助自动生成设计规范的实用功能，将设计稿中使用的字体和颜色快速添加到设计规范中。

在摹客iDoc页面左侧“颜色”面板中，会自动整理当前页面所有颜色，点击就能一键查找当前页面使用了相同属性的图层。

切图下载更自由

如果问一个设计师，在设计稿交付过程中，最讨厌的一项工作是什么，答案一定是切图。开发需要对应不同平台尺寸的切图，因此设计师也需要交付多套切图。每当设计稿发生变动，切图的流程又需要重来一遍。

摹客iDoc的自由切图功能，帮助设计师大大提升了设计稿交付的效率。那么除了众所周知的“一键下载选中切图或所有切图”功能外，摹客iDoc还有哪些独有的切图技巧是你不知道的呢？

展开右侧面板中的折叠菜单，可以自动换算同一切图在不同平台下（iOS/Android/Web）的尺寸，减少了手动切换平台的繁琐流程。另外，在右侧面板中，也可以对切图尺寸进行自定义，快速调整切图大小。

随着多种多样的设计工具不断涌现，产品设计流程也在不断被革新。虽然经常有人说“设计工具不重要，重要的是设计思维”，但在互联网行业高速发展的今天，选择并掌握适合自己的设计和协作工具，才能让设计师保持高效率工作，从而留出更多的时间来思考设计，表达想法。

在本篇文章中，为大家整理了摹客iDoc独有的标注切图实用功能。希望能给UI设计师带来帮助，摆脱加班！