編者按：本文是一篇寫給新手的科普指南，從切圖的發展史到基礎知識，以及常見的術語解釋，都有詳細的說明，非常適合剛入門的 UI 設計師學習。

一、目的

為了能夠滿足開發人員對于效果圖的高度還原需求。

二、發展

最早開始的切圖/標注都是設計師手動進行，花費的時間長不說，開發人員看到的也通常是一個頁面標滿了混亂不堪的紅色尺寸。

經過長時間的改進，如今有了各種軟件和插件。設計師只需上傳源文件分享鏈接，開發人員就能在線下載各種尺寸切圖，想看元素的標注只需點擊相應的元素就會自動出現，還會有相應的代碼供開發人員參考；同時支持在線評論修改功能。一個項目一個鏈接，極大的節省了程序開發的時間成本，減少了很多不必要的溝通與重復切圖/標注的概率。

三、設備

在進行切圖標注的時候，設計師需要先確認開發的設備是 Android 還是 iOS。

1. iOS

設計師在做圖時一般以 iPhone6（750px*1334px）為標準進行界面設計，讓開發進行適配。原因是向上和向下適配的時候界面調整的幅度最小，最方便適配。

在 iOS 中所使用的單位是pt，下面介紹一下 pt 和 px 的區別，以及使用 pt 這個單位的原因。

pt 是獨立像素的意思，它是絕對長度，物理單位，不隨屏幕像素密度變化而變化（和我們日常用到的毫米、厘米是一個意思，只是它要小得多），在非視網膜的 iPhone 上（iPhone 3G），蘋果規定 1px=1pt，也就是說 pt 和像素點是一一對應的。但隨著 iPhone 4 的到來，高分屏出現了（視網膜屏），這個時候 1pt 對應 2px。所以用固定長度 pt 作為開發單位的好處是：這樣可以統一圖形在同一種類不同型號設備上圖形的大小。而如果用 px 作為單位的話，就亂了套了，因為在不同像素密度的屏幕里面，像素本身大小是不一樣的。

如果還是聽不明白，看下面的圖就很清楚了：

以銀色機子的1方塊為1px基準，這個方塊的大小就當成新的標準尺寸單位，1pt（point, 點），所以在這個機子上1px=1pt，這個點不管搬到哪里就是那么大，現在把它搬到金色的機子上。我們看到方塊的大小保持不變，但是它的長/寬就會各涵蓋到2px，所以在這個機子上2px=1pt。

在 Retina屏幕下一個點表示2像素，在非Retina屏幕下一個點表示1像素。

在iPhone6 Plus / iPhone7 Plus / iPhone8 Plus / iPhoneX / iPhoneXS / iPhoneXS Max下一個點表示3像素。

所以 iOS 一般只需要切：2倍圖、3倍圖。

2. Android

Android 的尺寸非常多，非常雜亂，總的來說模式分為：idpi / mdpi / hdpi / xhdpi / xxhdpi / xxxhdpi。

設計師一般以720x1280px做圖。

Android開發時間距/長度以 dp 為單位，而設計師的單位為 px，所以下面簡單介紹一下 dp 和 px的關系。

在Android 中，以320x480分辨率為基準屏幕，即密度值為160時，1dp=1px。

所以 Android 的切圖需要3個尺寸：hdpi / xhdpi / xxhdpi。

dp 和px的換算公式：dp*ppi（像素密度）/160=px；px（160/ppi）=dp

Android 設計時使用 sp 作為字體單位。如在屏幕ppi=160，字體大小為100%時，1sp=1px。

sp 和px 的換算公式：sp*ppi/160=px，sp=px*（160/ppi）

Android 還有一個「點9切圖」在這里簡單介紹一下。

安卓平臺的應用軟件開發包的一種特殊的圖片形式，文件擴展名為「.9.png」，故稱為點9切圖。運用點9圖可以保證圖片在不模糊變形的前提下做到自適應。點9圖的出現是安卓機為了適配不同的手機分辨率的解決方案。

點九圖格式規定由左側和上側來控制圖片的拉伸，右側和下側控制文字的顯示區域。

拉伸區域：當實際程序中設定了對話框的寬高時，橫向拉伸區域和縱向拉伸區域就會被拉伸成所需要的寬和高，呈現出于設計稿一樣的視覺效果。

內容區域：為了讓文字被輸入框完整包裹，以達到顯示效果的正常，所畫黑線的區域就是你文字顯示的區域，這樣你的文字就不會超出對話框。

四、規范

1. 切圖基本規范

• 切圖的尺寸必須為偶數
• 同一模塊內，切圖大小應保持一致
• 如果有背景，盡量用平鋪的背景圖案來設計（減少程序體積）
• 可點擊的部件要把相關狀態都切圖輸出，比如：正常狀態、點擊狀態、不可點擊狀態
• 輸出的切圖應當盡可能的壓縮大小，以降低 APP 的總大小，提升用戶使用時的加載速度（推薦在線壓縮：https://tinypng.com）
• 所有的變形字體把它當成 icon 來切
• 切圖輸出格式：png-24
• 重復的東西只切一個

2. 切圖輸出類型

桌面圖標切圖輸出

