Android ui設(shè)計(jì)中的尺寸單位換算及切圖規(guī)范詳解

本文和大家分享的主要是ui設(shè)計(jì)中Android尺寸單位換算及切圖規(guī)范相關(guān)內(nèi)容，一起來看看吧，希望對大家有所幫助。

說明：

1.對象為 UI設(shè)計(jì)師和 Android工程師等開發(fā)人員。

2.方法有千種，開發(fā)工程師有萬個(gè)，僅供參考，不喜就拿著你的建議留言，勿噴。

3.文檔的本質(zhì)是備份與查看，對外方便協(xié)作與對內(nèi)提升效率。

4.文檔不是萬能的，如果文檔查看對象看不懂，就沒任何意義。 我喜歡當(dāng)面溝通，因?yàn)槟鼙苊獯蟛糠治臋n的局限性

5.感謝Android開發(fā)工程師高鵬的指正與指導(dǎo)。

Android規(guī)范

一：手機(jī)尺寸

Android是必須要講下手機(jī)尺寸的：（只是常規(guī)，特殊尺寸就不講，如：1200x1600像素的惠普Slate8 Pro）

1. mdpi[320x480 px ]

　　市場份額少，新手機(jī)不會(huì)有這種倍率，屏幕通常都特別小

2. hdpi [480x800 px 、480x854 px 、540x960 px ]

　　早年的低端機(jī)屏幕在3.5英寸檔位-目前很少

3. xhdpi[720x1280 px ]

　　即平常我們看視頻講的 720 P，設(shè)計(jì)圖也有人按照此分辨率進(jìn)行設(shè)計(jì)

4. xxhdpi[1080x1920px]，[1440x2560px]

　　這里強(qiáng)調(diào)：目前1080x1920和2560×1440然后都是xxhdpi，適配難免會(huì)有誤差，下邊換算我會(huì)再講到

　　即平常我們看視頻講的2K高清，或 1080 P，高清視頻就需支持此類像素。如今比較常用，設(shè)計(jì)圖也大多以1080這個(gè)尺寸做。

主流尺寸-也是主流設(shè)計(jì)尺寸

5. xxxhdpi， 4K（3840×2160）

　　就是我們現(xiàn)在所說的4K屏手機(jī)，也逐漸多了起來，也有設(shè)計(jì)者針對特殊的設(shè)計(jì)要求按照此設(shè)計(jì)尺寸做

6. 其他

　　如魅族MX4 Pro 1536x2560   三星T705的  1600x2560 這些尺寸暫時(shí)我也沒用到，以后有機(jī)會(huì)再補(bǔ)充

...

二：單位換算

dpi的計(jì)算方式就是（1080*1080+1920*1920）開方然后除以屏幕尺寸，然后你看dpi落在哪個(gè)表格區(qū)間

1倍：1pt=1dp=1px   dpi=160  （mdpi，即320x480px）

1.5倍：1pt=1dp=1.5px   dpi=240（hdpi，即480x800px等）

2倍：1pt=1dp=2px     dpi=320（xhdpi，即720x1280px）

3倍：1pt=1dp=3px   dpi=480（xxhdpi，即1080x1920px和1440x2560px）

4倍： 1pt=1dp=4px   dpi=640（xxxhdpi，即4K（3840×2160）

倍率

字體：1sp=1dp （字體大小單位sp，這個(gè)比較復(fù)雜，因?yàn)橄到y(tǒng)為了使字體顯示的更清楚會(huì)對你設(shè)置的大小做補(bǔ)償，可能大點(diǎn)或小了點(diǎn)，一般我們使用這樣的換算）

　　自然地，以1倍的mdpi作為基準(zhǔn)。像素密度更高或者更低的設(shè)備，只需乘以相應(yīng)的倍率，就 能得到與基準(zhǔn)倍率近似（ 注意，這里是 近似 ，安卓開發(fā)和設(shè)計(jì)圖會(huì)有區(qū)別本質(zhì)在于倍率的誤差，我們能做的只是減小誤差 ） 的顯示效果。如：

