一個互聯(lián)網(wǎng)產(chǎn)品從構(gòu)思到落地，大致分為以下環(huán)節(jié)：發(fā)現(xiàn)商機(jī) – 市場調(diào)研 – 頭腦風(fēng)暴 – 產(chǎn)品策劃/功能設(shè)計 – 原型繪制 – 交互設(shè)計 – 項目立項 – 流向圖繪制 – UI設(shè)計 – 切圖標(biāo)注 – 技術(shù)開發(fā) – 產(chǎn)品測試 – 項目上線。

切圖是指在設(shè)計稿里整理出技術(shù)開發(fā)所需要的素材或圖片。合格的、嚴(yán)謹(jǐn)?shù)那袌D可以大大減少技術(shù)人員開發(fā)的返工率，減少技術(shù)人員的開發(fā)工期，提升開發(fā)流暢度，從而減少項目人力成本，最終開發(fā)出有利于交互，擁有良好視覺感的產(chǎn)品。

切圖標(biāo)注作為連接 UI 設(shè)計到技術(shù)開發(fā)兩者的工作模塊，是不可或缺的。設(shè)計師需要熟悉工具、理解設(shè)計尺寸與切圖倍數(shù)的關(guān)系，才能在切圖時進(jìn)行判斷：目前的設(shè)計稿尺寸與切圖單位是否正確匹配。

切圖標(biāo)注

如今，設(shè)計切圖插件能夠?qū)⒃O(shè)計稿里所選中的圖層、圖層組按不同開發(fā)規(guī)范寬度、倍數(shù)，進(jìn)行合并裁剪切片。與傳統(tǒng)切圖方法「調(diào)整圖像尺寸 - 選中切圖圖層/圖層組 - 調(diào)整畫布尺寸 - 導(dǎo)出web所用格式」相比，這一系列動作被進(jìn)行了一鍵化處理，只需要在插件中選擇好開發(fā)語言，保持文件夾位置便可一鍵標(biāo)記或?qū)С觯瑯O大地縮減了繁瑣的操作流程。

藍(lán)湖插件

藍(lán)湖插件在設(shè)計稿做切片標(biāo)記，上傳至平臺的畫板便帶有切圖下載。

Cutterman插件

3種開發(fā)語言（iOS，Android，Web）：根據(jù)不同的項目選擇不同的開發(fā)語言，下方小箭頭可進(jìn)行素材輸出「倍數(shù)」選擇。

倍數(shù)：插件在導(dǎo)出選中圖層時以「@2x」和「XHDPI」為標(biāo)準(zhǔn)對設(shè)計稿進(jìn)行等比放大縮小。如 750px 寬度的設(shè)計稿導(dǎo)出「@3x」和「@1x」時，導(dǎo)出的切圖會分別放大 1.5 倍和縮小至 0.5 倍，然后進(jìn)行圖層導(dǎo)出。

導(dǎo)出選中圖層：插件根據(jù)已選語言、倍數(shù)，對已選中的所有圖層、圖層組進(jìn)行合并裁剪然后導(dǎo)出。裁剪大小為所有圖層合并后總寬度高度。

固定尺寸：插件在導(dǎo)出選中圖層時對已選中的所有圖層、圖層組進(jìn)行合并后，再調(diào)畫布或者圖像至固定尺寸大小，然后進(jìn)行圖層導(dǎo)出。已選圖層大小大于固定尺寸設(shè)定，則被調(diào)整圖像，素材被壓縮。已選圖層大小小于固定尺寸設(shè)定，則被調(diào)整畫布，圖層素材大小不變，素材尺寸變?yōu)楣潭ǔ叽绱笮　?/p>

設(shè)計稿尺寸與切圖倍數(shù)

UI 設(shè)計師需要在正確的設(shè)計稿尺寸下進(jìn)行切圖，切圖素材才能正常供給開發(fā)人員使用。否則產(chǎn)品開發(fā)落地后會出現(xiàn)圖標(biāo)變形，像素低等情況。

手機(jī)端常用的設(shè)計尺寸與它們對應(yīng)的切圖倍數(shù)

iOS：采用 750x1334 來設(shè)計，@2x 切圖直接適配 750x1334 分辨率的機(jī)型，并向上向下適配主流分辨率（@2x/@3x）。

設(shè)計稿750x1334px——切圖倍數(shù)iOS@2x，iOS@3x

Android：采用 720x1280 來設(shè)計，XHDPI 切圖直接適配 720x1280 分辨率的機(jī)型，并向上向下適配主流分辨率（XHDPI/XXHDPI）

