中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

移動(dòng)設(shè)備分辨率適配及相關(guān)問(wèn)題

2024-04-16    分類: 網(wǎng)站建設(shè)

基本知識(shí)

px(pixel)的意思是像素。像素是一個(gè)虛擬的方格,是數(shù)字顯示屏的一個(gè)基本單位。像素沒(méi)有物理上的尺寸,一個(gè)像素可以和一幅海報(bào)一樣大,也可以小的連肉眼都無(wú)法分辨。 in(inch)是英寸,是計(jì)算數(shù)字顯示設(shè)備(手機(jī),顯示屏)的長(zhǎng)度單位,是物理上的尺寸。1 inch≈2.54cm. 通過(guò)計(jì)算某個(gè)顯示設(shè)備中像素和英寸的比值,就可以得到每英寸中的像素?cái)?shù)(pixels per inch),也就是PPI,你也可以叫它像素密度(pixel density)。PPI在理解上可以與物理上的密度進(jìn)行類比,物理密度=質(zhì)量/體積,PPI=像素/英寸。計(jì)算方式在此不表。

PPI有兩個(gè)作用:

1.PPI越高的顯示設(shè)備,單位長(zhǎng)度下顯示的像素點(diǎn)就越多,看起來(lái)也就越清晰。 2.PPI將虛擬單位和物理單位結(jié)合在一起,使得「清晰」的概念明確起來(lái)。路人甲給我一個(gè)分辨率為1920*1080px的設(shè)備,路人乙給我一個(gè)5寸的設(shè)備,哪個(gè)更清晰?不知道。他們給的設(shè)備都無(wú)法計(jì)算出PPI,無(wú)法對(duì)比。 那么DPI又是什么?PPI是數(shù)字設(shè)備上的DPI。也就說(shuō),這兩者其實(shí)是一回事兒,只是適用的情況不同。DPI(dots per inch)指的是每英寸的點(diǎn)數(shù),在印刷行業(yè)應(yīng)用廣泛,指的是每英寸的油墨點(diǎn)數(shù)。它表示的意義和PPI一樣,是為了表示單位上長(zhǎng)度下有多少個(gè)基本單位,那么顯示屏上的基本單位是px,而在印刷品上的基本單位是dot。這兩種說(shuō)法本來(lái)針對(duì)不同情況,但在實(shí)際使用中卻是混亂的,你懂意思就行。

iPhone的分辨率

說(shuō)起iPhone的分辨率,就必須牽扯到另外一個(gè)單位,pt. 在iPhone 3GS及以前的iPhone,pt和px是一一對(duì)應(yīng)的關(guān)系,即1pt=1px,邏輯分辨率為320*480pt,渲染像素即為320px*480px,加上3.5寸的屏幕,計(jì)算得出像素密度是163PPI。 隨著iPhone 4一起推出的retina屏(視網(wǎng)膜屏),提高了顯示屏的精細(xì)程度,改變了pt和px之間的關(guān)系,1pt=2px。由于邏輯分辨率還是320pt*480pt,從「面積」的角度上來(lái)說(shuō),原來(lái)1個(gè)邏輯像素點(diǎn)里有1個(gè)渲染像素,現(xiàn)在有4個(gè)渲染像素。以iPhone 3GS(左)和iPhone 4(右)舉例,右邊是尺寸為244px*640px,左邊為122px*320px,兩者置于同為3.5寸屏幕下,并且在屏幕中所占面積相同。得出retina屏幕在單位面積下容納的渲染像素更多,也就越清晰。由此,iPhone設(shè)備的PPI由原來(lái)的163PPI變?yōu)?26PPI,清晰度大幅提升。

如果以iPhone 3GS中px和pt的對(duì)比關(guān)系作為基準(zhǔn)1x,那么iPhone 4中px和pt的關(guān)系即為2x。這實(shí)際上是PPI的簡(jiǎn)化表達(dá)方式,這樣的表示使得開(kāi)發(fā)人員不用去記住163和326這樣的數(shù)字,僅限iOS,Android后面再說(shuō)。

