如果有一天，設(shè)計師只需要專注于界面設(shè)計，不再需要做剪圖、注釋的工作； 如果有一天，工程師只需要專注于功能框架的構(gòu)建，而不再需要花太多的心思去標記UI； 沒有如果，這一天真的來了！ ！ ！

隨著 的流行，國內(nèi)外很多項目團隊都相繼采用了+開發(fā)模式。 但話又說回來，它真的那么有用嗎？ 很多朋友說，他們已經(jīng)使用PS好幾年了，要我學習一個新軟件，我做不到！

事實上，筆者在剛進公司時也有同樣的感受。 他以前從未使用過Mac，完全是個新手。 那一刻，他的心都快碎了。 但自從接觸了它之后，我實在是愛不釋手，不想再用PS了。

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

1、支持嗎？

答：抱歉，目前還沒有！ 為了提高工作效率，設(shè)計師即使辛苦工作一兩個月也會買一臺Mac。 不過，除了安裝Mac虛擬機之外，PS現(xiàn)在還支持插件。 只要安裝了插件，您仍然可以在沒有Mac的情況下對圖像進行剪切和注釋。

2、支持嗎？

答： 真的很有趣，這是必須的！ 前不久還只有mac版本，但團隊怎么可能放棄這么大一部分市場呢？ 現(xiàn)在支持它真是太棒了。 從此開發(fā)者將不再抱怨網(wǎng)頁打開速度極慢。

好了sketch標注插件，廢話不多說，我們直接進入正題。

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

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

2.支持導出，方便制作交互效果原型；

3、解放設(shè)計師的雙手，告別圖紙裁剪、標注；

4、降低工程師的溝通成本，提高設(shè)計還原性。

那么問題來了，如果我沒有mac怎么破解呢？ 朋友們，不要灰心。 現(xiàn)在支持PS。 睜大眼睛并向下看。 只需三步，解放雙手。

步驟1：

安裝軟件+插件

Mac 用戶：安裝； 。應(yīng)用程序; - 只需解壓插件并安裝即可

用戶：;.app;-ps插件&面板

如何安裝插件？

通常，當您啟動時，該插件應(yīng)該自動安裝。 但是，如果您遇到問題，請確保您擁有最新版本。 安裝需要兩部分：插件和面板。

安裝教程：

1.插件：

解壓并復制“io..-”到

將其粘貼到“//Adobe CC 2015/Plug-ins/”文件夾中。

2. 面板：

解壓并復制“io..-panel”到

將其粘貼到“~///Adobe/CEP/”文件夾中。

現(xiàn)在，當您重新啟動時，您將在菜單中看到頂部面板：窗口 > 擴展 >

第2步：

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

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

點擊菜單欄上的“免費注冊”，進入注冊頁面。

首先，您需要申請三個賬戶：

一張是針對iOS的，因為iOS的單位是pt，所以導出的剪切圖片是3張； （x、@2x、@3x）

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

以上兩個是設(shè)計者用來對上傳文件進行迭代管理的。

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

尖端：

建議使用團隊注冊并存檔的郵箱郵箱賬號。 不建議使用個人QQ郵箱；

建議與項目名稱結(jié)合起來，方便記憶。 當然，如果你想用QQ、郵箱或者個人生日，也可以用，只要你高興就行（我曾經(jīng)用過一個導師創(chuàng)建的賬號，但不知不覺就記住了導師的QQ和出生日期，哈哈）

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

第三，選擇畫板尺寸。 建議選擇1x（前提是繪圖也是用1x做的，即375*667）； 如果是PS制作的，一般選擇2x，即750*1334）

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

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

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

Web應(yīng)用程序：復制URL并向開發(fā)者提供帳戶和密碼。 打開開發(fā)網(wǎng)頁查看注釋+導出截圖。

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

尖端：

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

所以，有兩種解決方案：

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

2. 申請多個賬戶

建議大家有能力的都選擇購買支持一下（畢竟他為設(shè)計師做出了這么大的貢獻）。 但由于種種原因，發(fā)帖者默默選擇了方案2，并申請了7個賬號（設(shè)計6個，開發(fā)1個）。 為了減少溝通成本，減輕開發(fā)小哥的記憶負擔，我邀請了開發(fā)者到各個對應(yīng)的設(shè)計賬號。 添加了賬號，在最終的開發(fā)中，只要登錄一個賬號，就可以看到所有迭代版本的設(shè)計圖，方便多了！

Tips：建議創(chuàng)建一個單獨的項目文件在Web端上傳，不要與ios一起上傳。 雖然圖片是共享的，而且是三倍放大，但是Web端可以支持一鍵導出代碼。 告訴前端這個小技巧，可以大大減少前端的工作量。 順便讓前端給你一個人情，哈哈！

第三步：

將文件導出到或 ps 到

當你在這里完成設(shè)計稿后，只需要再做兩次操作，就可以成功對圖紙進行剪切和注釋。

1、在界面中找到要剪切圖像的地方，選擇切片工具或快捷鍵s，將切片的虛擬框和對應(yīng)的待切片圖層放入一組。 然后選擇切片的虛擬框，在右上角的切片屬性中設(shè)置切片大小并僅選擇組。 這一步非常重要，否則導出的切片會有背景。

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

完成這三個步驟后，你只需要復制一個項目URL并交給開發(fā)即可。 開發(fā)者小哥打開對應(yīng)的界面，需要的地方點擊即可。 單擊可查看相應(yīng)字體的屬性和邊距。 它還支持一鍵導出代碼。 與之前標注+剪切的工作模式相比，是不是方便很多呢？

我終于從枯燥的體力勞動中解脫出來。 我不再需要與開發(fā)人員打交道或一對一地調(diào)整界面。 我光是想想就很興奮。 我終于可以騰出更多的時間來學習（ba）和學習（mei）了。 以上是基于項目迭代的經(jīng)驗分享。 歡迎朋友們在使用過程中交流分享~

使用中的幾個問題：

1.剪切圖標無法點擊？

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

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

答：選中需要注釋的圖層，按“?+鼠標左鍵”即可彈出注釋浮動層。

3. 為什么切片的預(yù)覽圖像與實際導出的圖像不一樣，并且大小不一致？

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

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

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

附錄：

PS導出官方視頻教程：

導出官方視頻教程：

（如果網(wǎng)址打不開，可以下載附件）

版本：eplin客戶端&插件下載

網(wǎng)盤地址：

密碼：sc4n

mac版：客戶端及插件下載

網(wǎng)盤地址：

密碼：uhva

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