Android適配的那些P事

2 評論 15392 瀏覽 275 收藏 8 分鐘

聲明:本文從設(shè)計角度說明設(shè)計稿及倍圖適配問題,不含前端技術(shù),碼農(nóng)慎入

首先我們看看百度搜索引擎上常見的認(rèn)識入手:

1

圖1:屏幕分辨率和常見屏幕密度關(guān)系

我們知道屏幕密度直接關(guān)系到我們所謂的1X ?1.5X ?2X ?3X ?4X圖的對應(yīng)適配關(guān)系,結(jié)合圖1可知:

  1. 屏幕密度跟屏幕分辨率可能有關(guān)系;
  2. 實操過安卓適配的同學(xué)應(yīng)該了解,并不是所有的生廠商都會做規(guī)規(guī)矩矩的屏幕分辨率;

單位解釋篇

想要通透得了解關(guān)于安卓各機型的適配關(guān)系還得從常見的單位入手,dp/px/sp/PPI/DPI

dp=dip=density-independence pixel=獨立設(shè)備像素:可以理解為類似現(xiàn)實中厘米的功能,當(dāng)成是一個物理單位,1dp=1in/160ppi=2.54cm/160ppi≈0.016cm,使文字和圖片在不同屏幕手機中看上去差不多大;

px=pixel=像素:這是我們用Ps、AI出設(shè)計稿時的常用單位,在啟動Ps的第一時間我們應(yīng)該都會將首選項中的單位設(shè)置為px 不多做介紹;

sp=Scale-independent pixels=尺度獨立像素(翻譯待考證):是安卓的字體單位,在安卓系統(tǒng)設(shè)置中我們可以定義字體大小,以MIUI為例

2

圖2:MIUI7.1字體大小設(shè)置界面

在標(biāo)準(zhǔn)模式下(字體是100%)時,1sp=1dp,我們知道iOS HIG里面說過內(nèi)容樣式大尺寸為17pt(iOS中的默認(rèn)size),以此為參考,安卓中常用的字號為16±dp(安卓可能出現(xiàn)1.5X圖 所以取偶數(shù))

PPI=Pixel Per Inch=像素密度;? DPI=Dots Per Inch=點密度;

點原來是印刷上的計量單位;像素是電腦顯示器的計量單位;印刷行業(yè)規(guī) 1點=0.35mm=1/72英寸;針對顯示器設(shè)計的分辨率為 72像素/英寸;在針對顯示器的設(shè)計中我們可以認(rèn)為DPI=PPI

PPI計算篇(前方高能)

新手機發(fā)布必備的參數(shù)一定會有屏幕分辨率(1920*1080),屏幕尺寸(5.0英寸),有心的同學(xué)會去官網(wǎng)查詢一下具體的PPI值,這里跟大家解釋一下這三者的轉(zhuǎn)換關(guān)系,以便大家更好地理解安卓適配:

假設(shè)屏幕分辨率為W*H(px),物理尺寸為a*b(inch),

則我們常說的屏幕尺寸c(如5.0英寸)其實是對角線的長度,因此:

3

公式1:勾股定理

而PPI是像素密度,指的是屏幕單位寬的像素數(shù):

4

公式2:屏幕密度定義

由此我們推理出:

5

公式3:由公式2推理

因此我們可以得出一個大百度爛大街的PPI DPI計算公式:

6

公式4:PPI計算公式

以上一大串的公式其實想說明的是:

  1. 公式4表面意義似乎是-PPI是屏幕分辨率用勾股計算出的對角線像素數(shù)/屏幕尺寸;
  2. 事實上,我們知道一個2*2px的屏幕,對角線像素數(shù)也是2px,并不符合勾股定律的計算公式;
  3. 正確理解公式的推理過程,才能正確理解屏幕適配原理;

dp與px換算篇

首先引入dp和px的轉(zhuǎn)換公式

px=dp*(ppi/160)

簡單陳述一下公式的實際計算方法:

任何一款機型,我們計算或從官方參數(shù)得到PPI值后,將PPI/160,得到任何含小數(shù)點的值后,舍掉小數(shù),整數(shù)進一位就是我們的dp px的轉(zhuǎn)換關(guān)系,即1.5X ?2X ?3X ?4X圖的適用關(guān)系,用函數(shù)表達即 ?ceil(PPI/160);相除得整數(shù)則直接可用:

267ppi機型,ceil(1.67)=2 ?該機型用2X設(shè)計稿

423ppi機型,ceil(2.64)=3 ?該機型用3X設(shè)計稿

至此我們知道圖1的關(guān)系其實還是too young too naive,附上一個較為成熟的關(guān)系圖:

7

圖3:屏幕密度范圍與倍圖對應(yīng)關(guān)系

主流手機屏幕尺寸及分辨率

整理了一些主流機型的參數(shù)屏幕并附上:置灰文字說明:未查詢到官方數(shù)據(jù),為個人計算結(jié)果

數(shù)據(jù)統(tǒng)計包括魅族/小米/華為/三星/HTC/MOTO/VIVO/SONY截止到2016.2的主流機型

8

圖4:主流機型參數(shù)及倍圖關(guān)系整理

由圖4可見,在大屏手機時代,3X機型成為了主流機型(暫時忽略機型市場占有率);1X機型基本絕跡;4K手機屏也在悄悄進入市場;

一稿適配篇

有限的時候我們?nèi)绾纬龆鄰埐煌直媛实男Ч麍D

首先建議以2X圖尺寸(1280*720)為設(shè)計原稿進行設(shè)計(由圖4可見,1X適配機型基本已經(jīng)絕種),然2X只需要設(shè)計時注意偶數(shù)原則即可方便進行適配;另外設(shè)計稿也有可能會被要求直接用于iOS,或iOS設(shè)計稿直接改改成了安卓的設(shè)計稿(iOS主流還是@2X);假設(shè)我們手里有一份1136*640(iPhone5/5s) 原稿高保真設(shè)計稿,要去適配iOS其它機型及安卓機型:

因為iOS的尺寸比較有代表性,能說明問題,方法在安卓各機型適配過程中通用:

9

圖5:一稿適配方法

需要注意的是,圖標(biāo)在放大過程中可能會出現(xiàn)鋸齒(所謂虛邊),防鋸齒需要注意的點有很多,其中最主要的一條是 盡量保持圖標(biāo)文件的形狀屬性(切忌使用位圖素材、柵格化圖層、轉(zhuǎn)為智能對象)

一點小技巧,在2X→3X過程中,我們可以全選圖層,Cmd+T后 講變形中心移動到畫板左上角的位置,再進行150%變形,會便捷很多;

這次的內(nèi)容就寫到這里,請大神隨便拍;

 

作者@風(fēng)口上的豬毛

來源@簡書

本文由 @風(fēng)口上的豬毛 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享?。?/p>

    來自北京 回復(fù)
    1. ?? ?? 以后支持~~

      來自北京 回復(fù)