標籤：

Zeplin 的使用體驗如何？

01-26

Zeplin

Zeplin 面向的用戶是設計師和前端（Web、Mobile）工程師，相當於做的是中間橋樑這一塊，核心功能為標註、Style Guide、備註文檔與簡單的團隊協作。這塊軟體由四名在伊斯坦布爾的開發者製作，目前僅支持 Sketch，但是 PS 也已經出現在官網，應該也快了。

在使用 Zeplin 之前，最早是使用馬克曼進行標註的，也就是直接在輸出效果圖上量尺寸；使用 Sketch 插件 Measure 之後，可以在畫板中生成尺寸標註信息，導出標註圖提供給開發同學使用。無論是馬克曼還是 Measure，最後的交付物是一致的，大概如下圖所示：

這樣的標註圖有個問題，就是已經破壞了原本的視覺效果圖，標註的信息一定會對原設計稿形成遮擋，因此一般效果圖和標註圖要分開給，開發也經常需要在兩個圖之間切換，圖片管理不太方便。如果你的設計稿同時要適配多個尺寸，還要要輸出多份標註圖，交付給多個開發同學。更重要的是，如果對頁面進行了迭代修改，就需要重新標註、重新輸出、重新交付，即開發與設計之間的聯結是斷的，每次都要人工把這個缺口接上。

另外，如果時間有允許，設計師還需要製作 Style Guide，一方面是為了方便切圖，另一方面是為後期迭代做好準備。Style Guide 大概要包含的是字體信息、色彩信息、icon 樣例、常用間距等內容，如果自己製作的話，大概類似於是這樣：

Zeplin 主要就是為了解決上述問題的，使用它之後，可以在 Sketch 中一鍵導入 Artboard，在設計師做好圖層管理（命名、分組）的前提下，它可以自動生成標註信息（並且可以標註為 pt 或 dp），允許添加註釋形成類 prd 文檔，並且自動提取 Style Guide，同時還允許添加項目組成員，提供給團隊組查看項目。

這是項目組管理界面，還有關於項目的簡單統計，比如多少頁屏幕、多少色彩和多少注釋等。

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

圖片界面，當滑鼠不懸浮在某個元素上時，可以查看整個界面的效果圖。右側可以看到所有使用的顏色列表。當需要查看標註時，點擊對應的元素即可：

這樣的話，設計師和工程師就可以無縫銜接了，團隊的開發同學都說這個工具太牛了：）

缺點的話，目前有一些體驗上的小問題。比如圖片是存儲在境外伺服器上的，不管是登錄還是使用最好都能自帶梯子翻牆（使用好像並不需要翻牆，我都可以，但是註冊登錄一定要），一開始就是因為被牆的原因多次登錄不上。其次是產品本身還是 Beta 版，處於邀請碼階段，所以肯定會有一些 bug 存在，像全屏之後右上角沒有常用的放大縮小關閉按鈕，還有 Sketch 插件一鍵導入快捷鍵經常失敗等。

這個開發團隊的效率並不是特別高，我沒記錯的話這個軟體去年很早就已經開始放出消息了，做了大半年快一年現在還是 Beta 版，PS 版說是快了，具體什麼時候能上也是個未知數。不過團隊的設計、風格還是很合我口味的，註冊之後很快還發郵件過來詢問使用感受，希望他們加快速度。

zeplin這個軟體我只恨它沒有出現在苦逼的我教開發用sketch之前。

所以這裡很多的使用都是以我們的開發是會用sketch為背景的。同樣是兩個開發。ios開發死活都沒辦法登錄，一直說密碼錯誤，反覆倒騰過很多次，最終放棄了。所以現在ios還是沒用上zeplin,安卓開發已經愉快的用上了。

對於我們這樣的創業公司來說，時間成本當然是越小越好，所以我現在給出的設計稿都是沒有標註的，開發是直接在sketch 里看的，包括一些色值，區域大小，文字大小及顏色等等。這種情況在對象沒有被編組的時候，很容易操作，但是如果有分組的話，開發哥哥一開始會迷茫選擇哪個對象，曾經就出現過我畫了一個150px的正方形，然後用它做mask，上面是一張180px的圖片，結果開發點擊的時候是點到了180px,於是他就用180的寫了程序。如果用zeplin，就很好的解決了這個問題。真正做到了想看哪裡點哪裡。特別是對於文字來說，直接能看色值，而不是像sketch一樣需要點擊才可以。

這個是sketch需要的讀色。

