說到前端產(chǎn)品開發(fā)，開發(fā)者與設計師之前交接原型產(chǎn)品更多的還是當面聊，不停的開小組會議，產(chǎn)品經(jīng)理、設計師、開發(fā)者三個人會在小屋里就一個按鈕討論一下午。即時有 Slack 這樣的服務，這兩位仍然需要當面把事情說清楚，設計妹紙會教開發(fā)者大葛格用 Sketch，告訴他哪個層有啥動作，哪個文字會變換尺寸。但是，就像前面我說的，在企業(yè)不斷追求高效生產(chǎn)的目標帶動下，這中間又催發(fā)了一個新工種來代替無休止的討論，只不過這個工種由一款軟件（也是服務）來擔任，它就是：Zeplin。

Zeplin，由 Zeppelin 一詞變化而來（貌似許多產(chǎn)品都喜歡用齊柏林飛艇來做 Logo），由四名伊斯坦布爾的才子設計，是一款為 Designer 和 Developer 提供產(chǎn)品原稿交接與溝通的高效平臺，用戶可對產(chǎn)品進行標注、Style Guide 注釋，還提供了簡單的團隊協(xié)同工作功能，通過插件，設計師可將 Sketch（Mac 平臺最著名的前端設計軟件）的 Artboard 單獨或批量導入 Zeplin 的 Project 里供開發(fā)者做業(yè)務功能與前端交互的實現(xiàn)。目前這款軟件僅支持 Sketch，另一款主流大將 Photoshop 據(jù)稱也在支持計劃中，但目前仍未放出更新版本。

設計師與開發(fā)者的福音

許多設計師初次接觸 Zeplin 都表示驚呆了，“終于可以從枯燥的體力活中解放出來，再也不用跟開發(fā)扯皮或者一對一的去調(diào)整界面了”，當你把稿子導入 Zeplin 后，受邀請進入 Project 的開發(fā)者可以直觀的看到色值，元素間距，交互流程，區(qū)域大小，文字大小及顏色，注意看下圖，在 Dashboard 右邊欄 Colors 與 Assests 這兩欄，可以讓對方清楚的知道配色值（RGB），另外在讓開發(fā)者查看分層元素時，在 Sketch 里將層設置為 “Exportable” 即可，在設計師做好圖層管理（命名、分組）的前提下，它可以自動生成元素尺寸?間隔距離的標注信息（并且可以標注為 pt 或 dp）。

基礎使用介紹

Zeplin 對于專業(yè)人員來說很好上手，創(chuàng)建一個 Project，你可以看到軟件支持 Android、iOS、Web 三種工作環(huán)境，另外開發(fā)者還提供可實驗性質(zhì)的 Mac OS X 軟件開發(fā)環(huán)境。

此時到 Sketch 里找到 Menubar – Plugins 目錄，如果你安裝了 Zeplin 專為 Sketch 開發(fā)的插件，可以直接在插件目錄里選擇“Export Selected Artboards”將文件導入 Zeplin，這個速度很快。

標注與 Style Guide

作為項目人員，你可以隨時通過軟件和 Web 版進入 Project 對原稿進行標注（添加 Note，與對方就產(chǎn)品進行溝通），設計師可以制作 Style Guide，包括字體樣式、色彩構(gòu)成、Icon 樣例、常用間距等內(nèi)容。

高效的協(xié)同工作機制

作為一款項目組協(xié)同工作軟件，Zeplin 可以讓團隊成員一共參與整個原稿的交流工作，項目創(chuàng)建者只需輸入其他同事的郵箱或 Zeplin 賬戶名即可發(fā)出邀請。而如果當前工作環(huán)境不是 Mac，你也仍然能通過 Web App 參與工作。

軟件的下載與定價

這么優(yōu)秀的協(xié)同工具要說完全免費那是不現(xiàn)實的，除了提供嘗鮮的免費版只能創(chuàng)建一個 Project 外，Starter 與 Growing Business 的套餐還是很有競爭力的，其中后者可以同時運行八個 Project，這兩款付費套餐的年費單月價格分別為每月 13 刀與 22 刀，與普通的月付相比優(yōu)惠 10%，對于創(chuàng)業(yè)團隊也來說，要比 Markly（39.99刀）、Invision、Lucidchart 相對實惠一些。

最后附上 Zeplin 在墻內(nèi)的下載地址，配合 Sketch 導出 Artboard 的插件