UI标注最高,PxCook 3.0 ,高效智能的设计研发工具。支
![](https://img.haomeiwen.com/i4058973/7472f5b15bb0f25b.jpg)
PxCook3.0,支持Win&Mac,支持PS和Sketch的自动标注切图,是一款设计师的效率工具。“拖拽即用”和“一键流”的友好交互理念贯穿始终。
![](https://img.haomeiwen.com/i4058973/31db1daa0017944e.gif)
什么是自动标注?
如上gif所示,设计师做完图后,一键拖拽到PxCook中,(可以在画板中手动加一些智能标注内容),然后导出的pxcp,程序员点击即可直接生成代码。这样一来,也就实现了自动标注,让设计师都省去标注了。而想用之前的智能标注的还可以继续使用,两种方式并存,适用多种情况。
智能标注
流畅易用的实际软件交互效果:
![](https://img.haomeiwen.com/i4058973/45dab9e83c93c4c9.gif)
Px的智能标注是16年上线以来口碑最好的功能,3.0版保留了智能标注,还对画板进行了支持:
支持画板
小解释画板。PS自2015起就支持了画板,可以说是ui设计师最常用的分类/汇总功能(Sketch一直支持)。同时也是我们2个种子用户群呼声最高的一块
![](https://img.haomeiwen.com/i4058973/fdc0ec6a56f75b61.jpg)
☝ 上图是Ps和Sketch的画板。以下,PxCoo3.0已经支持导入和分别显示画板了。☟
PS导入:
直接将psd拖拽进来即可,勾选要导入哪些画板。
![](https://img.haomeiwen.com/i4058973/ea3e8e6d25dc4d9e.gif)
Sketch导入:通过插件上传
![](https://img.haomeiwen.com/i4058973/b5b40c2bcd5ef39f.gif)
自动标注 : 直接生成代码对项目的支持
点击顶部的tab按钮能切换到开发模式,也就是省去设计师标注的自动标注模式。
![](https://img.haomeiwen.com/i4058973/bbd0dd796048aa87.png)
在这一模式下,开发汉纸想要的CSS XML Objective-C Swift ReactNative 等前端代码可以点击直接生成。包括尺寸文字、阴影渐变、圆角等所有元素。
![](https://img.haomeiwen.com/i4058973/6b58ee4aa51b91aa.png)
![](https://img.haomeiwen.com/i4058973/3de2a2fc99b761bc.gif)
CSS 支持点击生成
![](https://img.haomeiwen.com/i4058973/9a8c6eb0c0d3311f.jpg)
XML 点击生成
![](https://img.haomeiwen.com/i4058973/60b491d27fdc9931.jpg)
OC 点击生成
![](https://img.haomeiwen.com/i4058973/35837f110997359f.jpg)
Swift,Yes
![](https://img.haomeiwen.com/i4058973/0e19791b49889eb3.jpg)
ReactNative,支持ㄟ( ▔, ▔ )ㄏ
![](https://img.haomeiwen.com/i4058973/853c200dff9fbc35.jpg)
直接生成代码,也就是自动标注,至少每周为设计师和前端开发工程师节省数小时甚至更多的工作时间。
什么是项目?
项目是设计师方便管理标注的集合:某个psd/sketch中的某画板,某个单独.psd/.sketch,某个老的pxc格式文件,某些相关png和jgp……这些文件类型不同,但可能和某个界面、某个功能/版本相关,这些都可以整理到一个项目内。(下图
![](https://img.haomeiwen.com/i4058973/c2932f464e7c91dc.png)
简单使用说明
1. 智能标注按钮在左侧边栏,包括:元素间的尺寸可以拖动直接生成、元素内间距也能一键生成、字体信息标注(字号字体颜色是否加粗等)一键流
![](https://img.haomeiwen.com/i4058973/f9462b3ed7665707.png)
2. 支持切图,标注切图,在PxCook中一起搞定。详细介绍请看切图教程http://fancynode.com.cn/pxcook/qa#tab4
![](https://img.haomeiwen.com/i4058973/d317e7b76985cbdb.png)
3. 以字体单位格式#Hex和ARGB举例,设计页的顶部可以调节标注属性。
![](https://img.haomeiwen.com/i4058973/af6bacdcd6b6772c.png)
4. 选择多种平台(单位)的设计稿标注:创建项目时选择
![](https://img.haomeiwen.com/i4058973/981156b2cd90b169.png)
PxCook 3.0 获取途径:
http://www.fancynode.com.cn/pxcook
我们会在公众号:PxCook 上定期发布效率工具和日常更新
Sketch的上传插件 获取途径:
http://www.fancynode.com.cn/flavor
问题反馈与联系
任何问题反馈,欢迎来提(。・`ω´・)
官方微博:@Fancynode,官方qq群:661255798
![](https://img.haomeiwen.com/i4058973/fc8e894b85e16ba6.jpg)
![](https://img.haomeiwen.com/i4058973/2259bc10bfac8a25.jpg)