移動端尺寸基礎(chǔ)知識(轉(zhuǎn)載)

初涉移動端設(shè)計和開發(fā)的同學(xué)們,基本都會在尺寸問題上糾結(jié)好一陣子才能摸到頭緒建邓。我也花了很長時間才弄明白,感覺有必要寫一篇足夠通俗易懂的教程來幫助大家。從原理說起,理清關(guān)于尺寸的所有細(xì)節(jié)惑灵。由于是寫給初學(xué)者的,所以不要嫌我啰嗦鸯屿。

現(xiàn)象

首先說現(xiàn)象修赞,大家都知道移動端設(shè)備屏幕尺寸非常多,碎片化嚴(yán)重眷篇。尤其是Android玛歌,你會聽到很多種分辨率:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且還有傳說中的2K屏叹侄。近年來iPhone的碎片化也加劇了:640x960, 640x1136, 750x1334, 1242x2208篙骡。

不要被這些尺寸嚇倒。實際上大部分的app和移動端網(wǎng)頁杖玲,在各種尺寸的屏幕上都能正常顯示鸿吆。說明尺寸的問題一定有解決方法蕉毯,而且有規(guī)律可循激蹲。

像素密度

要知道,屏幕是由很多像素點組成的。之前提到那么多種分辨率差油,都是手機屏幕的實際像素尺寸。比如480x800的屏幕,就是由800行叔锐、480列的像素點組成的。每個點發(fā)出不同顏色的光,構(gòu)成我們所看到的畫面蔓肯。而手機屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320x480淘钟,iPhone 4s的屏幕像素是640x960毡琉。剛好兩倍,然而兩款手機都是3.5英寸的。

所以,我們要引入最重要的一個概念:像素密度踪危,也就是PPI(pixels per inch)敛滋。這項指標(biāo)是連接數(shù)字世界與物理世界的橋梁。

Pixels per inch杂曲,準(zhǔn)確的說是每英寸的長度上排列的像素點數(shù)量袁余。1英寸是一個固定長度颖榜,等于2.54厘米掩完,大約是食指最末端那根指節(jié)的長度。像素密度越高欣硼,代表屏幕顯示效果越精細(xì)诈胜。Retina屏比普通屏清晰很多焦匈,就是因為它的像素密度翻了一倍括授。

倍率與邏輯像素

再用iPhone 3gs和4s來舉例。假設(shè)有個郵件列表界面,我們不妨按照PC端網(wǎng)頁設(shè)計的思維來想象午磁。3gs上大概只能顯示4-5行登颓,4s就能顯示9-10行产阱,而且每行會變得特別寬俗壹。但兩款手機其實是一樣大的期吓。如果照這種方式顯示,3gs上剛剛好的效果刨晴,在4s上就會小到根本看不清字莫瞬。

在現(xiàn)實中拐袜,這兩者效果卻是一樣的甜攀。這是因為Retina屏幕把2x2個像素當(dāng)1個像素使用谁撼。比如原本44像素高的頂部導(dǎo)航欄玄糟,在Retina屏上用了88個像素的高度來顯示贰军。導(dǎo)致界面元素都變成2倍大小舵盈,反而和3gs效果一樣了。畫質(zhì)卻更清晰熄阻。

在以前鳄袍,iOS應(yīng)用的資源圖片中阅束,同一張圖通常有兩個尺寸簿寂。你會看到文件名有的帶@2x字樣,有的不帶笆搓。其中不帶@2x的用在普通屏上,帶@2x的用在Retina屏上暑刃。只要圖片準(zhǔn)備好焙压,iOS會自己判斷用哪張,Android道理也一樣麸塞。

由此可以看出祥绞,蘋果以普通屏為基準(zhǔn)遂铡,給Retina屏定義了一個2倍的倍率(iPhone 6plus除外碱呼,它達(dá)到了3倍)。實際像素除以倍率师痕,就得到邏輯像素尺寸茶没。只要兩個屏幕邏輯像素相同,它們的顯示效果就是相同的隆嗅。

Android的解決方法類似偿短,但更復(fù)雜一些艾少。因為Android屏幕尺寸實在太多谍椅,分辨率高低跨度非常大摘完,不像蘋果只有那么幾款固定設(shè)備、固定尺寸瓤介。所以Android把各種設(shè)備的像素密度劃成了好幾個范圍區(qū)間辕漂,給不同范圍的設(shè)備定義了不同的倍率,來保證顯示效果相近。像素密度概念雖然重要友浸,但用不著我們自己算收恢,iOS與Android都幫我們算好了。

如圖所示,像素密度在120左右的屏幕歸為ldpi已骇,160左右的歸為mdpi疾捍,以此類推。這樣宛裕,所有的Android屏幕都找到了自己的位置揩尸,并賦予了相應(yīng)的倍率:

