Zeplin:前端与设计协同工作专用工具

Zeplin

上学时在政治课上经常听老师说,随着社会生产力的不断进步,社会分工也会逐渐细化,各行各业都会衍变出更多新的工种,对于传统企业管理者来说如何高效管理庞大的团队是个值得研讨的课题(他们更迷信开会或者使用笨重而低效的 OA 系统),可对于互联网企业来说这都不叫事儿,使用 Slack 等协同工具可以让一个创业团队在短时间内磨合起来,同时也适合大企业内部的各个项目团队。

说到前端产品开发,开发者设计师之前交接原型产品更多的还是当面聊,不停的开小组会议,产品经理、设计师、开发者三个人会在小屋里就一个按钮讨论一下午。即时有 Slack 这样的服务,这两位仍然需要当面把事情说清楚,设计妹纸会教开发者大葛格用 Sketch,告诉他哪个层有啥动作,哪个文字会变换尺寸。但是,就像前面我说的,在企业不断追求高效生产的目标带动下,这中间又催发了一个新工种来代替无休止的讨论,只不过这个工种由一款软件(也是服务)来担任,它就是:Zeplin。

Zeplin,由 Zeppelin 一词变化而来(貌似许多产品都喜欢用齐柏林飞艇来做 Logo),由四名伊斯坦布尔的才子设计,是一款为 Designer 和 Developer 提供产品原稿交接与沟通的高效平台,用户可对产品进行标注、Style Guide 注释,还提供了简单的团队协同工作功能,通过插件,设计师可将 SketchMac 平台最著名的前端设计软件)的 Artboard 单独或批量导入 Zeplin 的 Project 里供开发者做业务功能与前端交互的实现。目前这款软件仅支持 Sketch,另一款主流大将 Photoshop 据称也在支持计划中,但目前仍未放出更新版本。

设计师与开发者的福音

许多设计师初次接触 Zeplin 都表示惊呆了,“终于可以从枯燥的体力活中解放出来,再也不用跟开发扯皮或者一对一的去调整界面了”,当你把稿子导入 Zeplin 后,受邀请进入 Project 的开发者可以直观的看到色值,元素间距,交互流程,区域大小,文字大小及颜色,注意看下图,在 Dashboard 右边栏 Colors 与 Assests 这两栏,可以让对方清楚的知道配色值(RGB),另外在让开发者查看分层元素时,在 Sketch 里将层设置为 “Exportable” 即可,在设计师做好图层管理(命名、分组)的前提下,它可以自动生成元素尺寸、间隔距离的标注信息(并且可以标注为 pt 或 dp)。

基础使用介绍

Zeplin 对于专业人员来说很好上手,创建一个 Project,你可以看到软件支持 Android、iOSWeb 三种工作环境,另外开发者还提供可实验性质的 Mac OS X 软件开发环境。

此时到 Sketch 里找到 Menubar – Plugins 目录,如果你安装了 Zeplin 专为 Sketch 开发的插件,可以直接在插件目录里选择“Export Selected Artboards”将文件导入 Zeplin,这个速度很快。

标注与 Style Guide

作为项目人员,你可以随时通过软件和 Web 版进入 Project 对原稿进行标注(添加 Note,与对方就产品进行沟通),设计师可以制作 Style Guide,包括字体样式、色彩构成、Icon 样例、常用间距等内容。

高效的协同工作机制

作为一款项目组协同工作软件,Zeplin 可以让团队成员一共参与整个原稿的交流工作,项目创建者只需输入其他同事的邮箱或 Zeplin 账户名即可发出邀请。而如果当前工作环境不是 Mac,你也仍然能通过 Web App 参与工作。

软件的下载与定价

这么优秀的协同工具要说完全免费那是不现实的,除了提供尝鲜的免费版只能创建一个 Project 外,Starter 与 Growing Business 的套餐还是很有竞争力的,其中后者可以同时运行八个 Project,这两款付费套餐的年费单月价格分别为每月 13 刀与 22 刀,与普通的月付相比优惠 10%,对于创业团队也来说,要比 Markly(39.99刀)、Invision、Lucidchart 相对实惠一些。

最后附上 Zeplin 在墙内的下载地址,配合 Sketch 导出 Artboard 的插件

Zeplin
评论