摘要：藍(lán)湖通過(guò)幫助設(shè)計(jì)師更好地向團(tuán)隊(duì)展示設(shè)計(jì)圖描述頁(yè)面之間的跳轉(zhuǎn)關(guān)系。如果設(shè)計(jì)圖出現(xiàn)改動(dòng)和更新，藍(lán)湖也能自動(dòng)添加新版本。藍(lán)湖基于這些反饋快速迭代，而自動(dòng)標(biāo)注功能就是其中一項(xiàng)。

原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關(guān)注最新動(dòng)態(tài)，大家一起多交流學(xué)習(xí)，共同進(jìn)步，以學(xué)習(xí)者的身份寫博客，記錄點(diǎn)滴。

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

　　前不久在 掘金 上看到一篇文章，前端 PS 切圖方法，圖文詳細(xì)，相信每個(gè)前端都經(jīng)過(guò)這種最原始的切圖手法，不禁想起自己以前剛?cè)腴T那會(huì)懶得切圖，直接QQ截圖，現(xiàn)在想起來(lái)真是初生牛犢不怕虎，怎么方便怎么來(lái)。。。

　　這種原始的PS切圖，不能說(shuō)不好，只能說(shuō)太影響效率了，一直認(rèn)為能用機(jī)器解決的事，就不要用人工操作，特別是切圖這種體力活，不應(yīng)該是由程序員來(lái)完成的，如果開(kāi)發(fā)還停留在手工切圖，沒(méi)什么意義，只能說(shuō)你的時(shí)間太廉價(jià)了。

　　這里切圖推薦一個(gè)插件：Cutterman，更多切圖工具介紹請(qǐng)移步：扶朕起來(lái)，朕還能切

Cutterman致力于改善設(shè)計(jì)師的工作效率,為設(shè)計(jì)師提供優(yōu)秀、高效、實(shí)用的技術(shù)解決方案, 解放雙手。讓創(chuàng)意不再有界限, 讓設(shè)計(jì)更專注!

支持多倍圖

多種格式

多圖層導(dǎo)出

可以設(shè)置固定大小

操作簡(jiǎn)單

免費(fèi)，只需要注冊(cè)個(gè)賬號(hào)即可

　　Cutterman能夠讓你只需要點(diǎn)擊一個(gè)按鈕，就自動(dòng)輸出你需要的各種各樣的圖片，快到?jīng)]有朋友！

???

　　將一個(gè)個(gè)標(biāo)注手動(dòng)畫出來(lái)，耗時(shí)費(fèi)力不說(shuō)，畫得兩眼昏花，一不小心就會(huì)出現(xiàn)漏標(biāo)的情況。而這些漏標(biāo)的地方，攻城獅們往往在開(kāi)發(fā)過(guò)程中才會(huì)發(fā)現(xiàn)，于是不得不一次又一次地找設(shè)計(jì)師進(jìn)行確認(rèn)。

　　切好圖之后該怎么標(biāo)注了，這是一個(gè)面臨的問(wèn)題，別告訴我你還在手動(dòng)一個(gè)一個(gè)在那里測(cè)距離，我看見(jiàn)我同事之前就是用PS一個(gè)一個(gè)在那里量距離，看得我強(qiáng)迫癥和尷尬癥都犯了，記住，不要把時(shí)間浪費(fèi)在體力活上，能用工具解決的事就不要用雙手，你這么喜歡干這種測(cè)距離的體力活你咋不去搬磚呢?，讓別人用雙手拯救你的雙手。

　　有時(shí)候標(biāo)注設(shè)計(jì)師會(huì)幫你做，但是也不是總能碰見(jiàn)這么善解人意的設(shè)計(jì)師，我方設(shè)計(jì)師VS別人設(shè)計(jì)師。

?碰見(jiàn)這種我方設(shè)計(jì)師，沒(méi)人替我們分擔(dān)，這種低效的協(xié)作方式，造成了大多數(shù)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)普遍的悲?。好魈煲暇€，通宵摳細(xì)節(jié)，吐血調(diào)界面，加班?。?！

??

　　設(shè)計(jì)師不幫我們標(biāo)注，咋們自己來(lái)，借助工具標(biāo)注也是分分鐘的事情，假如復(fù)雜的標(biāo)注蹂躪了你，不要悲傷，不要哭泣。

　　如果有一天，設(shè)計(jì)師只需專注界面設(shè)計(jì)，不需再做切圖和標(biāo)注的工作；如果有一天，工程師只需專注功能框架建設(shè)，不需再花太多心思在標(biāo)注UI上面；沒(méi)有如果，這一天真的來(lái)了。。。

　　工以利器為助，人以賢友為助。有了這些工具的輔佐，讓我們開(kāi)發(fā)的效率又快又好，簡(jiǎn)直如虎添翼，爽到不行。　

