設計獅的DPI指導手冊

什麼是DPI跟PPI?

DPI(每英寸點數)最早是在印刷中測量空間裏點的密度的,就是打印機在1英尺裏的大小裏噴墨點的數量。越小的DPI,圖片就越不清晰。


這個概念被運用到計算機的顯示屏中,就是PPI(每英寸像素)。同樣的道理:它代表每英寸裏電腦屏幕顯示的像素的個數。DPI這個名詞也被用在電腦顯示屏中。


windows電腦的默認PPI是96,Mac是72,雖然這個數字在80年代後並不是那麼精確。

通常,非視網膜顯示屏電腦(包括Mac)的PPI最小72,最大120左右。設計在72跟120DPI之間,基本可以保證你的作品在所有屏幕上有同樣的尺寸比例。


舉個例子:

一個109PPI的27寸蘋果cinema顯示器,意味着它每英寸上有109個像素點。帶一個斜角的寬度實際上是25.7英寸(65cm)。而屏幕真正的寬度大約是23.5英寸。23.5*109~2560,所以,屏幕本來的分辨率就是2560x1440px。

*我知道23.5*109並不完全等於2560英寸,實際上約等於23.486238532英寸,如果用釐米作單位來算的話這個數更精確。不過,你知道就可以了:) 


對你設計的影響

假設你要在我們剛剛在上面提到的屏幕上設計一個109*109px的藍色方塊。

這個方塊會在屏幕上佔1*1英寸大小。如果你的用戶用的是一個72PPI的顯示屏,你的藍色方塊就會顯示得大一些。因爲只有72PPI,屏幕就需要大概1個半英寸去顯示109像素。

看下下面模擬的效果:

注意

除開顏色跟分辨率的不同,請記住每個人看你的設計都會感覺不一致。你必須找到一個最好最折中的方案,去贏得更多的用戶。不要假設用戶用的屏幕都是一樣的並且跟你的一樣好。

屏幕分辨率(以及原始分辨率)

屏幕分辨率對用戶感知你的設計有很大的影響。幸虧LCD顯示器替代了原來的CRT,用戶現在的原始分辨率能夠保證一個比較好的尺寸比率。


分辨率就是屏幕上展示的像素點(例如之前的:27英寸蘋果cinema電腦顯示屏有2560*1440個像素,2560是寬,1440是高)。現在你知道PPI是什麼意思了,它並不是一個測量物理尺寸的單位。你可以給你的牆裝一個2560*1440的顯示屏,給你的大腦裝另一個(…?)。


現在的LCD顯示器都有一個預定義的默認或者原始分辨率去處理屏幕能夠顯示的像素點。它跟CRT有些不同,不過既然後者已經過時了,我們就不再詳細討論了吧。(並不是要揭露我對那些不錯的舊電視的偏見)


我們假設27英寸cinema顯示屏能夠在原始分辨率2560*1440px下顯示爲109PPI。如果你減小分辨率,元素的尺寸就會變大。因爲你的23.5英寸的水平寬度實際上包含的像素點更少了。






我說實際上,因爲在這個例子中是這樣的。顯示屏的原始分辨率是2560*1440px,如果分辨率下降了,像素點還在,還是顯示在109PPI。你的操作系統要做的是填補間隙,這樣做的後果是拉伸了屏幕裏的東西。你的GPU/CPU會使用到每個像素點,並且使用新的比率去計算他們。


如果你希望在你的27英寸的電腦上分辨率是1280*720(原來的一半寬,一半高),你的GPU就會把像素點僞裝成原來兩倍大來填滿屏幕。結果是?模糊不清。比率縮小一半看起來還過得去因爲除得盡,如果你希望比率縮小爲原來的1/3或者1/4,那樣比率就會變成小數。但是你是不能再分一個像素的。看下面的例子。

來看下下面另外的例子。在原始分辨率上畫一條1px的線。然後將分辨率降低50%。爲了填滿屏幕,CPU會將視覺範圍提高到150%,使得圖形擴大到1.5倍。1*1.5=1.5,但是你不能有半個像素。最終是這些像素點附近會有一部分顏色,造成模糊不清。

這就是爲什麼如果你有一個專業版的蘋果電腦並且想改變分辨率,它就會展示下面的窗口,讓你知道(下面的截屏)某個分辨率“看起來像”1280*800px,它使用的是用戶習慣的分辨率來表達尺寸比例。

這是一個高度主觀性的表達,因爲它使用的是像素分辨率作爲一個物理尺寸的單位。但這也不算騙人,至少從他們的角度是這樣。

注意

如果你希望自己的設計在每個像素上都表現得很好,千萬不要使用跟原始分辨率不同的分辨率。也許你用更小的比率會更順手,但是,當精確到像素點時,如果你想要很精確的效果,還是不要這樣。很不幸,有的人就是不用推薦的設置,他們想試試其他的分辨率來看看哪個在電腦上用起來更好一點(尤其是電腦)。那樣的話,你的設計就會看起來很糟糕,不過那樣的用戶估計更在乎可讀性而不是美觀什麼的了吧。 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章