漲姿勢了！MasterGo 原來還可以這樣切圖！
時間：2023-07-25 01:15:01 | 來源：網(wǎng)站運營
時間：2023-07-25 01:15:01 來源：網(wǎng)站運營
漲姿勢了！MasterGo 原來還可以這樣切圖?。航缑嬖O(shè)計時，為了更好地與開發(fā)協(xié)作，UI 設(shè)計師們通常需要根據(jù)網(wǎng)頁端、移動端不同的界面開發(fā)需求，單獨制作各個參數(shù)的切圖，并標注好尺寸和間距，再交付給開發(fā)完成 html + css 布局的靜態(tài)頁面。
「切圖」作為 UI 設(shè)計師重要的輸出物之一，不僅是一個體現(xiàn)設(shè)計師專業(yè)水準的重要標準，也是對設(shè)計態(tài)度最有力的表達，更是確保前端開發(fā)最大限度還原設(shè)計效果的關(guān)鍵。那么如何輸出具有全局把控和細節(jié)專注的高質(zhì)量切圖呢？
本篇文章將從工具使用、輸出類型、命名規(guī)范這三個方面解析「切圖」的那些事兒。無論你是設(shè)計師還是工程師，如果你的工作中涉及到了切圖，那么一定、一定要仔細往下看哦！
如何利用工具簡化切圖流程？
名詞定義 -「切圖」是指添加了導(dǎo)出項的圖層，通過設(shè)置倍率、前綴/后綴的方式生成和導(dǎo)出 png、jpg、webp、pdf等不同類型圖片。
切圖是一個流程性的工作，根據(jù)網(wǎng)頁端、移動端不同的界面開發(fā)需求，設(shè)計師往往需要輸出多套匹配不同設(shè)備型號的切圖，命名后打包交付開發(fā)。這樣一個相對較為繁瑣的設(shè)計交付方式，在沒有工具幫助的情況下，需要設(shè)計師花費大量精力在輸出多套切圖上，操作過程繁瑣還容易出錯，為后續(xù)開發(fā)工作增加不必要的工作量，甚至影響界面最終呈現(xiàn)效果。
工欲善其事，必先利其器。合理利用工具可以起到事半功倍的效果，不斷為我們的設(shè)計工作提效。
面對繁瑣切圖流程所帶來的一系列問題，相信你也和他們一樣希望有一個工具能想你所想、幫你解放雙手：
“可以自動導(dǎo)出不同設(shè)備尺寸的切圖嗎？”
“切圖導(dǎo)出的分辨率可以調(diào)節(jié)嗎？”
“希望能夠批量導(dǎo)出需要的切圖，這樣我可以更快速、方便地交付給開發(fā)?！?br>
如果你正在經(jīng)歷以上這些問題，那么請跟我一起繼續(xù)往下看看 MasterGo 的切圖功能是如何解決這些問題的吧！
更高效的交付方式
我們預(yù)設(shè)了 iOS、 Android、Flutter 設(shè)備的尺寸、倍率、前后綴、格式等參數(shù)。向開發(fā)交付設(shè)計稿時，無需再手動一個個切圖并且設(shè)置參數(shù)導(dǎo)出，使用 MasterGo 切圖功能，一圖即可精準匹配多設(shè)備、多尺寸使用需求，從而避免因繁瑣切圖流程而導(dǎo)致的多余的工作量，幫助設(shè)計師們更高效、精準地交付設(shè)計稿。
更暢通的協(xié)作體驗
不久前，MasterGo 切圖工具上新了「切圖列表」及「批量導(dǎo)出切圖」功能，設(shè)計師交付設(shè)計稿后，工程師可以通過「切圖列表」快速定位切圖以及查看相關(guān)標注和應(yīng)用方式，同時，還可以一鍵快速導(dǎo)出所有切圖，或者批量導(dǎo)出你需要的切圖，設(shè)計交付無縫銜接，在 MasterGo 上的協(xié)作體驗更加暢快。
在 MasterGo 你可以像這樣便捷、輕松地使用切圖功能為你的設(shè)計交付提效
設(shè)計界面，鼠標點擊工具欄「容器」旁的下拉圖標或使用快捷鍵 S，即可開始使用切圖工具。并且還可以使用快捷鍵 Shift + S，快速顯示和隱藏制作的切圖。
設(shè)置導(dǎo)出參數(shù)切完圖后，需要在右側(cè)欄下方設(shè)置導(dǎo)出選項，MasterGo 支持 Android、iOS、Flutter 設(shè)備的尺寸、倍率、格式等不同類型的切圖導(dǎo)出。
btw，這里分享一個管理導(dǎo)出選項的小技巧，當我們想要調(diào)整或者刪除某個導(dǎo)出設(shè)置時，可以選中該導(dǎo)出選項，并上下拖拽調(diào)整位置順序，另外還可以點擊“-”刪除該導(dǎo)出選項。
快速定位查看切圖MasterGo 提供了「切圖列表」功能，如方圖中演示的一樣，你可以在切圖列表中點擊某個切圖，在畫布中快速定位并查看該切圖相關(guān)的標注和應(yīng)用方式。
批量導(dǎo)出所需切圖在切圖列表中，你還可以選擇一鍵快速導(dǎo)出所有切圖，或者批量導(dǎo)出你需要的切圖，在整個切圖輸出流程中，幫你更快速、方便地交付給開發(fā)。
關(guān)于切圖使用的 Tips切圖的圖層需要與圖標圖層創(chuàng)建一個編組，這樣切圖的背景就會是一個透明的圖層，方便開發(fā)使用。
任何元素在設(shè)計頁面設(shè)置了切圖導(dǎo)出選項，標注模式下，都會有虛線提示，幫助研發(fā)快速定位切圖位置。
哪些需要輸出為切圖？
我們都知道合適、精準的切圖可以確保設(shè)計效果圖的高保真還原，并且降低工程師的開發(fā)工作量。
然而，切圖時很多元素是不需要輸出的，直接使用系統(tǒng)原生的設(shè)計元素修改參數(shù)即可。例如搜索框只需要在標注中表明尺寸大小、圓角大小、描邊粗細、色值即可，工程師會根據(jù)設(shè)計效果通過代碼實現(xiàn)這種效果。
而那些代碼無法實現(xiàn)的設(shè)計元素則需要通過切圖的方式交付給開發(fā)，比如：
桌面應(yīng)用圖標和系統(tǒng)圖標無法用代碼寫出來的，并且會被運用在不同的地方展示，在交付時需要把不同設(shè)備的尺寸全部輸出切圖。
按鈕也是需要切圖輸出的元素，并且不僅要輸出正常狀態(tài)的切圖，更要注意不要遺漏其他狀態(tài)的切圖，比如點擊狀態(tài)、不可點擊狀態(tài)等等。
圖片類切圖主要是指啟動頁、新手引導(dǎo)頁、默認提示、廣告圖等需要完整切圖的圖片。為方便開發(fā)同一類型的圖片切圖要保持尺寸一致，并且這些切圖文件較大，需要控制切圖文件的大小。
動效元素切圖一般是指加載動效所需要的切圖元素，如下拉加載動效就是由若干張切圖連續(xù)播放形成的。這種切圖要求要保證動效播放時的流暢自然，是需要設(shè)計師仔細斟酌的。
可拉伸元素一般是指按鈕、輸入框等切圖過程中可以對切圖進行瘦身壓縮的元素。這些元素通過瘦身壓縮，可以極大地減小圖片的大小提升用戶使用速度。
這里需要注意的是，切圖資源尺寸須為 8 或者 4 的倍數(shù)。
并且當圖片或圖標元素有陰影效果時，如果陰影有好幾層、或者說是高斯模糊這種代碼不好實現(xiàn)的效果，可以直接使用切圖，如果是使用陰影做出來的簡單投影效果，只需將參數(shù)告知前端開發(fā)即可。
切圖命名規(guī)范是什么？
規(guī)范的切圖命名會讓開發(fā)更容易找到其所需要的文件，讓設(shè)計師與開發(fā)之間的交付流程更順暢。可以說規(guī)范的切圖命名是一個設(shè)計師的基本修養(yǎng)。一般來說切圖命名可以遵循以下規(guī)則：
作為 UI 設(shè)計師需要掌握的基礎(chǔ)知識之一，切圖命名的規(guī)范的關(guān)鍵在于團隊必須有一個統(tǒng)一的規(guī)則，以便提升協(xié)作效率。
但因為不同的團隊情況不一，所以切圖命名方式可能不盡相同，這里只提供一種方法與思路僅供參考，建議大家在切圖之前多跟開發(fā)團隊溝通，根據(jù)實際情況去制定切圖命名規(guī)范。
好啦，本期關(guān)于切圖的那些事兒就嘮到這里啦，歡迎關(guān)注 MasterGo 獲取更多設(shè)計技巧哦～
在線咨詢