猿类必备：Zeplin 用法介绍

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

随着sketch的普及，国内外很多项目团队都陆续用起了sketch＋zeplin的开发模式。不过话说回来，sketch真的有那么好用吗？很多小伙伴们表示用ps好几年了，要我重新学一个软件，臣妾做不到啊！～

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

开篇前先回答两个基本问题
1、sketch支持windows吗？
答：不好意思，目前没有！设计师为了提升工作效率，就算吃土一两个月也要买台mac。不过windows用户除了装mac虚拟机外，现在ps也支持zeplin插件了，只要安装个插件，没有mac也照样可以任性的告别切图和标注。

2、zeplin支持windows吗？
答：真够意思，这个必须有！不久前只有mac版，不过zeplin团队怎么会放弃windows那么大块的市场呢。真是喜大普奔，现在zeplin也支持windows了，从此开发哥哥再也不会抱怨网页端的zeplin打开速度超级慢了。

好了，废话不多说，直接进正题。

首先总结一下sketch＋zeplin的优势：
1、sketch支持多画板，便于同时预览，占用内存较ps小很多；
2、sketch支持导出flinto，便于制作交互动效原型；
3、zeplin解放设计师的双手，从此告别切图和标注；
4、zeplin降低工程师的沟通成本，提高设计还原度。

那么问题来了，我没有mac怎么破？小伙伴们别灰心，现在ps也支持zeplin了，擦亮双眼往下看，只需三步曲，解放双手指日可待。

步骤一：
安装软件＋zeplin插件

Mac用户：安装sketch；Zeplin.app；zeplin-sketch插件
直接解压安装即可
Windows用户：安装Photoshop CC2015；Zeplin.app；zeplin－ps插件&面板

如何安装的Photoshop插件？
通常，当你启动Zeplin，插件应自动安装。但是，如果你有问题，请确保你有最新的Photoshop CC2015年的版本。两件需要安装，插件和面板。

安装教程：
1、插件
解压并拷贝“io.zeplin.photoshop-plugin”到
“Adobe Photoshop CC 2015/Plug-ins/Generator”文件夹中粘贴。
2、面板：
从Finder菜单中，单击“Go> Go to Folder ...”，键入“〜/ Library / Application Support / Adobe / CEP / extensions”，然后单击Go。解压并拷贝“io.zeplin.photoshop-panel”到文件夹中粘贴。
现在，当你重新启动你的Photoshop，你会看到在菜单中Zeplin面板往上顶：窗口>扩展> Zeplin

步骤二：
注册zeplin迭代帐号，邀请项目人员。

打开zepelin官网：https://www.zeplin.io/
点击菜单栏的sign up free进入注册页面。

首先要申请三个账号：

iOS一个，因为ios的单位是pt，导出的切图是3张图；(x,@2x,@3x)

andriod一个，因为andriod的单位是dp，导出的切图是5张图(mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi)
以上两个供设计师使用，用做上传文件迭代管理。

开发一个，供iOS,andriod,前端开发人员使用。

Tips：
Email建议用团队统一注册的账号并归档，不建议用个人的qq邮箱；
Username建议结合项目名称，方便好记即可，当然如果想用QQ,邮箱或个人生日也可以，你开心就好（曾经我用导师建的账号，结果不知不觉记住了导师的QQ&出生年月日，哈哈）

其次，登录你刚申请的账号，进入首页点击create，选择你要创建的项目，例如iOS；

第三，选择画板尺寸，建议选择1x（前提是sketch作图时也是用1x做的，也就是375*667）；如果是用ps做的，一般选择2x，也就是750*1334）

第四，给这个项目命名并邀请项目人员加入

命名建议：项目名＋版本号＋客户端，例如：VUE-V1.2(iOS)
Density:你刚才选择的画板尺寸，例如:1x
Web app:复制网址并提供账号和密码给开发，开发网页端打开即可查看标注＋导出切图。
invite项目成员加入，建议设计师用一个账号，开发用一个账号。名字下面带有Owner的才有上传修改文件的权限，避免非设计人员误删文件。

Tips：
由于一个账号只能免费创建一个项目，而单个项目不能满足快速迭代的需求。
因此，有两种解决方案：
1、只需申请一个账号，登录官网购买，根据自己的需求选择对应的服务。一般选择（25美元／月，创建8个项目），完全可以满足iOS&andriod的迭代需求。
2、申请多个账号

建议大家有能力的还是选择购买，支持一下zeplin（毕竟为设计师做了这么大的贡献）。然而楼主因为各种原因，默默的选择了方案二，申请了7个账号（6个设计，1个开发）为了降低沟通成本，减少开发哥哥的记忆负担，我把每个对应的设计账号邀请开发账号加入，最后开发只要登陆一个账号，就可以看到所有迭代版本的设计图，方便很多吧！

Tips：
建议web端单独建一个项目文件上传，不要和ios的一起。虽然图是共用的，都有3个倍率的图，但是web端可以支持一键导出代码，把这个小诀窍告诉前端，可可大大减少前端工作量。顺便，让前端请你粗个饭吧，哈哈！

步骤三：
把sketch或ps里的文件导出到zeplin

