為設計師量身打造的DPI指南

 　　本文是為“初學者”或者作為從一開始就想要學習更多跨DPI和跨平台設計知識的中級設計師准備的序言讀物。 沒有復雜的計算和不可分析的圖表，只是按照劃分直截了當地將內容呈獻給讀者，便於讀者理解以及直接運用到設計過程中，非常實用且專業的知識，記得收藏唷。

　　什麼是DPI、PPI？

　　DPI(Dots Per Inch)是測量空間點密度的單位，最初應用於打印技術中，它表示每英寸能打印上的墨滴數量。較小的DPI會產生不清晰的圖片。

　　後來DPI的概念也被應用到了計算機屏幕上，計算機屏幕一般采用PPI(Pixels Per Inch)來表示一英寸屏幕上顯示的像素點的數量，現在DPI也被引入。

　　安裝Windows操作系統的電腦屏幕PPI的初始值是96，Mac的初始值是72，雖然這個值從80年代起就不是很准確了。 一般來說，非retina桌面(包括Mac)的PPI的取值區間在72-120之間，因為這個取值區間能夠確保你的作品在任何地方都能保持大致相同的比例。

　　這裡有一個應用實例： 27寸Mac影院顯示屏的PPI是109，這表示在每英寸的屏幕上顯示了109個像素點。斜角長是25.7英寸(65cm)，實際屏幕的寬度大概是23.5英寸，23.5109約等於2560，因此原始屏幕分辨率就是25601440px。

　　我知道23.5109不是恰好等於2560.實際上是23. 486238532英寸。要是用每厘米的像素點計算，會更加准確，但是這裡你知道就行。

　　影響

　　在屏幕上設計一個前面我們討論過的109*109px的藍色正方形。

　　這個正方形在1*1英寸的屏幕上有一個初始的物理尺寸，但是如果用戶的PPI是72，藍色正方形就會顯得更大。因為PPI是72時，屏幕需要大約1英寸半的尺寸來展示109px的藍色正方形。模擬效果如下圖所示：

　　附加： 不考慮顏色和分辨率差異，因為每個人看到的設計都是不同的。你應該力求達到平衡，滿足大多數的用戶的需求就可以了。不要期待用戶擁有和你一樣好的屏幕。

　　屏幕分辨率（原始分辨率）

　　屏幕分辨率對用戶如何理解設計有很大的影響。幸運的是，自從LCD顯示器代替了CRT，現在的用戶更趨向於使用原始分辨率，它保證了好的屏幕尺寸或者說PPI比例。

　　分辨率定義了屏幕上顯示的像素數量(比如：27寸的顯示器分辨率是25601440px，2560是寬，1440是高)。在了解了PPI之後，我們就知道它不是一個測量物理大小的單位。你可以有一個25601440屏幕，它能跟牆一般大，也可以跟腦袋一般小。

　　如今的LCD顯示器有分辨率初始值或者原始分辨率來確定屏幕上展示像素點的數量。它和過去的CRT顯示器稍有不同，這裡就不贅述了。

　　一個27寸的影院顯示屏，原始分辨率為2560*1440px，PPI為109。如果減小分辨率，元素將會顯示得更大，因為有23.5英寸的水平寬度需要數量遠遠不夠的像素點來填滿。

　　如例子所示，屏幕的原始分辨率是2560*1440px。如果分辨率減小，像素點還是被展示在PPI為109的屏幕上。你的操作系統會自動拉伸所有元素來填補間隙，使得整個屏幕被填滿。GPU/CPU會捕獲所有像素點並且使用新的比例重新計算他們。

　　如果想要設置27寸屏幕分辨率為1280*720(之前寬的一半，高的一半)，GPU會讓一個像素點變成原來的2倍大來填充屏幕，那麼結果就是會變得模糊。在分辨率為原來一半的時候，因為有簡單分頻器的存在可能看著還算可以。但是如果使用原來的1/3或者3/4，最終會以小數點結束，就不能等分一個像素點了。我們來看下面的例子：

　　思考後面的例子：在原始分辨率的屏幕上畫一條1px的線，然後設置分辨率為50%。為了填滿屏幕，CPU需要制造150%的視覺效果，所有像素點都要乘以1.5，1*1.5=1.5，但是因為不能有半個像素點，這就使得填充周圍的像素點的顏色只有一部分，便產生了模糊。

　　這就是為什麼當你想要改變一台Retina Macbook Pro的分辨率的時候，系統會展示下面的窗口來讓你知道(下面的屏幕截圖)這個分辨率會“看著像”1280*800px，它采用用戶的分辨率經驗來表達尺寸比例。

