一個(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ù)開(kāi)發(fā) - 產(chǎn)品測(cè)試 - 項(xiàng)目上線

切圖是指在設(shè)計(jì)稿里整理出技術(shù)開(kāi)發(fā)所需要的素材或圖片。

合格的、嚴(yán)謹(jǐn)?shù)那袌D可以大大減少技術(shù)人員開(kāi)發(fā)返工率，減少技術(shù)人員的開(kāi)發(fā)工期，提升開(kāi)發(fā)流暢度，從而減少項(xiàng)目人力成本，最終開(kāi)發(fā)出有利于交互，擁有良好視覺(jué)感的產(chǎn)品。

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

一、切圖標(biāo)注

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

二、Lanhu插件

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

三、Cutterman插件

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

倍數(shù)：插件在導(dǎo)出選中圖層時(shí)以“@2x”和“XHDPI”為標(biāo)準(zhǔn)進(jìn)行對(duì)設(shè)計(jì)稿進(jìn)行等比放大縮小，如750px寬度的設(shè)計(jì)稿導(dǎo)出“@3x”和“@1x”時(shí)，導(dǎo)出切圖時(shí)會(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)畫(huà)布或者圖像至固定尺寸大小，然后進(jìn)行圖層導(dǎo)出。已選圖層大小〉固定尺寸設(shè)定，則被調(diào)整圖像，素材被壓縮。已選圖層大小〈固定尺寸設(shè)定，則被調(diào)整畫(huà)布，圖層素材大小不變，素材尺寸變?yōu)楣潭ǔ叽绱笮　?

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

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

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

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

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

APP-Android端：采用720 x 1280來(lái)設(shè)計(jì)，XHDPI切圖直接適配720 x 1280分辨率的機(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)系

APP-iOS

APP-Android

微信小程序

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

注意事項(xiàng)

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

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

六、切圖格式與大小

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

雙數(shù)像素切圖：750x1334px與720x1280px的切圖資源大小都必須為雙數(shù)像素，才能保證開(kāi)發(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ū)域大?。?/strong>畫(huà)布大小≠素材大小，一般情況下素材分兩種，裝飾素材與可點(diǎn)擊素材，裝飾素材直接按圖層貼邊切圖，點(diǎn)擊素材需要考慮點(diǎn)擊區(qū)域的位置與大小，適當(dāng)調(diào)整素材的畫(huà)布，再進(jìn)行素材切圖。

內(nèi)存大?。?/strong>為了方便用戶再使用產(chǎn)品中快速加載頁(yè)面，需要對(duì)大素材或者圖片進(jìn)行壓縮，常用的工具有ppduck、熊貓壓圖，都是業(yè)內(nèi)較優(yōu)秀圖片壓縮工具，壓縮出來(lái)既保持了清晰度又減小的K值。（切圖全靠擼，工具靠百度）

七、切圖分類

八、CSS盒子模型——多狀態(tài)切圖

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

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

九、動(dòng)效切圖-gif

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

十、切圖命名與分組

命名公式：

位置_類別_描述_狀態(tài).png

如：導(dǎo)航_按鈕_搜索_默認(rèn).png

Example: nav_button_search_default.png

切圖命名禁忌

1. 不可出現(xiàn)中文

2. 不可出現(xiàn)英文字母大寫(xiě)

3. 不可出現(xiàn)空格鍵

4.不可用“-”符合，例如不可button-search。正確為button_search

切圖命名英文縮寫(xiě)

1. 較短的單詞可通過(guò)去掉“元音”形成縮寫(xiě)

2. 較長(zhǎng)的單詞可取單詞的頭部幾個(gè)字母形成縮寫(xiě)，如normal可寫(xiě)成nor

3. 還有一些約定俗成的英文單詞縮寫(xiě)，如background可寫(xiě)成bg

類別命名

按鈕：btn_xxx.png

圖標(biāo)：icon_xxx.png

圖片：pic_xxx.png或是img_xxx.png

照片：pho_xxx.png

常用狀態(tài)

正常：normal

按下：pressed

選中：selected

禁用：disabled

已訪問(wèn)：visited

懸停：hover

切圖分組

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

xxxAPP-iOS-2020.20.20

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

xxxAPP-Android-2020.20.20

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

十一、項(xiàng)目切圖模擬

案例一

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

案例二

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

案例三

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

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。