神器！解放你的雙手——UI設計稿全自動切圖和標註的一些工具推薦

原文收錄在個人 GitHub博客 (https://github.com/jawil/blog) ，喜歡的能夠關注最新動態，你們一塊兒多交流學習，共同進步，以學習者的身份寫博客，記錄點滴。

工欲善其事，必先利其器。我只是工具的搬運工，下次把Mac上實用的小工具也推薦一波

　　前不久在 掘金 上看到一篇文章，前端 PS 切圖方法，圖文詳細，相信每一個前端都通過這種最原始的切圖手法，不由想起本身之前剛入門那會懶得切圖，直接QQ截圖，如今想起來真是初生牛犢不怕虎，怎麼方便怎麼來。。。

　　這種原始的PS切圖，不能說很差，只能說太影響效率了，一直認爲能用機器解決的事，就不要用人工操做，特別是切圖這種體力活，不該該是由程序員來完成的，若是開發還停留在手工切圖，沒什麼意義，只能說你的時間太廉價了。

自動切圖工具

　　這裏切圖推薦一個插件：Cutterman，更多切圖工具介紹請移步：扶朕起來，朕還能切

Cutterman 是個國產的切圖工具，廣告語就叫「最好用的切圖工具」

Cutterman致力於改善設計師的工做效率,爲設計師提供優秀、高效、實用的技術解決方案, 解放雙手。讓創意再也不有界限, 讓設計更專一!

• 支持多倍圖

• 多種格式

• 多圖層導出

• 能夠設置固定大小

• 操做簡單

• 免費，只須要註冊個帳號便可

一鍵切圖，真正解放雙手

　　Cutterman可以讓你只須要點擊一個按鈕，就自動輸出你須要的各類各樣的圖片，快到沒有朋友！






關於標註

　　將一個個標註手動畫出來，耗時費力不說，畫得兩眼昏花，一不當心就會出現漏標的狀況。而這些漏標的地方，攻城獅們每每在開發過程當中纔會發現，因而不得不一次又一次地找設計師進行確認。

　　切好圖以後該怎麼標註了，這是一個面臨的問題，別告訴我你還在手動一個一個在那裏測距離，我看見我同事以前就是用PS一個一個在那裏量距離，看得我強迫症和尷尬症都犯了，記住，不要把時間浪費在體力活上，能用工具解決的事就不要用雙手，你這麼喜歡幹這種測距離的體力活你咋不去搬磚呢?，讓別人用雙手拯救你的雙手。

　　有時候標註設計師會幫你作，可是也不是總能遇見這麼善解人意的設計師，我方設計師VS別人設計師。

我方設計師：

對方設計師：

想起敵方隊友VS我方隊友


遇見這種我方設計師，沒人替咱們分擔，這種低效的協做方式，形成了大多數互聯網產品設計團隊廣泛的悲劇：明天要上線，通宵摳細節，吐血調界面，加班！！！





幾款強大的標註工具

　　設計師不幫咱們標註，咋們本身來，藉助工具標註也是分分鐘的事情，假如複雜的標註蹂躪了你，不要悲傷，不要哭泣。

　　若是有一天，設計師只需專一界面設計，不需再作切圖和標註的工做；若是有一天，工程師只需專一功能框架建設，不需再花太多心思在標註UI上面；沒有若是，這一天真的來了。。。

　　工以利器爲助，人以賢友爲助。有了這些工具的輔佐，讓咱們開發的效率又快又好，簡直如虎添翼，爽到不行。　

如下是一些可以讓程序員與設計師 相愛 的軟件

對！就！是！相！愛！

你耕田來我織布

你設計來我開發




一、標你妹

官方網站：http://www.biaonimeia.com/

是否免費：免費

登陸方式：直接微信掃一掃

介紹：

每天讓我標註測距離，標你妹啊，做爲射擊獅，卻幹着死美工的活，天天要爲程序猿同窗標註PSD有木有？但我卻憧憬着成爲逼格很高的射擊獅。爲了可以早點下班泡妹子看電影。標你妹啊幫你解放你的雙手…

操做：登陸成功以後，新建一個項目上傳PSD，而後就能夠進行標註。

操做預覽圖：






二、藍湖Mac端App

　　一款全中文免費的自動標註的神器！完全解放設計師的雙手，上傳文件就能蹭蹭蹭的自動標註！什麼？你還想自動做圖？冷靜點冷靜點…萬一失業了呢？
　　如今，這款叫藍湖的設計師標註神器，最新版開始支持「自動標註」的功能（目前僅支持.Sketch，Psd版本即將上線）
　　只需下載「藍湖」Mac端App，便可實現：從Sketch一鍵導出設計圖→自動生成標註→自動共享給團隊→團隊相關成員自動收到提醒等一系列自動化功能。

官方網站：https://www.lanhuapp.com/

是否免費：免費

登陸方式：下載APP,註冊帳號登陸

介紹：

藍湖是一款產品設計師的協做平臺,幫助設計師更快地完成工做。藍湖經過幫助設計師更好地向團隊展現設計圖,描述頁面之間的跳轉關係。藍湖還支持從Sketch一鍵分享、在線協做…

操做：登陸成功以後，新建一個項目上傳，而後就能夠進行標註。

操做預覽圖：

「自動標註」功能能夠完整而清晰地將Sketch設計圖中每一個元素的尺寸、位置、顏色、間距、字號 等樣式信息自動同步到藍湖，團隊內的工程師等同事能夠隨時查看。
若是設計圖出現改動和更新，藍湖也能自動添加新版本。

現在設計師的工具那麼多，這一款工具的優點在哪裏呢

1.全部功能徹底免費，沒有任何項目或團隊成員數量限制。
2.中文的！中文的！中文的！
3.無與倫比的快！在國內的服務器+藍湖工程師嘔心瀝血優化的算法，使藍湖的「自動標註」的速度嗖嗖的！
4.藍湖還整合了設計圖流程的展現，設計圖歷史版本管理，多種狀況和狀態的設計圖管理等功能。

5.設計師不但能夠爲每張設計圖添加備註文檔，其餘團隊成員還能夠針對設計圖發表評論，方便團隊在線高效溝通。（心裏竟有點小小的惶恐…）
6.在藍湖上，還能夠基於設計圖快速製做一個高保真的交互原型，讓工程師不用再跑來問你「這個按鈕跳到哪啊」，該原型還能夠在藍湖手機端App和微信上進行操做和預覽。

美團，網易，麪包旅行等等國內知名互聯網公司都參與了藍湖的早期內測，爲 「藍湖」提出了不少專業的建議。「藍湖」基於這些反饋快速迭代，而「自動標註」功能就是其中一項。
因爲是國內的團隊，溝通起來很是方便！因此若是設計師們有痛點或是需求，能夠積極討論！沒準下版本的藍湖就能直接自動做圖了呢！！！
對惹，藍湖主體功能是Web端網頁平臺，不須要下載，直接註冊就能夠無償使用。

來源：你丫才美工（Ymeigong)，以前今日頭條看到的推薦，不知道網址。。。