ldpi [0.75倍]

mdpi [1倍]

hdpi [1.5倍]

xhdpi [2倍]

xxhdpi [3倍]

xxxhdpi [4倍]

各型號iPhone的倍率比較簡單,我們后面會講到。那么Android手機那么多折联,具體怎么分奕坟?哪些手機是幾倍的倍率呢月杉?我們先看一張表,這是友盟2014年10月到2015年03月的數(shù)據(jù):

就目前市場狀況而言,各種手機的分辨率可以這樣粗略判斷究履。雖然不全面最仑,但至少在1年內(nèi)都還有一定的參考意義:

ldpi 如今已絕跡,不用考慮

mdpi [320x480](市場份額不足5%吟吝,新手機不會有這種倍率,屏幕通常都特別小)

hdpi [480x800同仆、480x854俗或、540x960](早年的低端機,屏幕在3.5英寸檔位臭觉;如今的低端機狞膘,屏幕在4.7-5.0英寸檔位)

xhdpi [720x1280](早年的中端機,屏幕在4.7-5.0英寸檔位辅愿;如今的中低端機点待,屏幕在5.0-5.5英寸檔位)

xxhdpi [1080x1920](早年的高端機癞埠,如今的中高端機,屏幕通常都在5.0英寸以上)

xxxhdpi [1440x2560](極少數(shù)2K屏手機,比如Google Nexus 6)

自然地毕莱,以1倍的mdpi作為基準(zhǔn)。像素密度更高或者更低的設(shè)備,只需乘以相應(yīng)的倍率稚字,就能得到與基準(zhǔn)倍率近似的顯示效果。

不過需要注意的是瘫想,Android設(shè)備的邏輯像素尺寸并不統(tǒng)一昌讲。比如兩種常見的屏幕480x800和1080x1920,它們分別屬于hdpi和xxhdpi短绸。除以各自倍率1.5倍和3倍,得到邏輯像素為320x533和360x640醋闭。很顯然,后者更寬更高乐埠,能顯示更多內(nèi)容。所以丈咐,即使有倍率的存在,各種Android設(shè)備的顯示效果仍然無法做到完全一致扯罐。

單位

不難發(fā)現(xiàn)花吟,真正決定顯示效果的,是邏輯像素尺寸部默。為此,iOS和Android平臺都定義了各自的邏輯像素單位。iOS的尺寸單位為pt案糙,Android的尺寸單位為dp。說實話,兩者其實是一回事。

單位之間的換算關(guān)系隨倍率變化:

1倍:1pt=1dp=1px(mdpi、iPhone 3gs)

1.5倍:1pt=1dp=1.5px(hdpi)

2倍:1pt=1dp=2px(xhdpi蠢络、iPhone 4s/5/6)

3倍:1pt=1dp=3px(xxhdpi髓霞、iPhone 6)

4倍:1pt=1dp=4px(xxxhdpi)

單位決定了我們的思考方式薪捍。在設(shè)計和開發(fā)過程中,應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計Android應(yīng)用時,有的設(shè)計師喜歡把畫布設(shè)為1080x1920,有的喜歡設(shè)成720x1280苗沧。給出的界面元素尺寸就不統(tǒng)一了网严。Android的最小點擊區(qū)域尺寸是48x48dp,這就意味著在xhdpi的設(shè)備上肝断,按鈕尺寸至少是96x96px趣钱。而在xxhdpi設(shè)備上枢劝,則是144x144px蚕脏。

無論畫布設(shè)成多大译隘,我們設(shè)計的是基準(zhǔn)倍率的界面樣式皂甘,而且開發(fā)人員需要的單位都是邏輯像素渐夸。所以為了保證準(zhǔn)確高效的溝通瘟忱,雙方都需要以邏輯像素尺寸來描述和理解界面触菜,無論是在標(biāo)注圖還是在日常溝通中。不要再說“底部標(biāo)簽欄的高度是96像素槽袄,我是按照xhdpi做的”這樣的話了迂苛。

Web怎么辦

移動端頁面的絕對單位仍然是px摆出,至少代碼里這么寫温亲,但它的道理也和app一樣逆害。由于像素密度是設(shè)備本身的固有屬性,它會影響到設(shè)備中的所有應(yīng)用阴颖,包括瀏覽器。前端技術(shù)可以善加利用設(shè)備的像素密度,只需一行代碼稀火,瀏覽器便會使用app的顯示方式來渲染頁面赡若。根據(jù)像素密度匹厘,按相應(yīng)倍率縮放炕柔。

可以通過這個測試頁面http://greenzorro.github.io/demo/basic/響應(yīng)式斷點.html來看看你的移動設(shè)備屏幕寬度,這是邏輯像素寬度。