当你在sketch里完成设计稿时，你只需要再做两个操作，就可以成功的和切图标注say goodbye了。
1、找到界面里需要切图的地方，选择切片工具或者快捷键s，并把切片的虚框和对应要切片的图层放到一个组。然后选中切片的虚框，在右上角的切片属性里设置切片大小并选中export group contents only,这一步很重要，不然到时候开发导出的切图会有背景。

2、选中切片后的画板(支持多个同时选），点击菜单plugins—zeplin—export selected artboard或者快捷键“⌘+E”,上传成功后屏幕右上方会弹出一个export completed的提醒。

当你做完这三步曲后，你只要复制一个项目网址给到开发。开发哥哥打开对应的界面，哪里需要点哪里。单击即可看到对应字体的属性，边距，还支持一键导出代码，对比一下之前标注＋切图的工作模式，是不是方便了很多？

终于可以从枯燥的体力活中解放出来，再也不用跟开发扯皮或者一对一的去调整界面了，想想就很激动，终于可以多留出点时间学（ba)习(mei)了。以上是结合项目迭代的经验分享，在使用过程中欢迎小伙伴们多多交流和分享～

关于zeplin使用的几个疑问：

1、切图的图标没有点击态？
答：方法一：可以在单个文件下面加长一条，新增一些图标点击态；方法二：建立一个设计规范，把整个app的图标控件整理，方便开发统一调用（楼主用的是这个）。

2、想对对设计稿进行备注怎么办？
答：选中需要备注的图层，“⌘+鼠标左键”，即可弹出备注浮层。

3、为什么切片的预览图和实际导出的图不一样，而且尺寸大小不一致？
答：切片一定要放在图片的上方且切片命名不要重复，图片的XY轴位置不能出现小数点。

4、zeplin网址打开网页太慢怎么办？

答：把客户端的安装包给开发，打开速度提升100%。

附件：

PS导出zeplin官方视频教程：https://www.youtube.com/watch?v=0cVbzq-Q43M

Sketch导出zeplin 官方视频教程：https://www.youtube.com/watch?v=o9kOpAaDpQU

zeplin ps面板&插件版（附件下载）

windows版：zeplin客户端&ps插件下载

网盘地址：https://pan.baidu.com/s/1pLs4Nj1

密码：kjeq

mac版：zeplin客户端&sketch插件下载

网盘地址：https://pan.baidu.com/s/1c1LHpHu

密码：ivxh

此文转载于 http://www.ui.cn/detail/151088.html

此次转载仅作学习、记录使用，如有侵权敬请告知，即删；

猿类必备：Zeplin 用法介绍相关推荐

Scanner类的简单用法介绍！
Scanner是Java中的一个新特征,Java程序员可以通过Scanner类来获取用户的输入,帮助程序员接收从键盘输入的数据,对于程序员而言非常有帮助.当程序需要从键盘获取用户输入的命令或数据时,例 ...
CC#中List用法介绍详解学习通http://www.bdgxy.com/roundWorker类用法总结学习通http://www.bdgxy.com/
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 表格制作excel教程h ...
CLKing31----------------------------CRect类用法介绍
CRect类用法介绍凊晨 2013-10-08 21:15:37 13216 收藏 14 分类专栏: 控件 MFC C++ MFC [转]CRect类是MFC的常用类,十分基础,故整理出来以供新 ...
Scanpy(一)AnnData数据结构与一些API用法介绍
目录 Scanpy简介与安装 AnnData AnnData的结构 h5ad:AnnData的写入和读取 Scanpy中一些常用api的用法介绍 sc.pp.filter_cells sc.pp.fi ...
predicate java_java8中predicate的用法介绍（代码示例）
本篇文章给大家带来的内容是关于java8中predicate的用法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 传递代码我们首先看一个例子,假设你有一个 Appl ...
php simpledateformat,Java中SimpleDateFormat的用法介绍（代码示例）
本篇文章给大家带来的内容是关于Java中SimpleDateFormat的用法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.为什么要使用SimpleDateFo ...
python简单定义_python定义类的简单用法
python定义的类使用方法: 使用"obj=类名()"语句将类实例化,然后用"obj.函数名"就可以调用类里面定义的各种函数了示例如下: 将Bili类实例化 ...
python线程创建对象_Python线程下thread对象的用法介绍（附实例）
本篇文章给大家带来的内容是关于Python线程下thread对象的用法介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Thread对象 Thread类用于表示单独的控制 ...
Delphi WinExec ShellExec 用法介绍
2019独角兽企业重金招聘Python工程师标准>>> Delphi WinExec ShellExec 用法介绍在Windows程序设计中WinAPI也为我们提供了类似的函数,它 ...
Python Pillow(PIL)库的用法介绍(二)
Python Pillow(PIL)库的用法介绍(二) 在上一篇文章中介绍了Pillow库的一些基本用法,参考:https://blog.csdn.net/weixin_43790276/articl ...

猿类必备：Zeplin 用法介绍

猿类必备：Zeplin 用法介绍

猿类必备：Zeplin 用法介绍相关推荐

最新文章

热门文章