三、Sketch/PS + Zeplin

　　隨着sketch的普及（sketch是啥，能吃嗎？自行谷歌、必應），國內外不少項目團隊都陸續用起了sketch＋zeplin的開發模式。不過話說回來，sketch真的有那麼好用嗎？不少小夥伴們表示用ps好幾年了，要我從新學一個軟件，臣妾作不到啊！～

　　其實剛進公司的時候也是這種心情的，沒用過mac更沒用過sketch，徹底的小白用戶，當時心裏幾乎是奔潰的。可是自從接觸sketch後，真的是愛不釋手，都不想用回ps了。

官方網站：https://www.zeplin.io/

PS導出zeplin官方視頻教程：https://www.youtube.com/watch...

Sketch導出zeplin 官方視頻教程：https://www.youtube.com/watch...

是否免費：免費

登陸方式：下載APP，註冊帳號登陸

介紹：

在使用 Zeplin 以前，最先是使用馬克曼(手動標註，這裏不作推薦)進行標註的，也就是直接在輸出效果圖上量尺寸；使用 Sketch 插件 Measure 以後，能夠在畫板中生成尺寸標註信息，導出標註圖提供給開發同窗使用。不管是馬克曼仍是 Measure，最後的交付物是一致的，馬克曼和接下來要介紹的Measure這種原始的標準就是已經破壞了本來的視覺效果圖，標註的信息必定會對原設計稿造成遮擋，所以通常效果圖和標註圖要分開給，開發也常常須要在兩個圖之間切換，圖片管理不太方便。

zeplin 主要就是爲了解決上述問題的，使用它以後，能夠在 Sketch 中一鍵導入 Artboard，在設計師作好圖層管理（命名、分組）的前提下，它能夠自動生成標註信息（而且能夠標註爲 pt 或 dp），容許添加註釋造成類 prd 文檔，而且自動提取 Style Guide，同時還容許添加項目組成員，提供給團隊組查看項目。

操做：登陸成功以後，新建一個項目上傳素材，而後就能夠進行操做。