這個是我模擬xhdpi的gmail跟自家軟體的實際堆稿。當前選擇的是您有一則，可以清楚的看到字體的文本框高度，及字體的sp，還有色號。我們現在安卓開發是根據xhdpi開發，所以相對來說，px跟dp的轉換簡單一點。這裡順帶提一下在android模式下，提供mdpi,hdpi,xhdpi,xxhdpi的選擇，可以根據實際需要選擇，這個跟skech里的sketch measure插件里，改變Design Resolution雖說效果一致，但是sketh measure需要逐個去標註，並沒有辦法做到跟zeplin一樣，想看哪裡點哪裡，這也是我極力推薦安卓開發使用zeplin的原因。

對於設計師來說zeplin是一種怎麼樣的存在？

可以從上圖看出，我在對安卓進行現有界面的比稿，安卓機子千變萬化，對於文字型應用來說，排版顯得尤為重要。但是說實在，我沒有什麼代碼背景，而且每次換算起來都特別頭疼，在zeplin出現以前，跟開發到後面核對ui都要花很多時間，「這個標題再調整到17sp看看「 」不行，大了，16sp看看。 而且還要綜合比對各種機子上的效果，特別是小米，小米字體本身偏粗，具體的可以看下圖：

這個是根據安卓已經開發好的，以及gmail里的實際進行模擬，原諒我的圖堆的亂七八糟。設計稿里按照ios設計的標題字體是30px,開發實現的是17sp，但經過模擬比對，給了他一個具體的15sp，發現才是最合適的。（這裡犯了傻逼，繞了大圈子，在xhpd下，2px=1dp，所以直接除以2就好了）

圖裡灰色的矩形，也是我對距離的測量，跟早前的開發合作的時候，由於標註的都是按照1x標註的，所以換算沒遇到什麼問題，換了一個開發，按照xh，我就腦子短路了。所以就這點來說，他可以幫助設計師很省心省力的換算。盡最大可能的讓安卓上保持與ios保持一致的閱讀體驗。

2.規則管理的規範化。

在沒有zp的時候，對於這種，一般都會出一個視覺規範，在視覺規範第一頁表明設計稿中使用的字體顏色及大小規則。zp目前只有顏色跟字體，而且tag現在不支持中文與空格。

zp支持邀請共享，這樣可以在稿中打post。這種適合大團隊，對於一個坐在安卓跟ios開發中間的設計師來說，可能還是直接說更快一點。哈哈哈。

zp的坑

這個真是遇到非常麻煩的問題，一個是導入錯誤，而且概率還挺高，導致我們的安卓開發也要放棄使用，對於他來說，可能還是直接在sketch里看，或者口頭問我更快更方便。

還有一個是導入之後一片空白，但是又能顯示區域。

zp一些動人的小細節。每個項目都會自動產品一個圖標，用來區分項目。

載入較慢的時候，會出現looks like a big file這樣的小文字。感覺挺貼心。

待補充。。。

很好。現在團隊設計師主動切換 Sketch，前端要求要自己用 Zeplin 看標註。產品一枚，安利成功。

用 Zeplin 是被逼出來的。

團隊的設計資源還不行，我像個變態一樣不給設計過稿，前端會憂傷地吐苦水：UI Kit 混亂、標註錯誤、無效標註、設計稿版本管理不到位一麻子問題。

在某次版本發布因為設計交付延誤推遲了一整周后（被吐槽說設計稿沒有原型好看的時候），擼著袖子自己上了。

我：我把原型細節完善了一下，你用這個工具自己看標註做行不...( &>﹏&<。)～

