如果有一天，設計師只需專注界面設計，不需再做切圖和標注的工作；如果有一天，工程師只需專注功能框架建設，不需再花太多心思在標注UI上面；沒有如果，這一天真的來了。。。

隨著sketch的普及，國內(nèi)外很多項目團隊都陸續(xù)用起了sketch＋zeplin的開發(fā)模式。不過話說回來，sketch真的有那么好用嗎？很多小伙伴們表示用ps好幾年了，要我重新學一個軟件，臣妾做不到啊！～            

     

開篇前先回答兩個基本問題
1、sketch支持windows嗎？
答：不好意思，目前沒有！設計師為了提升工作效率，就算吃土一兩個月也要買臺mac。不過windows用戶除了裝mac虛擬機外，現(xiàn)在ps也支持zeplin插件了，只要安裝個插件，沒有mac也照樣可以任性的告別切圖和標注。
 
2、zeplin支持windows嗎？
答：真夠意思，這個必須有！不久前只有mac版，不過zeplin團隊怎么會放棄windows那么大塊的市場呢。真是喜大普奔，現(xiàn)在zeplin也支持windows了，從此開發(fā)哥哥再也不會抱怨網(wǎng)頁端的zeplin打開速度超級慢了。

好了，廢話不多說，直接進正題。

首先總結一下sketch＋zeplin的優(yōu)勢：
1、sketch支持多畫板，便于同時預覽，占用內(nèi)存較ps小很多；
2、sketch支持導出flinto，便于制作交互動效原型；
3、zeplin解放設計師的雙手，從此告別切圖和標注；
4、zeplin降低工程師的溝通成本，提高設計還原度。

     那么問題來了，我沒有mac怎么破？小伙伴們別灰心，現(xiàn)在ps也支持zeplin了，擦亮雙眼往下看，只需三步曲，解放雙手指日可待。

步驟一：
安裝軟件＋zeplin插件

Mac用戶：安裝sketch；Zeplin.app；zeplin-sketch插件
直接解壓安裝即可
Windows用戶：安裝Photoshop CC2015；Zeplin.app；zeplin－ps插件&面板

如何安裝的Photoshop插件？
通常，當你啟動Zeplin，插件應自動安裝。但是，如果你有問題，請確保你有最新的Photoshop CC2015年的版本。兩件需要安裝，插件和面板。

安裝教程：
1、插件
解壓并拷貝“io.zeplin.photoshop-plugin”到
   “/Applications/Adobe Photoshop CC 2015/Plug-ins/Generator”文件夾中粘貼。
2、面板：
從Finder菜單中，單擊“Go> Go to Folder ...”，鍵入“?/ Library / Application Support / Adobe / CEP / extensions”，然后單擊Go。解壓并拷貝“io.zeplin.photoshop-panel”到文件夾中粘貼。
現(xiàn)在，當你重新啟動你的Photoshop，你會看到在菜單中Zeplin面板往上頂：窗口>擴展> Zeplin

步驟二：
注冊zeplin迭代帳號，邀請項目人員。 

打開zepelin官網(wǎng)：https://www.zeplin.io/
點擊菜單欄的sign up free進入注冊頁面。

首先要申請三個賬號：

iOS一個，因為ios的單位是pt，導出的切圖是3張圖；(x,@2x,@3x)

andriod一個，因為andriod的單位是dp，導出的切圖是5張圖(mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi)
以上兩個供設計師使用，用做上傳文件迭代管理。

開發(fā)一個，供iOS,andriod,前端開發(fā)人員使用。

Tips：
Email建議用團隊統(tǒng)一注冊的賬號并歸檔，不建議用個人的qq郵箱；
Username建議結合項目名稱，方便好記即可，當然如果想用QQ,郵箱或個人生日也可以，你開心就好（曾經(jīng)我用導師建的賬號，結果不知不覺記住了導師的QQ&出生年月日，哈哈）

其次，登錄你剛申請的賬號，進入首頁點擊create，選擇你要創(chuàng)建的項目，例如iOS；

第三，選擇畫板尺寸，建議選擇1x（前提是sketch作圖時也是用1x做的，也就是375*667）；如果是用ps做的，一般選擇2x，也就是750*1334）

第四，給這個項目命名并邀請項目人員加入

