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

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

Sketch的快速入門

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

1. UI圖稿

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

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

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

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

Zeplin

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

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

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

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

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

Zeplin在Sketch中作為一份插件，因此上傳設(shè)計是一項簡單活兒。

以下是如何開始一個項目：

1. 下載Zeplin并安裝。開發(fā)人員不需要運行OS X，因為他們只需訪問基于Web的工具即可訪問內(nèi)容。

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

3. 選擇你設(shè)計的平臺。

4. 標(biāo)出項目名稱。

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

1. 接下來，選擇要上傳到Zeplin的畫板。

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

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

使用Zeplin一起工作

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

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

1. 選擇你想要檢查的對象。

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

3. 復(fù)制CSS。

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

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

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

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

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

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

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

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

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

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

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

嘗試一下！

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