iPhone 4s在屏幕顯示的情況和iPhone 4一樣。

接著是iPhone 5和5s,5c。iPhone 5的邏輯分辨率寬度上依然是320pt,高度變?yōu)?68pt,渲染像素變?yōu)?40px*1136px,視覺(jué)上最直接的就是iPhone的屏幕上多了一排圖標(biāo)。尺寸上由3.5寸變?yōu)?寸(對(duì)角線)。如果你還記得當(dāng)時(shí)嘲弄iPhone 5的段子,那么肯定對(duì)iPhone 10神一般的長(zhǎng)度記憶猶新。 依然保持2x的好處是原來(lái)為iPhone 4和4s設(shè)計(jì)的控件和圖標(biāo)可以原封不動(dòng)地直接挪到iPhone5上使用,因?yàn)镻PI沒(méi)有改變。改變的是長(zhǎng)度變大了,縱向上可容納的內(nèi)容增加了。

iPhone 6及iPhone 6s在保持2x的情況下,根據(jù)屏幕比例4/4.7=320/375=568/667,邏輯分辨率依照5的比例變?yōu)?75pt*667pt,渲染像素變?yōu)?50px*1334px。同樣,在2x的情況下,依然可以沿用4s和5s的控件和圖標(biāo)。屏幕變大,可容納的內(nèi)容增多。

但是好景不長(zhǎng),分辨率的比例在iPhone 6P這里發(fā)生了很大的改變,可以說(shuō)是開(kāi)發(fā)人員的噩夢(mèng)。iPhone 6P如果依然使用和其他型號(hào)相同的像素密度進(jìn)行渲染,那它的邏輯分辨率應(yīng)該是438pt* 780pt(667/780=375/438=4.7/5.5),在2x情況下渲染像素應(yīng)該是796px*1560px。但這一分辨率對(duì)于一個(gè)5.5寸的設(shè)備來(lái)說(shuō)太小了,于是蘋(píng)果為iPhone 6P設(shè)計(jì)了不同的渲染模式:稍微縮小了邏輯分辨率到414pt*736pt(按照比例是5.2寸屏的邏輯分辨率),然后以三倍方式渲染(@3x),也就是渲染像素是1242px*2208px。這樣一來(lái),本該在5.2寸上顯示的像素被等比例拉大到5.5寸上。緊接著,出于對(duì)電池和屏幕亮度的考量,在渲染完成后,經(jīng)過(guò)一個(gè)降分辨率的步驟,將圖像輸出到物理像素為1080px*1920px的屏幕上。

這樣先放大后縮小之后有兩個(gè)后果:

1.@2x和@1x可以有兩種理解。 其一是163PPI為基數(shù)的倍數(shù),它們所代表的是PPI。@1x下PPI為163,@2x下PPI為326,那么3x下應(yīng)該為489PPI,正好對(duì)應(yīng)5.2寸下414pt*726pt的情況。從5.2寸拉到5.5寸后PPI降低為460PPI,之后降低渲染分辨率為1080px*1920px,PPI進(jìn)一步降低為401PPI。從這個(gè)角度上來(lái)說(shuō)@3x的意義已經(jīng)不在了。 其二是在同一個(gè)邏輯分辨率里有多少個(gè)渲染的像素點(diǎn),@1x代表一個(gè)邏輯像素內(nèi)有1個(gè)渲染像素,@2代表有4個(gè),@3x代表9個(gè)。這種意義依然存在。

2.從1242px*2208px降分辨率為1080px*1920px以后,出現(xiàn)了亞像素,就連系統(tǒng)控件也一樣。不過(guò)這情況在顯示屏上看才能觀察到,截屏下來(lái)在PS內(nèi)查看依然是1242px*2208px。

