Sketch+Zeplin 分分鐘搭建設(shè)計系統(tǒng)

設(shè)計師與前端的溝通錯位太常見了，兩者在“界面元素”和“交互動作”上的理解往往會有差異。不過Zeplin出現(xiàn)了，它是一款能夠幫助前端更好地理解設(shè)計師意圖，而設(shè)計師又能快速得到前端反饋的協(xié)作應(yīng)用。

Zeplin的操作很簡單， 用戶將Sketch制作的UI界面導(dǎo)入Zeplin，應(yīng)用會自動進(jìn)行一系列識別：右側(cè)會顯示UI界面的配色和字體等信息，當(dāng)鼠標(biāo)移到UI界面的圖標(biāo)時，還會自動顯示功能圖標(biāo)的位置、大小等參數(shù)。另外Zeplin還支持修改規(guī)則，比如添加色板、更改字體，以及編程語言在Obeject-C和Swift之間的轉(zhuǎn)換。用戶還可以直接在UI界面上進(jìn)行標(biāo)記，添加文字備注等。多人協(xié)作的情況下，這些更改都會同步到每個人。

Zeplin出現(xiàn)之前，在早期PS時代都是用馬克曼給界面標(biāo)注，sketch出現(xiàn)之后，有類似measure這樣的插件可以實現(xiàn)自動標(biāo)注，但使用上還是很繁瑣，得到的產(chǎn)出物也并不方便工程師使用。

我們標(biāo)注的稿子大部分都是如上圖所示，標(biāo)注和效果圖合在一起，標(biāo)注會遮擋內(nèi)容，并不利于瀏覽。一般要出兩套圖，一套標(biāo)注，一套效果圖。

在使用馬克曼標(biāo)注時，很多設(shè)計師無法確定哪些信息需要標(biāo)注，大多的處理方法是把所有間距元素都標(biāo)注上，但其實有些信息是不必要的，這樣反而不利于工程師瀏覽。

其次，當(dāng)項目的頁面很多時，標(biāo)注會占用一部分時間，開發(fā)做好界面，進(jìn)行視覺驗收的時候，還要截圖再標(biāo)明視覺錯位的地方，如果是安卓有多個尺寸，還要出多個標(biāo)注稿。對于迭代比較快的團(tuán)隊來說，標(biāo)注是一件耗時耗力的事情。

Zeplin的出現(xiàn)就是為了解決以上溝通錯位的問題，設(shè)計師不用再為標(biāo)注勞心，工程師看設(shè)計稿的效率也提高了，一舉兩得。

基礎(chǔ)使用介紹

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

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

標(biāo)注與 Style Guide

作為項目人員，你可以隨時通過軟件和 Web 版進(jìn)入 Project 對原稿進(jìn)行標(biāo)注（添加 Note，與對方就產(chǎn)品進(jìn)行溝通），設(shè)計師可以制作 Style Guide，包括字體樣式、色彩構(gòu)成、Icon 樣例、常用間距等內(nèi)容。

高效的協(xié)同工作機制

作為一款項目組協(xié)同工作軟件，Zeplin 可以讓團(tuán)隊成員一共參與整個原稿的交流工作，項目創(chuàng)建者只需輸入其他同事的郵箱或 Zeplin 賬戶名即可發(fā)出邀請。而如果當(dāng)前工作環(huán)境不是 Mac，你也仍然能通過 Web App 參與工作。