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

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

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

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

三、設(shè)備
在進(jìn)行切圖標(biāo)注的時(shí)候，設(shè)計(jì)師需要先確認(rèn)開發(fā)的設(shè)備是 Android 還是 iOS。

1. iOS

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

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

pt 是獨(dú)立像素的意思，它是絕對(duì)長度，物理單位，不隨屏幕像素密度變化而變化（和我們?nèi)粘Ｓ玫降暮撩?、厘米是一個(gè)意思，只是它要小得多），在非視網(wǎng)膜的 iPhone 上（iPhone 3G），蘋果規(guī)定 1px=1pt，也就是說 pt 和像素點(diǎn)是一一對(duì)應(yīng)的。但隨著 iPhone 4 的到來，高分屏出現(xiàn)了（視網(wǎng)膜屏），這個(gè)時(shí)候 1pt 對(duì)應(yīng) 2px。所以用固定長度 pt 作為開發(fā)單位的好處是：這樣可以統(tǒng)一圖形在同一種類不同型號(hào)設(shè)備上圖形的大小。而如果用 px 作為單位的話，就亂了套了，因?yàn)樵诓煌袼孛芏鹊钠聊焕锩?，像素本身大小是不一樣的?br />
在 Retina屏幕下一個(gè)點(diǎn)表示2像素，在非Retina屏幕下一個(gè)點(diǎn)表示1像素。

在iPhone6 Plus / iPhone7 Plus / iPhone8 Plus / iPhoneX / iPhoneXS / iPhoneXS Max下一個(gè)點(diǎn)表示3像素。

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

2. Android

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

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

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

在Android 中，以320×480分辨率為基準(zhǔn)屏幕，即密度值為160時(shí)，1dp=1px。

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

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

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

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

Android 還有一個(gè)「點(diǎn)9切圖」在這里簡單介紹一下。

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

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

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

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

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

2. 切圖輸出類型
桌面圖標(biāo)切圖輸出

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

圖片類切圖輸出

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

動(dòng)效元素切圖

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

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

舉例：tabbar_icon_home_default@2x.png（對(duì)應(yīng)中文：標(biāo)簽欄_圖標(biāo)_主頁_默認(rèn)@2x.png）

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

舉例：bill_icon_search_pressed@2x.png（對(duì)應(yīng)的中文為：賬單_圖標(biāo)_搜索_默認(rèn)@2x.png）

常用英文單詞表：

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

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

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

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

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

dpi與ppi的區(qū)別

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

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

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

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

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

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

分享名稱：本文，讓你掌握「切圖標(biāo)注」這個(gè)知識(shí)點(diǎn)
本文路徑：http://jinyejixie.com/news5/324055.html

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

廣告

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