如果有一天，設(shè)計師只需要專注于界面設(shè)計，而不再需要做裁剪、標(biāo)注的工作；如果有一天，工程師只需要專注于功能框架的搭建，而不再需要花太多的時間在標(biāo)注UI上；沒有如果，這一天真的到來了。。。

隨著的火爆，國內(nèi)外很多項目組都逐漸采用了+的開發(fā)模式。不過話說回來，它真的有那么好用嗎？很多朋友都說自己用PS好幾年了，還想讓我學(xué)個新軟件，這我可做不到??！

其實我剛進(jìn)公司的時候也是這樣的，我之前從來沒用過 Mac，更別說 了，完全就是新手，當(dāng)時差點兒崩潰，但用了之后就真的愛不釋手了，再也不想用 PS 了。

在開始之前，我們先回答兩個基本問題

1. 支持嗎？

A：抱歉，暫時還不行！設(shè)計師為了提高工作效率，哪怕吃一兩個月的苦也要買一臺 Mac。不過，除了安裝 Mac 虛擬機(jī)，PS 現(xiàn)在還支持插件。只要裝上插件，不用 Mac 照樣可以告別切割打標(biāo)。

2. 是否支持？

A：太好了，這個一定要有！前不久還只有 Mac 版本，但團(tuán)隊怎么會放棄這么大的市場呢？這真是個好消息，現(xiàn)在也支持了，開發(fā)者們再也不會抱怨網(wǎng)頁版了。

打開速度超級慢

好啦，廢話不多說，我們直接進(jìn)入正題。

首先我們來總結(jié)一下+的優(yōu)點：

1、支持多畫板，方便同時預(yù)覽，且占用內(nèi)存比PS少很多；

2、支持導(dǎo)出，方便制作可交互的動效原型；

3、解放設(shè)計師的雙手，告別裁剪、劃線；

4、減少工程師的溝通成本，提高設(shè)計還原度。

那么問題來了，沒有 Mac 怎么辦？別灰心，PS 現(xiàn)在也支持了。睜大眼睛往下看吧，只需三步，解放雙手。

步驟1：

安裝軟件+插件

Mac 用戶：安裝；.app；——只需解壓并安裝插件

用戶：安裝；.app；-ps 插件和面板

如何安裝插件？

通常，啟動時插件會自動安裝。但是，如果遇到問題，請確保您使用的是最新版本。需要安裝兩個東西：插件和面板。

安裝教程：

1.插件

解壓并復(fù)制“io..-”到“Adobe CC 2015/Plug-ins/”文件夾并粘貼。

2. 面板：

解壓并將“io..-panel”復(fù)制到“Adobe CC 2015///CEP/”文件夾并粘貼。現(xiàn)在，當(dāng)您重新啟動計算機(jī)時，您將在菜單中看到面板：窗口 > 擴(kuò)展 >

第2步：

注冊迭代賬號，邀請項目人員。

打開官方網(wǎng)站：

點擊菜單欄中的免費注冊，進(jìn)入注冊頁面。

首先需要申請三個賬號：

一個用于iOS，因為iOS的單位是pt，所以導(dǎo)出的切圖是3張；(x,@2x,@3x)

一、因為單位是dp，所以導(dǎo)出的切片是5張圖片（mdpi,hdpi,xhdpi,,）

以上兩個是供設(shè)計師對上傳的文件進(jìn)行迭代管理使用的。

開發(fā)一個供 iOS 前端開發(fā)人員使用的。

尖端：

建議用團(tuán)隊注冊的賬號，存檔，不建議用個人QQ郵箱，建議結(jié)合項目名，方便記憶，當(dāng)然你想用QQ，郵箱或者個人生日也可以，隨心所欲（我曾經(jīng)用過導(dǎo)師創(chuàng)建的賬號，不知不覺就記住了導(dǎo)師的QQ&生日，哈哈）

其次，登錄剛剛申請的賬號，進(jìn)入首頁點擊，選擇你要創(chuàng)建的項目，比如iOS；

第三，選擇畫板的尺寸，建議選擇1x（前提是畫圖也是1x做的，也就是375*667）；如果在PS里做的話，一般選擇2x，也就是750*1334）

四、命名項目并邀請項目成員加入

命名建議：項目名+版本號+客戶端，例如：VUE-V1.2(iOS)