　　在3倍情況下的比如1080和2560×1440然后都是xxhdpi，那么后者屏幕除以3得到的長的總dp和寬的總dp都比1080的多。

　　不過需要注意的是，Android設(shè)備的像素尺寸并不統(tǒng)一。比如兩種常見的屏幕480×800和1080×1920，它們分別屬于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到邏輯像素為320×533和360×640。很顯然，后者更寬更高，能顯示更多內(nèi)容。所以，即使有倍率的存在， 各種Android設(shè)備的顯示效果仍然無法做到完全一致。

由此：

　　每個(gè)開發(fā)寫代碼方式不同，設(shè)計(jì)圖和開發(fā)出來的樣式難免會(huì)有不同。我們該積極的去尋找解決辦法，減小誤差，而不是相互的推卸責(zé)任。要知道我們的共同目的都是為了正在開發(fā)的產(chǎn)品。

...

三：字體

　　自從Ice Cream Sandwich發(fā)布以來，Roboto都是Android系統(tǒng)的默認(rèn)字體集。在這個(gè)版本中，將Roboto做了進(jìn)一步全面優(yōu)化，以適配更多平臺(tái)。寬度和圓度都輕微提高，從而提升了清晰度，并且看起來更加愉悅。

Android系統(tǒng)字體有：

Droid Sans、 Droid Serif 、 Droid Sans Mono、Roboto-Black.ttf、Roboto-BlackItalic.ttf、Roboto-Bold.ttf、Roboto-BoldItalic.ttf、Roboto-Italic.ttf、Roboto-Light.ttf、Roboto-Medium.ttf、Roboto-MediumItalic.ttf、Roboto-Regular.ttf、Roboto-Thin.ttf、Roboto-ThinItalic.ttf、RobotoCondensed-Bold.ttf

RobotoCondensed-BoldItalic.ttf、RobotoCondensed-Italic.ttf、RobotoCondensed-Light.ttf、RobotoCondensed-LightItalic.ttf、RobotoCondensed-Regular.ttf

Clockopia.ttf 系統(tǒng)默認(rèn)待機(jī)時(shí)鐘字體

DroidSans.ttf 系統(tǒng)默認(rèn)英文字體

DroidSans-Bold.ttf 系統(tǒng)默認(rèn)英文粗字體

DroidSansFallback.ttf 系統(tǒng)默認(rèn)中文字體

...

四：設(shè)計(jì)基礎(chǔ)尺寸

　　主流尺寸：(xxhdpi)1080x1920， (xhdpi)720 x 1280。Android比iPhone的尺寸要多，在適配上也是相對而言比較麻煩，在設(shè)計(jì)中一般是采用1080x1920px的設(shè)計(jì)尺寸。

Android常規(guī)尺寸（px）

　　在Android設(shè)計(jì)尺寸規(guī)范沒有iPhone那樣具體的規(guī)范，這也決定了安卓的靈活性更強(qiáng)，發(fā)揮的空間也越大?，F(xiàn)在安卓的手機(jī)最近的幾版新系統(tǒng)的許多交互細(xì)節(jié)都超越了iPhone。

Google Play上顯示的啟動(dòng)器圖標(biāo)是512x512像素。

　　移動(dòng)設(shè)備上的啟動(dòng)器圖標(biāo)是48x48 dp。

　　手機(jī)的動(dòng)作欄圖標(biāo)應(yīng)為32x32 dp。

　　通知圖標(biāo)必須是24x24 dp。

　　小圖標(biāo)應(yīng)為16x16dp。

　　說明： 這里我所列舉的只是一些常規(guī)的，不能代表所有，僅供參考。因?yàn)槭謾C(jī)千變?nèi)f化，系統(tǒng)不斷的更新，設(shè)計(jì)也要循序漸進(jìn)額的跟上，現(xiàn)在網(wǎng)上一些設(shè)計(jì)規(guī)范竟然細(xì)到了連一個(gè)頁面上按鈕的大小都規(guī)定好，那還叫設(shè)計(jì)么。