以下是一些能夠讓程序員與設(shè)計(jì)師 相愛(ài) 的軟件
對(duì)！就！是！相！愛(ài)！
你耕田來(lái)我織布
你設(shè)計(jì)來(lái)我開(kāi)發(fā)

?

官方網(wǎng)站：http://www.biaonimeia.com/

是否免費(fèi)：免費(fèi)

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

介紹：

天天讓我標(biāo)注測(cè)距離，標(biāo)你妹啊，作為射擊獅，卻干著死美工的活，每天要為程序猿同學(xué)標(biāo)注PSD有木有？但我卻憧憬著成為逼格很高的射擊獅。為了能夠早點(diǎn)下班泡妹子看電影。標(biāo)你妹啊幫你解放你的雙手…

操作：登錄成功之后，新建一個(gè)項(xiàng)目上傳PSD，然后就可以進(jìn)行標(biāo)注。

操作預(yù)覽圖：

???

　　一款全中文免費(fèi)的自動(dòng)標(biāo)注的神器！徹底解放設(shè)計(jì)師的雙手，上傳文件就能蹭蹭蹭的自動(dòng)標(biāo)注！什么？你還想自動(dòng)作圖？冷靜點(diǎn)冷靜點(diǎn)…萬(wàn)一失業(yè)了呢？
　　現(xiàn)在，這款叫藍(lán)湖的設(shè)計(jì)師標(biāo)注神器，最新版開(kāi)始支持“自動(dòng)標(biāo)注”的功能（目前僅支持.Sketch，Psd版本即將上線）
　　只需下載“藍(lán)湖”Mac端App，即可實(shí)現(xiàn)：從Sketch一鍵導(dǎo)出設(shè)計(jì)圖→自動(dòng)生成標(biāo)注→自動(dòng)共享給團(tuán)隊(duì)→團(tuán)隊(duì)相關(guān)成員自動(dòng)收到提醒等一系列自動(dòng)化功能。

官方網(wǎng)站：https://www.lanhuapp.com/

是否免費(fèi)：免費(fèi)

登錄方式：下載APP,注冊(cè)賬號(hào)登錄

介紹：

藍(lán)湖是一款產(chǎn)品設(shè)計(jì)師的協(xié)作平臺(tái),幫助設(shè)計(jì)師更快地完成工作。藍(lán)湖通過(guò)幫助設(shè)計(jì)師更好地向團(tuán)隊(duì)展示設(shè)計(jì)圖,描述頁(yè)面之間的跳轉(zhuǎn)關(guān)系。藍(lán)湖還支持從Sketch一鍵分享、在線協(xié)作…

操作：登錄成功之后，新建一個(gè)項(xiàng)目上傳，然后就可以進(jìn)行標(biāo)注。

操作預(yù)覽圖：

“自動(dòng)標(biāo)注”功能可以完整而清晰地將Sketch設(shè)計(jì)圖中每個(gè)元素的尺寸、位置、顏色、間距、字號(hào) 等樣式信息自動(dòng)同步到藍(lán)湖，團(tuán)隊(duì)內(nèi)的工程師等同事可以隨時(shí)查看。
如果設(shè)計(jì)圖出現(xiàn)改動(dòng)和更新，藍(lán)湖也能自動(dòng)添加新版本。

如今設(shè)計(jì)師的工具那么多，這一款工具的優(yōu)勢(shì)在哪里呢

1.所有功能完全免費(fèi)，沒(méi)有任何項(xiàng)目或團(tuán)隊(duì)成員數(shù)量限制。
2.中文的！中文的！中文的！
3.無(wú)與倫比的快！在國(guó)內(nèi)的服務(wù)器+藍(lán)湖工程師嘔心瀝血優(yōu)化的算法，使藍(lán)湖的“自動(dòng)標(biāo)注”的速度嗖嗖的！
4.藍(lán)湖還整合了設(shè)計(jì)圖流程的展示，設(shè)計(jì)圖歷史版本管理，多種情況和狀態(tài)的設(shè)計(jì)圖管理等功能。

5.設(shè)計(jì)師不但可以為每張?jiān)O(shè)計(jì)圖添加備注文檔，其他團(tuán)隊(duì)成員還可以針對(duì)設(shè)計(jì)圖發(fā)表評(píng)論，方便團(tuán)隊(duì)在線高效溝通。（內(nèi)心竟有點(diǎn)小小的惶恐…）
6.在藍(lán)湖上，還可以基于設(shè)計(jì)圖快速制作一個(gè)高保真的交互原型，讓工程師不用再跑來(lái)問(wèn)你“這個(gè)按鈕跳到哪啊”，該原型還可以在藍(lán)湖手機(jī)端App和微信上進(jìn)行操作和預(yù)覽。

