Zeplin：前端與設(shè)計(jì)協(xié)同工作專用工具

Mac玩兒法編輯部 — Sat, 12 Sep 2015 01:35:25 +0000

上學(xué)時(shí)在政治課上經(jīng)常聽老師說，隨著社會生產(chǎn)力的不斷進(jìn)步，社會分工也會逐漸細(xì)化，各行各業(yè)都會衍變出更多新的工種，對于傳統(tǒng)企業(yè)管理者來說如何高效管理龐大的團(tuán)隊(duì)是個(gè)值得研討的課題（他們更迷信開會或者使用笨重而低效的 OA 系統(tǒng)），可對于互聯(lián)網(wǎng)企業(yè)來說這都不叫事兒，使用 Slack 等協(xié)同工具可以讓一個(gè)創(chuàng)業(yè)團(tuán)隊(duì)在短時(shí)間內(nèi)磨合起來，同時(shí)也適合大企業(yè)內(nèi)部的各個(gè)項(xiàng)目團(tuán)隊(duì)。

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

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

設(shè)計(jì)師與開發(fā)者的福音

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

基礎(chǔ)使用介紹

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

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

標(biāo)注與 Style Guide

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

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

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

軟件的下載與定價(jià)

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