一個互聯(lián)網(wǎng)產(chǎn)品從構(gòu)思到落地，大致分為以下環(huán)節(jié)：
發(fā)現(xiàn)商機 - 市場調(diào)研 - 頭腦風(fēng)暴 - 產(chǎn)品策劃/功能設(shè)計 - 原型繪制 - 交互設(shè)計 - 項目立項 - 流向圖繪制 - UI設(shè)計 - 切圖標注 - 技術(shù)開發(fā) - 產(chǎn)品測試 - 項目上線
切圖是指在設(shè)計稿里整理出技術(shù)開發(fā)所需要的素材或圖片。
合格的、嚴謹?shù)那袌D可以大大減少技術(shù)人員開發(fā)返工率，減少技術(shù)人員的開發(fā)工期，提升開發(fā)流暢度，從而減少項目人力成本，最終開發(fā)出有利于交互，擁有良好視覺感的產(chǎn)品。
切圖標注作為連接UI設(shè)計到技術(shù)開發(fā)兩者的工作模塊，缺其不可。熟悉工具使用、理解設(shè)計尺寸與切圖倍數(shù)的關(guān)系，設(shè)計師才能在切圖時進行判斷：目前的設(shè)計稿尺寸與切圖單位是否正確匹配。
一、切圖標注
如今，設(shè)計切圖插件能夠?qū)⒃O(shè)計稿里所選中的圖層、圖層組按不同開發(fā)規(guī)范寬度，倍數(shù)、進行合并裁剪切片。與傳統(tǒng)切圖方法“調(diào)整圖像尺寸-選中切圖圖層/圖層組-調(diào)整畫布尺寸-導(dǎo)出web所用格式”相比，這一系列“動作”被進行了一鍵化處理，只需要在插件中選擇好開發(fā)語言、保持文件夾位置便可一鍵標記或?qū)С觯瑯O大地減縮了對每一個切圖素材都需要進行一系列繁瑣流程的操作。
二、Lanhu插件
藍湖插件在設(shè)計稿做切片標記，上傳至平臺的畫板便帶有切圖下載。
三、Cutterman插件
3種開發(fā)語言（iOS，Android，Web）：根據(jù)不同的項目選擇不同的開發(fā)語言，下方小箭頭可進行素材輸出“倍數(shù)”選擇。
倍數(shù)：插件在導(dǎo)出選中圖層時以“@2x”和“XHDPI”為標準進行對設(shè)計稿進行等比放大縮小，如750px寬度的設(shè)計稿導(dǎo)出“@3x”和“@1x”時，導(dǎo)出切圖時會分別放大1.5倍和縮放至0.5倍，然后進行圖層導(dǎo)出。
導(dǎo)出選中圖層：插件根據(jù)已選語言、倍數(shù)，對已選中的所有圖層、圖層組進行合并裁剪然后導(dǎo)出。裁剪大小為所有圖層合并后總寬度高度。
固定尺寸：插件在導(dǎo)出選中圖層時對已選中的所有圖層、圖層組進行合并后，再調(diào)畫布或者圖像至固定尺寸大小，然后進行圖層導(dǎo)出。已選圖層大小〉固定尺寸設(shè)定，則被調(diào)整圖像，素材被壓縮。已選圖層大小〈固定尺寸設(shè)定，則被調(diào)整畫布，圖層素材大小不變，素材尺寸變?yōu)楣潭ǔ叽绱笮 ?
四、設(shè)計稿尺寸與切圖倍數(shù)
UI設(shè)計師需要在正確的設(shè)計稿尺寸下進行切圖，切圖素材才能正常供給開發(fā)人員使用。否則產(chǎn)品開發(fā)落地后會出現(xiàn)圖標變形，像素低下等情況。
手機端常用的設(shè)計尺寸與它們對應(yīng)的切圖倍數(shù)：
APP-iOS端：采用750x1334的來設(shè)計，@2x切圖直接適配750x1334 分辨率的機型，并向上向下適配主流分辨率（@2x/@3x）
設(shè)計稿750x1334px——切圖倍數(shù)iOS@2x，iOS@3x
APP-Android端：采用720 x 1280來設(shè)計，XHDPI切圖直接適配720 x 1280分辨率的機型，并向上向下適配主流分辨率（XHDPI/XXHDPI）
設(shè)計稿720x1280px——切圖倍數(shù)XHDPI，XXHDPI
微信小程序（它的單位都是以i6的750px為劃分點）
設(shè)計稿750x1334px——切圖倍數(shù)png24
手機端網(wǎng)頁、公眾號鏈接等（與微信小程序統(tǒng)一使用i6，方便做單位轉(zhuǎn)化）
設(shè)計稿750x1334px——切圖倍數(shù)
五、設(shè)計搞尺寸與切圖倍數(shù)對應(yīng)關(guān)系
APP-iOS
APP-Android
微信小程序
手機端網(wǎng)頁、公眾號鏈接
注意事項
必須要在正確的畫布尺寸上切圖，如不能在750px寬度的設(shè)計稿上去切XHDPI，XXHDPI圖，必須要在720px上處理XHDPI，XXHDPI圖。
關(guān)于750px設(shè)計稿上切@2x，@3x圖時，只要所選圖層是智能對象或者是矢量圖層，就不用擔心分辨率問題。
六、切圖格式與大小
切圖格式常用PNG，這是因為PNG體積小（K值），減少安裝包大??；無損壓縮，保持素材清晰度；支持透明效果，只保留圖層內(nèi)容本身。也是由于PNG圖片的特點，給切圖帶來了3個需要注意的知識點：
雙數(shù)像素切圖：750x1334px與720x1280px的切圖資源大小都必須為雙數(shù)像素，才能保證開發(fā)時素材被高清顯示。
實際切圖與展示區(qū)域（桌面圖標）：桌面圖標/應(yīng)用icon會被運用在不同的位置，比如手機桌面，產(chǎn)品平臺，手機系統(tǒng)列表……因此在輸出桌面圖標切圖素材時，不需要對桌面圖標切圖進行圓角處理。
點擊區(qū)域大?。?/strong>畫布大小≠素材大小，一般情況下素材分兩種，裝飾素材與可點擊素材，裝飾素材直接按圖層貼邊切圖，點擊素材需要考慮點擊區(qū)域的位置與大小，適當調(diào)整素材的畫布，再進行素材切圖。
內(nèi)存大小：為了方便用戶再使用產(chǎn)品中快速加載頁面，需要對大素材或者圖片進行壓縮，常用的工具有ppduck、熊貓壓圖，都是業(yè)內(nèi)較優(yōu)秀圖片壓縮工具，壓縮出來既保持了清晰度又減小的K值。（切圖全靠擼，工具靠百度）
七、切圖分類
八、CSS盒子模型——多狀態(tài)切圖
盒子模型是網(wǎng)頁開發(fā)中經(jīng)常用到的CSS技術(shù)思維模型，模型具有內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)4個屬性。所有的控件和信息都需要在每一個盒子里完成多狀態(tài)展示，所以可以先理解工程師們在搭建頁面時先在頁面上畫一個又一個的格子（盒子），它們都是矩形格子，與我們的切圖矩形相匹配，同一種控件的格子大小一摸一樣，就像復(fù)制粘貼一樣。
同一類型的控件與它們所有狀態(tài)的切圖都需要統(tǒng)一尺寸。
九、動效切圖-gif
動效實現(xiàn)原理是由若干張圖片連續(xù)播放，從而形成視覺影像，這若干張圖片就是需要提供給工程師實現(xiàn)動效的序列切圖。
十、切圖命名與分組
命名公式：
位置_類別_描述_狀態(tài).png
如：導(dǎo)航_按鈕_搜索_默認.png
Example: nav_button_search_default.png
切圖命名禁忌
1. 不可出現(xiàn)中文
2. 不可出現(xiàn)英文字母大寫
3. 不可出現(xiàn)空格鍵
4.不可用“-”符合，例如不可button-search。正確為button_search
切圖命名英文縮寫
1. 較短的單詞可通過去掉“元音”形成縮寫
2. 較長的單詞可取單詞的頭部幾個字母形成縮寫，如normal可寫成nor
3. 還有一些約定俗成的英文單詞縮寫，如background可寫成bg
類別命名
按鈕：btn_xxx.png
圖標：icon_xxx.png
圖片：pic_xxx.png或是img_xxx.png
照片：pho_xxx.png
常用狀態(tài)
正常：normal
按下：pressed
選中：selected
禁用：disabled
已訪問：visited
懸停：hover
切圖分組
項目-開發(fā)語言-日期
xxxAPP-iOS-2020.20.20
iOS：@2/@3切圖一起放
xxxAPP-Android-2020.20.20
Android：每個尺寸分開單獨放
十一、項目切圖模擬
案例一
切哪里？（粉紅色遮罩為切圖標注）
案例二
切哪里？（粉紅色遮罩為切圖標注）
案例三
切哪里？（粉紅色遮罩為切圖標注）
藍藍設(shè)計( www.jjddy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。