五.切圖與命名

　　文件包命名規(guī)則是：項(xiàng)目名字＋切圖＋作者名字＋日期

　　例如：螞蟻金服基金3.5.8.5版本迭代-H5頁面設(shè)計(jì)_切圖_李笑_20170321

　　文件包壓縮用.rar或.zip格式

　　文件包要包括：image（切圖），效果圖＋標(biāo)注圖，切圖簡單說明（word等文件）。

　　說明：效果圖必須是要有的，對于標(biāo)注圖可以根據(jù)技術(shù)需求，溝通必不可少

提供給程序開發(fā)的文檔打開

1.切圖說明

　　在圖片的命名中不要有中文、特殊符號以及空格，字母必須是小寫字母。在命名中很多可以是縮寫，技術(shù)一般也是按照這樣來分類。

　　建議具體命名方法是： 模塊_類別_功能_狀態(tài).png （狀態(tài)會(huì)有：點(diǎn)擊狀態(tài)，點(diǎn)擊壓下狀態(tài)，禁用狀態(tài)，選中狀態(tài)等）

　　如：home_bg_nologin.png和home_di_nologin.png

2.常用縮寫

ic----icon（在app的圖標(biāo)），bg----background，di----divider（主要用于分割線，不僅包括Listview中的divider,還包括普通布局中的線），sl----selector，avg----average，ctrl----control，del----delete，doc----document，err----error，inc----increment，info----information，img----image，lib----library，msg----message，pwd----password，pos----position

　　主要的功能界面，就是App界面中的activity，在一個(gè)產(chǎn)品中可以有很多 activity

　　然后每個(gè)頁面主要功能基本上可以包括：nav , tab /toolbar , menu .

　　備注：不要自己定義縮寫，除非是約定成俗的。 （ 當(dāng)然不喜歡用縮寫的可以全拼，這里僅供參考 ）

3.后綴

nor--普通狀態(tài)

pressed--按下或者是點(diǎn)擊后效果

　　例如按鈕（btn）：home_btn_select_nor.png / home_btn_select_pressed.png

4.注意事項(xiàng)

　?。?/span>1）. 切圖需要幾套分辨率的圖：如1080*1920，720*1280。分別放在不同的文件夾中，同一張圖片，在兩個(gè)文件夾中的名字要一致。

　?。?/span>2）.如遇到可拉伸可平鋪的圖片，使用9Patch進(jìn)行制作，產(chǎn)生xxx.9.png圖片即可，優(yōu)點(diǎn)：靈活度大，可復(fù)用，程序包大小減少，增加程序運(yùn)行效率。（.9切圖教程網(wǎng)上很多比我說的好且詳細(xì)）

　?。?/span>3）. 對于開發(fā)人員需要頁面間距尺寸，我們可以使用“標(biāo)你妹啊”“MarkMan”等軟件進(jìn)行測量以及可以測出相對應(yīng)需要提供的色值（提前和開發(fā)溝通好所需，能節(jié)省設(shè)計(jì)師的大部分時(shí)間和最后的開發(fā)修正時(shí)間）

卡卷包與會(huì)員中心圖片大小一致

　　（4）.在給安卓開發(fā)人員切圖時(shí)，對于相同模塊內(nèi)容不同的時(shí)候，要保證背景大小是一致，用空白填充。如：上圖四個(gè)圖標(biāo)切出圖片大小保證一致性，用空白透明填充，

...

　　頁面上的內(nèi)容永遠(yuǎn)是不一樣的，設(shè)計(jì)又是內(nèi)容與形式關(guān)系成的視覺引導(dǎo)。設(shè)計(jì)規(guī)范是服務(wù)形式的，而形式的本質(zhì)是解決內(nèi)容的。

 

 

來源：簡書