根據(jù)之前所述,一個(gè)圖標(biāo)在@1x和@2x下的設(shè)備上顯示的肉眼大小是一樣的,唯一不同的是變清晰了。在理想的5.2寸和@3x情況下,圖標(biāo)肉眼大小和@2x也是一樣的,放大到5.5寸的屏幕上以后,假設(shè)原來(lái)的一個(gè)圖標(biāo)在設(shè)備上肉眼放大的倍數(shù)為:

1*(5.5/5.2)≈1.05

所以如果在750px*1334px的設(shè)計(jì)稿上畫(huà)了一個(gè)圖標(biāo),同時(shí)切了@2x和@3x的圖,分別放在iPhone 6和iPhone 6p上,iPhone 6p上的圖標(biāo)會(huì)比iPhone 6上的大1.05倍左右(相信我,我拿尺子量過(guò))。 那降分辨率為1080px*1920px的怎么沒(méi)有算進(jìn)去?這是重點(diǎn)。降分辨率的那部分與設(shè)計(jì)師無(wú)關(guān),反正作為設(shè)計(jì)師是用1242px*2208px的稿子做設(shè)計(jì)。至于為什么降分辨率了圖標(biāo)沒(méi)有相應(yīng)變小,這是蘋(píng)果系統(tǒng)層面的上的顯示問(wèn)題,我,并沒(méi)有搞懂。

關(guān)于iPhone的適配,切圖和標(biāo)注

在開(kāi)發(fā)時(shí)間和資金都有限的情況下,通常情況是用一套設(shè)計(jì)稿適配所有的機(jī)型(包括iOS的各種機(jī)型,以及Android的各種機(jī)型)。國(guó)內(nèi)的普遍情況是遵循蘋(píng)果公司的Human Interface Guidelines出一套iOS設(shè)計(jì)稿,調(diào)節(jié)尺寸,切出不同的圖進(jìn)行適配。用iOS風(fēng)格的設(shè)計(jì)稿挪到Android平臺(tái)上向來(lái)有很多爭(zhēng)議,比如iOS常用的tab導(dǎo)航,用于有虛擬鍵的Android手的結(jié)果是繁復(fù)和丑陋;而另一方面tab導(dǎo)航相比于Android上的更常見(jiàn)的Drawer導(dǎo)航,更有利于提高用戶活躍度。Anyway,用iOS的設(shè)計(jì)是主流。

所以,怎么做到一套設(shè)計(jì)稿適配作用機(jī)型?

1.以750px作為基本設(shè)計(jì)稿,向下適配640px(看起來(lái)會(huì)偏大一點(diǎn)點(diǎn)),向上適配1242px。

2.用cutterman(或者其他切圖軟件)切圖切出@2x,和@3x。用@2x的切圖應(yīng)用于iPhone 6以下的機(jī)型,用@3x的切圖應(yīng)用于iPhone 6p。@3x與@2x的圖是嚴(yán)格的1.5倍關(guān)系。(或者,為了避免750px切出的@3x有虛邊,將750px的圖等比例拉大1.5倍,得到1125px*2001px,檢視圖標(biāo)的清晰情況,需要調(diào)整就微調(diào),切出@3x的圖)

3.用750px的圖做標(biāo)注。建議用單位pt做標(biāo)注,便于開(kāi)發(fā)。

適配規(guī)則(來(lái)自知乎)[1]

總結(jié)起來(lái)就一句話:文字流式,控件彈性,圖片等比縮放。

控件彈性指的是,navigation、cell、bar等適配過(guò)程中垂直方向上高度不變;水平方向?qū)挾茸兓瘯r(shí),通過(guò)調(diào)整元素間距或元素右對(duì)齊的方式實(shí)現(xiàn)自適應(yīng)。這樣屏幕越大,在垂直方向上可以顯示更多內(nèi)容,發(fā)揮大屏幕的優(yōu)勢(shì)。

