設計師真的知道DPI 和 PPI區(qū)別嗎?

資訊頻道 - 設計技 來源:中國設計在線 作者:cdo 2017-06-19



dpi、ppi、dp、pt、sp 等等這些個單位我們天天接觸,但是真正理解這些單位的設計師恐怕并不太多,畢竟真的有點兒復雜,別說學美術出身的設計師了,很多程序員都搞不太懂。但是作為一名 UI/UX/PD/etc. 設計師,因為不了解這些知識而鬧笑話的事情幾乎每天都在發(fā)生,不知道這些甚至連自己的做設計的電腦屏幕都不了解你覺得真的好嗎?

本次分享將在盡量不涉及數(shù)學,盡量用最簡單的語言,盡量使用最貼近生活的例子來為在座各位患者朋友將心頭這些個疑慮全部消除。

由于本文篇幅有點兒長,所以將會分成四部分分享給大家。

DPI 和 PPI 是什么?

DPI 是英文 Dots(點) Per Inch 的縮寫,在最早的時候,這個單位是用來描述打印機的性能的,意思就是這臺打印機最多能用多少個墨點來打印一寸的內(nèi)容。目前市面上常見的家用黑白打印機普遍都去到了 600 * 600 dpi, 而家用彩色照片打印機則能去到 5760 * 1440 dpi。DPI 越高,每英寸內(nèi)的墨點就越多,你打印出來的東西就會越清晰銳利。



PPI 是英文 Pixels Per Inch 的縮寫,意味每寸能容納多少顆像素,用于描述屏幕的像素密度。我們上面提到的印刷物以無數(shù)多的墨點來構(gòu)成圖像,而屏幕同樣也是以一定數(shù)量的發(fā)光點來構(gòu)成圖像。見過街上那些走紅字的 LED 顯示屏么?上面的那一顆顆的 LED 燈就是這塊屏幕的發(fā)光點,我們使用的 MacBook 的 Retina 顯示屏的原理也跟這些看起來十分粗糙的走紅字顯示屏是一樣的,只不過 Retina 顯示屏的發(fā)光點密度非常高,人眼已經(jīng)看不出來顆粒感而已。對于屏幕來說 PPI 是用于描述每英寸發(fā)光點數(shù)量的,它表明了一塊屏幕發(fā)光點密度的高低,這些發(fā)光點我們更常稱之為像素,一塊屏幕寬高有幾寸是在生產(chǎn)的時候就被定好的,而寬高各能容納下多少顆像素,也是在生產(chǎn)的時候就被定好的,所以我們所說的 PPI 可以說是一個物理單位。

簡單舉個例子吧,我們手頭上的 iPhone(6~7) 寬為 2.3 英寸,高為 4.1 英寸,根據(jù)勾股定理得出這塊屏幕的尺寸(屏幕對角線距離)是 4.7 英寸。同時,iPhone(6~7)屏幕寬(每行)有 750 個像素(發(fā)光點),高(每豎)有 1334 顆像素(發(fā)光點)。

還不知道什么是DPI和PPI的<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設計</a>師,該收藏這篇教程了!

分辨率、像素和屏幕尺寸

PPI 說的是像素密度,而分辨率說的是塊屏幕的像素尺寸,譬如說 1334*750 就是 iPhone(6~7)的分辨率,說 iPhone(6~7)的分辨率是 326 是錯誤的表述,326 是它的像素密度,單位是 PPI。

詢問別人一粒像素有多大是一個非常雞賊的問題(小心面試遇到這樣的題),雖然我們說像素是構(gòu)成屏幕的發(fā)光的點,是物理的,但是像素在脫離了屏幕尺寸之后是沒有大小可言的,你可以將 1920 * 1080 顆像素放到一臺 40 寸的小米電視機里面,也可以將同樣多的像素全部塞到一臺 5.5 寸的 iPhone7 Plus 手機里面去,那么對于 40 寸的電視而言,每個像素顆粒當然會大于 5.5 寸的手機的像素。

還不知道什么是DPI和PPI的<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設計</a>師,該收藏這篇教程了!

所以光看屏幕的分辨率對于設計師來說是不具備多少實際意義的,通過分辨率計算得出的像素密度(PPI)才是設計師要關心的問題,我們通過屏幕分辨率和屏幕尺寸就能計算出屏幕的像素密度的。

再次使用 iPhone(6~7)作為例子。我們知道該屏幕的橫向物理尺寸為 2.3 英寸 ,且橫向具有 750 顆像素,根據(jù)下面的公式,我們能夠算出 iPhone(6~7)的屏幕是 326 PPI,意為每寸存在 326 顆像素。

還不知道什么是DPI和PPI的<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設計</a>師,該收藏這篇教程了!

其實不論我們怎么除,計算得出來的像素密度(PPI)都會是這個數(shù),寬存在像素除以寬物理長度,高存在像素除以高物理長度,得數(shù)都接近于 326。

設計會造成什么樣的影響

一塊 326*326px 的正方形色塊在一臺 iPhone 7 上面展現(xiàn)出來的物理尺寸將會會是 1*1 英寸。這是因為該屏幕每英寸能容納 326 顆像素,所以 326px 湊在一起剛好就是 1 英寸。假設我們能將 iPhone 7 手機屏幕 PPI 調(diào)低 50% 變?yōu)?163,色塊還是 326*326px,這個色塊的物理尺寸會變成 2*2 英寸,同樣多的像素,看起來卻大了一倍。

因為我們的色塊是 326*326px 大小的,而這臺 163PPI 的假 iPhone 7 每英寸上面只有 163 顆像素,為了要展示 326*326px 的色塊,它就要多用 1 英寸的屏幕,所以這個色塊在屏幕上面看起來就“長大了”一倍。

還不知道什么是DPI和PPI的<a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設計</a>師,該收藏這篇教程了!

總結(jié)

像素本身沒有尺寸,你可以將 1920 * 1080 顆像素放到一臺 40 寸的小米電視機里面,也可以將同樣多的像素全部塞到一臺 5.5 寸的 iPhone7 Plus 手機里面去。

只有跟屏幕尺寸一起的時候,談論像素才有意義,因為我們能夠算出該屏幕的 PPI。

DPI 跟 PPI 雖然概念相近,但是我奉勸你還是不要拿著他們倆混用,雖然可能好多人告訴你這樣沒啥關系。

設計過程中,我們并不見得真的要去計算各種東西的實際尺寸,但是對于原理的把握能讓你心里有個底,或許就是我們常說的「意識」。別以為每個人的屏幕上顯示的都會跟你屏幕上顯示的是一樣的。    


聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點。

全部評論

暫無相關推薦