：剛剛選擇的畫板尺寸，例如：1x

Web端：復(fù)制網(wǎng)址，將賬號密碼提供給開發(fā)者，開發(fā)者打開網(wǎng)頁即可查看批注，導(dǎo)出剪切圖片。

項目成員加入時，建議設(shè)計人員使用一個賬號，開發(fā)人員使用另一個賬號，名下有Owner的人員才有上傳和修改文件的權(quán)限，防止非設(shè)計人員誤刪文件。

尖端：

由于一個賬號只能免費創(chuàng)建一個項目，單一項目無法滿足快速迭代的需求。

因此，有兩種解決方案：

1.只需申請一個賬號，登錄官網(wǎng)購買，根據(jù)需求選擇對應(yīng)服務(wù)即可，一般選擇（25美元/月，創(chuàng)建8個項目）即可完全滿足iOS&C的迭代需求。

2.申請多個賬戶

我建議每個有能力的人都選擇購買支持一下（畢竟它為設(shè)計師做出了那么大的貢獻(xiàn)）。然而出于各種原因，筆者默默選擇了方案2，申請了7個賬號（6個設(shè)計師，1個開發(fā)者）。為了減少溝通成本，減輕開發(fā)者的記憶負(fù)擔(dān)，我把每個對應(yīng)的設(shè)計賬號都邀請加入了開發(fā)賬號。最后開發(fā)者只需要登錄一個賬號就可以看到所有迭代版本的設(shè)計圖，方便多了！

尖端：

建議web單獨建一個項目文件，和iOS一起上傳sketch標(biāo)注插件，雖然圖片是共享的，有3倍放大，但是web可以支持一鍵代碼導(dǎo)出，這個小技巧告訴前端，可以大大減少前端的工作量，順便讓前端請你吃頓飯，哈哈！

步驟3：

或 PS 中的文件導(dǎo)出到

當(dāng)你完成了設(shè)計稿之后，只需要再進(jìn)行兩次操作，就可以成功標(biāo)記切圖了。

1.在界面中找到需要切片的地方，選擇切片工具或者快捷鍵s，把切片虛擬框和對應(yīng)的要切片的圖層放到一個組中。然后選擇切片虛擬框，在右上角的切片屬性中設(shè)置切片大小并選擇group only。這一步很重要，不然導(dǎo)出的切片會有背景。

2、選中切片畫板（支持同時選擇多個），點擊菜單-或者快捷鍵“?+E”，上傳成功后屏幕右上角會彈出提醒。

完成這三個步驟之后，你只需要復(fù)制一個項目URL給開發(fā)者，開發(fā)者打開對應(yīng)的界面，點擊需要的項目，點擊就可以看到對應(yīng)的字體屬性、邊距，以及一鍵導(dǎo)出代碼，相比之前標(biāo)注+裁剪的工作模式，是不是方便很多呢？

終于可以從枯燥的體力勞動中解脫出來了，再也不用跟開發(fā)人員爭論，一對一調(diào)整界面，想想就很激動，終于可以抽出更多的時間來學(xué)習(xí)（ba）（mei）。以上就是結(jié)合項目迭代的經(jīng)驗分享，使用過程中，歡迎小伙伴們多多交流分享~

關(guān)于使用的幾個問題：

1. 剪切圖片的圖標(biāo)無法點擊？

答： 方法一：可以在單個文件下增加較長的一行，增加一些圖標(biāo)點擊狀態(tài)； 方法二：建立一個設(shè)計規(guī)范，將整個app的圖標(biāo)控件組織起來sketch標(biāo)注插件，方便開發(fā)和統(tǒng)一調(diào)用（樓主就是用的這個）。

2、如果我想對設(shè)計稿提出意見怎么辦？

答案：選中需要注釋的圖層，然后按“?+鼠標(biāo)左鍵”，彈出注釋浮動層。

3、為什么切片預(yù)覽圖像和實際導(dǎo)出的圖像不一樣，且大小不一致？

回答：切片必須放在圖像上方，且切片名稱不能重復(fù)。圖像的XY軸位置不能有小數(shù)點。

4.URL打開網(wǎng)頁太慢怎么辦？

答：把客戶端安裝包交給開發(fā)者，打開速度提升100%。

如有侵權(quán)請聯(lián)系刪除！