原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關注最新動態(tài)冀惭，大家一起多交流學習震叙，共同進步，以學習者的身份寫博客散休，記錄點滴媒楼。
工欲善其事，必先利其器戚丸。我只是工具的搬運工划址，下次把Mac上實用的小工具也推薦一波
前不久在 掘金 上看到一篇文章，前端 PS 切圖方法限府，圖文詳細夺颤，相信每個前端都經(jīng)過這種最原始的切圖手法，不禁想起自己以前剛入門那會懶得切圖胁勺，直接QQ截圖世澜，現(xiàn)在想起來真是初生牛犢不怕虎，怎么方便怎么來署穗。寥裂。。
這種原始的PS切圖蛇捌，不能說不好抚恒，只能說太影響效率了咱台，一直認為能用機器解決的事络拌，就不要用人工操作，特別是切圖這種體力活回溺，不應該是由程序員來完成的春贸，如果開發(fā)還停留在手工切圖，沒什么意義遗遵，只能說你的時間太廉價了萍恕。
自動切圖工具
這里切圖推薦一個插件：Cutterman，更多切圖工具介紹請移步：扶朕起來车要，朕還能切
Cutterman 是個國產(chǎn)的切圖工具允粤，廣告語就叫“最好用的切圖工具”
Cutterman致力于改善設計師的工作效率,為設計師提供優(yōu)秀、高效、實用的技術解決方案, 解放雙手类垫。讓創(chuàng)意不再有界限, 讓設計更專注!
- 支持多倍圖
- 多種格式
- 多圖層導出
- 可以設置固定大小
- 操作簡單
- 免費司光，只需要注冊個賬號即可
一鍵切圖，真正解放雙手
Cutterman能夠讓你只需要點擊一個按鈕悉患，就自動輸出你需要的各種各樣的圖片残家，快到?jīng)]有朋友！
關于標注
將一個個標注手動畫出來售躁，耗時費力不說坞淮，畫得兩眼昏花，一不小心就會出現(xiàn)漏標的情況陪捷。而這些漏標的地方回窘，攻城獅們往往在開發(fā)過程中才會發(fā)現(xiàn)，于是不得不一次又一次地找設計師進行確認揩局。
切好圖之后該怎么標注了毫玖，這是一個面臨的問題，別告訴我你還在手動一個一個在那里測距離凌盯，我看見我同事之前就是用PS一個一個在那里量距離付枫，看得我強迫癥和尷尬癥都犯了，記住驰怎，不要把時間浪費在體力活上阐滩，能用工具解決的事就不要用雙手，你這么喜歡干這種測距離的體力活你咋不去搬磚呢??县忌，讓別人用雙手拯救你的雙手掂榔。
有時候標注設計師會幫你做，但是也不是總能碰見這么善解人意的設計師症杏，我方設計師VS別人設計師装获。
我方設計師：
對方設計師：
想起敵方隊友VS我方隊友
碰見這種我方設計師，沒人替我們分擔厉颤，這種低效的協(xié)作方式穴豫，造成了大多數(shù)互聯(lián)網(wǎng)產(chǎn)品設計團隊普遍的悲劇：明天要上線逼友，通宵摳細節(jié)精肃，吐血調界面，加班Ｖ钠颉Ｋ颈А！
幾款強大的標注工具
設計師不幫我們標注黎烈，咋們自己來习柠，借助工具標注也是分分鐘的事情匀谣，假如復雜的標注蹂躪了你，不要悲傷资溃，不要哭泣振定。
如果有一天，設計師只需專注界面設計肉拓，不需再做切圖和標注的工作后频；如果有一天，工程師只需專注功能框架建設暖途，不需再花太多心思在標注UI上面卑惜；沒有如果，這一天真的來了驻售。露久。。
工以利器為助欺栗，人以賢友為助毫痕。有了這些工具的輔佐，讓我們開發(fā)的效率又快又好迟几，簡直如虎添翼消请，爽到不行。
以下是一些能夠讓程序員與設計師 相愛 的軟件
對类腮！就臊泰！是！相蚜枢！愛缸逃！
你耕田來我織布
你設計來我開發(fā)
1、標你妹
官方網(wǎng)站：http://www.biaonimeia.com/
是否免費：免費
登錄方式：直接微信掃一掃
介紹：
天天讓我標注測距離厂抽，標你妹啊需频，作為射擊獅，卻干著死美工的活筷凤，每天要為程序猿同學標注PSD有木有昭殉？但我卻憧憬著成為逼格很高的射擊獅。為了能夠早點下班泡妹子看電影嵌施。標你妹啊幫你解放你的雙手…
操作：登錄成功之后饲化，新建一個項目上傳PSD莽鸭，然后就可以進行標注吗伤。
操作預覽圖：
2、藍湖Mac端App
一款全中文免費的自動標注的神器硫眨！徹底解放設計師的雙手足淆，上傳文件就能蹭蹭蹭的自動標注巢块！什么？你還想自動作圖巧号？冷靜點冷靜點…萬一失業(yè)了呢族奢？
現(xiàn)在，這款叫藍湖的設計師標注神器丹鸿，最新版開始支持“自動標注”的功能（目前僅支持.Sketch越走，Psd版本即將上線）
只需下載“藍湖”Mac端App，即可實現(xiàn)：從Sketch一鍵導出設計圖→自動生成標注→自動共享給團隊→團隊相關成員自動收到提醒等一系列自動化功能靠欢。
官方網(wǎng)站：https://www.lanhuapp.com/
是否免費：免費
登錄方式：下載APP,注冊賬號登錄
介紹：
藍湖是一款產(chǎn)品設計師的協(xié)作平臺,幫助設計師更快地完成工作廊敌。藍湖通過幫助設計師更好地向團隊展示設計圖,描述頁面之間的跳轉關系。藍湖還支持從Sketch一鍵分享门怪、在線協(xié)作…
操作：登錄成功之后骡澈，新建一個項目上傳，然后就可以進行標注掷空。
操作預覽圖：
“自動標注”功能可以完整而清晰地將Sketch設計圖中每個元素的尺寸肋殴、位置、顏色坦弟、間距护锤、字號 等樣式信息自動同步到藍湖，團隊內的工程師等同事可以隨時查看酿傍。
如果設計圖出現(xiàn)改動和更新蔽豺，藍湖也能自動添加新版本。
如今設計師的工具那么多拧粪，這一款工具的優(yōu)勢在哪里呢
1.所有功能完全免費修陡，沒有任何項目或團隊成員數(shù)量限制。
2.中文的可霎！中文的魄鸦！中文的！
3.無與倫比的快癣朗！在國內的服務器+藍湖工程師嘔心瀝血優(yōu)化的算法拾因，使藍湖的“自動標注”的速度嗖嗖的！
4.藍湖還整合了設計圖流程的展示旷余，設計圖歷史版本管理绢记，多種情況和狀態(tài)的設計圖管理等功能。
5.設計師不但可以為每張設計圖添加備注文檔正卧，其他團隊成員還可以針對設計圖發(fā)表評論蠢熄，方便團隊在線高效溝通。（內心竟有點小小的惶恐…）
6.在藍湖上炉旷，還可以基于設計圖快速制作一個高保真的交互原型签孔，讓工程師不用再跑來問你“這個按鈕跳到哪啊”叉讥，該原型還可以在藍湖手機端App和微信上進行操作和預覽。
美團饥追，網(wǎng)易图仓，面包旅行等等國內知名互聯(lián)網(wǎng)公司都參與了藍湖的早期內測，為 “藍湖”提出了很多專業(yè)的建議但绕【却蓿“藍湖”基于這些反饋快速迭代，而“自動標注”功能就是其中一項捏顺。
由于是國內的團隊帚豪，溝通起來非常方便！所以如果設計師們有痛點或是需求草丧，可以積極討論狸臣！沒準下版本的藍湖就能直接自動作圖了呢！２础烛亦！
對惹，藍湖主體功能是Web端網(wǎng)頁平臺懂拾，不需要下載煤禽，直接注冊就可以免費使用。
來源：你丫才美工（Ymeigong)岖赋，之前今日頭條看到的推薦檬果，不知道網(wǎng)址。唐断。选脊。
3、Sketch/PS + Zeplin
隨著sketch的普及（sketch是啥脸甘，能吃嗎恳啥？自行谷歌、必應）丹诀，國內外很多項目團隊都陸續(xù)用起了sketch＋zeplin的開發(fā)模式钝的。不過話說回來，sketch真的有那么好用嗎铆遭？很多小伙伴們表示用ps好幾年了硝桩，要我重新學一個軟件，臣妾做不到懊度佟碗脊！～
其實剛進公司的時候也是這種心情的，沒用過mac更沒用過sketch棍弄，完全的小白用戶望薄，當時內心幾乎是奔潰的。但是自從接觸sketch后呼畸，真的是愛不釋手痕支，都不想用回ps了。
官方網(wǎng)站：https://www.zeplin.io/
PS導出zeplin官方視頻教程：https://www.youtube.com/watch?v=0cVbzq-Q43M
Sketch導出zeplin 官方視頻教程：https://www.youtube.com/watch?v=o9kOpAaDpQU
是否免費：免費
登錄方式：下載APP蛮原，注冊賬號登錄
介紹：
在使用 Zeplin 之前卧须，最早是使用馬克曼(手動標注，這里不做推薦)進行標注的儒陨，也就是直接在輸出效果圖上量尺寸花嘶；使用 Sketch 插件 Measure 之后，可以在畫板中生成尺寸標注信息蹦漠，導出標注圖提供給開發(fā)同學使用椭员。無論是馬克曼還是 Measure，最后的交付物是一致的笛园，馬克曼和接下來要介紹的Measure這種原始的標準就是已經(jīng)破壞了原本的視覺效果圖隘击，標注的信息一定會對原設計稿形成遮擋，因此一般效果圖和標注圖要分開給研铆，開發(fā)也經(jīng)常需要在兩個圖之間切換埋同，圖片管理不太方便。
zeplin 主要就是為了解決上述問題的棵红，使用它之后凶赁，可以在 Sketch 中一鍵導入 Artboard，在設計師做好圖層管理（命名逆甜、分組）的前提下虱肄，它可以自動生成標注信息（并且可以標注為 pt 或 dp），允許添加注釋形成類 prd 文檔交煞，并且自動提取 Style Guide浩峡，同時還允許添加項目組成員，提供給團隊組查看項目错敢。
操作：登錄成功之后翰灾，新建一個項目上傳素材，然后就可以進行操作稚茅。
官方預覽圖：
介紹之后回答兩個基本問題
①sketch支持windows嗎纸淮？
答：不好意思，目前沒有亚享！設計師為了提升工作效率咽块，就算吃土一兩個月也要買臺mac。不過windows用戶除了裝mac虛擬機外欺税，現(xiàn)在ps也支持zeplin插件了侈沪，只要安裝個插件揭璃，沒有mac也照樣可以任性的告別切圖和標注。
②zeplin支持windows嗎亭罪？
答：真夠意思瘦馍，這個必須有！不久前只有mac版应役，不過zeplin團隊怎么會放棄windows那么大塊的市場呢情组。真是喜大普奔，現(xiàn)在zeplin也支持windows了箩祥，從此開發(fā)哥哥再也不會抱怨網(wǎng)頁端的zeplin打開速度超級慢了院崇。
好了，廢話不多說袍祖，直接進正題底瓣。
③sketch＋zeplin的優(yōu)勢
1、sketch支持多畫板蕉陋，便于同時預覽濒持，占用內存較ps小很多；
2寺滚、sketch支持導出flinto柑营，便于制作交互動效原型；
3村视、zeplin解放設計師的雙手官套，從此告別切圖和標注；
4蚁孔、zeplin降低工程師的溝通成本奶赔，提高設計還原度。
更多細節(jié)已經(jīng)安裝方法導出技巧請移步：APP標注無煩惱杠氢！告別切圖標注-Sketch/PS+Zeplin
這里這介紹工具站刑，由于篇幅有限，并不詳細教你怎么用鼻百，工具多用用就會了绞旅，熟能生巧。
更多關于Zeplin的體驗和細節(jié)請移步：Zeplin 的使用體驗如何温艇？
4因悲、Sketch Measure
中文文檔：http://sketch.im/plugins/1
github：https://github.com/utom/sketch-measure
官方網(wǎng)站：http://utom.design/measure/
官方使用教程：http://utom.design/measure/how-to.html
是否免費：免費
登錄方式：下載APP,注冊賬號登錄
介紹：
Sketch Measure是一款可用于標注和設計規(guī)范的工具，支持Sketch 3.5版以上勺爱。Measure幫你解放你的雙手…
1.創(chuàng)建疊加
2.度量尺寸
3.度量邊距
4.獲取屬性
5.添加注釋
操作：登錄成功之后救巷，新建一個項目上傳PSD腥刹，然后就可以進行標注冻辩。
官方DEMO預覽地址：http://utom.design/news/#artboard0
Demo操作預覽圖：
關于Sketch Measure的使用教程，這里也不多細說妻枕，這里拋磚引玉的介紹一下，想要了解和使用請移步：
Sketch Measure切圖標注插件使用教程
下面談一談Zeplin和Sketch Measure的區(qū)別，純屬引用，表示沒用過Sketch Measure：
Zeplin：
①Zeplin注冊免費投放，只能保留一個Active項目，“STARTER”17刀／月暴构，3個Active項目跪呈，“GROWING BUSINESS”26刀／月段磨，12個Active項目取逾。“ORGANIZATION”每個用戶6.75刀／月苹支。
②支持MAC的Sketch和PS砾隅，以及PC的PS。（最大的優(yōu)點）
③數(shù)據(jù)必須上傳到網(wǎng)絡上债蜜，可以用客戶端查看也可以網(wǎng)頁查看晴埂，必須是注冊用戶。（很麻煩寻定，有些公司不允許上傳就沒辦法了）
④自動生成styleguide儒洛。（非常棒）
⑤切圖需要查看相應頁面時，從切圖欄下載狼速。（我用的并不多琅锻，也可能有其他方式）
Sketch Measure：
①完全免費。
②只支持MAC Sketch向胡，但查看不受限制恼蓬。
③數(shù)據(jù)保存在本地（html文件），方便打包后發(fā)郵件僵芹，缺點是每次更新都要再發(fā)一遍处硬，管理麻煩。
④沒有Zeplin智能拇派，沒有自動styleguide荷辕，但是有類似AssistorPS一樣的手動標注。
⑤有“顏色命名”但比styleguide差很多件豌，希望以后能更新類似功能桐腌。自動打包輸出切圖，支持iOS和Android的命名方式苟径。
5案站、其他諸如PxCook（像素大廚），cutterman的parker（這個收費，喜歡的可以贊助一下蟆盐，切圖那個免費哦??）等大同小異承边，這里就不多做介紹，感興趣的童鞋可以自己折騰玩玩石挂，工具嘛博助，適合自己的就是最好的，其他一些我也沒有實踐痹愚，大家自己看著玩富岳。。拯腮。
以上四個推薦軟件的看法：
標你妹適合小型的個人的一些項目窖式，對于新手來說，學習成本基本為0动壤，非常方便萝喘，web端沒有平臺限制；
藍湖Mac端APP首先你得有一臺Mac琼懊，其次是OSX系統(tǒng)阁簸，國內的良心之作，速度很快哼丈，適合個人和企業(yè)協(xié)同合作開發(fā)启妹；
Zeplin適合小型的團隊，還帶有一部分協(xié)作辦公的功能（留言和更新狀況）醉旦，要求前端也能適應這種新的方式饶米；
Sketch Measure更傳統(tǒng)一些，本地文檔髓抑、打包切圖等等咙崎，更適合有自己辦公流程的大公司，僅僅支持Mac吨拍。
