免费2款标注工具实操(内含下载链接)

作为一个称职的设计师,在开发APP、官网、小程序、公众号等项目时,在设计稿上做好标记和备注,极大地减少与开发人员的沟通障碍,直接甩标注图,快准狠!

PS:在这里简单介绍下自己用过的2款标注工具,当然网上也很多资源,但现在绝大部分工具或插件都要收费,下面会告诉你各大工具的操作方法以及免费的下载链接,同为设计师不容易啊!

百度网盘安装链接:https://pan.baidu.com/s/1i49NgDv 密码:6pkb

安装前必须先下载Adobe AIR:https://get.adobe.com/cn/air/

1.MarkMan 马克鳗

目前是我使用最多的标注工具,界面简洁,操作方便,适用范围广。体验版一些基础功能都能实现,当然想要了解高级功能,也可以在官网中订购正式版,¥60/年。马克鳗可直接打开PSD源文件和JPG、PNG等图片格式,同时具有自动刷新功能。

1.1功能介绍

  • 长度标记
  • 坐标和矩形标记
  • 色值标记
  • 文字标记


1.2操作方法

打开软件,单击选择图片,也可通过左下角按钮重新选择文件。如下图:


免费2款标注工具实操(内含下载链接)


常用到的快捷键—— 放大缩小:Ctrl+鼠标滚轮

a.长度标注:


免费2款标注工具实操(内含下载链接)


b.坐标和矩形标记:


免费2款标注工具实操(内含下载链接)


c.色值标记:


免费2款标注工具实操(内含下载链接)


d.文字标记


免费2款标注工具实操(内含下载链接)


关键一步:保存。自动添加_spec后缀,不用管它,直接保存。


免费2款标注工具实操(内含下载链接)


2.Pxcook 像素大厨

相比于马克鳗的简洁,像素大厨多了一个对PSD源文件切图功能,可以快速切图。(其实切图也可以选择ps插件,这就是为什么很少用Px cook的原因)

功能更齐全,增加特色功能:智能标注、px和pt单位转换、切Retina双尺寸图、手动更改标注数值、多画板支持等。而且拥有设计和开发2个模式,自动生成前端代码,更方便设计师与开发人员的对接。


2.1功能介绍

  • 距离标注
  • 区域标注
  • 颜色标注
  • 文字标注
  • 坐标点标注


2.2操作方式

打开后提示注册登录,登陆后新建项目,区分项目类型(iOS、Android和Web),导入文件。基本操作思路和马克鳗一样,懒惰的时候还可以直接选择智能标注,随意拖动就能标注尺寸啦!具体操作就不一步步展示了,里面设有教程,不懂的可以先观看操作流程。

快捷键:放大缩小:Alt+鼠标滚轮

同时可以查看开发模式的前端代码,如下图:


免费2款标注工具实操(内含下载链接)


关于标注的工具还有很多,包括Assistor PS、Parker和Markly等,但由于很多是收费的我没用过,就不在这一一说明啦!每个人使用习惯不一样,只要能快速标注,就可以啦。不管黑猫白猫,抓到老鼠就是好猫!