UI設(shè)計師需要了解的響應(yīng)式網(wǎng)站設(shè)計的屏幕知識
發(fā)表日期:2016/2/21 13:34:51 文章編輯: 瀏覽次數(shù):2644
不少設(shè)計師和工程師都被安卓設(shè)備紛繁的屏幕搞得暈頭轉(zhuǎn)向,我既做UI設(shè)計,也做過一點(diǎn)安卓界面布局,剛好對這塊內(nèi)容比較熟悉,也曾在公司內(nèi)部做過相關(guān)的講座,在此,我將此部分知識重新梳理出來分享給大家!
1、了解幾個概念
(1)分辨率。分辨率就是手機(jī)屏幕的像素點(diǎn)數(shù),一般描述成屏幕的“寬×高”,安卓手機(jī)屏幕常見的分辨率有480×800、720×1280、1080×1920等。720×1280表示此屏幕在寬度方向有720個像素,在高度方向有1280個像素。
(2)屏幕大小。屏幕大小是手機(jī)對角線的物理尺寸,以英寸(inch)為單位。比如某某手機(jī)為“5寸大屏手機(jī)”,就是指對角線的尺寸,5寸×2.54厘米/寸=12.7厘米。
(3)密度(dpi,dots per inch;或PPI,pixels per inch)。從英文顧名思義,就是每英寸的像素點(diǎn)數(shù),數(shù)值越高當(dāng)然顯示越細(xì)膩。假如我們知道一部手機(jī)的分辨率是1080×1920,屏幕大小是5英寸,你能否算出此屏幕的密度呢?哈哈,中學(xué)的勾股定理派上用場啦!通過寬1080和高1920,根據(jù)勾股定理,我們得出對角線的像素數(shù)大約是2203,那么用2203除以5就是此屏幕的密度了,計算結(jié)果是440。440dpi的屏幕已經(jīng)相當(dāng)細(xì)膩了。
2、實(shí)際密度與系統(tǒng)密度
尚未發(fā)現(xiàn)他處使用“實(shí)際密度”和“系統(tǒng)密度”這兩個詞匯,暫時由我如此定義吧。
“實(shí)際密度”就是我們自己算出來的密度,這個密度代表了屏幕真實(shí)的細(xì)膩程度,如上述例子中的440dpi就是實(shí)際密度,說明這塊屏幕每寸有440個像素。5英寸1080×1920的屏幕密度是440,而相同分辨率的4.5英寸屏幕密度是490。如此看來,屏幕密度將會出現(xiàn)很多數(shù)值,呈現(xiàn)嚴(yán)重的碎片化。而密度又是安卓屏幕將界面進(jìn)行縮放顯示的依據(jù),那么安卓是如何適配這么多屏幕的呢?
其實(shí),每部安卓手機(jī)屏幕都有一個初始的固定密度,這些數(shù)值是120、160、240、320、480,我們權(quán)且稱為“系統(tǒng)密度”。大家發(fā)現(xiàn)規(guī)律沒有?相隔數(shù)值之間是2倍的關(guān)系。一般情況下,240×320的屏幕是低密度120dpi,即ldpi;320×480的屏幕是中密度160dpi,即mdpi;480×800的屏幕是高密度240dpi,即hdpi;720×1280的屏幕是超高密度320dpi,即xhdpi;1080×1920的屏幕是超超高密度480dpi,即xxhdpi。
安卓對界面元素進(jìn)行縮放的比例依據(jù)正是系統(tǒng)密度,而不是實(shí)際密度。
3、一個重要的單位dp
dp也可寫為dip,即density-independent pixel。你可以想象dp更類似一個物理尺寸,比如一張寬和高均為100dp的圖片在320×480和480×800的手機(jī)上“看起來”一樣大。而實(shí)際上,它們的像素值并不一樣。dp正是這樣一個尺寸,不管這個屏幕的密度是多少,屏幕上相同dp大小的元素看起來始終差不多大。
另外,文字尺寸使用sp,即scale-independentpixel的縮寫,這樣,當(dāng)你在系統(tǒng)設(shè)置里調(diào)節(jié)字號大小時,應(yīng)用中的文字也會隨之變大變小。
4、dp與px的轉(zhuǎn)換
在安卓中,系統(tǒng)密度為160dpi的中密度手機(jī)屏幕為基準(zhǔn)屏幕,即320×480的手機(jī)屏幕。在這個屏幕中,1dp=1px。
100dp在320×480(mdpi,160dpi)中是100px。那么100dp在480×800(hdpi,240dpi)的手機(jī)上是多少px呢?我們知道100dp在兩個手機(jī)上看起來差不多大,根據(jù)160與240的比例關(guān)系,我們可以知道,在480×800中,100dp實(shí)際覆蓋了150px。因此,如果你為mdpi手機(jī)提供了一張100px的圖片,這張圖片在hdpi手機(jī)上就會拉伸至150px,但是他們都是100dp。
中密度和高密度的縮放比例似乎可以不通過160dpi和240dpi計算,而通過320px和480px也可以算出。但是按照寬度計算縮放比例不適用于超高密度xhdpi和超超高密度xxhdpi了。即720×1280中1dp是多少px呢?如果用720/320,你會得出1dp=2.25px,實(shí)際這樣算出來是不對的。dp與px的換算要以系統(tǒng)密度為準(zhǔn),720×1280的系統(tǒng)密度為320,320×480的系統(tǒng)密度為160,320/160=2,那么在720×1280中,1dp=2px。同理,在1080×1920中,1dp=3px。
大家可以記住下面這個比例,dp與px的換算就十分easy啦!
ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12,我們發(fā)現(xiàn),相隔數(shù)字之間還是2倍的關(guān)系。計算的時候,以mdpi為基準(zhǔn)。比如在720×1280(xhdpi)中,1dp等于多少px呢?mdpi是4,xhdpi是8,2倍的關(guān)系,即1dp=2px。反著計算更重要,比如你用PhotoShop在720×1280的畫布中制作了界面效果圖,兩個元素的間距是20px,那要標(biāo)注多少dp呢?2倍的關(guān)系,那就是10dp!
當(dāng)安卓系統(tǒng)字號設(shè)為“普通”時,sp與px的尺寸換算和dp與px是一樣的。比如某個文字大小在720×1280的PS畫布中是24px,那么告訴工程師,這個文字大小是12sp。
5、建議在xdhpi中作圖(此處相關(guān)修正見后面補(bǔ)充,此處暫保留初始版本)
安卓手機(jī)有這么多屏幕,我到底依據(jù)哪種屏幕作圖呢?沒有必要為不同密度的手機(jī)都提供一套素材,大部分情況下,一套就夠了。
現(xiàn)在手機(jī)比較高的分辨率是1080×1920,你可以選擇這個尺寸作圖,但是圖片素材將會增大應(yīng)用安裝包的大小。并且尺寸越大的圖片占用的內(nèi)存也就越高。如果你不是設(shè)計ROM,而是做一款應(yīng)用,我建議大家用PS在720×1280的畫布中作圖。這個尺寸兼顧了美觀性、經(jīng)濟(jì)性和計算的簡單。美觀性是指,以這個尺寸做出來的應(yīng)用,在720×1280中顯示完美,在1080×1920中看起來也比較清晰;經(jīng)濟(jì)性是指,這個分辨率下導(dǎo)出的圖片尺寸適中,內(nèi)存消耗不會過高,并且圖片文件大小適中,安裝包也不會過大;計算的簡單,就是1dp=2px啊,多好計算??!
做出來的圖片,記著讓界面工程師放進(jìn)drawable-xhdpi的資源文件夾中。
6、屏幕的寬高差異
在720×1280中作圖,要考慮向下兼容不同的屏幕。通過計算我們可以知道,320×480和480×800的屏幕寬度都是320dp,而720×1280和1080×1920的屏幕寬度都是360dp。它們之間有40dp的差距,這40dp在設(shè)計中影響還是很大的。如下圖蝴蝶圖片距離屏幕的左右邊距在320dp寬的屏幕和360dp寬的屏幕中就不一樣。
不僅寬度上有差異,高度上的差異更加明顯。對于天氣等工具類應(yīng)用,由于界面一般是獨(dú)占式的,更要考慮屏幕之間的比例差異。
如果想消除這些比例差異,可以通過添加布局文件來實(shí)現(xiàn)。一般情況下,布局文件放在layout文件夾中,如果要單獨(dú)對360dp的屏幕進(jìn)行調(diào)整,你可以單做做一個布局文件放在layout-w360dp中;不過,最好是默認(rèn)針對360dp的屏幕布局(較為主流),然后對320dp的屏幕單獨(dú)布局,將布局文件放到layout-w320dp中;如果你想對某個特殊的分辨率進(jìn)行調(diào)整,那么你可以將布局文件放在標(biāo)有分辨率的文件夾中,如layout-854×480。
7、幾個資源的文件夾
在720×1280中做了圖片,要讓開發(fā)人員放到drawable-xhdpi的資源文件夾中,這樣才可以顯示正確。個人認(rèn)為僅提供一套素材就可以了,可以測試一下應(yīng)用在低端手機(jī)上運(yùn)行是否流暢,如果比較卡頓,可以根據(jù)需要提供部分mdpi的圖片素材,因為xhdpi中的圖片運(yùn)行在mdpi的手機(jī)上會比較占內(nèi)存。
以應(yīng)用圖標(biāo)為例,xhdpi中的圖標(biāo)大小是96px,如果要單獨(dú)給mdpi提供圖標(biāo),那么這個圖標(biāo)大小是48px,放到drawable-mdpi的資源文件夾中。各個資源文件夾中的圖片尺寸同樣符合ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12的規(guī)律。
如果你把一個高2px的分割線素材做成了9.png圖片,你想讓細(xì)線在不同密度中都是2px,而不被安卓根據(jù)密度進(jìn)行縮放,怎么辦?你可以把這個分割線素材放到drawable-nodpi中,這個資源文件夾中的圖片,將按照實(shí)際像素大小進(jìn)行顯示,而不會被安卓根據(jù)密度進(jìn)行縮放。即在mdpi中細(xì)線是2px(2dp),在xhdpi中細(xì)線是2px(1dp)。
以上是對安卓屏幕的初步總結(jié),不知道你看完后是豁然開朗,還是一頭霧水?這篇文章主要為了實(shí)用起見,避開了過多深入的分析,如果你還有什么疑問,可以留言。
----------------------------------------------------------
最后補(bǔ)充一下,不少朋友問我安卓平板的設(shè)計,提到最多的是1280×800的分辨率,這個分辨率的平板一般是10.1寸的中密度屏幕,直接在PS中建立1280×800的畫布,提取之后的素材讓開發(fā)放到drawable-mdpi中即可。并且中密度的平板中,1dp=1px,比較好換算單位。
-------北京網(wǎng)站建設(shè)公司 北京傳誠信
-
免費(fèi)SSL證書申請網(wǎng)站topssl.cn上線
日期:2024-09-23 瀏覽次數(shù):1927
-
如何在北京順義尋找一個踏實(shí)的網(wǎng)站建設(shè)公司
日期:2023-08-10 瀏覽次數(shù):4982
-
順義網(wǎng)站建設(shè):北京順義網(wǎng)站建設(shè)的優(yōu)點(diǎn)
日期:2023-05-25 瀏覽次數(shù):5363
-
選擇網(wǎng)站公司需要考慮哪些因素
日期:2023-05-25 瀏覽次數(shù):4202
-
北京模板建站
日期:2023-03-28 瀏覽次數(shù):4420
-
改善非營利網(wǎng)站SEO優(yōu)化
日期:2018-12-05 瀏覽次數(shù):2813
-
網(wǎng)站設(shè)計中如何讓您的排版更有效
日期:2019-01-22 瀏覽次數(shù):2571
-
網(wǎng)站建設(shè)中的SEO元素
日期:2018-10-25 瀏覽次數(shù):3199
-
網(wǎng)站長尾關(guān)鍵詞定義及好處
日期:2019-03-06 瀏覽次數(shù):3046
-
使您的網(wǎng)站更具吸引力的9個技巧
日期:2019-03-01 瀏覽次數(shù):2569










