·

一個互聯網產品從構思到落地，大致分為以下環節：發現商機 – 市場調研 – 頭腦風暴 – 產品策劃/功能設計 – 原型繪制 – 交互設計 – 項目立項 – 流向圖繪制 – UI設計 – 切圖標注 – 技術開發 – 產品測試 – 項目上線。

切圖是指在設計稿里整理出技術開發所需要的素材或圖片。合格的、嚴謹的切圖可以大大減少技術人員開發的返工率，減少技術人員的開發工期，提升開發流暢度，從而減少項目人力成本，最終開發出有利于交互，擁有良好視覺感的產品。

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

切圖標注

如今，設計切圖插件能夠將設計稿里所選中的圖層、圖層組按不同開發規范寬度、倍數，進行合并裁剪切片。與傳統切圖方法「調整圖像尺寸 – 選中切圖圖層/圖層組 – 調整畫布尺寸 – 導出web所用格式」相比，這一系列動作被進行了一鍵化處理，只需要在插件中選擇好開發語言，保持文件夾位置便可一鍵標記或導出，極大地縮減了繁瑣的操作流程。

藍湖插件

藍湖插件在設計稿做切片標記，上傳至平臺的畫板便帶有切圖下載。

·

Cutterman插件

·

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

倍數：插件在導出選中圖層時以「@2x」和「XHDPI」為標準對設計稿進行等比放大縮小。如 750px 寬度的設計稿導出「@3x」和「@1x」時，導出的切圖會分別放大 1.5 倍和縮小至 0.5 倍，然后進行圖層導出。

導出選中圖層：插件根據已選語言、倍數，對已選中的所有圖層、圖層組進行合并裁剪然后導出。裁剪大小為所有圖層合并后總寬度高度。

固定尺寸：插件在導出選中圖層時對已選中的所有圖層、圖層組進行合并后，再調畫布或者圖像至固定尺寸大小，然后進行圖層導出。已選圖層大小大于固定尺寸設定，則被調整圖像，素材被壓縮。已選圖層大小小于固定尺寸設定，則被調整畫布，圖層素材大小不變，素材尺寸變為固定尺寸大小。

設計稿尺寸與切圖倍數

UI 設計師需要在正確的設計稿尺寸下進行切圖，切圖素材才能正常供給開發人員使用。否則產品開發落地后會出現圖標變形，像素低等情況。

手機端常用的設計尺寸與它們對應的切圖倍數

iOS：采用 750×1334 來設計，@2x 切圖直接適配 750×1334 分辨率的機型，并向上向下適配主流分辨率（@2x/@3x）。

設計稿750x1334px——切圖倍數iOS@2x，iOS@3x

Android：采用 720×1280 來設計，XHDPI 切圖直接適配 720×1280 分辨率的機型，并向上向下適配主流分辨率（XHDPI/XXHDPI）

設計稿720x1280px——切圖倍數XHDPI，XXHDPI

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

設計稿750x1334px——切圖倍數png24

手機端網頁、公眾號鏈接等（與微信小程序統一使用i6，方便做單位轉化）

設計稿750x1334px——切圖倍數

設計稿尺寸與切圖倍數對應關系

1. APP-iOS

·

2. APP-Android

·

3. 微信小程序

·

4. 手機端網頁、公眾號鏈接

·

5. 注意事項

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

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

切圖格式與大小

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

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

·

實際切圖與展示區域（桌面圖標）：桌面圖標/應用icon 會被運用在不同的位置，比如手機桌面，產品平臺，手機系統列表……因此在輸出桌面圖標切圖素材時，不需要對桌面圖標切圖進行圓角處理。

·

點擊區域大?。寒嫴即笮　偎夭拇笮?。一般情況下素材分兩種，裝飾素材與可點擊素材，裝飾素材直接按圖層貼邊切圖，點擊素材需要考慮點擊區域的位置與大小，適當調整素材的畫布，再進行素材切圖。

·

內存大?。簽榱朔奖阌脩羰褂卯a品時快速加載頁面，需要對大素材或者圖片進行壓縮，常用的工具有ppduck、熊貓壓圖，都是業內較優秀的圖片壓縮工具，壓縮出來的圖片既保證了清晰度又減小的 K值。

切圖分類

·

CSS盒子模型 ── 多狀態切圖

盒子模型是網頁開發中經常用到的CSS技術思維模型，模型具有內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）4 個屬性。所有的控件和信息都需要在每一個盒子里完成多狀態展示，所以可以理解為工程師們在搭建頁面時先在頁面上畫一個又一個的格子（盒子），它們都是矩形格子，與我們的切圖矩形相匹配，同一種控件的格子大小一模一樣，就像復制粘貼一樣。

同一類型的控件與它們所有狀態的切圖都需要統一尺寸。

·

·

動效切圖gif

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

·

切圖命名與分組

1. 命名公式

位置_類別_描述_狀態.png，如：導航_按鈕_搜索_默認.png。

Example：nav_button_search_default.png

2. 切圖命名禁忌

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

3. 切圖命名英文縮寫

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

4. 類別命名

• 按鈕：btn_xxx.png
• 圖標：icon_xxx.png
• 圖片：pic_xxx.png或是img_xxx.png
• 照片：pho_xxx.png

5. 常用狀態

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

6. 切圖分組

項目-開發語言-日期

xxxAPP-iOS-2020.20.20

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

xxxAPP-Android-2020.20.20

Android：每個尺寸分開單獨放

項目切圖模擬

案例一

·

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

·

案例二

·

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

·

案例三

·

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

·

歡迎關注作者的微信公眾號：「大tip」

·