UI設(shè)計稿全自動切圖和標(biāo)注的工具推薦
|
原文收錄在作者的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關(guān)注最新動態(tài)，大家一起多交流學(xué)習(xí)，共同進步，以學(xué)習(xí)者的身份寫博客，記錄點滴。 工欲善其事，必先利其器。 前不久在 掘金 上看到一篇文章，前端 PS 切圖方法，圖文詳細(xì)，相信每個前端都經(jīng)過這種最原始的切圖手法，不禁想起自己以前剛?cè)腴T那會懶得切圖，直接QQ截圖，現(xiàn)在想起來真是初生牛犢不怕虎，怎么方便怎么來。。。 這種原始的PS切圖，不能說不好，只能說太影響效率了，一直認(rèn)為能用機器解決的事，就不要用人工操作，特別是切圖這種體力活，不應(yīng)該是由程序員來完成的，如果開發(fā)還停留在手工切圖，沒什么意義，只能說你的時間太廉價了。 自動切圖工具這里切圖推薦一個插件：Cutterman，更多切圖工具介紹請移步：扶朕起來，朕還能切 Cutterman 是個國產(chǎn)的切圖工具，廣告語就叫“最好用的切圖工具”
一鍵切圖，真正解放雙手Cutterman能夠讓你只需要點擊一個按鈕，就自動輸出你需要的各種各樣的圖片，快到?jīng)]有朋友！
??? 關(guān)于標(biāo)注將一個個標(biāo)注手動畫出來，耗時費力不說，畫得兩眼昏花，一不小心就會出現(xiàn)漏標(biāo)的情況。而這些漏標(biāo)的地方，攻城獅們往往在開發(fā)過程中才會發(fā)現(xiàn)，于是不得不一次又一次地找設(shè)計師進行確認(rèn)。
切好圖之后該怎么標(biāo)注了，這是一個面臨的問題，別告訴我你還在手動一個一個在那里測距離，我看見我同事之前就是用PS一個一個在那里量距離，看得我強迫癥和尷尬癥都犯了，記住，不要把時間浪費在體力活上，能用工具解決的事就不要用雙手，你這么喜歡干這種測距離的體力活你咋不去搬磚呢 有時候標(biāo)注設(shè)計師會幫你做，但是也不是總能碰見這么善解人意的設(shè)計師，我方設(shè)計師VS別人設(shè)計師。 我方設(shè)計師：
對方設(shè)計師：
想起敵方隊友VS我方隊友
?碰見這種我方設(shè)計師，沒人替我們分擔(dān)，這種低效的協(xié)作方式，造成了大多數(shù)互聯(lián)網(wǎng)產(chǎn)品設(shè)計團隊普遍的悲?。好魈煲暇€，通宵摳細(xì)節(jié)，吐血調(diào)界面，加班?。。?/p>
?? 幾款強大的標(biāo)注工具設(shè)計師不幫我們標(biāo)注，咋們自己來，借助工具標(biāo)注也是分分鐘的事情，假如復(fù)雜的標(biāo)注蹂躪了你，不要悲傷，不要哭泣。 如果有一天，設(shè)計師只需專注界面設(shè)計，不需再做切圖和標(biāo)注的工作；如果有一天，工程師只需專注功能框架建設(shè)，不需再花太多心思在標(biāo)注UI上面；沒有如果，這一天真的來了。。。 工以利器為助，人以賢友為助。有了這些工具的輔佐，讓我們開發(fā)的效率又快又好，簡直如虎添翼，爽到不行?！?/p>
? 1、標(biāo)你妹官方網(wǎng)站：http://www.biaonimeia.com/是否免費：免費登錄方式：直接微信掃一掃介紹：
操作：登錄成功之后，新建一個項目上傳PSD，然后就可以進行標(biāo)注。操作預(yù)覽圖：
??? 2、藍湖Mac端App
一款全中文免費的自動標(biāo)注的神器！徹底解放設(shè)計師的雙手，上傳文件就能蹭蹭蹭的自動標(biāo)注！什么？你還想自動作圖？冷靜點冷靜點…萬一失業(yè)了呢？ 官方網(wǎng)站：https://www.lanhuapp.com/是否免費：免費登錄方式：下載APP,注冊賬號登錄介紹：
操作：登錄成功之后，新建一個項目上傳，然后就可以進行標(biāo)注。操作預(yù)覽圖：
“自動標(biāo)注”功能可以完整而清晰地將Sketch設(shè)計圖中每個元素的尺寸、位置、顏色、間距、字號 等樣式信息自動同步到藍湖，團隊內(nèi)的工程師等同事可以隨時查看。
如今設(shè)計師的工具那么多，這一款工具的優(yōu)勢在哪里呢
1.所有功能完全免費，沒有任何項目或團隊成員數(shù)量限制。
5.設(shè)計師不但可以為每張設(shè)計圖添加備注文檔，其他團隊成員還可以針對設(shè)計圖發(fā)表評論，方便團隊在線高效溝通。（內(nèi)心竟有點小小的惶恐…）
美團，網(wǎng)易，面包旅行等等國內(nèi)知名互聯(lián)網(wǎng)公司都參與了藍湖的早期內(nèi)測，為 “藍湖”提出了很多專業(yè)的建議。“藍湖”基于這些反饋快速迭代，而“自動標(biāo)注”功能就是其中一項。 來源：你丫才美工（Ymeigong)，之前今日頭條看到的推薦，不知道網(wǎng)址。。。 ??? 3、Sketch/PS + Zeplin隨著sketch的普及（sketch是啥，能吃嗎？自行谷歌、必應(yīng)），國內(nèi)外很多項目團隊都陸續(xù)用起了sketch＋zeplin的開發(fā)模式。不過話說回來，sketch真的有那么好用嗎？很多小伙伴們表示用ps好幾年了，要我重新學(xué)一個軟件，臣妾做不到啊！～ 其實剛進公司的時候也是這種心情的，沒用過mac更沒用過sketch，完全的小白用戶，當(dāng)時內(nèi)心幾乎是奔潰的。但是自從接觸sketch后，真的是愛不釋手，都不想用回ps了。 官方網(wǎng)站：https://www.zeplin.io/PS導(dǎo)出zeplin官方視頻教程：https://www.youtube.com/watch?v=0cVbzq-Q43MSketch導(dǎo)出zeplin 官方視頻教程：https://www.youtube.com/watch?v=o9kOpAaDpQU是否免費：免費登錄方式：下載APP，注冊賬號登錄介紹：
操作：登錄成功之后，新建一個項目上傳素材，然后就可以進行操作。官方預(yù)覽圖：
介紹之后回答兩個基本問題 ①sketch支持windows嗎？答：不好意思，目前沒有！設(shè)計師為了提升工作效率，就算吃土一兩個月也要買臺mac。不過windows用戶除了裝mac虛擬機外，現(xiàn)在ps也支持zeplin插件了，只要安裝個插件，沒有mac也照樣可以任性的告別切圖和標(biāo)注。 ②zeplin支持windows嗎？答：真夠意思，這個必須有！不久前只有mac版，不過zeplin團隊怎么會放棄windows那么大塊的市場呢。真是喜大普奔，現(xiàn)在zeplin也支持windows了，從此開發(fā)哥哥再也不會抱怨網(wǎng)頁端的zeplin打開速度超級慢了。 好了，廢話不多說，直接進正題。 ③sketch＋zeplin的優(yōu)勢1、sketch支持多畫板，便于同時預(yù)覽，占用內(nèi)存較ps小很多； 2、sketch支持導(dǎo)出flinto，便于制作交互動效原型； 3、zeplin解放設(shè)計師的雙手，從此告別切圖和標(biāo)注； 4、zeplin降低工程師的溝通成本，提高設(shè)計還原度。
更多細(xì)節(jié)已經(jīng)安裝方法導(dǎo)出技巧請移步：APP標(biāo)注無煩惱！告別切圖標(biāo)注-Sketch/PS+Zeplin ?? 4、Sketch Measure中文文檔：http://sketch.im/plugins/1github：https://github.com/utom/sketch-measure官方網(wǎng)站：http://utom.design/measure/官方使用教程：http://utom.design/measure/how-to.html是否免費：免費登錄方式：下載APP,注冊賬號登錄介紹：
1.創(chuàng)建疊加
2.度量尺寸
3.度量邊距
4.獲取屬性
5.添加注釋
操作：登錄成功之后，新建一個項目上傳PSD，然后就可以進行標(biāo)注。官方DEMO預(yù)覽地址：http://utom.design/news/#artboard0Demo操作預(yù)覽圖：
關(guān)于Sketch Measure的使用教程，這里也不多細(xì)說，這里拋磚引玉的介紹一下，想要了解和使用請移步： 下面談一談Zeplin和Sketch Measure的區(qū)別，純屬引用，表示沒用過Sketch Measure：
Zeplin：
Sketch Measure：
??
5、其他諸如PxCook（像素大廚），cutterman的parker（這個收費，喜歡的可以贊助一下，切圖那個免費哦
 |