　　這些描述帶有濃重的主觀色彩，因為它用像素分辨率作為衡量物理尺寸的單位，雖然不夠嚴謹，但至少他們覺得是對的。

　　附加：如果你希望你的設計精確到像素，那麼最好不要改變原始分辨率。你也許覺得使用小的比例會更舒服，但是當涉及到像素點時，這樣會影響精確性。有些時候，用戶會把調整分辨率當作在控制屏幕(特別是桌面)美觀程度的方式，這樣雖然會讓設計看起來不太好，但是可以滿足用戶對易讀性的需求。

　　什麼是4K

　　你也許聽到過很多次4K，它在最近非常流行。在了解它是什麼之前，我們需要先弄明白“HD”的含義。

　　需要事先聲明的是，本文是簡化版本，所以這裡只考慮最常見的分辨率。HD有不同的類別。

　　它適用於從1280*720px或720p開始的720水平的任何分辨率。一些地方也將這個分辨率SD叫做標清。

　　全高清適用於1920*1080px的屏幕。大多數的TV以及越來越多的高端手機(Galaxy SIV，HTC one，Sony Xperia Z，Nexus5)都是這個分辨率。

　　4K始於3840*2160像素，它也叫做Quad HD，被稱為UHD超高清。簡而言之，你可以放4個1080p的像素點在4K的屏幕上。

　　另外一個4K的分辨率是4096*2160，這個稍微大一點，一般用在投影儀和大畫幅相機上。

　　如果我外接一個4k的顯示器到電腦會發生什麼呢?

　　最新的OS不再參照4K的比例，這意味著給Chromebook或者macbook外接一個4K顯示器，將會使用最高的DPI。假如這樣，200%或者@2x，按照正常比例展示就會看起來很好但是有點小。

　　假設的例子：如果你外接一個12寸4k屏幕到12寸高清屏幕(2x)的電腦，所有東西都會顯得小了兩倍。

　　附加:

　　4k就是四倍全高清。

　　如果現在的OS掌握了4k但是又不按照比例來，這說明現在還沒有特定的4k資源。

　　如今沒有手機或者平板電腦使用4k.

　　顯示器赫茲

　　稍微從PPI和屏幕分辨率中休息一下，來看個小知識。你可能注意到在屏幕設置中靠近分辨率的地方有顯示器的Hz值，它和PPI沒什麼關系，顯示器赫茲或者刷新頻率是顯示器每秒展示固定圖像或者幀的速度單位，比如一個60 Hz的顯示器每秒可以顯示60幀，同樣，一個120 Hz的顯示器每秒可以顯示120幀。

　　在UI環境中，顯示器赫茲(Hz)決定了動畫的流暢和精細程度，大多數的屏幕都是60Hz。而每秒顯示的幀數依賴於設備處理圖像的能力，像在Atari 2600使用120Hz屏幕就沒有太大的用處。

　　下面這個例子，可以幫助大家更好地理解。T-rex同時在60Hz和120Hz的屏幕上以完全相等的步伐快速從A點到B點，60fps的屏幕上展示了9幀動畫，而在相同時間內120fps的屏幕展示了2倍幀數，並且動畫在120Hz屏幕上會顯得更加流暢。

　　附加: 也許有人會說，每秒顯示60幀以上人眼是無法識別的，這是錯誤的。

　　什麼是視網膜顯示屏

　　“Retina(視網膜)顯示屏”是Apple公司在發布iPhone 4時引入的。之所以叫做Retina是因為設備的PPI非常高以至於人的視網膜也不能在屏幕上分辨出像素點來。

　　這個說法在現在的設備的屏幕范圍內是正確的，但是隨著屏幕越來越好，我們的眼睛也會被訓練得足夠感知像素點，特別是圓形的UI元素。

　　從技術的角度來講，他們做的就是在完全相同的物理大小上展示比原來高和寬多一倍的像素點。

　　iPhone 3G/S是3.5英寸的斜角，分辨率為480320px，PPI為163。 iPhone 4/S是3.5英寸的斜角，分辨率為960640px，PPI為326。

　　事實證明正好是兩倍的關系，同樣的物理大小，屏幕上的元素卻有兩倍的清晰度，因為他們有兩倍的像素點。1個標准的像素=4個Retina像素，像素的四倍。

　　思考下面的例子，在復雜設計中如何直接應用：

　　圖注