美團(tuán)，網(wǎng)易，面包旅行等等國(guó)內(nèi)知名互聯(lián)網(wǎng)公司都參與了藍(lán)湖的早期內(nèi)測(cè)，為 “藍(lán)湖”提出了很多專業(yè)的建議。“藍(lán)湖”基于這些反饋快速迭代，而“自動(dòng)標(biāo)注”功能就是其中一項(xiàng)。
由于是國(guó)內(nèi)的團(tuán)隊(duì)，溝通起來(lái)非常方便！所以如果設(shè)計(jì)師們有痛點(diǎn)或是需求，可以積極討論！沒(méi)準(zhǔn)下版本的藍(lán)湖就能直接自動(dòng)作圖了呢?。?！
對(duì)惹，藍(lán)湖主體功能是Web端網(wǎng)頁(yè)平臺(tái)，不需要下載，直接注冊(cè)就可以免費(fèi)使用。

來(lái)源：你丫才美工（Ymeigong)，之前今日頭條看到的推薦，不知道網(wǎng)址。。。

???

　　隨著sketch的普及（sketch是啥，能吃嗎？自行谷歌、必應(yīng)），國(guó)內(nèi)外很多項(xiàng)目團(tuán)隊(duì)都陸續(xù)用起了sketch＋zeplin的開(kāi)發(fā)模式。不過(guò)話說(shuō)回來(lái)，sketch真的有那么好用嗎？很多小伙伴們表示用ps好幾年了，要我重新學(xué)一個(gè)軟件，臣妾做不到?。　?/p>

　　其實(shí)剛進(jìn)公司的時(shí)候也是這種心情的，沒(méi)用過(guò)mac更沒(méi)用過(guò)sketch，完全的小白用戶，當(dāng)時(shí)內(nèi)心幾乎是奔潰的。但是自從接觸sketch后，真的是愛(ài)不釋手，都不想用回ps了。

官方網(wǎng)站：https://www.zeplin.io/

PS導(dǎo)出zeplin官方視頻教程：https://www.youtube.com/watch...

Sketch導(dǎo)出zeplin 官方視頻教程：https://www.youtube.com/watch...

是否免費(fèi)：免費(fèi)

登錄方式：下載APP，注冊(cè)賬號(hào)登錄

介紹：

在使用 Zeplin 之前，最早是使用馬克曼(手動(dòng)標(biāo)注，這里不做推薦)進(jìn)行標(biāo)注的，也就是直接在輸出效果圖上量尺寸；使用 Sketch 插件 Measure 之后，可以在畫板中生成尺寸標(biāo)注信息，導(dǎo)出標(biāo)注圖提供給開(kāi)發(fā)同學(xué)使用。無(wú)論是馬克曼還是 Measure，最后的交付物是一致的，馬克曼和接下來(lái)要介紹的Measure這種原始的標(biāo)準(zhǔn)就是已經(jīng)破壞了原本的視覺(jué)效果圖，標(biāo)注的信息一定會(huì)對(duì)原設(shè)計(jì)稿形成遮擋，因此一般效果圖和標(biāo)注圖要分開(kāi)給，開(kāi)發(fā)也經(jīng)常需要在兩個(gè)圖之間切換，圖片管理不太方便。
zeplin 主要就是為了解決上述問(wèn)題的，使用它之后，可以在 Sketch 中一鍵導(dǎo)入 Artboard，在設(shè)計(jì)師做好圖層管理（命名、分組）的前提下，它可以自動(dòng)生成標(biāo)注信息（并且可以標(biāo)注為 pt 或 dp），允許添加注釋形成類 prd 文檔，并且自動(dòng)提取 Style Guide，同時(shí)還允許添加項(xiàng)目組成員，提供給團(tuán)隊(duì)組查看項(xiàng)目。

操作：登錄成功之后，新建一個(gè)項(xiàng)目上傳素材，然后就可以進(jìn)行操作。

官方預(yù)覽圖：

介紹之后回答兩個(gè)基本問(wèn)題

①sketch支持windows嗎？

答：不好意思，目前沒(méi)有！設(shè)計(jì)師為了提升工作效率，就算吃土一兩個(gè)月也要買臺(tái)mac。不過(guò)windows用戶除了裝mac虛擬機(jī)外，現(xiàn)在ps也支持zeplin插件了，只要安裝個(gè)插件，沒(méi)有mac也照樣可以任性的告別切圖和標(biāo)注。

②zeplin支持windows嗎？

