‍‍

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ì)跟你屏幕上顯示的是一樣的。