對UI設(shè)計師而言，切圖是一項瑣碎，但又不得不完成的日常工作。
當(dāng)設(shè)計定稿后，設(shè)計師就需要將設(shè)計稿切成便于制作頁面的一張張小圖片，并且標(biāo)注好間距、寬高等各個參數(shù)，然后再交付給前端用于編寫html+css布局的靜態(tài)頁面。
切圖這事，其實不少設(shè)計師都在吐槽，十分浪費時間和精力，甚至還有部分設(shè)計師認(rèn)為，切圖應(yīng)該由前端自己完成，因為最后的css是由前端自己去碼，尺寸要多少、要什么倍率這些問題，前端自己是最清楚的，否則設(shè)計師反復(fù)切圖，相當(dāng)影響工作的效率。
總之，對設(shè)計師和前端工程師來說，切圖貌似變成了一個燙手的山芋，誰都不想接~
我記得，我剛從事設(shè)計師那陣，標(biāo)注切圖從來都是手動完成，一份設(shè)計稿完成后，差不多要花一周左右的時間來做標(biāo)注切圖這檔子事！
那時，用PS畫UI設(shè)計稿是行業(yè)的主流，而想要切圖，只能利用PS中的“切片工具”一個個地去切割圖片，一一打上切圖編號，最后再執(zhí)行導(dǎo)出步驟，這樣，手動切圖才算基本完成。
終于切圖完成后，又開始昏天黑地地手動標(biāo)注。而現(xiàn)實就是，即使我的標(biāo)注信息做得足夠詳細(xì)，但前端總能找到標(biāo)注的漏洞，然后@我：這里的間距為什么沒標(biāo)？這個icon寬高是多少？
所以，當(dāng)專業(yè)的切圖工具出現(xiàn)后，可以說極大地解放了我的生產(chǎn)力，之前一周的工作量現(xiàn)在一天就能完全搞定！
它可以一鍵切圖，整個切圖過程不超過2分鐘，相當(dāng)便捷！
給大家總結(jié)一下，我切圖的操作步驟：
step1：根據(jù)自己使用的設(shè)計工具，安裝并登錄上對應(yīng)的摹客插件；
step2：以我現(xiàn)在常用的Figma舉例，選中需要切圖的圖層或編組，在插件上點擊“添加切片圖層”；并根據(jù)設(shè)計稿的畫板大小，選擇設(shè)計稿對應(yīng)的倍率，點擊“上傳”即可快速將設(shè)計稿上傳至摹客平臺。
當(dāng)切圖上傳后，團(tuán)隊中的成員可以在摹客平臺查看并下載相關(guān)的切圖文件，再也不需要設(shè)計師反復(fù)打包并發(fā)送切圖了。
對前端工程師而言，他們也可以根據(jù)自己的需求，自主下載不同平臺（iOS/Android/Web）、不同倍率、不同格式（PNG/WebP/SVG/JPG）的切圖，另外還能自定義切圖尺寸，一鍵壓縮切圖大小，實現(xiàn)前端工程師切圖的自給自足。
當(dāng)然，摹客除了能夠一鍵切圖外，它還針對“標(biāo)注”這個老大難的問題，有對應(yīng)的高效解決方案！
首先是自動標(biāo)注，舉個例子，當(dāng)設(shè)計師上傳設(shè)計稿后，前端可以在“開發(fā)模式”中，用鼠標(biāo)點擊或hover在某個元素上時，平臺便會自動顯示該模塊的寬高、間距、色號等信息。
而且，當(dāng)摁住Alt鍵后，hover某個圖層，還能自動以該區(qū)域作為參照計算百分比，查看百分比標(biāo)注。
其次，針對某些特殊的設(shè)計樣式，平臺暫時無法識別，那么設(shè)計師就可以采取手動標(biāo)注的方式，對設(shè)計稿進(jìn)行附加說明。
另外，摹客還支持所有主流設(shè)計軟件Sketch、Photoshop、Adobe XD、Figma、Axure交付與分享，即使大家使用的設(shè)計工具不同，但都能在平臺中統(tǒng)一查看。
并且，它還有規(guī)范的設(shè)計系統(tǒng)，在云端管理所有設(shè)計資源，包括顏色、Logo、圖標(biāo)、文字、組件、度量元素、陰影等素材，實現(xiàn)資源的高效分享和快速復(fù)用。
總的說來，UI設(shè)計師是產(chǎn)研團(tuán)隊中非常重要的一個角色，而“切圖”是交付設(shè)計稿其中的一個環(huán)節(jié)，所以我認(rèn)為，咱們還是應(yīng)該在了解產(chǎn)品細(xì)節(jié)的前提下，配合開發(fā)人員切出實用性高的圖片。
最后，作為一名在行業(yè)中混跡了8年的設(shè)計師，我給大家總結(jié)了一波自己的切圖秘笈，歡迎大家在評論區(qū)一起探討：
小——尺寸盡可能??；
不——固定圖片外，切圖不含文字；
聊——多和開發(fā)同學(xué)溝通，和前端聊聊，便于交流；
便——切圖是為了便于開發(fā)使用的行為。
切圖保持偶數(shù)；
適當(dāng)留白，便于開發(fā)定位；
不規(guī)則icon可以采用圓心和切圖圓心吻合的方式對齊；
帶投影的button，card都要切圖；
最重要的是多和開發(fā)小哥溝通。
摹客協(xié)作
摹客RP
摹客DT
摹客超級版