Sketch和Zeplin：幫助設(shè)計(jì)師和開(kāi)發(fā)人員協(xié)作

設(shè)計(jì)師和開(kāi)發(fā)人員之間的協(xié)作程度對(duì)于項(xiàng)目的成功至關(guān)重要，并且它是衡量一個(gè)團(tuán)隊(duì)成功的標(biāo)準(zhǔn)。盡管在同一個(gè)辦公場(chǎng)所工作很常見(jiàn)，但通過(guò)網(wǎng)絡(luò)來(lái)協(xié)同辦公也是可以的。在本文中，我們將看看如何將Zeplin與Sketch結(jié)合起來(lái)使用。

Sketch的快速入門(mén)

這個(gè)軟件的好處在于它是專(zhuān)門(mén)用于界面和圖標(biāo)設(shè)計(jì)的;從具有特定尺寸的網(wǎng)頁(yè)，移動(dòng)設(shè)備和圖標(biāo)到具有幫助加強(qiáng)設(shè)計(jì)流程的功能的Sketchboard，簡(jiǎn)直是設(shè)計(jì)師必備。以下是一些示例，可以幫助你了解使用Sketch可以做些什么：

1. UI圖稿

2. 使用Inspector查找有關(guān)特定對(duì)象的所有詳細(xì)信息（大小，位置，顏色，字體洋式，不透明度等等）。

3. 使用“ 導(dǎo)出”功能可將Artboard或單個(gè)對(duì)象導(dǎo)出為特定的文件格式（PNG，JPG，PDF等）。

“我是一名開(kāi)發(fā)者，我從未使用過(guò)Sketch！”

我們不應(yīng)該要求開(kāi)發(fā)人員精通設(shè)計(jì)師用于仿真產(chǎn)品的工具。也就是說(shuō)，我們也不應(yīng)該要求設(shè)計(jì)師擺脫他們最擅長(zhǎng)的事情：設(shè)計(jì)！  每次交付設(shè)計(jì)時(shí)構(gòu)建“規(guī)范文檔”遠(yuǎn)非“敏捷”，并且可能意味著在交付設(shè)計(jì)和需要迭代之間浪費(fèi)大量時(shí)間。

Zeplin

這是Zeplin大顯身手的時(shí)候。Zeplin是面向UI設(shè)計(jì)師和前端開(kāi)發(fā)人員的協(xié)作工具。它超越了設(shè)計(jì)工作流程，并幫助團(tuán)隊(duì)完成設(shè)計(jì)交付。

它允許設(shè)計(jì)師直接從Sketch上傳他們的線(xiàn)框或視覺(jué)設(shè)計(jì)，并將它們添加到Zeplin的項(xiàng)目活頁(yè)夾中。這可能是最好的工具了？ 注釋會(huì)自動(dòng)添加到設(shè)計(jì)中（尺寸，顏色，邊距，甚至某些元素的CSS建議），這將為你提供整個(gè)團(tuán)隊(duì)的在線(xiàn)存儲(chǔ)庫(kù)。

“當(dāng)Zeplin作為一個(gè)單一來(lái)源時(shí)，它可以很好地協(xié)同工作。

此外，由于它可以作為獨(dú)立應(yīng)用程序以及Web應(yīng)用程序提供相應(yīng)素材，因此你可以在任何地方訪問(wèn)它?？梢暂p松檢查設(shè)計(jì)和空間，尺寸，顏色等。“ - Daniel Setas Pontes，Javascript開(kāi)發(fā)人員@NOW TV，Sky

將設(shè)計(jì)稿從Sketch導(dǎo)出到Zeplin

Zeplin在Sketch中作為一份插件，因此上傳設(shè)計(jì)是一項(xiàng)簡(jiǎn)單活兒。

以下是如何開(kāi)始一個(gè)項(xiàng)目：

1. 下載Zeplin并安裝。開(kāi)發(fā)人員不需要運(yùn)行OS X，因?yàn)樗麄冎恍柙L問(wèn)基于Web的工具即可訪問(wèn)內(nèi)容。

2. 創(chuàng)建項(xiàng)目。

3. 選擇你設(shè)計(jì)的平臺(tái)。

4. 標(biāo)出項(xiàng)目名稱(chēng)。

在Sketch中，選擇單個(gè)對(duì)象并將它們導(dǎo)出。這將使你的開(kāi)發(fā)團(tuán)隊(duì)能夠在以后從Zeplin內(nèi)導(dǎo)出每個(gè)元素。這是如何使用的呢：

1. 接下來(lái)，選擇要上傳到Zeplin的畫(huà)板。

2. 轉(zhuǎn)到插件> Zeplin> 導(dǎo)出選定的畫(huà)板。

3. 選擇你要上傳設(shè)計(jì)元素，然后點(diǎn)擊導(dǎo)入。

使用Zeplin一起工作

一旦進(jìn)入Zeplin，你可以在項(xiàng)目之間導(dǎo)航并輕松探索其中的所有組件。查明某些元素的規(guī)格也很直觀; 選擇你想要的元素，然后所有的相關(guān)信息將出現(xiàn)在右側(cè)欄中。

開(kāi)發(fā)者：一旦你打開(kāi)了基于網(wǎng)絡(luò)的工具并登錄，以下是它的工作原理：

1. 選擇你想要檢查的對(duì)象。

2. 查看右側(cè)欄中的詳細(xì)信息，如字體洋式，顏色等（信息將根據(jù)妳選擇的對(duì)象顯示）。

3. 復(fù)制CSS。

如果設(shè)計(jì)團(tuán)隊(duì)在將設(shè)計(jì)導(dǎo)入Zeplin時(shí)允許選擇素材元素，開(kāi)發(fā)團(tuán)隊(duì)?wèi)?yīng)該能夠?qū)С鰝€(gè)人資產(chǎn)。資產(chǎn)將以SVG格式和三種不同的PNG尺寸下載。

1. 在這里，你可以將注釋添加到設(shè)計(jì)中。

2. 在這里，你可以復(fù)制和分享項(xiàng)目鏈接，甚至可以與團(tuán)隊(duì)的Slack頻道集成以獲取通知或邀請(qǐng)團(tuán)隊(duì)成員進(jìn)行協(xié)作！

為什么你的團(tuán)隊(duì)?wèi)?yīng)該采取協(xié)同辦公

使用Zeplin協(xié)同辦公有很多優(yōu)點(diǎn)，下面是一些例子：

• 你將避免構(gòu)建規(guī)格文文件; 這既不敏捷也不容易更新。

• 為開(kāi)發(fā)人員和其他設(shè)計(jì)人員創(chuàng)建具有所有相關(guān)信息的實(shí)時(shí)注釋設(shè)計(jì)。

• 你可以創(chuàng)建可導(dǎo)出的設(shè)計(jì)，因此開(kāi)發(fā)人員可以快速訪問(wèn)單個(gè)資產(chǎn)。

• 創(chuàng)建你想要的項(xiàng)目，然后只需點(diǎn)擊幾下即可上傳和更新。

• 創(chuàng)建幫助設(shè)計(jì)團(tuán)隊(duì)保持一致的風(fēng)格指南。

• 利用Slack，每次有更新時(shí)立即通知你的團(tuán)隊(duì)。

嘗試一下！

使用Zeplin來(lái)進(jìn)行Sketch的協(xié)同辦公是設(shè)計(jì)師與開(kāi)發(fā)人員合作的絕佳方式。