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

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

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

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

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

1. iOS

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

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

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

在 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開發(fā)時間距/長度以 dp 為單位，而設計師的單位為 px，所以下面簡單介紹一下 dp 和 px的關系。

在Android 中，以320×480分辨率為基準屏幕，即密度值為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切圖」在這里簡單介紹一下。

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

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

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

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

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

2. 切圖輸出類型
桌面圖標切圖輸出

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

圖片類切圖輸出

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

動效元素切圖

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

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

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

模塊特有切圖命名：模塊_類別_功能_狀態(tài)@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. 標注規(guī)范
合理劃分，再復雜的頁面，信息也不要擠在一起。
每一個標注本身也要注意對齊方式，干凈整潔的標注能讓開發(fā)一眼找到所需。
任何細節(jié)和要求都寫清楚，任何決定都要有據可查。

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

六、延展
1. 對于開發(fā) Web/iOS/Andriod

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

dpi與ppi的區(qū)別

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

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

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

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

本文來源于成都網站建設公司與成都網站設計制作公司-創(chuàng)新互聯(lián)成都公司！

分享名稱：本文，讓你掌握「切圖標注」這個知識點
本文路徑：http://www.kartarina.com/news5/324055.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站制作、手機網站建設、響應式網站、搜索引擎優(yōu)化、品牌網站設計、網站設計公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)