Zeplin教程(设计师端、开发端)
2018-01-12 本文已影响1967人
今晚会有雨
1 什么是Zeplin
Zeplin是一款为设计师和开发者提供设计图交接与沟通的高效平台，核心功能为标注。设计师可通过插件(目前仅支持PS和sketch)将已完成的设计图直接导入到Zeplin中，无需手动标注，开发者在Zeplin查看设计图时可通过鼠标点击设计图 显示相应位置的尺寸、色值、文字大小等信息。
实际效果图如下:
image
2 Zeplin的作用
- 对于设计师来说:
不用做标注，省很多事，也不需要总担心标注漏了什么，程序员又来问来问去 - 对于开发者来说:
不需要费心将标注的px换算成自己需要的尺寸，也不用担心设计师标注漏了什么
3 注册并验证Zeplin账户，下载安装客户端
3.1 打开Zeplin官网(https://zeplin.io/)
image
3.2 注册账户
image
3.3 去邮箱接受验证邮件，并激活账户(可能会被误认为辣鸡邮件)、
image
3.4 下载并安装客户端(windows或mac)
image
4 操作教程
如果你是码农，请直接跳到开发端即可，如果你是设计师呢？恭喜你，需要全部看完！
4.1 设计师端(Photoshop版)
4.1.1 打开并登录客户端
4.1.2 安装PS导出插件(需先关闭PS)
image
image
4.1.3 新建Zeplin项目
image
image
image
4.1.4 在Zeplin项目中邀请开发者参与
image
4.1.5 从PS中导出设计图到Zeplin
- 首先，我们需要确保ps中已经安装好了zeplin插件，我们可以在窗口，扩展功能中看到
- 然后，我们打开一个psd文件，打开zeplin插件，可以看到说明，是将画板导入到zeplin
- psd中默认是以图层的形式呈现的，我们需要先将图层转换成画板，先选中所有的图层（按住shift键，分别选中第一个图层和最后一个图层），右键-来自图层的画板。
- 这样，软件会提示我们即将从图层新建画板，可以为画板重命名，定义高度和宽度，我们直接点击确定即可。
- 此时选中画板，Zeplin面板就会显示这个黄色的按钮，点击按钮会提示你选择要导入到哪个Zeplin项目中(勾选下方的蓝色框会覆盖更新相同命名的画板)，点击“import”即可开始上传，然后等待上传完成即可。
4.2 开发端
4.2.1 打开并登录客户端
4.2.2 等待参与的Zeplin项目同步更新完成
4.2.3 刷新一次项目
image
4.2.4 查看数值尺寸与切图
5 注意事项
免费版账户仅能同时存在一个项目，设计师可注册多个设计师账户+1个公用的开发者账户，设计师账户创建的项目均邀请公用账户参加。
