本文已获授权
公众号：你丫才美工（ID:Ymeigong）
转载请联系授权
虽然今天是周末
但要分享一件心塞的事情…
如果在工作上遇到一个奇葩的程序员
你是准备跳河还是上吊？
当然，并不是每个程序员都很奇葩的
我遇到的程序员们大部分还是特别好特别有上进的
BUT，凡事总有例外是不是？
作为一个乖巧不事儿逼的UI
我要给你们讲几个奇葩程序员的故事
以下以 RD 来代替程序员全程
故事一
一次做了一个手机端的H5页面
在跟PM一起核对页面效果的时候
发现字号、分割线宽度、间距
没有一个是标准的
更生气的是：他把我设计的圆形按钮擅自改成了方的！！
我：这按钮怎么是个方的？？
PM：这按钮怎么是个方的？？
RD：哦，方的好写，方的还不是可以用！
故事二
同事在做一个界面动效
做完了视觉也确定了，RD也评估工作量了
大概做着做着觉得不对劲了吧
RD私聊我同事说：
这个动画不好做，也没啥用，要不你删掉吧
……
故事三
RD：要不我们把这个按钮改成红色的吧
UI：为什么要改成红色？？这是个确定按钮啊
RD：这不是活动页面么，红色的比较有活动氛围
UI：？？？
但是遇见这些奇葩的事情
能！怎！么！办！呢！
到底要怎么提高沟通的精准度呢！
对，这就是今天的主题
提高沟通效率
今天要来推荐一个神器
叫做 Zeplin
是一个能够让程序员与设计师 相爱 的软件
对！就！是！相！爱！
你耕田来我织布
你设计来我开发
对！就！是！相！爱！
你耕田来我织布
你设计来我开发
它支持Mac os 、Win 以及 Web 模式
各大平台畅通无阻！
支持现在主流的 Sketch 以及 PS 哦
它到底有多厉害呢
精简出一句话就是
它能够让设计师直接上传源文件
然后系统帮你取色、标注什么的
再然后 RD 们就能够直接看到了
噢，这好像是三句…
使用上Zeplin之后
设计师不用切图！设计师不用切图！设计师不用切图！
设计师也不用标注！设计师也不用标注！设计师也不用标注！
反正用完之后整个人都年轻了
好吧
让我们来具体的感受一下吧
首先是视频
然后就让我来实际操作一把
在下载完成之后我们登陆Zeplin
这里就主要说ps版本吧
需要安装插件
具体装机方式跟文件在文末出现
千万不要惧怕Zeplin的英文界面
因为都是小学生基本的单词
这里打开了设计师 @Linda 的作品
有兴趣的可以去dribbble follow他
https://dribbble.com/totorolinda
需要注意的是，这里需要是画板格式
不然Zeplin打不开哦
这个时候Zeplin会弹框出现
告诉我们正在快速的将PSD导入进去
敲！幸！福！
马上就能过上不用标注的生活了
然后就可以在Zeplin的界面看到我们的PSD了
右上角红色区域的icon分别代表了
信息、颜色、切图、讨论
顾名思义
在色彩里面会有整个界面的取色
在切图里面则是页面的切片文件
厉害的来了哦！快鼓掌！
当我们选中文字区域的时候
可以看到左侧的地方
显示了全部的文字信息
颜色、位置、字体、字号大小
包括CSS的代码
（这里因为我选的是web模式所以是CSS）
如果我们想要有切片
则需要在PS里面对切片图层单独处理一下
需要先点击 Mark as asset
然后图层前面会出现 -e- 作为区分
这个时候再去Zeplin的时候
（看右侧哟）
就能够看到切片出来的图了
并且支持下载PNG跟SVG两种格式
完美！根本就不用切图！！
并且Zeplin还有一个比较方便的地方就是
可以直接在软件里面留言！
可能就是传说中的
在线改稿
所以这个略带杀伤性的功能
在这里就不展开说明了
要知道现在可是赶上了大好时光
因为最早的时候Zeplin只支持Sketch
并且只支持Mac平台上面的
直到今年才开发了PS的插件
再到今年十月份，才出来Windows的版本
所以，大家还不快下载！！！
软件用得好！设计师不改稿！！
下载地址：
https://zeplin.io/
软件安装说明：
https://zeplin.io/support.html#photoshop-plugin
欢迎大家在评论中继续
安利各种作图神器！
完了，投票好像忘记贴图了
