?小編推薦：你是否遇到過顯示分辨率的問題？是否搞不清楚那些DPI PPI 4K px HD 等各類名詞的區(qū)別？是不是每次還在糾結(jié)各類屏幕間的關(guān)系？作為一個(gè)時(shí)常被抓去做設(shè)計(jì)的壯丁，小編一聽分辨率兼容就頭疼，本文圖文結(jié)合并且輕松愉快的講解了有關(guān)分辨率、顯示屏的專有名詞，媽媽再也不用擔(dān)心我的界面不兼容了~yeah~

DPI和PPI

DPI（Dots Per Inch）最初用于衡量打印物上每英寸的點(diǎn)數(shù)密度，就是說你的打印機(jī)可以在一英寸內(nèi)打多少個(gè)點(diǎn)。DPI值越小圖片越不精細(xì)。

當(dāng)DPI的概念用在計(jì)算機(jī)屏幕上時(shí)，就應(yīng)稱之為PPI（Pixels Per Inch）。同理： PPI就是計(jì)算機(jī)屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量。你說 DPI大伙也能理解。

Windows系統(tǒng)默認(rèn)PPI 為96， Mac OS系統(tǒng)默認(rèn)PPI 為72。

一般非視網(wǎng)膜屏幕的桌面電腦的 PPI在72 到120之間。使用 72到120 之間的PPI進(jìn)行設(shè)計(jì)基本可以保證你的作品尺寸在大多數(shù)情況下看起來都差不多。

舉個(gè)栗子：

27″Mac的PPI是109，意思是每英寸有109個(gè)像素。顯示器寬度（含邊框）為25.7英寸，屏幕純寬度差不多23.5英寸，所以23.5×109 ≈2560，由此可知屏幕的分辨率為2560×1440px。

*我知道23.5×109不等于2560，實(shí)際上應(yīng)該是23.486238532 英寸，用像素/厘米能更精確點(diǎn)。我就是舉個(gè)栗子，你懂的。

PPI在設(shè)計(jì)中的影響

假設(shè)你設(shè)計(jì)了一個(gè)109×109px的藍(lán)色方塊，并且這個(gè)方塊的物理尺寸為1×1英寸。如果你的屏幕是72PPI的，那這個(gè)方塊看起來就要比實(shí)際的物理尺寸更大點(diǎn)，因?yàn)?2PPI的屏幕要顯示109px差不多需要1.5英寸才行。

屏幕分辨率

屏幕分辨率對用戶感知你的設(shè)計(jì)影響老大了。幸好CRT顯示基本已經(jīng)被淘汰了，用戶使用液晶顯示器時(shí)基本都使用顯示器的原生分辨率，這樣看起來更舒服嘛。

分辨率就是屏幕上的像素?cái)?shù)，例如2560×1440px的屏幕，屏幕橫向有2560個(gè)像素，縱向有1440個(gè)像素，結(jié)合PPI的含義，你應(yīng)該明白分辨率不是物理尺寸的定義。你可以有一個(gè)像你們家一面墻那么大的屏幕或者像你的腳趾蓋那么大的一塊屏幕，它們的分辨率都是可以是2560×1440px。

現(xiàn)在的液晶顯示器都是有原生固定分辨率的（譯者：我一般稱為點(diǎn)對點(diǎn)分辨率），這根CRT顯示器的原理不同，在這就不細(xì)掰扯了。

咱的27“Mac顯示器有2560×1440px的點(diǎn)對點(diǎn)分辨率，109PPI。如果把屏幕分辨率調(diào)低，你就會(huì)發(fā)現(xiàn)屏幕上的窗口啊，icon啊啥的東西都變大了，因?yàn)?3.5英寸上的像素變少了。

其實(shí)像素還是那么多像素，PPI還是那個(gè)PPI，它們就在那里不多不少。我說像素變少了的意思是當(dāng)你把屏幕分辨率調(diào)低時(shí)，操作系統(tǒng)會(huì)通過拉伸來填充屏幕，這個(gè)時(shí)候CPU/GPU會(huì)用點(diǎn)對點(diǎn)的像素計(jì)算出來一套新的分辨率。

如果你想把27”Mac的分辨率設(shè)為1280×720px，GPU就會(huì)把4個(gè)像素當(dāng)成1個(gè)像素用（2×2）。這能咋的？當(dāng)然是變糊了！這還算好的呢，畢竟是可以整除的像素，如果你弄什么三分之一、四分之三這種幺蛾子，換算出來就有小數(shù)，那就更糊！不信你看下面的圖。

