用一篇干貨，讓你掌握「切圖標注」這個知識點！

編者按：本文是一篇寫給新手的科普指南，從切圖的發(fā)展史到基礎(chǔ)知識，以及常見的術(shù)語解釋，都有詳細的說明，非常適合剛?cè)腴T的 UI 設(shè)計師學習。

一、目的

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

二、發(fā)展

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

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

三、設(shè)備

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

1. iOS

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

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

pt 是獨立像素的意思，它是絕對長度，物理單位，不隨屏幕像素密度變化而變化（和我們?nèi)粘Ｓ玫降暮撩住⒗迕资且粋€意思，只是它要小得多），在非視網(wǎng)膜的 iPhone 上（iPhone 3G），蘋果規(guī)定 1px=1pt，也就是說 pt 和像素點是一一對應(yīng)的。但隨著 iPhone 4 的到來，高分屏出現(xiàn)了（視網(wǎng)膜屏），這個時候 1pt 對應(yīng) 2px。所以用固定長度 pt 作為開發(fā)單位的好處是：這樣可以統(tǒng)一圖形在同一種類不同型號設(shè)備上圖形的大小。而如果用 px 作為單位的話，就亂了套了，因為在不同像素密度的屏幕里面，像素本身大小是不一樣的。

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

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

設(shè)計師一般以720x1280px做圖。

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

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

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

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

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

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

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

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

點九圖格式規(guī)定由左側(cè)和上側(cè)來控制圖片的拉伸，右側(cè)和下側(cè)控制文字的顯示區(qū)域。

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

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

四、規(guī)范

1. 切圖基本規(guī)范

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

2. 切圖輸出類型

桌面圖標切圖輸出

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

圖片類切圖輸出

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

全屏類切圖：

局部類切圖：

動效元素切圖

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

3. 切圖命名規(guī)范

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

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

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

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

常用英文單詞表：

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

4. 標注規(guī)范

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

五、軟件

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

六、延展

1. 對于開發(fā) Web/iOS/Andriod

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

2. 附上各類單位解釋以及單位之間的關(guān)系

dpi與ppi的區(qū)別

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

em/rem/px的區(qū)別

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

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

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

歡迎添加作者微信：

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

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