你確定你真的懂手機(jī)適配嗎?

1 評(píng)論 32308 瀏覽 210 收藏 7 分鐘

手機(jī)適配,這個(gè)詞都聽(tīng)爛了??墒?,你確定你懂嗎?經(jīng)常會(huì)聽(tīng)到程序猿說(shuō):這個(gè)我適配一下?這個(gè)我沒(méi)有適配好?……然后你問(wèn)程序猿,你是怎么適配的?能說(shuō)明白的沒(méi)有幾個(gè)。這個(gè)是系統(tǒng)自動(dòng)適配的?這個(gè)有套算法?再往下問(wèn),就沒(méi)有然后了……

把這個(gè)問(wèn)題拋給設(shè)計(jì)獅,很可能給你的答復(fù)是,你問(wèn)程序猿???是他們適配的啊……場(chǎng)景是不是有點(diǎn)熟悉。

一、什么是手機(jī)適配?

言歸正傳,什么是手機(jī)適配?手機(jī)適配:設(shè)計(jì)獅制作效果圖,程序猿把效果圖應(yīng)用到不同的手機(jī),對(duì)不同的屏幕進(jìn)行界面調(diào)整的過(guò)程,確保界面不變形,呈現(xiàn)效果圖的位置、尺寸、比例。

二、關(guān)于屏幕的一些物理概念

1.屏幕物理尺寸:屏幕對(duì)角線的尺寸。

例如:蘋(píng)果最新發(fā)布了4英寸iPhone SE,這個(gè)4英寸指的就是手機(jī)的屏幕物理尺寸。

iPhone SE屏幕:長(zhǎng)度9.0cm、寬度5.1cm

1.iPhone SE屏幕物理尺寸

PS:1英寸(in)=2.54厘米(cm)

2.屏幕分辨率:確定計(jì)算機(jī)屏幕上顯示多少信息的設(shè)置,以水平和垂直像素來(lái)衡量。

例如:iPhone SE分辨率為1136×640(像素)。

3.屏幕密度(pixel per inch):每英寸的像素?cái)?shù),簡(jiǎn)稱ppi。

例如:iPhone SE 像素密度達(dá)到326ppi。

已知iPhone SE屏幕物理尺寸為4寸;通過(guò)屏幕分辯率得到屏幕對(duì)角線的像素總數(shù);屏幕對(duì)角線的像素總數(shù)和屏幕物理尺寸比,就得到了ppi。

2.iPhone SE ppi

屏幕物理尺寸決定了屏幕的實(shí)際尺寸,屏幕分辨率表示屏幕上可以呈現(xiàn)的像素點(diǎn)數(shù),屏幕密度決定了屏幕的精細(xì)程度。

三、開(kāi)始手機(jī)適配吧

已知iPhone SE分辨率為1136×640(像素),讓設(shè)計(jì)獅制作一套分辨率為1136×640(像素)圖片;

iPhone SE分辨率為1334×750(像素),再讓設(shè)計(jì)獅制作一套分辨率為1334×750(像素)圖片

以此往復(fù)

來(lái)看看市場(chǎng)上主流的屏幕分辨率

3.android分辨率

4.ios分辨率

數(shù)據(jù)來(lái)自友盟指數(shù)

如此之多的分辨率,怎么可能一一做圖呢?

眼尖的同學(xué)可能注意到一個(gè)東西,就是屏幕的分辯率基本符合17/9比例。

例如:iPhone SE分辨率為1136×640(像素),1136/640?17/9;iPhone SE分辨率為1334×750(像素),1334/640?17/9。

17/9這個(gè)比例有一個(gè)專有名詞,叫做長(zhǎng)寬比(寬高比),即一個(gè)影像的寬度除以它的高度所得的比例,通常表示為 “x:y”或“x×y”,其中的冒號(hào)和叉號(hào)表示中文的“比”之意。

對(duì)于相同長(zhǎng)寬比,可以使用同一套效果圖,通過(guò)放大或縮小的方式來(lái)進(jìn)行界面調(diào)整。雖然引入了長(zhǎng)寬比,可以大大降低制作效果圖的數(shù)量,但是對(duì)面如此之多的手機(jī)產(chǎn)家,這個(gè)數(shù)量還是有點(diǎn)大。

四、工作量太大,讓dp來(lái)幫忙

此時(shí),又要引入一個(gè)物理概念,設(shè)備獨(dú)立像素(device independent pixels),android系統(tǒng)中單位,簡(jiǎn)稱dp(dip)。

dp是設(shè)備像素,px是屏幕像素,它們之間是可以換算的;1dp表示在屏幕點(diǎn)密度為160ppi時(shí)1px長(zhǎng)度,這個(gè)定義非常重要。通過(guò)定義,可以計(jì)算出每個(gè)手機(jī)dp和px的關(guān)系。

5.dp與px關(guān)系

dp與px關(guān)系,根據(jù)定義,就是把手機(jī)的ppi/160ppi得出,手機(jī)的ppi前面已經(jīng)得出。

通過(guò)dp與px關(guān)系,手機(jī)適配就變得簡(jiǎn)單了,就是1x、2x、3x、4x,這些名詞大家應(yīng)該也有聽(tīng)過(guò),指的就是dp與px關(guān)系。此時(shí)也不用糾結(jié)比較特殊的長(zhǎng)寬比了,比如iphone 4s和MEIZU MX2。雖然dp是android系統(tǒng)中單位,應(yīng)用到IOS手機(jī)中,在換算成px的過(guò)程中,原理是相通的,與系統(tǒng)無(wú)關(guān)。

目前市場(chǎng)主流的是2x屏手機(jī),3x屏手機(jī)也逐漸流行起來(lái)了,也就是大屏機(jī)。

對(duì)于不同的“dp與px關(guān)系”有幾種適配的方式:

  1. 有幾種關(guān)系,制作幾套圖。
  2. 只制作2x圖,對(duì)于3x和4x圖進(jìn)行拉伸,圖片有一定程度失真。
  3. 只制作3x圖,對(duì)于2x進(jìn)行壓縮,圖片有一定變形;對(duì)于4x圖進(jìn)行拉伸,圖片有一定程度失真。
  4. 只制作3x圖,對(duì)于2x進(jìn)行壓縮,圖片有一定變形;對(duì)于4x圖進(jìn)行拉伸,圖片有一定程度失真;對(duì)于失真和變形的位置,重新制作圖片適配。

通過(guò)“dp與px關(guān)系”加上壓縮和拉伸,理論上一套效果圖就可以搞定手機(jī)適配了。至于想得到更優(yōu)的適配效果,必然需要更多的圖片。看似簡(jiǎn)單的手機(jī)適配,也有這么多的學(xué)問(wèn)。手機(jī)適配,現(xiàn)在你應(yīng)該懂了吧。

 

本文由 @jxwsina 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 寫(xiě)的這么明白竟然沒(méi)人評(píng)論 大贊一個(gè) 光收藏了哈

    來(lái)自天津 回復(fù)