前端：哦。( ′? ??")

前端：啊啊啊好贊好贊我就要這樣子的 &<(‵▽′)&>

我：╮(－_－)╭

有幾點真的很贊：

1. 版本管理

2. 標註科學

3. 自動換算：原來會耗費很多 UI 和前端時間成本的地方

4. 規範管理：

5. 支持筆記：

6. 製造一種我可以做去設計了的「幻覺」，PRD 說明直接寫在 artboard 里，前端寫頁面再也不用幾版設計稿需求切來換去地查看啦。

同樣的團隊資源，慢慢覺得狀況沒之前感受那麼糟了。大不了自己來唄，有退路有辦法，做事心態就會坦蕩些。工具我愛你。

利益相關：魅族旗下智能硬體分享平台 - 魅玩幫 http://wan.meizu.com 產品經理。Zeplin 付費用戶。

1. 設計不用做標註，真的省很多事

2. 有些開發反饋不習慣，review UI 的時候出問題才「被迫」打開

3. 免費版只能開一個組，只能往一塊兒堆或者不停換圖，勉強夠用吧

4. 同步速度比較慢，網不是那麼好的時候光導出幾張圖就等很久

5. 自動提取切圖的功能不太到位，經常識別錯，切圖基本靠自己

設計和開發都用 Mac 的情況下還是強烈推薦使用，畢竟比自己做標註好太多。實在不需要執著於 ps，用過 sketch 後，我除了修圖外都不開 ps 了……

今天剛剛接觸Zeplin，簡單點說，內心是無比激動的。終於找到了一款這樣的應用，絕對是對設計師程序員之間架起一座橋樑。

之前做UI用的ps和AI，換上mac之後接觸sketch，確實，方便快捷了很多，知道發現Zeplin之後，兩者搭配，絕了。

之前做標註，切圖啟示挺頭疼，尤其標註，總擔心標註漏了什麼，程序員又在問來問去。而在Z中，最主要的就是解決了這些問題。以後再也不用擔心被程序員問來問去了。

留下聯繫方式@咔咔-亞鈞 歡迎交流

發現一個zeplin中文版 - 藍湖， 功能還更強大，看起來

前面好多人說的很詳細了，但時間久了有些情況已經改變了，我補充一些目前Zeplin和另一個著名標註插件Sketch Measure的區別，給初學者一個參考看下是否符合自己的需求，當然最好還是自己試一下，反正註冊免費。

Zeplin：

  1. Zeplin註冊免費，只能保留一個Active項目，「STARTER」17刀／月，3個Active項目，「GROWING BUSINESS」26刀／月，12個Active項目。「ORGANIZATION」每個用戶6.75刀／月。
  2. 支持MAC的Sketch和PS，以及PC的PS。（最大的優點）
  3. 數據必須上傳到網路上，可以用客戶端查看也可以網頁查看，必須是註冊用戶。（很麻煩，有些公司不允許上傳就沒辦法了）
  4. 自動生成styleguide。（非常棒）
  5. 切圖需要查看相應頁面時，從切圖欄下載。（我用的並不多，也可能有其他方式）

PS：有一次優惠STARTER用戶免費，我就升級了。第二個月優惠截止自動續費，從我支付寶扣款，當時很憤怒，第二天收到郵件詢問滿意度，就回信說了自動扣費的事，然後就把錢退回來了。

Sketch Measure：

  1. 完全免費。
  2. 只支持MAC Sketch，但查看不受限制。
  3. 數據保存在本地（html文件），方便打包後發郵件，缺點是每次更新都要再發一遍，管理麻煩。
  4. 沒有Zeplin智能，沒有自動styleguide，但是有類似AssistorPS一樣的手動標註。有「顏色命名」但比styleguide差很多，希望以後能更新類似功能。
  5. 自動打包輸出切圖，支持iOS和Android的命名方式。

個人總結，Zeplin適合小型的團隊，還帶有一部分協作辦公的功能（留言和更新狀況），要求前端也能適應這種新的方式。Sketch Measure更傳統一些，本地文檔、打包切圖等等，更適合有自己辦公流程的大公司。

老是一片空白，要瘋了

就是各種卡卡卡

還是有點雞肋 舉個例子：沒有元素與元素直接的間距 只有距離邊框的距離 多個元素平排的時候就duang了~

剛上手zeplin的時候內心無比激動，再也不用一個一個標註了！

可是zeplin官網要翻牆才能打開，開發又是pc機，只能用在線的方式查看。然後開發不翻牆，我只能默默放棄zeplin回去繼續標註……

（zeplin的客戶端無需翻牆就可以登錄使用）

目前版本導入整個sketch項目未出現內容丟失或者相關的情況，一切是那麼的完美……

2015/05/08 補充

web頁面查看設計稿會出現面板為空，但是又有尺寸框的現象；

mac客戶端從sketch導入時經常失敗；

只能說這個軟體是建立在負責任、對UI有追求的設計與開發團隊之間。這樣一個個藏著要滑鼠hover的標註，估計最終開發還原一半的標註都木有。

我之前使用的是3個Active項目，今天不小心升級成12個Active項目了，扣了我信用卡錢，但是發現用不著啊，於是我就選擇回到了3個Active。

500多RMB啊！這個差價會給我退回來嗎？各位有誰知道！！！！

感覺下載更新速度真的是慢的要死，總是一片空白，刷新半天都沒什麼反應，不知道有木有人遇到相同的問題，有解決辦法……

我想問，導出的切圖怎麼單獨命名呢。。每張圖導出來都要手動再命名。

折騰了半天，windows10上面使用始終顯示Zeplin couldn"t upload this one to the cloud.

分頁阅读： 1 2