以iPhone 5s為例斗搞,屏幕的分辨率是640x1136,倍率是2萍启。瀏覽器會認(rèn)為屏幕的分辨率是320x568超埋,仍然是基準(zhǔn)倍率的尺寸月弛。所以在制作頁面時厉萝,只需要按照基準(zhǔn)倍率來就行了舞肆。無論什么樣的屏幕,倍率是多少渣慕,都按邏輯像素尺寸來設(shè)計和開發(fā)頁面兰迫。只不過在準(zhǔn)備資源圖的時候晋控,需要準(zhǔn)備2倍大小的圖许帐,通過代碼把它縮成1倍大小顯示拄养,才能保證清晰宪祥。

實際應(yīng)用

大家最關(guān)心的還是實際運用双炕,畫布該怎么設(shè)置死相。我們就iOS狸驳、Android、Web三個平臺來分別梳理一下敷搪。不過在這之前狮含,我要為使用PS進(jìn)行設(shè)計的朋友介紹一個小技巧。

之前我說過,我們要以邏輯像素尺寸來思考界面绝页。體現(xiàn)到設(shè)計過程中朴译,就是要把單位設(shè)置成邏輯像素盒发。打開PS的首選項——單位與標(biāo)尺界面聪富,把尺寸和文字單位都改成點(Point)。這里的點也就是pt炕横,無論設(shè)計iOS、Android還是Web應(yīng)用膜钓,單位都用它卿嘲。當(dāng)然颂斜,各平臺單位名稱還是要記住的拾枣。這里我們用的只是它的原理盒让,不用在意名稱司蔬。

要調(diào)節(jié)倍率,則通過圖像大小里的DPI來控制肺缕。這個DPI授帕,其實就是PPI,像素密度跛十。有個常識大家都知道,屏幕上的設(shè)計DPI設(shè)成72洲尊,印刷品設(shè)計DPI設(shè)成300屏轰。為什么是這兩個數(shù)字?

首先說300霎苗,這和人眼的分辨能力有關(guān)。由于1英寸是固定長度内狸,每1英寸有多少個像素點決定了畫質(zhì)清晰程度厘擂。之前說過,這就是像素密度刽严,也就是DPI。DPI達(dá)到300以上眨补,其細(xì)膩程度就會給人真實感倒脓,像真實世界中的物件。相反崎弃,DPI只有10的話含潘,在你一個食指指節(jié)大小的長度內(nèi)只有10個像素线婚,這明顯就是馬賽克了。所以印刷品要設(shè)成300腾窝,才能保證清晰居砖。

再說72驴娃,這有一定的歷史原因。最早的圖形設(shè)計是在mac電腦上進(jìn)行的唇敞,mac本身的顯示器分辨率就是72。PS中把圖像DPI也設(shè)成72咒精,就能保證屏幕上顯示的尺寸和打印尺寸相同旷档,便于設(shè)計。72的PC顯示器分辨率逐漸成為一種默認(rèn)的行業(yè)標(biāo)準(zhǔn)鞋屈,這套規(guī)則就這么沿用下來。

現(xiàn)在回到正題渠啊,我們怎么通過DPI來調(diào)節(jié)倍率权旷?既然屏幕本身的分辨率是72,DPI設(shè)成72剛好是1倍尺寸躲查,那設(shè)成72的兩倍就是倍率為2的屏幕了坤邪,就這么簡單熙含。

下面來看看3個平臺各自的畫布設(shè)置:

iPhone

iPhone的屏幕尺寸各不相同艇纺,我說的是邏輯像素尺寸邮弹,這確實是讓人很頭疼的事情蚓聘。如果想用一套設(shè)計涵蓋所有iPhone夜牡,就要選擇邏輯像素折中的機型。

從市場占有率數(shù)據(jù)來看塘装,目前最多的是iPhone5/5s的屏幕。倍率為2僚碎,邏輯像素320x568阴幌。上升勢頭最猛,未來有望登上第一的是iPhone 6的屏幕矛双。倍率為2,邏輯像素375x667懒闷。

按照這兩種尺寸來設(shè)計栈幸,都是比較主流的做法≌煺颍可以兼顧短一些的iPhone 4s,大一點的6 plus也不會過于空曠震捣。

不過在切圖的時候要注意闹炉,由于iPhone 6 plus的3倍圖是由2倍圖放大而來,所以位圖要注意保證清晰渣触。

Android

都說Android碎片化嚴(yán)重,但它現(xiàn)在反而比iOS好處理皂冰。因為如今的Android屏幕邏輯像素已經(jīng)趨于統(tǒng)一了:360x640,就看你設(shè)成幾倍了秃流。想以xhdpi為準(zhǔn),就把DPI設(shè)成72x2=144概说。想以xxhdpi為準(zhǔn)嚣伐,就把DPI設(shè)成72x3=216。