例如下面這個(gè)例子，在點(diǎn)對點(diǎn)屏幕上拉一條1px的線，然后把屏幕分辨率降低一半，為填充屏幕，CPU必須以150%的形式展示視覺效果。相當(dāng)于所有元素都變?yōu)橹暗?.5倍，但是又沒有半個(gè)像素，所以只能通過減低填充像素顏色的純度達(dá)到目的。

這就是為啥在你用retina屏的Macbook Pro時(shí)如果要更改分辨率，系統(tǒng)會(huì)提示你此分辨率下的視覺效果（如下圖），用戶可以直觀的感受到分辨率的變化。

用像素代表物理尺寸是非常主觀的表現(xiàn)，但他們覺得這不算忽悠。

記?。喝绻阆朐诓榭丛O(shè)計(jì)時(shí)盡可能保持像素完美，一定要將屏幕分辨率設(shè)置為顯示器的點(diǎn)對點(diǎn)原生分辨率。雖然你可能覺得使用低分辨率更舒服些，但在像素層面查看設(shè)計(jì)時(shí)必須要盡可能精確。悲劇的是，有的人為了看的更清楚會(huì)使用輔助功能，這會(huì)讓你的作品看起來丑的要死，好在這時(shí)候用戶是為了看的更仔細(xì)而不是為了扣細(xì)節(jié)。

4K是啥？

最近你可能經(jīng)常聽到有人說4K，4K現(xiàn)在老時(shí)髦了。嘮4K之前，咱們還是先說說HD（高清）是啥吧。

注意，HD其實(shí)是個(gè)很寬泛的簡稱，咱們只說說常見的分辨率。HD沒有固定標(biāo)準(zhǔn)，基本上寬度為720px的都算是HD，有的分辨率也成為標(biāo)準(zhǔn)定義簡稱SD。

full HD（全高清）指的是1920×1080px分辨率的屏幕，大多數(shù)的電視和越來越多的高端手機(jī)都使用full HD分辨率（例如：此處無品牌贊助商）。

4K標(biāo)準(zhǔn)的最小分辨率是3840×2160px。4K也叫做QHD或者UHD（超高清）。簡單的說，一塊4K屏幕可以擺下4個(gè)1080P的屏幕。

4K的另一個(gè)常見分辨率是4096×2160px，一般用在投影儀或者專業(yè)相機(jī)上。

如果我的電腦用了4K顯示器會(huì)咋的？

目前的操作系統(tǒng)都不支持4K，如果你在一個(gè)Chromebook或者macbook上用4K屏幕，它們會(huì)使用最高DPI模式，這樣會(huì)以2倍的比例顯示元素（ 原文：it will use the highest DPI asset, in this case the 200% or @2x ones, and display them at normal ratio不知翻譯的是否正確），雖然看起來不錯(cuò)但是特別的小。

請腦補(bǔ)：如果你把一個(gè)12寸的4K屏幕放在一個(gè)有12寸高分辨率屏幕的電腦上，所有元素看起來都會(huì)比以前小2倍。

– 4K就是4倍全高清.

– If current OS handles 4K but do not scale it. Meaning no 4K specific assets yet.（不知道如何翻譯更通順）

– 目前還沒有4K分辨率的手機(jī)或平板電腦。

顯示器的刷新頻率

此章節(jié)可能在理論上存在一些疑問，僅供參考和娛樂。

咱們先從PPI和屏幕分辨率的話題跳出來說點(diǎn)別的。你可能注意過在屏幕分辨率設(shè)置附近還有個(gè)刷新率的設(shè)置，它跟PPI沒關(guān)系，它指的是屏幕每秒顯示的圖像的幀數(shù)，60Hz的刷新率就是每秒顯示60幀，120Hz就是每秒顯示120幀，以此類推。

在UI設(shè)計(jì)中，刷新率決定了你所做的動(dòng)畫看起來是否平滑且細(xì)致。注意，刷新率是由處理圖形的設(shè)備決定的，就算你把一個(gè)120Hz的顯示器接在小霸王游戲機(jī)上，它也不可能達(dá)到120Hz。

這還理解不了的話就看看下面的栗子吧。一個(gè)非常努力的霸王龍小明從A點(diǎn)跑到B點(diǎn)。在60Hz的屏幕上可以顯示9幀，在120Hz的屏幕上可以顯示18幀，當(dāng)然在120Hz的屏幕上霸王龍小明看起來跑的更優(yōu)雅更努力了。

注意：有人說超過60Hz人眼是無法察覺出區(qū)別的。放屁！別聽他不懂裝懂，一定要盡情鄙視他 凸(‵.′)凸。

啥是視網(wǎng)膜屏幕？

