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

功能介紹

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

Zeplin - creat projec

1. 建立切片導(dǎo)入Zeplin

在sketch中有兩種方法建立切片導(dǎo)入zeplin

方法一：

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

方法二：

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

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

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

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

Import面板

2. Zeplin頁面信息介紹

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

頁面信息

·基本信息

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

Last updated - 最近一個(gè)更新時(shí)間

Tags - 點(diǎn)擊“Manage”可以給頁面建立多個(gè)標(biāo)簽，作為免費(fèi)用戶我們通常用標(biāo)簽來給每次的迭代分類

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

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

基本信息

·顏色

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

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

顏色

·切片

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

切片

·備注信息

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

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

備注信息

·其他功能

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

加減號(hào)：放大縮小頁面百分比。

彈出圖標(biāo)：可以把該頁面單獨(dú)彈出顯示。

右下角加號(hào)圖標(biāo)：添加備注信息。

Notes圖標(biāo)：顯示/隱藏備注信息。

其他功能

利用Tags來管理頁面

右鍵點(diǎn)擊頁面彈出菜單，選擇"Add Tag"可以添加標(biāo)簽，在已添加Tag的頁面右鍵單擊彈出的會(huì)是"Manage Tags"，一個(gè)頁面可以添加多個(gè)Tag，點(diǎn)擊Tag欄來篩選當(dāng)前標(biāo)簽的頁面，如下Gif圖:

add tag

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

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

② 右鍵點(diǎn)擊Tag彈出菜單選擇"Convert to Section"

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

· Section相關(guān)操作

點(diǎn)擊右側(cè)更多圖標(biāo)彈出菜單

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

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

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

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

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

Section相關(guān)操作

拖動(dòng)區(qū)域排序

最后...

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

pt和%轉(zhuǎn)換