對于那些比較老的低端機轩端,寬度是480px的那批,畫面確實會小一些,顯示內(nèi)容會更少骨田。稍微留意一下,重要內(nèi)容盡量保持在界面中上部分舱呻。

當(dāng)然悠汽,這些機型不出一年就會被邊緣化,基本淘汰〔绺撸現(xiàn)在能運轉(zhuǎn)的也是當(dāng)作功能機在用假抄,軟件多了必卡無疑,用戶體驗無從談起宿饱。不作考慮也是OK的。

Web

手機端網(wǎng)頁就沒有統(tǒng)一標(biāo)準(zhǔn)了强饮,比較流行的做法是按照iPhone 5的尺寸來設(shè)計为黎。倍率2行您,邏輯像素320x568柠座。

這樣的做法比較實在,倍率2的屏幕無論在iOS還是Android方面都是主流妈经,而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平骤星,頁面加載速度快爆哑。當(dāng)然,缺點就是在倍率3的設(shè)備上看队贱,圖片不是特別清晰潭袱。

如果追求圖片質(zhì)量,愿意犧牲加載速度屯换,那么可以按照最大的屏幕來設(shè)計。也就是iPhone 6 plus的尺寸嘉抓,倍率3晕窑,邏輯像素414x736。

總結(jié)

移動端的尺寸比PC端復(fù)雜杨赤,關(guān)鍵就在倍率。但也正因為倍率的存在渺尘,把大大小小的屏幕拉回到同一水平線说敏,得以保證一套設(shè)計適應(yīng)各種屏幕。站在這條水平線的角度看,會發(fā)現(xiàn)它很好理解枫匾。


原文:http://colachan.com/post/3435

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末干茉,一起剝皮案震驚了整個濱河市很泊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌委造,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件枫虏,死亡現(xiàn)場離奇詭異爬虱,居然都是意外死亡,警方通過查閱死者的電腦和手機死讹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進(jìn)店門继蜡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來逛腿,“玉大人,你說我怎么就攤上這事碘举「槔” “怎么了?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵蝙场,是天一觀的道長粱年。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么赐俗? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任弊知,我火速辦了婚禮,結(jié)果婚禮上叔扼,老公的妹妹穿的比我還像新娘呐舔。我一直安慰自己,他們只是感情好珊拼,可當(dāng)我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布澎现。 她就那樣靜靜地躺著,像睡著了一般剑辫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上椎眯,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天胳岂,我揣著相機與錄音,去河邊找鬼掌测。 笑死产园,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的什燕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼仲义,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了赵颅?” 一聲冷哼從身側(cè)響起暂刘,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谣拣,沒想到半個月后森缠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拔鹰,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡列肢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年宾茂,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片欧聘。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡端盆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蒋伦,到底是詐尸還是另有隱情访敌,我是刑警寧澤凉敲,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站势决,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏果复。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望独柑。 院中可真熱鬧,春花似錦忌栅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至窄坦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間拴袭,已是汗流浹背曙博。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留般哼,地道東北人惠窄。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像杆融,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蒋腮,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內(nèi)容

  • ?初涉移動端設(shè)計和開發(fā)的同學(xué)們池摧,基本都會在尺寸問題上糾結(jié)好一陣子才能摸到頭緒激况。我也花了很長時間才弄明白作彤,感覺有必要...
    有福氣的DI雪峰閱讀 1,801評論 0 2
  • 初涉移動端設(shè)計和開發(fā)的同學(xué)們竭讳,基本都會在尺寸問題上糾結(jié)好一陣子才能摸到頭緒。從原理說起绢慢,理清關(guān)于尺寸的所有細(xì)節(jié)。 ...
    原設(shè)計閱讀 1,310評論 0 4
  • 初涉移動端設(shè)計和開發(fā)的同學(xué)們逻杖,基本都會在尺寸問題上糾結(jié)好一陣子才能摸到頭緒思瘟。我也花了很長時間才弄明白,感覺有必要寫...
    滕的世界閱讀 8,523評論 1 12
  • 寫給移動端設(shè)計和開發(fā)的同學(xué)們够话,理清關(guān)于尺寸的所有細(xì)節(jié)光绕。 現(xiàn)象 首先說現(xiàn)象,大家都知道移動端設(shè)備屏幕尺寸非常多诞帐,碎片...
    木糖醇閱讀 1,116評論 0 11
  • 從原理開始介紹一下移動端設(shè)計尺寸規(guī)范右鍵“在新標(biāo)簽頁中打開圖片”看 初涉移動端設(shè)計和開發(fā)的同學(xué)們,基本都會在尺寸問...
    老夫的天閱讀 151,862評論 20 222