神器!解放你的双手——UI 设计稿全自动切图和标注的一些工具推荐

17,192 阅读12分钟

原文收录在我的 GitHub博客 (github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴。

工欲善其事,必先利其器。

  前不久在 掘金 上看到一篇文章,前端 PS 切图方法,图文详细,相信每个前端都经过这种最原始的切图手法,不禁想起自己以前刚入门那会懒得切图,直接QQ截图,现在想起来真是初生牛犊不怕虎,怎么方便怎么来。。。

  这种原始的PS切图,不能说不好,只能说太影响效率了,一直认为能用机器解决的事,就不要用人工操作,特别是切图这种体力活,不应该是由程序员来完成的,如果开发还停留在手工切图,没什么意义,只能说你的时间太廉价了。

自动切图工具

  这里切图推荐一个插件:Cutterman,更多切图工具介绍请移步:扶朕起来,朕还能切

Cutterman 是个国产的切图工具,广告语就叫“最好用的切图工具”

Cutterman致力于改善设计师的工作效率,为设计师提供优秀、高效、实用的技术解决方案, 解放双手。让创意不再有界限, 让设计更专注!

  • 支持多倍图
  • 多种格式
  • 多图层导出
  • 可以设置固定大小
  • 操作简单
  • 免费,只需要注册个账号即可

一键切图,真正解放双手

  Cutterman能够让你只需要点击一个按钮,就自动输出你需要的各种各样的图片,快到没有朋友!

关于标注

  将一个个标注手动画出来,耗时费力不说,画得两眼昏花,一不小心就会出现漏标的情况。而这些漏标的地方,攻城狮们往往在开发过程中才会发现,于是不得不一次又一次地找设计师进行确认。

  切好图之后该怎么标注了,这是一个面临的问题,别告诉我你还在手动一个一个在那里测距离,我看见我同事之前就是用PS一个一个在那里量距离,看得我强迫症和尴尬症都犯了,记住,不要把时间浪费在体力活上,能用工具解决的事就不要用双手,你这么喜欢干这种测距离的体力活你咋不去搬砖呢 😄,让别人用双手拯救你的双手。

  有时候标注设计师会帮你做,但是也不是总能碰见这么善解人意的设计师,我方设计师VS别人设计师。

我方设计师:

对方设计师:

想起敌方队友VS我方队友

碰见这种我方设计师,没人替我们分担,这种低效的协作方式,造成了大多数互联网产品设计团队普遍的悲剧:明天要上线,通宵抠细节,吐血调界面,加班!!!


几款强大的标注工具

  设计师不帮我们标注,咋们自己来,借助工具标注也是分分钟的事情,假如复杂的标注蹂躏了你,不要悲伤,不要哭泣。

  如果有一天,设计师只需专注界面设计,不需再做切图和标注的工作;如果有一天,工程师只需专注功能框架建设,不需再花太多心思在标注UI上面;没有如果,这一天真的来了。。。

  工以利器为助,人以贤友为助。有了这些工具的辅佐,让我们开发的效率又快又好,简直如虎添翼,爽到不行。 

以下是一些能够让程序员与设计师 相爱 的软件

对!就!是!相!爱!

你耕田来我织布

你设计来我开发

1、标你妹

官方网站:www.biaonimeia.com/
是否免费:免费
登录方式:直接微信扫一扫
介绍:

天天让我标注测距离,标你妹啊,作为射击狮,却干着死美工的活,每天要为程序猿同学标注PSD有木有?但我却憧憬着成为逼格很高的射击狮。为了能够早点下班泡妹子看电影。标你妹啊帮你解放你的双手…

操作:登录成功之后,新建一个项目上传PSD,然后就可以进行标注。
操作预览图:

2、蓝湖Mac端App

  一款全中文免费的自动标注的神器!彻底解放设计师的双手,上传文件就能蹭蹭蹭的自动标注!什么?你还想自动作图?冷静点冷静点…万一失业了呢?
  现在,这款叫蓝湖的设计师标注神器,最新版开始支持“自动标注”的功能(目前仅支持.Sketch,Psd版本即将上线)
  只需下载“蓝湖”Mac端App,即可实现:从Sketch一键导出设计图→自动生成标注→自动共享给团队→团队相关成员自动收到提醒等一系列自动化功能。

官方网站:www.lanhuapp.com/
是否免费:免费
登录方式:下载APP,注册账号登录
介绍:

蓝湖是一款产品设计师的协作平台,帮助设计师更快地完成工作。蓝湖通过帮助设计师更好地向团队展示设计图,描述页面之间的跳转关系。蓝湖还支持从Sketch一键分享、在线协作…

操作:登录成功之后,新建一个项目上传,然后就可以进行标注。
操作预览图:

“自动标注”功能可以完整而清晰地将Sketch设计图中每个元素的尺寸、位置、颜色、间距、字号 等样式信息自动同步到蓝湖,团队内的工程师等同事可以随时查看。
如果设计图出现改动和更新,蓝湖也能自动添加新版本。

如今设计师的工具那么多,这一款工具的优势在哪里呢

1.所有功能完全免费,没有任何项目或团队成员数量限制。
2.中文的!中文的!中文的!
3.无与伦比的快!在国内的服务器+蓝湖工程师呕心沥血优化的算法,使蓝湖的“自动标注”的速度嗖嗖的!
4.蓝湖还整合了设计图流程的展示,设计图历史版本管理,多种情况和状态的设计图管理等功能。

5.设计师不但可以为每张设计图添加备注文档,其他团队成员还可以针对设计图发表评论,方便团队在线高效沟通。(内心竟有点小小的惶恐…)
6.在蓝湖上,还可以基于设计图快速制作一个高保真的交互原型,让工程师不用再跑来问你“这个按钮跳到哪啊”,该原型还可以在蓝湖手机端App和微信上进行操作和预览。

美团,网易,面包旅行等等国内知名互联网公司都参与了蓝湖的早期内测,为 “蓝湖”提出了很多专业的建议。“蓝湖”基于这些反馈快速迭代,而“自动标注”功能就是其中一项。
由于是国内的团队,沟通起来非常方便!所以如果设计师们有痛点或是需求,可以积极讨论!没准下版本的蓝湖就能直接自动作图了呢!!!
对惹,蓝湖主体功能是Web端网页平台,不需要下载,直接注册就可以免费使用。

来源:你丫才美工(Ymeigong),之前今日头条看到的推荐,不知道网址。。。

3、Sketch/PS + Zeplin

  随着sketch的普及(sketch是啥,能吃吗?自行谷歌、必应),国内外很多项目团队都陆续用起了sketch+zeplin的开发模式。不过话说回来,sketch真的有那么好用吗?很多小伙伴们表示用ps好几年了,要我重新学一个软件,臣妾做不到啊!~

  其实刚进公司的时候也是这种心情的,没用过mac更没用过sketch,完全的小白用户,当时内心几乎是奔溃的。但是自从接触sketch后,真的是爱不释手,都不想用回ps了。

官方网站:www.zeplin.io/
PS导出zeplin官方视频教程:www.youtube.com/watch?v=0cV…
Sketch导出zeplin 官方视频教程:www.youtube.com/watch?v=o9k…
是否免费:免费
登录方式:下载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

中文文档:sketch.im/plugins/1
github:github.com/utom/sketch…
官方网站:utom.design/measure/
官方使用教程:utom.design/measure/how…
是否免费:免费
登录方式:下载APP,注册账号登录
介绍:

Sketch Measure是一款可用于标注和设计规范的工具,支持Sketch 3.5版以上。Measure帮你解放你的双手…

1.创建叠加

2.度量尺寸

3.度量边距

4.获取属性

5.添加注释

操作:登录成功之后,新建一个项目上传PSD,然后就可以进行标注。
官方DEMO预览地址:utom.design/news/#artbo…
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、其他诸如PxCook(像素大厨),cutterman的parker(这个收费,喜欢的可以赞助一下,切图那个免费哦 😯)等大同小异,这里就不多做介绍,感兴趣的童鞋可以自己折腾玩玩,工具嘛,适合自己的就是最好的,其他一些我也没有实践,大家自己看着玩。。。

以上四个推荐软件的看法:

标你妹适合小型的个人的一些项目,对于新手来说,学习成本基本为0,非常方便,web端没有平台限制;

蓝湖Mac端APP首先你得有一台Mac,其次是OSX系统,国内的良心之作,速度很快,适合个人和企业协同合作开发;

Zeplin适合小型的团队,还带有一部分协作办公的功能(留言和更新状况),要求前端也能适应这种新的方式;

Sketch Measure更传统一些,本地文档、打包切图等等,更适合有自己办公流程的大公司,仅仅支持Mac。

是不是准备入手一台MacBook Pro了呢?