介绍一些设计师/前端设计需要的 Spec 工具

[Keinez]

起因是看到了一个插件叫做 Markly，看起来是个很不错的 Spec（设计稿中的尺寸距离描边等）工具，支持实时更新 Spec，支持 Photoshop 和 Skecth，要价 $39.99。

看起来很强大，嗯？

翻了一下设计师们的评论，结果一边倒的在推荐 Zeplin。

查了一下，Zeplin 是个目前只支持 Sketch 的 App，不过比 Markly 要便利的多，目前在进行 Beta 测试。遗憾的是不仅歧视 Photoshop，还顺带歧视了 Windows 一把……

接着有人提到 Adobe Extract。打开看了一下，算是 Photoshop / Windows 上的一个替代解决方案，但坏处是它并非完全为 Web 设计而生，这玩意会把所有属性全都以 CSS3 的形式读出来……适合比较懒的设计师和前端们。

最后我自己装的是 Ink。相比 Markly 的优势是能够添加 Documentation，坏处是这玩意基于 js，受限于 Adobe 屎一样的 js 性能，遍历一个含有大量图层的文件感觉会非常坑爹。而且我们的前端都会用 Photoshop，所以一般直接 PSD 扔过去就完事了，不需要 Spec ……

其他插件有 Specctr，和 Ink 大同小异，多了个量图层间距的功能——这已经被新版 Photoshop CC 的 Ctrl 键爆出屎了。不过还提供 Illustrator 、Indesign 和 Fireworks 版本，打包 $99，如果你还在用这些东西的话可以试试。

以及 specKing。这玩意的网站太丑了，让我简直不敢相信这是一个设计师工具……要价 $19，确实一分钱一分货。

[Neo]

有空试试，谢谢推荐

[sc]

这几个都看了下，作为码农，我觉得Zeplin不错 :D

[Keinez]

@sc 万一设计师丢给你 PSD 的时候，你还得需要弄一个 Photoshop CC 2014 ……

[sc]

@Keinez 我觉得设计师把生成的Spec图（就是那些弹簧啊、数字标注啊什么的）直接输出类似PNG格式的图不就好了？（我不是前端工程师、不是很了解这个作业流程

[Keinez]

@sc 好是好，但是这其实是个体力劳动的过程，而且：

- 对于追求细节的设计师你得搞清楚所有的边距，差5个px，效果差天远。

- Spec 对 Responsive Design 无效。

- 改需求的时候会死人的。

所以一般使用自动化工具标注或者直接把 PSD 扔给前端来解决这个问题。

[sc]

@Keinez 干脆你们学点代码、把前端工程师的工作也做了吧 :D

[Keinez]

@sc 如果真的没有前端的话，我确实可以撸东西出来……就是可维护性和js质量不敢恭维就是了。

[bladecamper]

@Keinez 前端怎么可能不装ps

[angelself]

推荐Ink，但前端不需要标注成那样。就算了。
其他方便标注的还有pxcook和markman，都不是ps插件
有个好用的ps动作是sizeman,框选按快捷键即可出标注。

[old9]

没人提马克鳗哇
http://www.getmarkman.com/