設(shè)計稿720x1280px——切圖倍數(shù)XHDPI，XXHDPI

微信小程序（它的單位都是以i6的750px為劃分點(diǎn)）

設(shè)計稿750x1334px——切圖倍數(shù)png24

手機(jī)端網(wǎng)頁、公眾號鏈接等（與微信小程序統(tǒng)一使用i6，方便做單位轉(zhuǎn)化）

設(shè)計稿750x1334px——切圖倍數(shù)

設(shè)計稿尺寸與切圖倍數(shù)對應(yīng)關(guān)系

1. APP-iOS

2. APP-Android

3. 微信小程序

4. 手機(jī)端網(wǎng)頁、公眾號鏈接

5. 注意事項

必須要在正確的畫布尺寸上切圖，如不能在 750px 寬度的設(shè)計稿上去切 XHDPI，XXHDPI圖，必須要在 720px 上處理 XHDPI，XXHDPI圖。

關(guān)于 750px 設(shè)計稿上切@2x，@3x圖時，只要所選圖層是智能對象或者是矢量圖層，就不用擔(dān)心分辨率問題。

切圖格式與大小

切圖格式常用 PNG，這是因為 PNG 體積小（K值），最大程度減少安裝包大小；無損壓縮，保持素材清晰度；支持透明效果，只保留圖層內(nèi)容本身。也是由于 PNG 圖片的特點(diǎn)，給切圖帶來了 3 個需要注意的知識點(diǎn)：

雙數(shù)像素切圖：750x1334px 與 720x1280px 的切圖資源大小都必須為雙數(shù)像素，才能保證開發(fā)時素材被高清顯示。

實(shí)際切圖與展示區(qū)域（桌面圖標(biāo)）：桌面圖標(biāo)/應(yīng)用icon 會被運(yùn)用在不同的位置，比如手機(jī)桌面，產(chǎn)品平臺，手機(jī)系統(tǒng)列表……因此在輸出桌面圖標(biāo)切圖素材時，不需要對桌面圖標(biāo)切圖進(jìn)行圓角處理。

點(diǎn)擊區(qū)域大小：畫布大小≠素材大小。一般情況下素材分兩種，裝飾素材與可點(diǎn)擊素材，裝飾素材直接按圖層貼邊切圖，點(diǎn)擊素材需要考慮點(diǎn)擊區(qū)域的位置與大小，適當(dāng)調(diào)整素材的畫布，再進(jìn)行素材切圖。

內(nèi)存大小：為了方便用戶使用產(chǎn)品時快速加載頁面，需要對大素材或者圖片進(jì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

動效實(shí)現(xiàn)原理是由若干張圖片連續(xù)播放，從而形成視覺影像，這若干張圖片就是需要提供給工程師實(shí)現(xiàn)動效的序列切圖。

切圖命名與分組

1. 命名公式

位置_類別_描述_狀態(tài).png，如：導(dǎo)航_按鈕_搜索_默認(rèn).png。

Example：nav_button_search_default.png

2. 切圖命名禁忌

• 不可出現(xiàn)中文
• 不可出現(xiàn)英文字母大寫
• 不可出現(xiàn)空格
• 不可用「-」符號，例如錯誤的 button-search，正確為 button_search。

3. 切圖命名英文縮寫

• 較短的單詞可通過去掉「元音」形成縮寫；
• 較長的單詞可取單詞的頭部幾個字母形成縮寫，如 normal 可寫成 nor；
• 還有一些約定俗成的英文單詞縮寫，如 background 可寫成 bg。

4. 類別命名

• 按鈕：btn_xxx.png
• 圖標(biāo)：icon_xxx.png
• 圖片：pic_xxx.png或是img_xxx.png
• 照片：pho_xxx.png

5. 常用狀態(tài)

• 正常：normal
• 按下：pressed
• 選中：selected
• 禁用：disabled
• 已訪問：visited
• 懸停：hover

6. 切圖分組

項目-開發(fā)語言-日期

xxxAPP-iOS-2020.20.20

iOS：@2/@3切圖一起放

xxxAPP-Android-2020.20.20

Android：每個尺寸分開單獨(dú)放

項目切圖模擬

案例一

切哪里？如下圖所示：（粉紅色遮罩為切圖標(biāo)注）

案例二

切哪里？如下圖所示：（粉紅色遮罩為切圖標(biāo)注）

案例三

切哪里？如下圖所示：（粉紅色遮罩為切圖標(biāo)注）

歡迎關(guān)注作者的微信公眾號：「大tip」