為了方便新入坑的UI設計獅和前端開發攻城獅能更順暢的看完這篇文章，首先，先來簡單科普一下到底什麼是切圖（老油條可直接忽略）？
通俗的說，切圖就是把設計稿切成一片片的，然後前端攻城獅經過div+css功能最大限度的還原設計圖，也就是要把零碎的圖片整合成一張完整的圖片。那為什麼要切圖，UI設計獅做完設計稿後交給攻城獅擼代碼不就完事了？實際上一張完整的設計稿是由不同的元素組成的，比如說，Logo、背景圖、圖標、文本等等，而部分元素，前端攻城獅是無法使用代碼實現效果的，因此，需要將其單獨切出來使用。
好了，其它的就不多贅述了。想了解更多的相關知識，大家自行去腦補。以一句話來描述其重要性，切圖是實際開發過程中必不可缺的一步，切圖資源的輸出將直接決定最終產品的效果。既然這麼重要，到底是誰負責切圖呢？是UI設計獅還是開發攻城獅？
我們經常會看到UI設計獅和前端攻城獅之間的撕逼大戰。UI設計獅說：“我們都已經輸出了高保真效果圖了，切圖那種髒活累活不應該是攻城獅自己去擺平嗎？”攻城獅說：“設計獅切圖更加專業，我們開發人員的主職是專注於代碼。”.......這種爭論終將無法得到定論，畢竟公說公有理，婆說婆有理。
以小編個人經驗，切圖是設計獅和攻城獅都必須掌握的技能。作為設計獅的你，自己的設計稿只有自己才知道該以什麼形式去展現；此外，自己生的孩子不該自己養嗎？作為攻城獅的你，萬一哪一天UI設計獅不能來上班了，你們就罷工了嗎？你要始終相信一句話：“技多不壓身”。那麼作為設計獅或是攻城獅的我們，切圖這種髒活累活，我們就得默默承受嗎？
當然不是，看到這裡的你有福了，小編接下來給大家推薦一款幫你輕鬆高效輸出自動切圖及標註的神器-摹客iDoc。從此解放你的雙手，告別手工，讓攻城獅也可以像設計獅一樣切圖。下面帶領大家一起來嚐鮮摹客iDoc亮點功能。
自動切圖
針對不同的場景，切圖的規範也會不一樣。UI設計獅只需要在設計稿中標記需要切圖的元素，在導入到摹客iDoc中後，即可下載各種倍率的切圖，方便適配各種平臺。如：IOS @1×、@2×、@3×；Android mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi；Web @1×、@2×等；支持PNG及SVG格式。
智能標註
將Sketch、PS、XD中做的設計原稿導入到摹客iDoc中後，便可輕鬆查看智能標註。此外，還可顯示百分比標註及一次選擇多個圖層並智能標註。所有的樣式代碼都可自動導出。
放大鏡
設計稿元素太多，自動標註密密麻麻看不清？在iDoc中支持局部放大，在放大標註信息的同時，不會導致標註模糊不清，而且還可以隨意放大倍數。
查找相同元素
支持一鍵查找頁面中的任何重複元素（如文本、顏色、邊距、寬度等），一次查找，就可全部看清。
文檔管理
支持多種附件文檔，支持任何類型文件的上傳共享，並支持多種產品文檔的直接在線預覽，包括Axure、Justinmind、Mockplus的原型演示、office文檔預覽、圖片文件預覽、pdf和文本文件預覽。還同時支持分組，團隊協作更方便。
以上是摹客iDoc的部分功能，怎麼樣？作為設計獅或是攻城獅的你，還怕切圖嗎？還怕團隊協作溝通難嗎?是不是想立即來體驗一下這款神器呢？趕緊來試試吧！
閱讀更多 Mockplus摹客 的文章
