Zeplin for mac

Zeplin for mac是一款為設(shè)計(jì)師和工程師提供產(chǎn)品原稿交接與溝通的高效平臺(tái)，用戶可對(duì)產(chǎn)品進(jìn)行標(biāo)注、Style Guide 注釋，還提供了簡(jiǎn)單的團(tuán)隊(duì)協(xié)同工作功能，通過(guò)插件，設(shè)計(jì)師可將Sketch的Artboard單獨(dú)或批量導(dǎo)入Zeplin的Project里供開(kāi)發(fā)者做業(yè)務(wù)功能與前端交互的實(shí)現(xiàn)。

軟件介紹：

Zeplin面向的用戶是設(shè)計(jì)師和前端（Web、Mobile）工程師，相當(dāng)于做的是中間橋梁這一塊，核心功能為標(biāo)注、Style Guide、備注文檔與簡(jiǎn)單的團(tuán)隊(duì)協(xié)作。這塊軟件由四名在伊斯坦布爾的開(kāi)發(fā)者制作，目前僅支持 Sketch，但是 PS 也已經(jīng)出現(xiàn)在官網(wǎng)，應(yīng)該也快了。

在使用 Zeplin 之前，最早是使用馬克曼進(jìn)行標(biāo)注的，也就是直接在輸出效果圖上量尺寸；使用 Sketch 插件 Measure 之后，可以在畫板中生成尺寸標(biāo)注信息，導(dǎo)出標(biāo)注圖提供給開(kāi)發(fā)同學(xué)使用。無(wú)論是馬克曼還是 Measure，最后的交付物是一致的，大概如下圖所示：

這樣的標(biāo)注圖有個(gè)問(wèn)題，就是已經(jīng)破壞了原本的視覺(jué)效果圖，標(biāo)注的信息一定會(huì)對(duì)原設(shè)計(jì)稿形成遮擋，因此一般效果圖和標(biāo)注圖要分開(kāi)給，開(kāi)發(fā)也經(jīng)常需要在兩個(gè)圖之間切換，圖片管理不太方便。如果你的設(shè)計(jì)稿同時(shí)要適配多個(gè)尺寸，還要要輸出多份標(biāo)注圖，交付給多個(gè)開(kāi)發(fā)同學(xué)。更重要的是，如果對(duì)頁(yè)面進(jìn)行了迭代修改，就需要重新標(biāo)注、重新輸出、重新交付，即開(kāi)發(fā)與設(shè)計(jì)之間的聯(lián)結(jié)是斷的，每次都要人工把這個(gè)缺口接上。

另外，如果時(shí)間有允許，設(shè)計(jì)師還需要制作 Style Guide，一方面是為了方便切圖，另一方面是為后期迭代做好準(zhǔn)備。Style Guide 大概要包含的是字體信息、色彩信息、icon 樣例、常用間距等內(nèi)容，如果自己制作的話，大概類似于是這樣：

Zeplin 主要就是為了解決上述問(wèn)題的，使用它之后，可以在 Sketch 中一鍵導(dǎo)入 Artboard，在設(shè)計(jì)師做好圖層管理（命名、分組）的前提下，它可以自動(dòng)生成標(biāo)注信息（并且可以標(biāo)注為 pt 或 dp），允許添加注釋形成類 prd 文檔，并且自動(dòng)提取 Style Guide，同時(shí)還允許添加項(xiàng)目組成員，提供給團(tuán)隊(duì)組查看項(xiàng)目。

這是項(xiàng)目組管理界面，還有關(guān)于項(xiàng)目的簡(jiǎn)單統(tǒng)計(jì)，比如多少頁(yè)屏幕、多少色彩和多少注釋等。

Guideline，可以承載字體、顏色。

圖片界面，當(dāng)鼠標(biāo)不懸浮在某個(gè)元素上時(shí)，可以查看整個(gè)界面的效果圖。右側(cè)可以看到所有使用的顏色列表。當(dāng)需要查看標(biāo)注時(shí)，點(diǎn)擊對(duì)應(yīng)的元素即可：

這樣的話，設(shè)計(jì)師和工程師就可以無(wú)縫銜接了，團(tuán)隊(duì)的開(kāi)發(fā)同學(xué)都說(shuō)這個(gè)工具太牛了：）

缺點(diǎn)的話，目前有一些體驗(yàn)上的小問(wèn)題。比如圖片是存儲(chǔ)在境外服務(wù)器上的，，一開(kāi)始就是因?yàn)楸粔Φ脑�因多次登錄不上。其次是產(chǎn)品本身還是 Beta 版，處于邀請(qǐng)碼階段，所以肯定會(huì)有一些 bug 存在，像全屏之后右上角沒(méi)有常用的放大縮小關(guān)閉按鈕，還有 Sketch 插件一鍵導(dǎo)入快捷鍵經(jīng)常失敗等。

使用方法：

基礎(chǔ)使用介紹

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

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

標(biāo)注與Style Guide

作為項(xiàng)目人員，你可以隨時(shí)通過(guò)軟件和 Web 版進(jìn)入 Project 對(duì)原稿進(jìn)行標(biāo)注（添加 Note，與對(duì)方就產(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ā)出邀請(qǐng)。而如果當(dāng)前工作環(huán)境不是 Mac，你也仍然能通過(guò) Web App 參與工作。