ly2011
UI设计稿全自动切图和标注的工具推荐
自动切图工具
这里切图推荐一个插件：Cutterman，更多切图工具介绍请移步：扶朕起来，朕还能切
Cutterman 是个国产的切图工具，广告语就叫“最好用的切图工具”
Cutterman致力于改善设计师的工作效率,为设计师提供优秀、高效、实用的技术解决方案, 解放双手。让创意不再有界限, 让设计更专注!
- 支持多倍图
- 多种格式
- 多图层导出
- 可以设置固定大小
- 操作简单
- 免费，只需要注册个账号即可
一键切图，真正解放双手
Cutterman能够让你只需要点击一个按钮，就自动输出你需要的各种各样的图片，快到没有朋友！
几款强大的标注工具
1、标你妹
官方网站：http://www.biaonimeia.com/
是否免费：免费
登录方式：直接微信扫一扫
介绍：
操作：登录成功之后，新建一个项目上传PSD，然后就可以进行标注。
操作预览图：
2、蓝湖App
一款全中文免费的自动标注的神器！彻底解放设计师的双手，上传文件就能蹭蹭蹭的自动标注！ 现在，这款叫蓝湖的设计师标注神器，最新版开始支持“自动标注”的功能 只需下载“蓝湖”App，即可实现：从Sketch一键导出设计图→自动生成标注→自动共享给团队→团队相关成员自动收到提醒等一系列自动化功能。
官方网站：https://www.lanhuapp.com/
是否免费：免费
登录方式：下载APP,注册账号登录
介绍：
蓝湖是一款产品设计师的协作平台,帮助设计师更快地完成工作。蓝湖通过帮助设计师更好地向团队展示设计图,描述页面之间的跳转关系。蓝湖还支持从Sketch一键分享、在线协作…
操作：登录成功之后，新建一个项目上传，然后就可以进行标注。
操作预览图：
“自动标注”功能可以完整而清晰地将Sketch设计图中每个元素的尺寸、位置、颜色、间距、字号 等样式信息自动同步到蓝湖，团队内的工程师等同事可以随时查看。 如果设计图出现改动和更新，蓝湖也能自动添加新版本。
如今设计师的工具那么多，这一款工具的优势在哪里呢
1.所有功能完全免费，没有任何项目或团队成员数量限制。 2.中文的！中文的！中文的！ 3.无与伦比的快！在国内的服务器+蓝湖工程师呕心沥血优化的算法，使蓝湖的“自动标注”的速度嗖嗖的！ 4.蓝湖还整合了设计图流程的展示，设计图历史版本管理，多种情况和状态的设计图管理等功能。
5.设计师不但可以为每张设计图添加备注文档，其他团队成员还可以针对设计图发表评论，方便团队在线高效沟通。（内心竟有点小小的惶恐…） 6.在蓝湖上，还可以基于设计图快速制作一个高保真的交互原型，让工程师不用再跑来问你“这个按钮跳到哪啊”，该原型还可以在蓝湖手机端App和微信上进行操作和预览。
蓝湖主体功能是Web端网页平台，不需要下载，直接注册就可以免费使用。
3、Sketch/PS + Zeplin
随着sketch的普及（sketch是啥，能吃吗？自行谷歌、必应），国内外很多项目团队都陆续用起了sketch＋zeplin的开发模式。不过话说回来，sketch真的有那么好用吗？很多小伙伴们表示用ps好几年了，要我重新学一个软件，臣妾做不到啊！～
其实刚进公司的时候也是这种心情的，没用过mac更没用过sketch，完全的小白用户，当时内心几乎是奔溃的。但是自从接触sketch后，真的是爱不释手，都不想用回ps了。
官方网站：https://www.zeplin.io/
PS导出zeplin官方视频教程：https://www.youtube.com/watch?v=0cVbzq-Q43M
Sketch导出zeplin 官方视频教程：https://www.youtube.com/watch?v=o9kOpAaDpQU
是否免费：免费
登录方式：下载APP，注册账号登录
介绍：
在使用 Zeplin 之前，最早是使用马克曼(手动标注，这里不做推荐)进行标注的，也就是直接在输出效果图上量尺寸；使用 Sketch 插件 Measure 之后，可以在画板中生成尺寸标注信息，导出标注图提供给开发同学使用。无论是马克曼还是 Measure，最后的交付物是一致的，马克曼和接下来要介绍的Measure这种原始的标准就是已经破坏了原本的视觉效果图，标注的信息一定会对原设计稿形成遮挡，因此一般效果图和标注图要分开给，开发也经常需要在两个图之间切换，图片管理不太方便。
zeplin 主要就是为了解决上述问题的，使用它之后，可以在 Sketch 中一键导入 Artboard，在设计师做好图层管理（命名、分组）的前提下，它可以自动生成标注信息（并且可以标注为 pt 或 dp），允许添加注释形成类 prd 文档，并且自动提取 Style Guide，同时还允许添加项目组成员，提供给团队组查看项目。
操作：登录成功之后，新建一个项目上传素材，然后就可以进行操作。
官方预览图：
介绍之后回答两个基本问题
①sketch支持windows吗？
答：不好意思，目前没有！设计师为了提升工作效率，就算吃土一两个月也要买台mac。不过windows用户除了装mac虚拟机外，现在ps也支持zeplin插件了，只要安装个插件，没有mac也照样可以任性的告别切图和标注。
②zeplin支持windows吗？
答：真够意思，这个必须有！不久前只有mac版，不过zeplin团队怎么会放弃windows那么大块的市场呢。真是喜大普奔，现在zeplin也支持windows了，从此开发哥哥再也不会抱怨网页端的zeplin打开速度超级慢了。
好了，废话不多说，直接进正题。
③sketch＋zeplin的优势
1、sketch支持多画板，便于同时预览，占用内存较ps小很多；
2、sketch支持导出flinto，便于制作交互动效原型；
3、zeplin解放设计师的双手，从此告别切图和标注；
4、zeplin降低工程师的沟通成本，提高设计还原度。
更多细节已经安装方法导出技巧请移步：APP标注无烦恼！告别切图标注-Sketch/PS+Zeplin 这里这介绍工具，由于篇幅有限，并不详细教你怎么用，工具多用用就会了，熟能生巧。 更多关于Zeplin的体验和细节请移步：Zeplin 的使用体验如何？
4、Sketch Measure
中文文档：http://sketch.im/plugins/1
github：https://github.com/utom/sketch-measure
官方网站：http://utom.design/measure/
官方使用教程：http://utom.design/measure/how-to.html
是否免费：免费
登录方式：下载APP,注册账号登录
介绍：
Sketch Measure是一款可用于标注和设计规范的工具，支持Sketch 3.5版以上。Measure帮你解放你的双手…
1.创建叠加
2.度量尺寸
3.度量边距
4.获取属性
5.添加注释
操作：登录成功之后，新建一个项目上传PSD，然后就可以进行标注。
官方DEMO预览地址：http://utom.design/news/#artboard0
Demo操作预览图：
关于Sketch Measure的使用教程，这里也不多细说，这里抛砖引玉的介绍一下，想要了解和使用请移步：Sketch Measure切图标注插件使用教程
下面谈一谈Zeplin和Sketch Measure的区别，纯属引用，表示没用过Sketch Measure：
Zeplin：
①Zeplin注册免费，只能保留一个Active项目，“STARTER”17刀／月，3个Active项目，“GROWING BUSINESS”26刀／月，12个Active项目。“ORGANIZATION”每个用户6.75刀／月。 ②支持MAC的Sketch和PS，以及PC的PS。（最大的优点） ③数据必须上传到网络上，可以用客户端查看也可以网页查看，必须是注册用户。（很麻烦，有些公司不允许上传就没办法了） ④自动生成styleguide。（非常棒） ⑤切图需要查看相应页面时，从切图栏下载。（我用的并不多，也可能有其他方式）
Sketch Measure：
①完全免费。 ②只支持MAC Sketch，但查看不受限制。 ③数据保存在本地（html文件），方便打包后发邮件，缺点是每次更新都要再发一遍，管理麻烦。 ④没有Zeplin智能，没有自动styleguide，但是有类似AssistorPS一样的手动标注。 ⑤有“颜色命名”但比styleguide差很多，希望以后能更新类似功能。自动打包输出切图，支持iOS和Android的命名方式。
5. iDoc
这是一款在线的智能标注工具，属于国产软件，可以及时动态查看设计稿的相关标注信息，是最近新出的软件。
官方网站：https://idoc.mockplus.cn/
是否免费：免费
登录方式：下载APP,注册账号登录
操作预览图：
优点：
- 开发可以知己诶复制元素代码；
- 标注比较智能，也支持百分比标注和多选标注；
- 在线的，不占内存，一个插件搞定切图和标注；
- 支持Win/Mac，支持 PS/Sketch/XD；
缺点：
- 对于图层样式，只能支持常用图层样式：比如外阴影、内阴影、描边和投影等；
6、其他诸如PxCook（像素大厨），cutterman的parker（收费）
以上五个推荐软件的看法：
标你妹适合小型的个人的一些项目，对于新手来说，学习成本基本为0，非常方便，web端没有平台限制；
蓝湖国内的良心之作，速度很快，适合个人和企业协同合作开发；
Zeplin适合小型的团队，还带有一部分协作办公的功能（留言和更新状况），要求前端也能适应这种新的方式；
Sketch Measure更传统一些，本地文档、打包切图等等，更适合有自己办公流程的大公司，仅仅支持Mac。
iDoc国内的良心之作，值得一试；