app 的桌面圖標會被運用在很多不同的地方展示，比如手機桌面、APP store、手機的設置列表，所以 app桌面圖標需要很多個不同尺寸的切圖輸出。兩個平臺對相應桌面圖標設計輸出尺寸也不盡相同，在輸出的時候要把雙平臺的這些尺寸全部輸出切圖。桌面圖標切圖只需要提供直角的圖標切圖即可，手機系統會自動生成圓角效果。

圖片類切圖輸出

圖片類切圖主要是指啟動頁、新手引導頁、默認提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的大小尺寸以便于工程師開發使用。另外一般這些切圖的文件較大，在切圖過程中需要控制切圖文件的大小。

全屏類切圖：

局部類切圖：

動效元素切圖

動效元素切圖一般是指在 APP 中加載動效所需要的切圖元素，比如 QQ 的下拉加載動效就是由若干張切圖連續播放形成的動畫效果。這些圖片按照序號排序播放我們也把他們叫做序列切圖。序列切圖是在做 UI設計的過程中必然會遇到的問題，這種切圖要求要保證動效播放時的流暢自然，是需要設計師仔細斟酌的。

3. 切圖命名規范

通用切圖命名：組件_類別_功能_狀態@2x.png

舉例：tabbar_icon_home_default@2x.png（對應中文：標簽欄_圖標_主頁_默認@2x.png）

模塊特有切圖命名：模塊_類別_功能_狀態@2x.png

舉例：bill_icon_search_pressed@2x.png（對應的中文為：賬單_圖標_搜索_默認@2x.png）

常用英文單詞表：

• bg（backgrond 背景）
• nav（navbar 導航欄）
• tab（tabbar 標簽欄）
• btn（button 按鈕）
• img（image 圖片）
• del（delete 刪除）
• msg（message 提示信息）
• pop（pop up 彈出）
• icon（圖標）
• selected（選中）
• disabled（不可點擊）
• default（默認）
• pressed（按下）
• back（返回）
• edit（編輯）
• content（內容）
• left/center/right（左/中/右）
• logo（標識）
• login（登錄）
• refresh（刷新）
• banner（廣告）
• link（鏈接）
• user（用戶）
• download（下載）
• note（注釋）

4. 標注規范

• 合理劃分，再復雜的頁面，信息也不要擠在一起。
• 每一個標注本身也要注意對齊方式，干凈整潔的標注能讓開發一眼找到所需。
• 任何細節和要求都寫清楚，任何決定都要有據可查。

五、軟件

現在很多設計交互平臺，如：像素大廚/墨刀/摹客iDoc，既滿足交互需求，又能有標注切圖功能，還能多人在線對最新版本進行評估工作，大大提高了以往的工作效率。希望小伙伴們可以嘗試找下適合自己和項目組的設計交互平臺。

六、延展

1. 對于開發 Web/iOS/Andriod

• 始終遵循，視覺邏輯符合開發邏輯。
• 標注時需考慮到頁面在不同屏幕大小下的變化，間距是否固定，比例是否縮放，圖片和按鈕寬度是否自適應。
• 統一標注的好處不僅是我們自己在后續的設計中可以復用和遵守，對于開發而言，也能提高代碼效率同時保持不同平臺最終效果的統一，后續迭代的時候也不會出現莫名其妙的樣式和代碼。

2. 附上各類單位解釋以及單位之間的關系

dpi與ppi的區別

這兩個單位都屬于分辨率單位，它們都是用來描述屏幕的屬性，或者說是性能，所以經常出現混用現象。但是從技術角度說，像素（P）只存在于計算機顯示領域，而點（d）只出現于打印或印刷領域。

em/rem/px的區別

首先來說 em 和 px的關系：em是指字體高度，瀏覽器默認1em=16px，所以0.75em=12px。我們經常會在頁面上看到根元素寫的 font-size:65%；這樣 em 就成了16px*62.5=10em；這是顯示在頁面的字體大小是10px。這樣12px=1.2em，10px=1em，也就是說只需要將你原來的 px數值除以10，然后換上 em作為單位就行了。但是 em 是個相對值，它會根據父級元素的大小而變化，如果嵌套了多個元素，要計算它的大小就很頭疼。

這個時候 rem 就出現了，和 em不同的是 rem 總是相對于根元素（如:root{}），而不像 em 一樣使用級聯的方式來計算尺寸，這種相對單位使用起來更簡單更安全。

相信在不久的未來，就可以達到，不需要切圖和標注的工藝流程，取代的是更高效的設計軟件或者平臺，但切圖/標注帶給我們的也不僅是項目溝通成本上的目的，還能讓設計師去了解前端開發，了解各個系統的設計交互細節，審視自己的效果圖的缺陷。希望大家在切圖標注的環節，好好利用現有的平臺，更多的去做設計方法論和交互的溝通，可用性的評估，一起使產品的用戶體驗更佳。

歡迎添加作者微信：

「超全面！設計新手必備的切圖指南」

• 《UI實戰教程！從零開始做APP 系列之切圖標注篇》
• 《UI新手必備！iOS+Android的切圖與標注方法》
• 《基礎知識！寫給UI設計新手的切圖命名規則手冊》
• 《新手福利！超全面的UI設計切圖規范指南》