你確定你真的懂手機適配嗎?
手機適配,這個詞都聽爛了??墒?,你確定你懂嗎?經常會聽到程序猿說:這個我適配一下?這個我沒有適配好?……然后你問程序猿,你是怎么適配的?能說明白的沒有幾個。這個是系統自動適配的?這個有套算法?再往下問,就沒有然后了……
把這個問題拋給設計獅,很可能給你的答復是,你問程序猿???是他們適配的啊……場景是不是有點熟悉。
一、什么是手機適配?
言歸正傳,什么是手機適配?手機適配:設計獅制作效果圖,程序猿把效果圖應用到不同的手機,對不同的屏幕進行界面調整的過程,確保界面不變形,呈現效果圖的位置、尺寸、比例。
二、關于屏幕的一些物理概念
1.屏幕物理尺寸:屏幕對角線的尺寸。
例如:蘋果最新發布了4英寸iPhone SE,這個4英寸指的就是手機的屏幕物理尺寸。
iPhone SE屏幕:長度9.0cm、寬度5.1cm
PS:1英寸(in)=2.54厘米(cm)
2.屏幕分辨率:確定計算機屏幕上顯示多少信息的設置,以水平和垂直像素來衡量。
例如:iPhone SE分辨率為1136×640(像素)。
3.屏幕密度(pixel per inch):每英寸的像素數,簡稱ppi。
例如:iPhone SE 像素密度達到326ppi。
已知iPhone SE屏幕物理尺寸為4寸;通過屏幕分辯率得到屏幕對角線的像素總數;屏幕對角線的像素總數和屏幕物理尺寸比,就得到了ppi。
屏幕物理尺寸決定了屏幕的實際尺寸,屏幕分辨率表示屏幕上可以呈現的像素點數,屏幕密度決定了屏幕的精細程度。
三、開始手機適配吧
已知iPhone SE分辨率為1136×640(像素),讓設計獅制作一套分辨率為1136×640(像素)圖片;
iPhone SE分辨率為1334×750(像素),再讓設計獅制作一套分辨率為1334×750(像素)圖片
以此往復
來看看市場上主流的屏幕分辨率
數據來自友盟指數
如此之多的分辨率,怎么可能一一做圖呢?
眼尖的同學可能注意到一個東西,就是屏幕的分辯率基本符合17/9比例。
例如:iPhone SE分辨率為1136×640(像素),1136/640?17/9;iPhone SE分辨率為1334×750(像素),1334/640?17/9。
17/9這個比例有一個專有名詞,叫做長寬比(寬高比),即一個影像的寬度除以它的高度所得的比例,通常表示為 “x:y”或“x×y”,其中的冒號和叉號表示中文的“比”之意。
對于相同長寬比,可以使用同一套效果圖,通過放大或縮小的方式來進行界面調整。雖然引入了長寬比,可以大大降低制作效果圖的數量,但是對面如此之多的手機產家,這個數量還是有點大。
四、工作量太大,讓dp來幫忙
此時,又要引入一個物理概念,設備獨立像素(device independent pixels),android系統中單位,簡稱dp(dip)。
dp是設備像素,px是屏幕像素,它們之間是可以換算的;1dp表示在屏幕點密度為160ppi時1px長度,這個定義非常重要。通過定義,可以計算出每個手機dp和px的關系。
dp與px關系,根據定義,就是把手機的ppi/160ppi得出,手機的ppi前面已經得出。
通過dp與px關系,手機適配就變得簡單了,就是1x、2x、3x、4x,這些名詞大家應該也有聽過,指的就是dp與px關系。此時也不用糾結比較特殊的長寬比了,比如iphone 4s和MEIZU MX2。雖然dp是android系統中單位,應用到IOS手機中,在換算成px的過程中,原理是相通的,與系統無關。
目前市場主流的是2x屏手機,3x屏手機也逐漸流行起來了,也就是大屏機。
對于不同的“dp與px關系”有幾種適配的方式:
- 有幾種關系,制作幾套圖。
- 只制作2x圖,對于3x和4x圖進行拉伸,圖片有一定程度失真。
- 只制作3x圖,對于2x進行壓縮,圖片有一定變形;對于4x圖進行拉伸,圖片有一定程度失真。
- 只制作3x圖,對于2x進行壓縮,圖片有一定變形;對于4x圖進行拉伸,圖片有一定程度失真;對于失真和變形的位置,重新制作圖片適配。
通過“dp與px關系”加上壓縮和拉伸,理論上一套效果圖就可以搞定手機適配了。至于想得到更優的適配效果,必然需要更多的圖片。看似簡單的手機適配,也有這么多的學問。手機適配,現在你應該懂了吧。
本文由 @jxwsina 原創發布于人人都是產品經理?,未經許可,禁止轉載。
寫的這么明白竟然沒人評論 大贊一個 光收藏了哈