按照上述默認(rèn)適配規(guī)則,大中小三種屏幕顯示效果均相同。有時(shí)候想在大屏幕顯示更多內(nèi)容,需要設(shè)計(jì)出特殊適配效果。比如App store首頁(yè)焦點(diǎn)圖,從iPhone 6適配到iPhone 6 plus時(shí)焦點(diǎn)圖尺寸和排版做了特殊處理。底下應(yīng)用列表也從一排3+個(gè)變成一排4+個(gè),真正實(shí)現(xiàn)了大屏幕顯示更多內(nèi)容的理念。這些就需要設(shè)計(jì)師給出相應(yīng)設(shè)計(jì)稿。

其他方案

1.如果以640px的圖作為設(shè)計(jì)稿,適配750px和1242px看起來(lái)都會(huì)偏小一點(diǎn)點(diǎn)。

2.如果腦洞打開(kāi)以1242px的圖作為設(shè)計(jì)稿,那么問(wèn)題就特么的來(lái)了。

按照道理,在1242上切出@3x的圖用于6p,切出@2x的圖用于6和5s/5/4s。但是情況是,由于6p的邏輯分辨率(414pt)寬度上比4s和5(320pt)上的大很多,切出@2x用于750的寬度沒(méi)有問(wèn)題,用于640px大小上可能會(huì)過(guò)大。高度上也一樣,原來(lái)在6p上可以呈現(xiàn)5欄的內(nèi)容,在5和4s上很可能只有三欄。因此,有人提出的方案是將6p的尺寸等比例縮放1242/640倍,這顯然違反了本文的初衷。實(shí)為無(wú)奈之舉。

一些問(wèn)題

1.為什么用于@3x的切圖是@2x的1.5倍,而不是1242px/750px倍?或者不是1242px/640px倍? 因?yàn)?p的界面并不是6或者5s的等比例放大關(guān)系。理論上來(lái)說(shuō),大屏有兩個(gè)作用:

1.原來(lái)的顯示內(nèi)容變得更大。

2.顯示更多的內(nèi)容。

若是切圖按照1242px/750px的倍數(shù)等比例放大,是縱向上是沒(méi)法顯示更多內(nèi)容的。違背大屏的設(shè)計(jì)原則。

2.為什么750px切下來(lái)的@2x可以適用于640px,而不是等比例縮小750px/640px倍? 因?yàn)槎际茾2x,也不是等比例縮小。750px的圖標(biāo)以及控件都和640px的一樣大,但是屏幕大了,容納的東西多了。

適配Android

這個(gè)問(wèn)題我暫時(shí)沒(méi)有很好的解決方案,只能說(shuō)說(shuō)我現(xiàn)行的方法。

和iOS上一樣,Android上有一個(gè)和pt類似的單位,dp(或dip),指device independent pixel。

以MDPI為基準(zhǔn),XHDPI即是Android的@2x。XHDPI下,1dp=2px。 以750px的設(shè)計(jì)稿,等比例縮小為720px,高度變?yōu)?281px,多出1px。以XHDPI的模式切圖。

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

文章名稱:移動(dòng)設(shè)備分辨率適配及相關(guān)問(wèn)題
文章位置:http://m.rwnh.cn/news5/323855.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作搜索引擎優(yōu)化、用戶體驗(yàn)、企業(yè)建站、電子商務(wù)

廣告

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

小程序開(kāi)發(fā)
锡林浩特市| 商都县| 都江堰市| 合川市| 博乐市| 原阳县| 衡山县| 云阳县| 自治县| 衡阳市| 禄丰县| 上饶县| 峡江县| 林甸县| 巍山| 永兴县| 庄河市| 保靖县| 运城市| 沛县| 南宫市| 文安县| 晋宁县| 岐山县| 东兰县| 广灵县| 绩溪县| 温宿县| 大渡口区| 高密市| 林州市| 林州市| 新干县| 栖霞市| 武夷山市| 双鸭山市| 平和县| 新竹市| 兰溪市| 吉木乃县| 丹巴县|