該如何做切圖標(biāo)注，才能讓開發(fā)把你夸上天？

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

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

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

切圖標(biāo)注

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

藍(lán)湖插件

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

Cutterman插件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. APP-iOS

2. APP-Android

3. 微信小程序

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

5. 注意事項(xiàng)

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

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

切圖格式與大小

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

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

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

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

內(nèi)存大小：為了方便用戶使用產(chǎn)品時(shí)快速加載頁(yè)面，需要對(duì)大素材或者圖片進(jìn)行壓縮，常用的工具有ppduck、熊貓壓圖，都是業(yè)內(nèi)較優(yōu)秀的圖片壓縮工具，壓縮出來(lái)的圖片既保證了清晰度又減小的 K值。

切圖分類

CSS盒子模型 ── 多狀態(tài)切圖

盒子模型是網(wǎng)頁(yè)開發(fā)中經(jīng)常用到的CSS技術(shù)思維模型，模型具有內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）4 個(gè)屬性。所有的控件和信息都需要在每一個(gè)盒子里完成多狀態(tài)展示，所以可以理解為工程師們?cè)诖罱?yè)面時(shí)先在頁(yè)面上畫一個(gè)又一個(gè)的格子（盒子），它們都是矩形格子，與我們的切圖矩形相匹配，同一種控件的格子大小一模一樣，就像復(fù)制粘貼一樣。

同一類型的控件與它們所有狀態(tài)的切圖都需要統(tǒng)一尺寸。

動(dòng)效切圖gif

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

切圖命名與分組

1. 命名公式

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

Example：nav_button_search_default.png

2. 切圖命名禁忌

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

3. 切圖命名英文縮寫

• 較短的單詞可通過(guò)去掉「元音」形成縮寫；
• 較長(zhǎng)的單詞可取單詞的頭部幾個(gè)字母形成縮寫，如 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
• 已訪問(wèn)：visited
• 懸停：hover

6. 切圖分組

項(xiàng)目-開發(fā)語(yǔ)言-日期

xxxAPP-iOS-2020.20.20

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

xxxAPP-Android-2020.20.20

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

項(xiàng)目切圖模擬

案例一

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

案例二

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

案例三

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

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