答：真夠意思，這個(gè)必須有！不久前只有mac版，不過(guò)zeplin團(tuán)隊(duì)怎么會(huì)放棄windows那么大塊的市場(chǎng)呢。真是喜大普奔，現(xiàn)在zeplin也支持windows了，從此開(kāi)發(fā)哥哥再也不會(huì)抱怨網(wǎng)頁(yè)端的zeplin打開(kāi)速度超級(jí)慢了。

好了，廢話不多說(shuō)，直接進(jìn)正題。

③sketch＋zeplin的優(yōu)勢(shì)

1、sketch支持多畫板，便于同時(shí)預(yù)覽，占用內(nèi)存較ps小很多；
2、sketch支持導(dǎo)出flinto，便于制作交互動(dòng)效原型；
3、zeplin解放設(shè)計(jì)師的雙手，從此告別切圖和標(biāo)注；
4、zeplin降低工程師的溝通成本，提高設(shè)計(jì)還原度。

更多細(xì)節(jié)已經(jīng)安裝方法導(dǎo)出技巧請(qǐng)移步：APP標(biāo)注無(wú)煩惱！告別切圖標(biāo)注-Sketch/PS+Zeplin
這里這介紹工具，由于篇幅有限，并不詳細(xì)教你怎么用，工具多用用就會(huì)了，熟能生巧。
更多關(guān)于Zeplin的體驗(yàn)和細(xì)節(jié)請(qǐng)移步：Zeplin 的使用體驗(yàn)如何？

??

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

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

官方網(wǎng)站：http://utom.design/measure/

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

是否免費(fèi)：免費(fèi)

登錄方式：下載APP,注冊(cè)賬號(hào)登錄

介紹：

Sketch Measure是一款可用于標(biāo)注和設(shè)計(jì)規(guī)范的工具，支持Sketch 3.5版以上。Measure幫你解放你的雙手…

1.創(chuàng)建疊加

2.度量尺寸

3.度量邊距

4.獲取屬性

5.添加注釋

操作：登錄成功之后，新建一個(gè)項(xiàng)目上傳PSD，然后就可以進(jìn)行標(biāo)注。

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

Demo操作預(yù)覽圖：

**關(guān)于Sketch Measure的使用教程，這里也不多細(xì)說(shuō)，這里拋磚引玉的介紹一下，想要了解和使用請(qǐng)移步：
Sketch Measure切圖標(biāo)注插件使用教程**

下面談一談Zeplin和Sketch Measure的區(qū)別，純屬引用，表示沒(méi)用過(guò)Sketch Measure：

Zeplin：

①Zeplin注冊(cè)免費(fèi)，只能保留一個(gè)Active項(xiàng)目，“STARTER”17刀／月，3個(gè)Active項(xiàng)目，“GROWING BUSINESS”26刀／月，12個(gè)Active項(xiàng)目?！癘RGANIZATION”每個(gè)用戶6.75刀／月。

②支持MAC的Sketch和PS，以及PC的PS。（最大的優(yōu)點(diǎn)）
③數(shù)據(jù)必須上傳到網(wǎng)絡(luò)上，可以用客戶端查看也可以網(wǎng)頁(yè)查看，必須是注冊(cè)用戶。（很麻煩，有些公司不允許上傳就沒(méi)辦法了）
④自動(dòng)生成styleguide。（非常棒）
⑤切圖需要查看相應(yīng)頁(yè)面時(shí)，從切圖欄下載。（我用的并不多，也可能有其他方式）

Sketch Measure：

①完全免費(fèi)。

②只支持MAC Sketch，但查看不受限制。
③數(shù)據(jù)保存在本地（html文件），方便打包后發(fā)郵件，缺點(diǎn)是每次更新都要再發(fā)一遍，管理麻煩。
④沒(méi)有Zeplin智能，沒(méi)有自動(dòng)styleguide，但是有類似AssistorPS一樣的手動(dòng)標(biāo)注。
⑤有“顏色命名”但比styleguide差很多，希望以后能更新類似功能。自動(dòng)打包輸出切圖，支持iOS和Android的命名方式。

??

???

標(biāo)你妹適合小型的個(gè)人的一些項(xiàng)目，對(duì)于新手來(lái)說(shuō)，學(xué)習(xí)成本基本為0，非常方便，web端沒(méi)有平臺(tái)限制；
藍(lán)湖Mac端APP首先你得有一臺(tái)Mac，其次是OSX系統(tǒng)，國(guó)內(nèi)的良心之作，速度很快，適合個(gè)人和企業(yè)協(xié)同合作開(kāi)發(fā)；
Zeplin適合小型的團(tuán)隊(duì)，還帶有一部分協(xié)作辦公的功能（留言和更新?tīng)顩r），要求前端也能適應(yīng)這種新的方式；
Sketch Measure更傳統(tǒng)一些，本地文檔、打包切圖等等，更適合有自己辦公流程的大公司，僅僅支持Mac。

???