dpi、ppi、dp、pt、sp 等等這些個(gè)單位我們天天接觸,但是真正理解這些單位的設(shè)計(jì)師恐怕并不太多,畢竟真的有點(diǎn)兒復(fù)雜,別說(shuō)學(xué)美術(shù)出身的設(shè)計(jì)師了,很多程序員都搞不太懂。但是作為一名 UI/UX/PD/etc. 設(shè)計(jì)師,因?yàn)椴涣私膺@些知識(shí)而鬧笑話的事情幾乎每天都在發(fā)生,不知道這些甚至連自己的做設(shè)計(jì)的電腦屏幕都不了解你覺(jué)得真的好嗎?
本次分享將在盡量不涉及數(shù)學(xué),盡量用最簡(jiǎn)單的語(yǔ)言,盡量使用最貼近生活的例子來(lái)為在座各位患者朋友將心頭這些個(gè)疑慮全部消除。
由于本文篇幅有點(diǎn)兒長(zhǎng),所以將會(huì)分成四部分分享給大家。
DPI 和 PPI 是什么?
DPI 是英文 Dots(點(diǎn)) Per Inch 的縮寫(xiě),在最早的時(shí)候,這個(gè)單位是用來(lái)描述打印機(jī)的性能的,意思就是這臺(tái)打印機(jī)最多能用多少個(gè)墨點(diǎn)來(lái)打印一寸的內(nèi)容。目前市面上常見(jiàn)的家用黑白打印機(jī)普遍都去到了 600 * 600 dpi, 而家用彩色照片打印機(jī)則能去到 5760 * 1440 dpi。DPI 越高,每英寸內(nèi)的墨點(diǎn)就越多,你打印出來(lái)的東西就會(huì)越清晰銳利。
PPI 是英文 Pixels Per Inch 的縮寫(xiě),意味每寸能容納多少顆像素,用于描述屏幕的像素密度。我們上面提到的印刷物以無(wú)數(shù)多的墨點(diǎn)來(lái)構(gòu)成圖像,而屏幕同樣也是以一定數(shù)量的發(fā)光點(diǎn)來(lái)構(gòu)成圖像。見(jiàn)過(guò)街上那些走紅字的 LED 顯示屏么?上面的那一顆顆的 LED 燈就是這塊屏幕的發(fā)光點(diǎn),我們使用的 MacBook 的 Retina 顯示屏的原理也跟這些看起來(lái)十分粗糙的走紅字顯示屏是一樣的,只不過(guò) Retina 顯示屏的發(fā)光點(diǎn)密度非常高,人眼已經(jīng)看不出來(lái)顆粒感而已。對(duì)于屏幕來(lái)說(shuō) PPI 是用于描述每英寸發(fā)光點(diǎn)數(shù)量的,它表明了一塊屏幕發(fā)光點(diǎn)密度的高低,這些發(fā)光點(diǎn)我們更常稱之為像素,一塊屏幕寬高有幾寸是在生產(chǎn)的時(shí)候就被定好的,而寬高各能容納下多少顆像素,也是在生產(chǎn)的時(shí)候就被定好的,所以我們所說(shuō)的 PPI 可以說(shuō)是一個(gè)物理單位。
簡(jiǎn)單舉個(gè)例子吧,我們手頭上的 iPhone(6~7) 寬為 2.3 英寸,高為 4.1 英寸,根據(jù)勾股定理得出這塊屏幕的尺寸(屏幕對(duì)角線距離)是 4.7 英寸。同時(shí),iPhone(6~7)屏幕寬(每行)有 750 個(gè)像素(發(fā)光點(diǎn)),高(每豎)有 1334 顆像素(發(fā)光點(diǎn))。
分辨率、像素和屏幕尺寸
PPI 說(shuō)的是像素密度,而分辨率說(shuō)的是塊屏幕的像素尺寸,譬如說(shuō) 1334*750 就是 iPhone(6~7)的分辨率,說(shuō) iPhone(6~7)的分辨率是 326 是錯(cuò)誤的表述,326 是它的像素密度,單位是 PPI。
詢問(wèn)別人一粒像素有多大是一個(gè)非常雞賊的問(wèn)題(小心面試遇到這樣的題),雖然我們說(shuō)像素是構(gòu)成屏幕的發(fā)光的點(diǎn),是物理的,但是像素在脫離了屏幕尺寸之后是沒(méi)有大小可言的,你可以將 1920 * 1080 顆像素放到一臺(tái) 40 寸的小米電視機(jī)里面,也可以將同樣多的像素全部塞到一臺(tái) 5.5 寸的 iPhone7 Plus 手機(jī)里面去,那么對(duì)于 40 寸的電視而言,每個(gè)像素顆粒當(dāng)然會(huì)大于 5.5 寸的手機(jī)的像素。
所以光看屏幕的分辨率對(duì)于設(shè)計(jì)師來(lái)說(shuō)是不具備多少實(shí)際意義的,通過(guò)分辨率計(jì)算得出的像素密度(PPI)才是設(shè)計(jì)師要關(guān)心的問(wèn)題,我們通過(guò)屏幕分辨率和屏幕尺寸就能計(jì)算出屏幕的像素密度的。
再次使用 iPhone(6~7)作為例子。我們知道該屏幕的橫向物理尺寸為 2.3 英寸 ,且橫向具有 750 顆像素,根據(jù)下面的公式,我們能夠算出 iPhone(6~7)的屏幕是 326 PPI,意為每寸存在 326 顆像素。
其實(shí)不論我們?cè)趺闯,?jì)算得出來(lái)的像素密度(PPI)都會(huì)是這個(gè)數(shù),寬存在像素除以寬物理長(zhǎng)度,高存在像素除以高物理長(zhǎng)度,得數(shù)都接近于 326。
對(duì)設(shè)計(jì)會(huì)造成什么樣的影響
一塊 326*326px 的正方形色塊在一臺(tái) iPhone 7 上面展現(xiàn)出來(lái)的物理尺寸將會(huì)會(huì)是 1*1 英寸。這是因?yàn)樵撈聊幻坑⒋缒苋菁{ 326 顆像素,所以 326px 湊在一起剛好就是 1 英寸。假設(shè)我們能將 iPhone 7 手機(jī)屏幕 PPI 調(diào)低 50% 變?yōu)?163,色塊還是 326*326px,這個(gè)色塊的物理尺寸會(huì)變成 2*2 英寸,同樣多的像素,看起來(lái)卻大了一倍。
因?yàn)槲覀兊纳珘K是 326*326px 大小的,而這臺(tái) 163PPI 的假 iPhone 7 每英寸上面只有 163 顆像素,為了要展示 326*326px 的色塊,它就要多用 1 英寸的屏幕,所以這個(gè)色塊在屏幕上面看起來(lái)就“長(zhǎng)大了”一倍。
總結(jié)
像素本身沒(méi)有尺寸,你可以將 1920 * 1080 顆像素放到一臺(tái) 40 寸的小米電視機(jī)里面,也可以將同樣多的像素全部塞到一臺(tái) 5.5 寸的 iPhone7 Plus 手機(jī)里面去。
只有跟屏幕尺寸一起的時(shí)候,談?wù)撓袼夭庞幸饬x,因?yàn)槲覀兡軌蛩愠鲈撈聊坏?PPI。
DPI 跟 PPI 雖然概念相近,但是我奉勸你還是不要拿著他們倆混用,雖然可能好多人告訴你這樣沒(méi)啥關(guān)系。
在設(shè)計(jì)過(guò)程中,我們并不見(jiàn)得真的要去計(jì)算各種東西的實(shí)際尺寸,但是對(duì)于原理的把握能讓你心里有個(gè)底,或許就是我們常說(shuō)的「意識(shí)」。別以為每個(gè)人的屏幕上顯示的都會(huì)跟你屏幕上顯示的是一樣的。
全部評(píng)論