Zeplin —— 一款協(xié)同設(shè)計師、前端開發(fā)工程師、iOS、Android的工具，省去設(shè)計師很多切圖、標注的時間，讓設(shè)計師更專注設(shè)計本身，節(jié)約了很多精力。

功能介紹

想要把sketch里面的畫板導入zeplin之前，我們需要在zeplin里面建立一個項目，sketch的畫板就統(tǒng)統(tǒng)導入此項目，目前用的免費賬戶好像只允許用戶建立一個自己的項目，但可以同時加入其它人建立的項目。下面的Gif圖，建立了一個"zeplin introduce"的項目:

Zeplin - creat projec

1. 建立切片導入Zeplin

在sketch中有兩種方法建立切片導入zeplin

方法一：

給圖層對象建立symbol，在相應(yīng)頁面里全選symbol畫板，然后點擊在右下角點擊"Make exportable"，不用管切片規(guī)則，看見左側(cè)圖層上有切片圖標就可以了。

方法二：

在原圖層上直接畫出切片，一定要注意切片的命名，因為開發(fā)在zeplin下載的圖像文件名都是切片名稱。

但此種方法有個弊端，在漸變背景色圖層上切圖時，開發(fā)很難點中切片而是直接看到了漸變色值，以為沒有切片，建議有條件下優(yōu)先采用方法一

建立切片以后，在sketch的plugins菜單中找到"zeplin"-"export selected artboards"，或者按快捷鍵command+control+E彈出導入畫板提醒，選擇剛剛自己建立的"zeplin introduce"后點擊"inport"。

需要注意的是，在選擇導入畫板的對話框中，左下角有一項"Replace screens with the same name"，如果勾選此項，文件名相同的畫板在zeplin中會被替換掉。

Import面板

2. Zeplin頁面信息介紹

把一張登錄頁面導入zeplin后我們能看到頁面右側(cè)有4部分相關(guān)信息，基本信息-顏色-切片-備注信息。

頁面信息

·基本信息

Description - 點擊“No description yet.”可以添加描述信息，完成點擊“Done”按鈕。

Last updated - 最近一個更新時間

Tags - 點擊“Manage”可以給頁面建立多個標簽，作為免費用戶我們通常用標簽來給每次的迭代分類

Links - 其他用戶通過你分享的鏈接能看到該頁面

File - 能看到你的sketch源文件存放在本地的位置，點擊可以打開sketch文件

基本信息

·顏色

可以看到頁面中出現(xiàn)的所有顏色，鼠標滑動到對應(yīng)色彩上出現(xiàn)小水滴圖標，提示可以把該顏色添加至樣式庫。

另zeplin菜單欄中點擊"Project" - "Color Representation"可以根據(jù)開發(fā)要求切換顏色模式是RGBA還是HEX。

顏色

·切片

切片項里面可以看到該頁面所有切片，開發(fā)在這個頁面可以一次性下載所有切圖的PDF和PNG格式，非常方便。

切片

·備注信息

在頁面中按住command鍵+點擊鼠標左鍵能建立備注信息，如下圖①黃色標簽，右側(cè)面板顯示具體內(nèi)容。

單擊標簽，可以對標簽進行顏色更改、設(shè)為已解決、編輯、刪除等。

備注信息

·其他功能

左側(cè)漏斗圖標：點擊可以展開左側(cè)該頁面的歷史更新信息，目前免費賬戶只能查看到最近一次的更新。

加減號：放大縮小頁面百分比。

彈出圖標：可以把該頁面單獨彈出顯示。

右下角加號圖標：添加備注信息。

Notes圖標：顯示/隱藏備注信息。

其他功能

利用Tags來管理頁面

右鍵點擊頁面彈出菜單，選擇"Add Tag"可以添加標簽，在已添加Tag的頁面右鍵單擊彈出的會是"Manage Tags"，一個頁面可以添加多個Tag，點擊Tag欄來篩選當前標簽的頁面，如下Gif圖:

add tag

另外，我們還可以把Tag轉(zhuǎn)化成區(qū)域標題來做內(nèi)容篩選，當Tag轉(zhuǎn)化成區(qū)域標題以后該Tag就消失了，當前頁面的呈現(xiàn)方式也變成了列表顯示方式。

① V1.0對應(yīng)login，V2.0對應(yīng)play

② 右鍵點擊Tag彈出菜單選擇"Convert to Section"

③ Tag轉(zhuǎn)化成了區(qū)域標題，右側(cè)三角箭頭可以展開/隱藏頁面

· Section相關(guān)操作

點擊右側(cè)更多圖標彈出菜單

Edit Description - 在區(qū)域標題下方添加描述信息，e.g. 這里是音樂播放界面

Rename Section - 重命名區(qū)域標題，e.g. V 2.0

Move Section Down - 把該區(qū)域內(nèi)容移動至下方區(qū)域(這里有更方便的拖動方式，鼠標點擊標題前方的圖標即可完成拖動)

Delete Section - 刪除該區(qū)域

Move Screen to Project - 當你有多個項目的時候(高級會員)，可以把該區(qū)域內(nèi)容移動至其他項目，至于免費用戶，自然會彈出框告訴你趕緊交錢升級會員^_^

Section相關(guān)操作

拖動區(qū)域排序

最后...

再分享一個便捷小操作，再做頁面適配的時我們有時候需要知道一個動態(tài)百分比而非固定值，zeplin頁面里面，按住option鍵就可以及時看到pt和%轉(zhuǎn)換

pt和%轉(zhuǎn)換