官方預覽圖：

介紹以後回答兩個基本問題

①sketch支持windows嗎？

答：很差意思，目前沒有！設計師爲了提高工做效率，就算吃土一兩個月也要買臺mac。不過windows用戶除了裝mac虛擬機外，如今ps也支持zeplin插件了，只要安裝個插件，沒有mac也照樣能夠任性的告別切圖和標註。

②zeplin支持windows嗎？

答：真夠意思，這個必須有！不久前只有mac版，不過zeplin團隊怎麼會放棄windows那麼大塊的市場呢。真是喜大普奔，如今zeplin也支持windows了，今後開發哥哥不再會抱怨網頁端的zeplin打開速度超級慢了。

好了，廢話很少說，直接進正題。

③sketch＋zeplin的優點

一、sketch支持多畫板，便於同時預覽，佔用內存較ps小不少；
二、sketch支持導出flinto，便於製做交互動效原型；
三、zeplin解放設計師的雙手，今後告別切圖和標註；
四、zeplin下降工程師的溝通成本，提升設計還原度。

更多細節已經安裝方法導出技巧請移步：APP標註無煩惱！告別切圖標註-Sketch/PS+Zeplin
這裏這介紹工具，因爲篇幅有限，並不詳細教你怎麼用，工具多用用就會了，熟能生巧。
更多關於Zeplin的體驗和細節請移步：Zeplin 的使用體驗如何？





四、Sketch Measure

中文文檔：http://sketch.im/plugins/1

github：https://github.com/utom/sketc...

官方網站：http://utom.design/measure/

官方使用教程：http://utom.design/measure/ho...

是否免費：免費

登陸方式：下載APP,註冊帳號登陸

介紹：

Sketch Measure是一款可用於標註和設計規範的工具，支持Sketch 3.5版以上。Measure幫你解放你的雙手…

1.建立疊加

2.度量尺寸

3.度量邊距

4.獲取屬性

5.添加註釋

操做：登陸成功以後，新建一個項目上傳PSD，而後就能夠進行標註。

官方DEMO預覽地址：http://utom.design/news/#artb...

Demo操做預覽圖：

**關於Sketch Measure的使用教程，這裏也很少細說，這裏拋磚引玉的介紹一下，想要了解和使用請移步：
Sketch Measure切圖標註插件使用教程**

下面談一談Zeplin和Sketch Measure的區別，純屬引用，表示沒用過Sketch Measure：

Zeplin：

①Zeplin註冊免費，只能保留一個Active項目，「STARTER」17刀／月，3個Active項目，「GROWING BUSINESS」26刀／月，12個Active項目。「ORGANIZATION」每一個用戶6.75刀／月。

②支持MAC的Sketch和PS，以及PC的PS。（最大的優勢）
③數據必須上傳到網絡上，能夠用客戶端查看也能夠網頁查看，必須是註冊用戶。（很麻煩，有些公司不容許上傳就沒辦法了）
④自動生成styleguide。（很是棒）
⑤切圖須要查看相應頁面時，從切圖欄下載。（我用的並很少，也可能有其餘方式）

Sketch Measure：

①徹底免費。

②只支持MAC Sketch，但查看不受限制。
③數據保存在本地（html文件），方便打包後發郵件，缺點是每次更新都要再發一遍，管理麻煩。
④沒有Zeplin智能，沒有自動styleguide，可是有相似AssistorPS同樣的手動標註。
⑤有「顏色命名」但比styleguide差不少，但願之後能更新相似功能。自動打包輸出切圖，支持iOS和Android的命名方式。





五、其餘諸如PxCook（像素大廚），cutterman的parker（這個收費，喜歡的能夠贊助一下，切圖那個免費哦?）等大同小異，這裏就很少作介紹，感興趣的童鞋能夠本身折騰玩玩，工具嘛，適合本身的就是最好的，其餘一些我也沒有實踐，你們本身看着玩。。。






以上四個推薦軟件的見解：

標你妹適合小型的我的的一些項目，對於新手來講，學習成本基本爲0，很是方便，web端沒有平臺限制；

藍湖Mac端APP首先你得有一臺Mac，其次是OSX系統，國內的良心之做，速度很快，適合我的和企業協同合做開發；

Zeplin適合小型的團隊，還帶有一部分協做辦公的功能（留言和更新情況），要求前端也能適應這種新的方式；

Sketch Measure更傳統一些，本地文檔、打包切圖等等，更適合有本身辦公流程的大公司，僅僅支持Mac。






是否是準備入手一臺MacBook Pro了呢？