視網(wǎng)膜屏幕是在iPhone4發(fā)布時(shí)進(jìn)入大眾視野的，叫視網(wǎng)膜是因?yàn)槠聊坏腜PI高到人的肉眼完全無法看到像素點(diǎn)。

在iPhone4剛出來那時(shí)候這個(gè)說法是合理的，但隨著屏幕做的越來越好，我們的眼神被煉的已經(jīng)能看到屏幕上的像素了，尤其界面上的圓形元素更容易看到。

從技術(shù)上講就是他們在物理尺寸與上一代相同的屏幕上塞了2倍的像素。

哇塞！不縮小元素的大小，相同尺寸屏幕上的元素精度提高了2倍。原來1個(gè)像素的空間現(xiàn)在有4個(gè)像素，像素?cái)?shù)是原來的4倍。

再舉個(gè)栗子。

圖注：再其他的設(shè)備上很難表達(dá)出圖上界面在iPhone 3GS和在iPhone 4上的區(qū)別。如果你想仔細(xì)對比，可以下載我這個(gè)demo放在兩個(gè)手機(jī)里對比查看。

“Retina”是蘋果公司的專有名詞，其他公司只能用“HI-DPI”或者“超級勁爆極限像素顯示屏”之類的詞，或者完全不說這樣的蠢話，只在你讀設(shè)備說明的時(shí)候告訴你屏幕的尺寸和DPI。

注意：Apple產(chǎn)品的DPI轉(zhuǎn)換和分辨率的差異非常好理解，因?yàn)橹挥幸环N倍數(shù)。

轉(zhuǎn)換系數(shù)又是個(gè)啥？

當(dāng)你的設(shè)計(jì)要在不同PPI的屏幕上展示時(shí)，轉(zhuǎn)換系數(shù)簡直就是葵花寶典。當(dāng)你掌握了葵花寶典后，完全可以忽略設(shè)備的具體參數(shù)（也別完全忽略，畢竟大家都不是原作者這樣的東方不?。?/p>

咱們還是再把iPhone 3GS和iPhone 4請出來舉舉栗子。物理尺寸一樣的屏幕長寬各塞進(jìn)去2倍數(shù)量的像素，那這個(gè)轉(zhuǎn)換系數(shù)就是2，就是說你的原件容納了之前4倍數(shù)量的像素，所以你要把它的尺寸的長寬都擴(kuò)大2倍。（這哥們車轱轆話真多啊，真的不是湊字騙稿費(fèi)？）

假設(shè)你畫了一個(gè)44×44px的iOS圖標(biāo)，然后給它賦予一個(gè)有生命力的名字，例如“趙四”。

為了讓“趙四”在iPhone 4上看起來也很“趙四”，你要再畫一個(gè)2倍大的，如下圖。

是不是簡單死了！現(xiàn)在“趙四.png”有兩個(gè)版本的了，一個(gè)普通PPI下供3GS使用的，一個(gè)2倍大給iPhone 4使用的。

你可能會(huì)納悶：“肯定不止只有這一種轉(zhuǎn)換比例。”有啊，必須必的有啊，而且有多少比例就有多少噩夢。好了啦，不嚇你們了。我確定一定以及肯定你們寧愿花一天時(shí)間洗襪子洗褲衩也不愿意去換算系數(shù)。幸好你們遇到了哥，有哥在就不用擔(dān)心了。（才怪 =_=）

在談跨DPI設(shè)計(jì)的規(guī)范前，要先說一下單位，講一講DP和PT的身世。

注意：

不知道轉(zhuǎn)換系數(shù)還好意思說自己是射基濕，轉(zhuǎn)換系數(shù)是混亂的屏幕尺寸和PPI世界的燈塔。

當(dāng)我們談3P時(shí)在談些什么（DP、PT和SP）

DP和PT是用來定義應(yīng)用在不同設(shè)備、不同DPI下的標(biāo)準(zhǔn)單位。

DP（叫DiP也行）就是Device independent Pixel（設(shè)備獨(dú)立像素）的縮寫，PT就是point。PT是apple家的東西，DP是android家的東西，其實(shí)就是一個(gè)人有兩個(gè)名字。

總而言之言而總之，它能決定一個(gè)設(shè)備的轉(zhuǎn)換系數(shù)。這在射基濕和程序猿討（zheng）論（lun）設(shè)計(jì)標(biāo)準(zhǔn)時(shí)大有幫助。

我們再把之前做的按鈕“趙四”請出來。