命名建議：項目名＋版本號＋客戶端，例如：VUE-V1.2(iOS)
Density:你剛才選擇的畫板尺寸，例如:1x
Web app:復制網(wǎng)址并提供賬號和密碼給開發(fā)，開發(fā)網(wǎng)頁端打開即可查看標注＋導出切圖。
invite項目成員加入，建議設計師用一個賬號，開發(fā)用一個賬號。名字下面帶有Owner的才有上傳修改文件的權限，避免非設計人員誤刪文件。

Tips：
由于一個賬號只能免費創(chuàng)建一個項目，而單個項目不能滿足快速迭代的需求。
因此，有兩種解決方案：
1、只需申請一個賬號，登錄官網(wǎng)購買，根據(jù)自己的需求選擇對應的服務。一般選擇（25美元／月，創(chuàng)建8個項目），完全可以滿足iOS&andriod的迭代需求。
2、申請多個賬號

建 議大家有能力的還是選擇購買，支持一下zeplin（畢竟為設計師做了這么大的貢獻）。然而樓主因為各種原因，默默的選擇了方案二，申請了7個賬號（6個 設計，1個開發(fā)）為了降低溝通成本，減少開發(fā)哥哥的記憶負擔，我把每個對應的設計賬號邀請開發(fā)賬號加入，最后開發(fā)只要登陸一個賬號，就可以看到所有迭代版 本的設計圖，方便很多吧！

Tips：
建議web端單獨建一個項目文件上傳，不要和ios的一起。雖然圖是共用的，都有3個倍率的圖，但是web端可以支持一鍵導出代碼，把這個小訣竅告訴前端，可可大大減少前端工作量。順便，讓前端請你粗個飯吧，哈哈！

步驟三：
把sketch或ps里的文件導出到zeplin

當你在sketch里完成設計稿時，你只需要再做兩個操作，就可以成功的和切圖標注say goodbye了。
1、 找到界面里需要切圖的地方，選擇切片工具或者快捷鍵s，并把切片的虛框和對應要切片的圖層放到一個組。然后選中切片的虛框，在右上角的切片屬性里設置切片 大小并選中export group contents only,這一步很重要，不然到時候開發(fā)導出的切圖會有背景。

2、選中切片后的畫板(支持多個同時選），點擊菜單plugins—zeplin—export selected artboard或者快捷鍵“?+E”,上傳成功后屏幕右上方會彈出一個export completed的提醒。

當你做完這三步曲后，你只要復制一個項目網(wǎng)址給到開發(fā)。開發(fā)哥哥打開對應的界面，哪里需要點哪里。單擊即可看到對應字體的屬性，邊距，還支持一鍵導出代碼，對比一下之前標注＋切圖的工作模式，是不是方便了很多？

       終于可以從枯燥的體力活中解放出來，再也不用跟開發(fā)扯皮或者一對一的去調(diào)整界面了，想想就很激動，終于可以多留出點時間學（ba)習(mei)了。以上是結合項目迭代的經(jīng)驗分享，在使用過程中歡迎小伙伴們多多交流和分享～

關于zeplin使用的幾個疑問：

1、切圖的圖標沒有點擊態(tài)？
答：方法一：可以在單個文件下面加長一條，新增一些圖標點擊態(tài)；方法二：建立一個設計規(guī)范，把整個app的圖標控件整理，方便開發(fā)統(tǒng)一調(diào)用（樓主用的是這個）。

2、想對對設計稿進行備注怎么辦？
答：選中需要備注的圖層，“?+鼠標左鍵”，即可彈出備注浮層。

3、為什么切片的預覽圖和實際導出的圖不一樣，而且尺寸大小不一致？
答：切片一定要放在圖片的上方且切片命名不要重復，圖片的XY軸位置不能出現(xiàn)小數(shù)點。

4、zeplin網(wǎng)址打開網(wǎng)頁太慢怎么辦？

答：把客戶端的安裝包給開發(fā)，打開速度提升100%。

附件：

PS導出zeplin官方視頻教程：https://www.youtube.com/watch?v=0cVbzq-Q43M  

Sketch導出zeplin 官方視頻教程：https://www.youtube.com/watch?v=o9kOpAaDpQU

windows版：

附件下載

mac版：zeplin客戶端&sketch插件下載

網(wǎng)盤地址：https://pan.baidu.com/s/1c1LHpHu

密碼：ivxh