神器集
今日推荐最新收录神器合集博客评测
设计稿自动一键切图标注的神器,80%的设计师和程序员都在用
神器集
>
文章分享
>
切图标注

设计稿自动一键切图标注的神器,80%的设计师和程序员都在用

设计师和程序员据说是一对相爱(不存在的)相杀的关系,设计师经常会遇到设计了大半天的设计稿,被程序员丢回来“这个需求我实现不了”,好气喔!如何避免程序员和设计师打起来呢,有人就想出做一个翻译器吧,能够把设计语言翻译成开发语言的那种,并且还能一键切图标注


这种程序员与设计师之间的协同工具,目前市场上已经有不少产品了,今天小白给大家推荐的这款设计神器——PxCook像素大厨,是我体验的几款中流畅度和功能都非常优秀的,来自互联网一线产设研团队,经历三年时间打造(很不容易喔,点个赞👍)



实际工作中,设计师给出的设计稿是有自己一套标准的,是用设计语言产生出的设计稿。待交到程序员手中时,则需要转化为实际的编码过程中需要用到的开发语言了。

例如,将看似左中右有三个icon的简单布局,若开发需要按响应式排布,则需要以顶部或左上方出发,首先确定大块区域的响应规则,再按比例区分左中右模块,再在模块中,将icon做到上下和左右全部居中。这中间则需要以参考点计算的距离,比例,大小,切图等设计元素都能明显的标示出,以便自己在编码的时候,能够快速的将“设计语言”转化为“开发语言”。


设计稿一键上传生成代码

PxCook像素大厨,就是把设计稿,转为开发可用代码的线上协作工具,而且做得非常精细。

首先,PxCook对于Mac系统和Windows系统都是支持的,而对于设计师软件使用习惯的不同,例如,有些设计师习惯用sketch,有些则习惯用Adobe XD和PS,PxCook也都支持。

相应的,不同设计软件输出的设计稿也可能会用于不同平台的软件开发,如一个公司打算全平台开发——iOS、安卓、网页版、小程序等,这些PxCook也都支持。

可以说,所有开发环境下可能遇到的情况,PxCook已经全部考虑到了!


完整的体验

经过实际使用,在新手教学流程中,指引比较及时,没有奇怪的指示语或无尽的弹窗,而熟练后的操作流程里,低频但关键的设置按钮摆在最外,高频使用的交互则采用启发式的设计,使得全流程较为流畅,重点功能突出。

如果说上述的低频与高频没什么直观的概念,小编可以分别举几个例子

我们可以看看PxCook顶部的选项:

以安卓项目为例,顶部选项包括了:设备类型切换、pt/dp sp单位切换、dpi选项切换、颜色显示格式切换、单位显示checkbox、标注颜色、标注描边checkbox、标注字号、放大缩小…事无巨细,设计师需要的已经全都展现出来了

而如果你是个开发,点击顶部的开发tab切换,则会进入开发模式,代码会着重显示在右侧。而具体想看哪个元素的属性,只需要点击或hover设计稿的元素即可

对于手动党需要“高频使用”的手动标注功能,我们用一个动图体验一下流畅度~可以说,有一个背后足够“懂你的”强大业务逻辑库,才能将设计师和开发可能用到的都考虑到,才会有这样的体验效果。


项目制与分组功能

随着时间推移,设计稿会越来越多,结合目前主流设计软件都已经支持的画板功能,PxCook推出了“项目-画板”方式,加强了对项目和设计稿的统一管理。

实际生产过程中,你可以将大功能、或版本更新,甚至整个项目的设计稿,以项目的方式汇总在一个“文件夹”内,方便开发同学便捷的区分并查看。随着时间推移,采用项目的方式相比于瀑布流的显示方式更加具有结构性,可以一目了然,也是PxCook团队本身的最佳实践。

小白注意到,分组功能是今年9月上线的。支持在项目中创建自定义分组,用户可将不同的设计稿归纳到任意分组里,以调整显示顺序,优化项目结构。

这样一来,每个项目里面就能够更清晰,使用方式也有了更多选择。


支持云协作和本地版本

有多地点办公需求、或需要团队成员高效协作的灵活团队,可以使用PxCook的协作版本在线查看标注切图;仍然手动标注传图给程序员的设计师可以导出PNG文件发送;而独立开发者则可以使用PxCook的本地版。工作习惯的多样性也能得到保障。


支持切图

切图作为设计师的又一大需要,同样是PxCook打造的设计研发全流程中必不可少的一个环节。与标注类似,切图功能同样来自于PxCook团队成员多年在一线大厂的业务流程沉淀,加上团队对设计开发社群多年运营经验,打造出的又一个简单实用的功能。

切图功能简单说来,三个关键词:标记,选择,导出。就是标记想要切出的图层,选择设备类型和分辨率,然后就能导出(到PxCook或直接导出到本地)了。不能再简洁了。

导出到PxCook中,可以让使用云协作项目的成员快速下载使用切图。(下图)


PxCook更多想说的

通过了解PxCook团队,我们听到了这样一段新颖的话,是PxCook团队特别嘱咐想带给大家的:

“PxCook很多功能是让人“用完即走”的。可能有很多用户会觉得,嗯你的产品很好用,但不会感受到我们的不断试错,也不知道我们曾经遇到过的各种实际问题。其实我们解决每一个新问题的时候并不是因为“挑战带来快感”才去做这些事情,而是长久以来都一直在想象这样一个场景:如果让我们几十万用户都站在眼前,会是什么样呢?肯定不是什么大家举杯谢谢你,那就有点扯了。我觉得可能是,大家都能不言而喻,能回想起这是一个好工具,节省了团队太多时间,让团队做了更有益的事,好像让自己也有更多时间尝试其他事情,有了更多时间去体会生活,去陪伴家人,就够了。


这种想象其实我觉得就是每天都在发生的,也是我们所一直说的那句“做产品,就是要想到几十万用户都站在眼前,做一个和他们都成为朋友的产品”。


关于创业神器导航

创业神器导航,是一个为创业者而生的免费工具导航网站,收集好用有趣、提高工作效率的神器,涵盖设计、开发、办公、品牌、营销、招聘和资讯等多个领域。发现和宣传优质的工具一直是创业神器导航的内容核心,希望通过这些工具产品能够让创业者体会到现代高效工具带来的效率提升,希望我们的曝光宣传能让创业者的产品被更多人看见。

欢迎每位创业者使用创业神器导航,如果你也想在创业神器导航上发布宣传自己的产品,在这里分享你的产品经验、创业历程,欢迎扫描下方二维码,我们没有任何门槛。