44px的“趙四”用在3GS上，88px的“趙四”用在retina屏上。在3GS上我們給“趙四”做一個(gè)20px的內(nèi)邊距，讓它的地盤大一點(diǎn)，那么在retina屏上就要給出40px的內(nèi)邊距。在只做非retina屏幕設(shè)計(jì)時(shí)就不用算計(jì)retina屏幕應(yīng)該用多少像素了。

所以我們先以非retina屏幕的按鈕當(dāng)成DP/PT的標(biāo)準(zhǔn)參照。

在上圖中“趙四”的大小是44DP，內(nèi)邊距是20DP。在任何PPI的屏幕上，“趙四”都是44DP。

Android和iOS都會(huì)通過轉(zhuǎn)換系數(shù)讓控件適應(yīng)屏幕的尺寸，這就是為啥使用你屏幕默認(rèn)的PPI做設(shè)計(jì)會(huì)更好。（如果不是我翻譯的錯(cuò)誤，完全沒有感受到這兩句話的因果關(guān)系）

SP跟DP不一樣，但用法基本一樣，SP是用來專門定義文字大小的。SP受用戶android設(shè)備字體設(shè)置的影響，作為射基濕定義SP跟定義DP一樣，把清晰易讀的大小作為標(biāo)準(zhǔn)（例如16SP的字號(hào)易讀性就非常強(qiáng)）。

分辨率的花樣越多，DP、SP就越凸顯出其價(jià)值。

關(guān)于PPI的設(shè)置

之前已經(jīng)介紹過了PPI、retina和轉(zhuǎn)換系數(shù)?，F(xiàn)在必須要談?wù)勀銈冞@些小調(diào)皮們經(jīng)常會(huì)問的問題：如果我改變了設(shè)計(jì)工具里的PPI，會(huì)發(fā)生什么？

如果你以前就考慮過這個(gè)問題，那說明你對你的設(shè)計(jì)工具還挺熟悉的。我非了挺大勁才理解了這里面一些非常重要的東西。

所有非打印用像素的初始PPI配置

軟件中的PPI配置是從印刷品時(shí)代繼承而來。如果你只做Web設(shè)計(jì)，那PPI對你的設(shè)計(jì)基本沒什么影響。

軟件會(huì)把你的設(shè)計(jì)通過轉(zhuǎn)換系數(shù)轉(zhuǎn)換為合適的像素，這就是為什么我們使用轉(zhuǎn)換系數(shù)而不是直接使用PPI的具體數(shù)值。

再舉個(gè)栗子，你可以在Photoshop中畫一個(gè)80px的方塊，旁邊放一行16PT大小的字，一張72PPI，一張144PPI。

你看，144PPI的畫布上字比72PPI上大了1倍，但方塊的大小基本沒變化。因?yàn)镻hotoshop中PT的顯示會(huì)根據(jù)PPI的值來決定，在2倍的PPI上就有2倍大的文本。那什么情況是以像素作為定義標(biāo)準(zhǔn)呢，看那個(gè)藍(lán)色方塊，它的大小就沒變。一個(gè)像素就是一個(gè)像素，無論在什么PPI配置下，一個(gè)像素還是一個(gè)像素，它只受屏幕點(diǎn)對點(diǎn)像素PPI的影響。

以下內(nèi)容很重要：在進(jìn)行數(shù)字設(shè)計(jì)時(shí)，PPI只會(huì)作用在你思考你的設(shè)計(jì)時(shí)，你的工作過程中和在使用PT這種單位時(shí)例如字體。如果你的設(shè)計(jì)源文件中包含了各種不同PPI的配置，項(xiàng)目中會(huì)包含各種根據(jù)不同PPI轉(zhuǎn)換出來的文件，這是個(gè)很大的麻煩。

怎么搞？堅(jiān)定的使用一種PPI作為設(shè)計(jì)標(biāo)準(zhǔn)（建議在72~120PPI為1x）。我個(gè)人用72PPI，因?yàn)檫@是Photoshop默認(rèn)的值，而且我的大多數(shù)同事也用這個(gè)。

注意：

– PPI配置對做web設(shè)計(jì)基本沒有影響。

– PPI配置只會(huì)影響那些需要測量獨(dú)立PPI的單位，例如PT。

– 像素是任何數(shù)碼的度量單位。

– 記住轉(zhuǎn)換系數(shù)和你的設(shè)計(jì)目的，而不是PPI。

– 做設(shè)計(jì)時(shí)使用通用的PPI配置，這樣能讓你更容易感知這個(gè)設(shè)計(jì)在目標(biāo)設(shè)備上的效果。

– 設(shè)計(jì)時(shí)使用相同的PPI配置。

讀讀這個(gè)挺有趣的StackExchange post。

來源：ui中國翻譯

原作者：?Sebastien Gabriel