什么是DPI?什么是PPI?

2015-6-23    用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源:莫貝網(wǎng)

這是一篇為學(xué)習(xí)DPI知識(shí)的新手和跨平臺(tái)設(shè)計(jì)知識(shí)的中級(jí)設(shè)計(jì)師準(zhǔn)備的文章。便于設(shè)計(jì)師理解以及直接運(yùn)用到設(shè)計(jì)過(guò)程中,非常實(shí)用且專(zhuān)業(yè)的知識(shí),記得收藏哦。

什么是DPI?什么是PPI?

DPI(Dots Per Inch)是測(cè)量空間點(diǎn)密度的單位,最初應(yīng)用于打印技術(shù)中,它表示每英寸能打印上的墨滴數(shù)量。較小的DPI會(huì)產(chǎn)生不清晰的圖片。

后來(lái)DPI的概念也被應(yīng)用到了計(jì)算機(jī)屏幕上,計(jì)算機(jī)屏幕一般采用PPI(Pixels Per Inch)來(lái)表示一英寸屏幕上顯示的像素點(diǎn)的數(shù)量,而DPI也被引入。

安裝Windows操作系統(tǒng)的電腦屏幕PPI的初始值是96,Mac的初始值是72,雖然這個(gè)值從80年代起就不是很準(zhǔn)確了。 一般來(lái)說(shuō),非retina桌面(包括Mac)的PPI的取值區(qū)間在72-120之間,因?yàn)檫@個(gè)取值區(qū)間能夠確保你的作品在任何地方都能保持大致相同的比 例。

這里有一個(gè)應(yīng)用實(shí)例: 27寸Mac影院顯示屏的PPI是109,這表示在每英寸的屏幕上顯示了109個(gè)像素點(diǎn)。斜角長(zhǎng)是25.7英寸(65cm),實(shí)際屏幕的寬度大概是23.5英寸,23.5109約等于2560,因此原始屏幕分辨率就是2560*1440px。

我知道23.5109不是恰好等于2560.實(shí)際上是23. 486238532英寸。要是用每厘米的像素點(diǎn)計(jì)算,會(huì)更加準(zhǔn)確,但是這里你知道就行。

什么是DPI?什么是PPI?

有什么影響?

在屏幕上設(shè)計(jì)一個(gè)109*109px的藍(lán)色正方形。

這個(gè)正方形在1*1英寸的屏幕上有一個(gè)初始的物理尺寸,但是如果用戶(hù)的PPI是72,藍(lán)色正方形就會(huì)顯得更大。因?yàn)镻PI是72時(shí),屏幕需要大約1英寸半的尺寸來(lái)展示109px的藍(lán)色正方形。模擬效果如下圖所示:

什么是DPI?什么是PPI?2

不考慮顏色和分辨率差異,因?yàn)槊總€(gè)人看到的設(shè)計(jì)都是不同的。你應(yīng)該力求達(dá)到平衡,滿足大多數(shù)的用戶(hù)的需求就可以了。不要期待用戶(hù)擁有和你一樣好的屏幕。

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

屏幕分辨率對(duì)用戶(hù)如何理解設(shè)計(jì)有很大的影響。幸運(yùn)的是,自從LCD顯示器代替了CRT,現(xiàn)在的用戶(hù)更趨向于使用原始分辨率,它保證了好的屏幕尺寸或者說(shuō)PPI比例。

分辨率定義了屏幕上顯示的像素?cái)?shù)量(比如:27寸的顯示器分辨率是25601440px,2560是寬,1440是高)。在了解了PPI之后,我們就知道它不是一個(gè)測(cè)量物理大小的單位。你可以有一個(gè)2560*1440的屏幕,它能跟墻一般大,也可以跟腦袋一般小。

如今的LCD顯示器有分辨率初始值或者原始分辨率來(lái)確定屏幕上展示像素點(diǎn)的數(shù)量。它和過(guò)去的CRT顯示器稍有不同,這里就不贅述了。

一個(gè)27寸的影院顯示屏,原始分辨率為2560*1440px,PPI為109。如果減小分辨率,元素將會(huì)顯示得更大,因?yàn)橛?3.5英寸的水平寬度需要數(shù)量遠(yuǎn)遠(yuǎn)不夠的像素點(diǎn)來(lái)填滿。

什么是DPI?什么是PPI?3

如上所示,屏幕的原始分辨率是2560*1440px。如果分辨率減小,像素點(diǎn)還是被展示在PPI為109的屏幕上。你的操作系統(tǒng)會(huì)自動(dòng)拉伸所有元素來(lái)填補(bǔ)間隙,使得整個(gè)屏幕被填滿。GPU/CPU會(huì)捕獲所有像素點(diǎn)并且使用新的比例重新計(jì)算他們。

如果想要設(shè)置27寸屏幕分辨率為1280*720(之前寬的一半,高的一半),GPU會(huì)讓一個(gè)像素點(diǎn)變成原來(lái)的2倍大來(lái)填充屏幕,那么結(jié)果就是會(huì)變 得模糊。在分辨率為原來(lái)一半的時(shí)候,因?yàn)橛泻?jiǎn)單分頻器的存在可能看著還算可以。但是如果使用原來(lái)的1/3或者3/4,最終會(huì)以小數(shù)點(diǎn)結(jié)束,就不能等分一個(gè) 像素點(diǎn)了。我們來(lái)看下面的例子:

什么是DPI?什么是PPI?4

思考后面的例子:在原始分辨率的屏幕上畫(huà)一條1px的線,然后設(shè)置分辨率為50%。為了填滿屏幕,CPU需要制造150%的視覺(jué)效果,所有像素點(diǎn)都要乘以1.5,1*1.5=1.5,但是因?yàn)椴荒苡邪雮€(gè)像素點(diǎn),這就使得填充周?chē)南袼攸c(diǎn)的顏色只有一部分,便產(chǎn)生了模糊。

什么是DPI?什么是PPI?5

這就是為什么當(dāng)你想要改變一臺(tái)Retina Macbook Pro的分辨率的時(shí)候,系統(tǒng)會(huì)展示下面的窗口來(lái)讓你知道(下面的屏幕截圖)這個(gè)分辨率會(huì)“看著像”1280*800px,它采用用戶(hù)的分辨率經(jīng)驗(yàn)來(lái)表達(dá)尺寸比例。

什么是DPI?什么是PPI?6

這些描述帶有濃重的主觀色彩,因?yàn)樗孟袼胤直媛首鳛楹饬课锢沓叽绲膯挝唬m然不夠嚴(yán)謹(jǐn),但至少他們覺(jué)得是對(duì)的。

如果你希望你的設(shè)計(jì)到像素,那么最好不要改變?cè)挤直媛?。你也許覺(jué)得使用小的比例會(huì)更舒服,但是當(dāng)涉及到像素點(diǎn)時(shí),這樣會(huì)影響性。有些時(shí) 候,用戶(hù)會(huì)把調(diào)整分辨率當(dāng)作在控制屏幕(特別是桌面)美觀程度的方式,這樣雖然會(huì)讓設(shè)計(jì)看起來(lái)不太好,但是可以滿足用戶(hù)對(duì)易讀性的需求。

什么是4K?

你也許聽(tīng)到過(guò)很多次4K,它在最近非常流行。在了解它是什么之前,我們需要先弄明白“HD”的含義。需要事先聲明的是,本文是簡(jiǎn)化版本,所以這里只考慮最常見(jiàn)的分辨率。HD有不同的類(lèi)別。

它適用于從1280*720px或720p開(kāi)始的720水平的任何分辨率。一些地方也將這個(gè)分辨率SD叫做標(biāo)清。全高清適用于 1920*1080px的屏幕。大多數(shù)的TV以及越來(lái)越多的高端手機(jī)(Galaxy SIV,HTC one,Sony Xperia Z,Nexus5)都是這個(gè)分辨率。4K始于3840*2160像素,它也叫做Quad HD,被稱(chēng)為UHD超高清。簡(jiǎn)而言之,你可以放4個(gè)1080p的像素點(diǎn)在4K的屏幕上。

另外一個(gè)4K的分辨率是4096*2160,這個(gè)稍微大一點(diǎn),一般用在投影儀和大畫(huà)幅相機(jī)上。

什么是DPI?什么是PPI?7

如果我外接一個(gè)4k的顯示器到電腦會(huì)發(fā)生什么呢?

的OS不再參照4K的比例,這意味著給Chromebook或者macbook外接一個(gè)4K顯示器,將會(huì)使用最高的DPI。假如這樣,200%或者@2x,按照正常比例展示就會(huì)看起來(lái)很好但是有點(diǎn)小。

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

附加:
4k就是四倍全高清。
如果現(xiàn)在的OS掌握了4k但是又不按照比例來(lái),這說(shuō)明現(xiàn)在還沒(méi)有特定的4k資源。
如今沒(méi)有手機(jī)或者平板電腦使用4k。

顯示器赫茲

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

在UI環(huán)境中,顯示器赫茲(Hz)決定了動(dòng)畫(huà)的流暢和精細(xì)程度,大多數(shù)的屏幕都是60Hz。而每秒顯示的幀數(shù)依賴(lài)于設(shè)備處理圖像的能力,像在Atari 2600使用120Hz屏幕就沒(méi)有太大的用處。

下面這個(gè)例子,可以幫助大家更好地理解。T-rex同時(shí)在60Hz和120Hz的屏幕上以完全相等的步伐快速?gòu)腁點(diǎn)到B點(diǎn),60fps的屏幕上展示了9幀動(dòng)畫(huà),而在相同時(shí)間內(nèi)120fps的屏幕展示了2倍幀數(shù),并且動(dòng)畫(huà)在120Hz屏幕上會(huì)顯得更加流暢。

什么是DPI?什么是PPI?8

也許有人會(huì)說(shuō),每秒顯示60幀以上人眼是無(wú)法識(shí)別的,這是錯(cuò)誤的。

什么是視網(wǎng)膜顯示屏?

“Retina(視網(wǎng)膜)顯示屏”是Apple公司在發(fā)布iPhone 4時(shí)引入的。之所以叫做Retina是因?yàn)樵O(shè)備的PPI非常高以至于人的視網(wǎng)膜也不能在屏幕上分辨出像素點(diǎn)來(lái)。

這個(gè)說(shuō)法在現(xiàn)在的設(shè)備的屏幕范圍內(nèi)是正確的,但是隨著屏幕越來(lái)越好,我們的眼睛也會(huì)被訓(xùn)練得足夠感知像素點(diǎn),特別是圓形的UI元素。從技術(shù)的角度來(lái)講,他們做的就是在完全相同的物理大小上展示比原來(lái)高和寬多一倍的像素點(diǎn)。

iPhone 3G/S是3.5英寸的斜角,分辨率為480*320px,PPI為163。 iPhone 4/S是3.5英寸的斜角,分辨率為960*640px,PPI為326。

什么是DPI?什么是PPI?9

事實(shí)證明正好是兩倍的關(guān)系,同樣的物理大小,屏幕上的元素卻有兩倍的清晰度,因?yàn)樗麄冇袃杀兜南袼攸c(diǎn)。1個(gè)標(biāo)準(zhǔn)的像素=4個(gè)Retina像素,像素的四倍。

思考下面的例子,在復(fù)雜設(shè)計(jì)中如何直接應(yīng)用:

什么是DPI?什么是PPI?10

圖注:在第三方設(shè)備上很難模擬出來(lái)自不同設(shè)備的不同圖片質(zhì)量,如上圖所示,Retina的音樂(lè)播放器雖然與iPhone 4的音樂(lè)播放器有相同的物理空間,但圖片質(zhì)量看上去比iPhone 4好了兩倍并且更清晰。如果大家想在本地進(jìn)行驗(yàn)證,我會(huì)提供免費(fèi)的演示事例源碼,供大家下載(http://sebastien- gabriel.com)。

因?yàn)椤癛etina”顯示屏的命名歸Apple公司所有,所以其他公司使用“HI-DPI”或者“超大像素sp33d顯示器”(我將注冊(cè)這個(gè))或者其他的來(lái)表示。

附加: 使用Apple的產(chǎn)品是熟悉DPI換算,理解分辨率、PPI、物理尺寸比例之間差異的極佳方式,因?yàn)槟阒恍枰紤]一個(gè)像素比。

什么是像素比?

當(dāng)你的設(shè)計(jì)需要在不同PPI下轉(zhuǎn)換時(shí),像素比就是你的救星。當(dāng)你知道像素比后,就不需要再考慮設(shè)備的詳細(xì)規(guī)格了。

以iPhone 3G和4為例,相同物理大小上iPhone4的像素點(diǎn)是3G兩倍,因此像素比就是2,這表示只需要用你的資源乘以2,就可以兼容4G的分辨率了。

讓我們先創(chuàng)建一個(gè)44*44px的iOS上被推薦的touch按鈕(我后面會(huì)介紹),定義為典型按鈕“Jim”。 為了讓Jim在iPhone 4上看起來(lái)更好,需要?jiǎng)?chuàng)建一個(gè)它兩倍大小的版本。下面就是我們做的:

什么是DPI?什么是PPI?11

很簡(jiǎn)單,現(xiàn)在的Jim,一個(gè)是標(biāo)準(zhǔn)PPI(iPhone 3)的Jim.png版本,一個(gè)是200%PPI(iPhone 4)的Jim@2x.png版本。

現(xiàn)在你也許會(huì)問(wèn),“等等??!我很確定還有其他的像素比,不止這兩個(gè)?!庇校@是一個(gè)噩夢(mèng)。好吧,也許不是噩夢(mèng),但是我很肯定你寧愿花一天時(shí)間熨襪子也不想處理無(wú)數(shù)的像素比。幸好這也沒(méi)有你想象的那么嚴(yán)重,我們后面再說(shuō)。

讓我們先說(shuō)說(shuō)單位,因?yàn)楝F(xiàn)在比起像素,你更需要單位來(lái)規(guī)范多DPI設(shè)計(jì)。這就是DP和PT起作用的地方。

附加: 對(duì)于每一個(gè)你正在做的設(shè)計(jì),像素比都是需要知道的。像素比把屏幕大小和PPI結(jié)合起來(lái),讓人們更理解它們。

什么是DP、PT、SP?

DP或PT是測(cè)量單位,你可以用來(lái)規(guī)范你的各種設(shè)備和多DPI的app模型。 DP(Dip)表示獨(dú)立于設(shè)備的像素點(diǎn),PT表示點(diǎn)。DP用在Android上,PT用在Apple上,但是他們本質(zhì)上是相同的。

簡(jiǎn)而言之,它能定義獨(dú)立于設(shè)備的像素比的大小,這會(huì)包含在不同角色(如設(shè)計(jì)師和工程師)之間的討論規(guī)則中。

繼續(xù)說(shuō)前面“Jim”按鈕的例子。 Jim在標(biāo)準(zhǔn)的非Retina屏幕上寬度為44px,在Retina屏幕上是88px。從技術(shù)上給Jim添加20px的padding,在Retina上 padding是40px。但是,當(dāng)你基于非Retina屏幕設(shè)計(jì)時(shí)計(jì)算Retina的像素值并沒(méi)什么意義。

因此我們需要做的就是以標(biāo)準(zhǔn)的100%非Retina比例作為一切設(shè)計(jì)的基礎(chǔ)。

什么是DPI?什么是PPI?12

在這種情況下,Jim的大小就是4444DP(PT),padding為20DP(PT)。你可以在任何PPI上執(zhí)行你的規(guī)范,Jim仍然是4444dp/pt.

Android和iOS會(huì)調(diào)整自身大小適應(yīng)屏幕并且使用正確的像素比來(lái)進(jìn)行換算,這就是為什么我發(fā)現(xiàn)使用屏幕的原始的PPI設(shè)計(jì)會(huì)更簡(jiǎn)單。

SP和DP、PT從用途上來(lái)講是不同的,但是工作方式相同。SP表示與比例無(wú)關(guān)的像素,通常用來(lái)定義字體大小,SP受用戶(hù)Android設(shè)備字體設(shè) 置的影響。作為一個(gè)設(shè)計(jì)師,為任何事物定義SP就像定義DP,最好基于清晰的1x的比例(以16sp為例,它是非常便于閱讀的字體大?。?

附加: 始終使用分辨率或者非比例的值作為規(guī)范。屏幕尺寸、分辨率種類(lèi)越多,它就越重要。

PPI配置

現(xiàn)在,你已經(jīng)知道PPI、Retina、像素比是什么了,接下來(lái)我們要討論的是 “如果我在設(shè)計(jì)工具里改變PPI配置,會(huì)發(fā)生什么呢?”如果你問(wèn)自己這個(gè)問(wèn)題,那就表示你對(duì)設(shè)計(jì)軟件比較熟悉。任何非打印的設(shè)計(jì)使用像素大小不用考慮原始 PPI配置。軟件PPI配置是打印的一個(gè)傳統(tǒng)。如果你只是做web設(shè)計(jì),PPI對(duì)位圖大小沒(méi)有影響。這就是我們使用像素比而不直接用PPI值的原因。你的 畫(huà)布和圖像總是會(huì)被被軟件按照對(duì)應(yīng)的像素比換算成像素點(diǎn)。

這里有個(gè)例子。你可以在允許配置PPI值的軟件(比如Photoshop)里面進(jìn)行試驗(yàn)。我在Photoshop上畫(huà)了兩個(gè)80*80px的正方形和16pt的文本,一個(gè)配置的PPI值是72,另一個(gè)是144。

什么是DPI?什么是PPI?13

如你所見(jiàn),文本變大了,準(zhǔn)確點(diǎn)說(shuō)是兩倍大,然而正方形還保持不變,原因就是Photoshop按照PPI值放大了pt值,結(jié)果在PPI值變?yōu)閮杀兜?情況下文本大小增加為原來(lái)兩倍。而用像素定義的藍(lán)色正方形,保持了原來(lái)大小。像素就是一個(gè)像素點(diǎn),不管PPI怎么配置它會(huì)一直保持一個(gè)像素。造成這個(gè)差異 的是用來(lái)顯示它的屏幕的PPI值。

我們需要記住的是在做數(shù)字化設(shè)計(jì)的時(shí)候,PPI只會(huì)影響你對(duì)設(shè)計(jì)的感知、你的工作流和以pt為單位的圖案例如字體。如果你在工作資源文件里包含了各種PPI配置,程序就會(huì)根據(jù)接收到的文件的PPI比例在不同的文件里調(diào)整轉(zhuǎn)移視覺(jué)的大小,這會(huì)成為一個(gè)需要解決的問(wèn)題。

那么,解決方案是什么呢?就是堅(jiān)持使用PPI(對(duì)于1x設(shè)計(jì),最好控制在72-120之間)。我個(gè)人使用72PPI,因?yàn)檫@是Photoshop的默認(rèn)配置,我的同事也是。

附加:
PPI配置對(duì)輸出到web上的設(shè)計(jì)毫無(wú)影響。
PPI配置只對(duì)基于PPI獨(dú)立計(jì)量(比如PT)產(chǎn)生的圖案有影響。
像素是任何數(shù)字化設(shè)計(jì)的度量單位
保持像素比以及設(shè)計(jì)的目標(biāo),而不是PPI
在進(jìn)行數(shù)字化設(shè)計(jì)時(shí)使用實(shí)際的PPI配置,你會(huì)感受到它在目標(biāo)設(shè)備上的樣子(以1x的web/桌面設(shè)計(jì)72-120ppi為例)。
在你的文件中自始至終保持相同的PPI配置
關(guān)于這個(gè)的額外趣味閱讀:StackExchange post

iOS上的PPI處理

是時(shí)候鉆研下特定平臺(tái)的設(shè)計(jì)了。讓我們花點(diǎn)時(shí)間看看2014年年初時(shí)的iOS設(shè)備。 從屏幕大小和DPI的角度來(lái)看,iOS有兩種類(lèi)型的手機(jī)設(shè)備和兩種類(lèi)型的筆記本/臺(tái)式電腦屏幕。

對(duì)于手機(jī),有iPhone和iPad。 在手機(jī)分類(lèi)中,有過(guò)去的3GS(iOS6依舊支持)和更高版本,其中只有iPhone 3GS是非Retina。iPhone 5以及后來(lái)的都用了和iPhone 4/4s有相同DPI的更好的屏幕。讓我們來(lái)看看下面的列表:

什么是DPI?什么是PPI?14

現(xiàn)在又有2個(gè)新類(lèi)別的iPhone:iPhone 6和iPhone 6 Plus。iPhone 6比5要大一點(diǎn)(0.7英寸左右),但是PPI相同。iPhone 6 Plus由于它的尺寸,5.5英寸,產(chǎn)生了iOS上新的像素比,@3x。

什么是DPI?什么是PPI?15

相較于其他iPhone,iPhone 6 Plus控制展示比較特殊的是:視覺(jué)效果降頻。

以為iPhone 6設(shè)計(jì)為例,設(shè)計(jì)的畫(huà)布為1334750px,手機(jī)上就呈現(xiàn)1334750的物理像素。當(dāng)為iPhone 6 Plus時(shí),手機(jī)的分辨率小于渲染的圖像,因此你設(shè)計(jì)的分辨率為22081242px,展示時(shí)降頻為19201080px。如下圖:

什么是DPI?什么是PPI?16

物理分辨率比渲染分辨率小15%,會(huì)造成一些細(xì)節(jié)問(wèn)題,比如半像素使得精細(xì)的地方變模糊。分辨率如此高也是很微妙的,除非你近距離觀察。因此,在2208*1242px的畫(huà)布上設(shè)計(jì),需要注意設(shè)計(jì)中真正精細(xì)的地方,像是分隔符。模擬如下:

什么是DPI?什么是PPI?17

在iPod touch分類(lèi)中,iPod第四代出來(lái)的時(shí)候使用的是iOS6和非Retina。iPod第五代以及后面的都使用Retina屏幕并且兼容iOS7,它的屏幕大小與iPhone 5相同。

最后說(shuō)說(shuō)iPad。除了iPad 第一代,其余的都用的是iOS7,同時(shí)只有iPad2和iPad mini是非Retina屏幕。從設(shè)計(jì)的角度來(lái)看,iPad mini只是普通的iPad(一樣的PPI屏幕),但是物理體積更小,也就是說(shuō)它們擁有相同的分辨率,只是大小從9.7英寸減小到了7.9英寸。保持同樣 的比例,便會(huì)相應(yīng)地增大像素點(diǎn)的密度,你的虛擬資源就會(huì)顯得更小了。

什么是DPI?什么是PPI?18

什么是DPI?什么是PPI?19

至于臺(tái)式機(jī)和筆記本,我們不會(huì)全面討論Apple提供的各種尺寸的屏幕。在今天,Apple提供的幾乎都是1x像素比的Retina屏幕 (Macbook,Macbook Air,舊版Macbook Pros,臺(tái)式機(jī)顯示器),Retina只應(yīng)用于13和15寸的Macbook Pro。iPad和iPhone像素比是2x。為臺(tái)式機(jī)設(shè)計(jì)與手機(jī)設(shè)計(jì)不同的是,你需要以相同方式設(shè)計(jì)來(lái)覆蓋這兩種不同類(lèi)別的屏幕。

當(dāng)只使用一種像素比時(shí),基于iOS和OSX的設(shè)計(jì)是非常簡(jiǎn)單的。我建議開(kāi)始設(shè)計(jì)時(shí)先用基礎(chǔ)的PPI(例如,100%/1x)然后增加到2x并在2x 的屏幕上校驗(yàn)?zāi)愕脑O(shè)計(jì)并且生成2x的資源。當(dāng)你熟悉在1x和2x之間切換設(shè)計(jì)后,就能夠直接在2x上進(jìn)行設(shè)計(jì)了,低分辨率時(shí)資源更小。如果你正在為 Retina屏幕設(shè)計(jì)的話(Macbook Pro),這就特別有用。

引入資源,chrome為例

什么是DPI?什么是PPI?20

如圖所示,每次請(qǐng)求資源需要傳送兩張圖片。非Retina下圖片名為name.png,Retina的圖片增加到@2x命名為@2x.png,這是 iOS開(kāi)發(fā)約定的命名規(guī)范。如果你創(chuàng)建了一個(gè)圖片只用在iPad上,我們?cè)?@2x后面加上~iPad,這僅僅只是chrome的約定。對(duì)需要的資源都這 樣處理,不要只用一個(gè)版本的資源來(lái)覆蓋所有DPI。

附加, iOS規(guī)則集:
@2x的資源必須始終是1x資源的兩倍。
Retina資源加上@2x.
始終創(chuàng)建100%和200%比例的圖片。
1x和2x的資源始終要保持名字相同。
在100%比例下開(kāi)始設(shè)計(jì),然后做乘法。
傳遞.png格式的圖片。
使用pt創(chuàng)建規(guī)范而不是px。

Android上的PPI處理

Android平臺(tái)的設(shè)備種類(lèi)比iOS多,因?yàn)槿魏蜲EM都可以生產(chǎn)設(shè)備并且?guī)缀鯖](méi)有比例的限制,然后加上自己版本號(hào)。結(jié)果就是生產(chǎn)出幾乎無(wú)限制的屏幕大小和DPI種類(lèi),電話和平板電腦一樣大,或者電話和平板電腦一樣小的情況比比皆是。為此,你的設(shè)計(jì)總是需要做適配。

在這個(gè)部分,我們將采用不同于iOS的方法,我們先來(lái)討論下像素比和DPI分類(lèi)。

Android設(shè)備可以分為兩類(lèi):手機(jī)和平板電腦。這兩種設(shè)備又可以按照不同DPI分為:ldpi、mdpi、 tvdpi、 hdpi、 xhdpi、 xxhdpi和xxxhdpi。幸好,有些比其他使用得更加頻繁,有些甚至已經(jīng)棄用了。

首先我們要找到等價(jià)于iOS上1x的基礎(chǔ)單位。在Android上,這個(gè)基礎(chǔ)單位就是MDPI。讓我們看看下面列表的像素比。

什么是DPI?什么是PPI?21

是的,很多,而且還沒(méi)有完,還有一個(gè)落下了。

什么是DPI?什么是PPI?22

實(shí)際上,目前正在使用的DPI有4個(gè):MDPI, HDPI, XHDPI和XXHDPI。 LDPI是過(guò)時(shí)的DPI,現(xiàn)在已經(jīng)不再使用,TVDPI是TV UI的特殊例子,在2012年版的Nexus 7中短暫使用過(guò),在手機(jī)和平板電腦的使用中沒(méi)有考慮的必要。盡管如此,TVDPI的像素比(1.33x)還是被用在一些安卓系統(tǒng)的設(shè)備上,像是LG G手表,我們后面來(lái)討論這個(gè)。

讓我們結(jié)合帶著各自DPI的Android手機(jī)和平板電腦全面客觀地看待事物。

什么是DPI?什么是PPI?23

也許在現(xiàn)在這個(gè)時(shí)候有一個(gè)設(shè)備使用XXXHDPI的實(shí)際app資源,但也不是很常見(jiàn)。如果你能用額外時(shí)間生產(chǎn)XXXHDPI資源,你的app便不會(huì)過(guò)時(shí)。

引入資源,chrome為例

每次請(qǐng)求資源都需要傳遞一組4張圖片,從MDPI到XXHDPI,無(wú)需考慮LDPI。注意,在下面的chrome版本中,TVDPI的輸入在這個(gè)例子里的5張圖片里也很清楚。

和iOS一樣,我建議把100%或者1x的像素比作為你設(shè)計(jì)的基礎(chǔ),這會(huì)讓設(shè)計(jì)在適配其他像素比的時(shí)候容易一點(diǎn),特別是在像素比為1.33和1.5的安卓系統(tǒng)上。

看看下面安卓上chrome的返回按鈕的例子。

什么是DPI?什么是PPI?24

DPI后面跟著的建議名稱(chēng)不是安卓官方指南強(qiáng)制要求的,這是我們?yōu)橘Y源取名的方式,因?yàn)楝F(xiàn)在有限的設(shè)計(jì)工具很難給每個(gè)資源定義一個(gè)路徑。 考慮到一個(gè)資源有時(shí)有上百個(gè)資源文件,站在設(shè)計(jì)師的角度來(lái)說(shuō)這是使輸出過(guò)程不那么痛苦以及避免重命名錯(cuò)誤的一個(gè)途徑。資源在資源倉(cāng)庫(kù)里面的存儲(chǔ)方式是有結(jié) 構(gòu)的,參考后面:

drawable-mdpi/asset.png
drawable-hdpi/asset.png
etc…

如你所見(jiàn),資源被截成了3232dp的正方形,Android像素比也會(huì)是小數(shù)。當(dāng)用1.33或者1.5乘以一個(gè)數(shù)的時(shí)候,最后的結(jié)果很有可能就是 小數(shù)。在這種情況下你需要通過(guò)四舍五入來(lái)讓數(shù)字變得有效。在這個(gè)例子中,321.33=42.56所以四舍五入之后是43px。

你需要注意以像素為單位的元素,比如筆畫(huà)。你需要確保你的筆畫(huà)既不是1px寬也不是2px同時(shí)也不像屏幕分辨率部分描述的那樣模糊。

附加, Android規(guī)則集:

Android有7種不同的DPI,你需要關(guān)注其中的4個(gè):mdpi,hdpi,xhdpi,xxhdpi,如果希望你的app面向未來(lái),可以關(guān)注XXXHDPI。
MDPI是基礎(chǔ)的DPI或者1x像素比
Android使用dp代替pt當(dāng)作參數(shù)規(guī)格,但是他們是一樣的。
用你最好的判斷來(lái)處理小數(shù)像素比。
傳遞.png格式圖片。
確保檢驗(yàn)命名約定,與執(zhí)行負(fù)責(zé)人共同完成輸出進(jìn)程。

Mac、Chrome OS上的PPI

Mac(OSX)和Chrome OS在處理PPI方面是十分相似的。 兩個(gè)OS都支持常規(guī)的PPI(100%)和hi-res/retina PPI(200%)。像iPhone和iPad,就只有2x像素比。

即使大多數(shù)的用戶(hù)都使用Mac和Chrome OS,但是也有用戶(hù)會(huì)在低分辨率的設(shè)備上使用,我強(qiáng)烈建議將你的app面向未來(lái)的高端屏幕。面向未來(lái)對(duì)于ChromeOS意味著為Web-app或者網(wǎng)站 創(chuàng)建hi-res資源,那絕不是浪費(fèi)時(shí)間。當(dāng)前有3種筆記本處理PPI,13寸、15寸Macbook pro以及Chromebook Pixel。除此之外,Chromebook Pixel還處理了touch。

什么是DPI?什么是PPI?25

引入資源,chrome為例

Chrome的工具欄按鈕資源就是相似性最好的例子。我們?cè)趦蓚€(gè)平臺(tái)上使用完全相同按鈕,即使代碼不同,視覺(jué)上也是一樣的??聪旅孢@個(gè)chrome菜單按鈕的例子。

什么是DPI?什么是PPI?26

附加:

Chrome OS和OSX像素比相同,都是2.
Chrome OS高分辨率展示也處理touch。
可拉伸資源

不管你的app是在桌面或者手機(jī)上。你通常都會(huì)引入可拉伸資源??衫熨Y源的建立會(huì)使代碼在沒(méi)有減少渲染的情況下比實(shí)際需要的多。他們與可重復(fù)資源即使有的時(shí)候展示結(jié)果一樣,工作方式也是不同的。

看看下面這個(gè)Chrome的例子。iOS上的工具欄在整個(gè)屏幕上只用了一個(gè)在x軸上平鋪的超細(xì)資源。

什么是DPI?什么是PPI?27

現(xiàn)在這種方式已經(jīng)過(guò)時(shí)了,讓我們來(lái)看看不同平臺(tái)如何處理可拉伸資源。

iOS上的可拉伸資源

對(duì)iOS的設(shè)計(jì)師來(lái)說(shuō)這個(gè)很簡(jiǎn)單,因?yàn)槔煸诖a里面定義比資源片段或者標(biāo)記方式好。所有需要做的就是提供一個(gè)基礎(chǔ)圖片,如果你自己還沒(méi)有實(shí)現(xiàn)這個(gè),可以將你的資源規(guī)范定義為水平或者豎直可擴(kuò)展,或者兩者均可。看看下面這個(gè)iOS上Chrome的默認(rèn)按鈕的例子。

什么是DPI?什么是PPI?28

Android上的可拉伸資源

Android有和iOS不一樣的處理可拉伸資源的方式,它更依賴(lài)設(shè)計(jì)師一點(diǎn)。在這個(gè)平臺(tái)你將采用九宮格,這些輔助線包括了4條圍繞資源本身的線。他們必須被當(dāng)作資源的一部分來(lái)傳遞片段/圖片,用它來(lái)準(zhǔn)確的呈現(xiàn)視覺(jué)規(guī)格。

他們定義了兩個(gè)區(qū)域:可拉伸區(qū)域和填充區(qū)域。一旦定義好,代碼就只會(huì)拉伸可拉伸區(qū)域,并把內(nèi)容放在你定義的填充區(qū)域。

看看下面的例子,就是你前面看到的Chrome默認(rèn)按鈕的Android版本。為了演示,我把他放大了。

什么是DPI?什么是PPI?29

如你所見(jiàn),這個(gè)九宮格是一組4條純白色的bar。他們?cè)谌魏蜠PI下都是寬1px,這是代碼表示的??衫靺^(qū)域不包括圓角因?yàn)閳A角不能平鋪開(kāi)(否則 看起來(lái)很難看)。在這個(gè)例子中,我們給按鈕添加了規(guī)格允許范圍內(nèi)10dp的padding。.9也需要平鋪并且截?cái)嗖糠忠?00%透明。如果不這樣,他就 不能正常工作,需要修改。

什么是DPI?什么是PPI?30

使用九宮格要求在名稱(chēng)后面加上.9,和在iOS資源上添加@2x的方式一樣。重命名按鈕的例子如下:

什么是DPI?什么是PPI?31

現(xiàn)在你需要非常注意你的資源大小。如果我在演示中放大了它,你就需要通過(guò)減小它的尺寸到一個(gè)最小限度來(lái)優(yōu)化資源,如后面所示。保持了圓角的原樣,但是將可拉伸和內(nèi)容區(qū)域減小到最小限度。

什么是DPI?什么是PPI?32

需要注意的是九宮格的標(biāo)記不會(huì)和設(shè)計(jì)重疊,并且資源切割是合理的。.9需要盡可能靠近資源并不與之重疊,試著不內(nèi)置padding。前面的例子因?yàn)殛幱岸鴥?nèi)置了padding。

九宮格不會(huì)代替你導(dǎo)出每種DPI的資源。它需要在每個(gè)資源版本都實(shí)行。

最后一點(diǎn),.9可以有許多可拉伸區(qū)域(上面和左邊),雖然我沒(méi)有經(jīng)常遇到這樣的情況,但它也是很值得嘗試的。

附加: 總是采取最好的解決方案來(lái)實(shí)現(xiàn)設(shè)計(jì),特別是桌面設(shè)計(jì)。圖片越多,app就會(huì)變得越沉重。追蹤和更新資源也變得困難。九宮格應(yīng)該使用在命名有規(guī)范、組織結(jié)構(gòu)良好的資源中。

Touch和觸摸目標(biāo)

首先需要知道的是做觸屏相關(guān)的準(zhǔn)備和DPI一點(diǎn)關(guān)系也沒(méi)有。但是當(dāng)涉及到設(shè)計(jì)UI或者創(chuàng)建資源,弄清楚觸屏和DPI的關(guān)系就很重要。

選擇觸屏或者非觸屏很大程度上取決于app的適用范圍,它被部署在哪里以及希望得到怎樣的用戶(hù)體驗(yàn)。 我們可以簡(jiǎn)單地將他們分為:非觸屏的桌面應(yīng)用和手機(jī)app。

臺(tái)式機(jī), 非觸屏

直到2005年,觸屏才開(kāi)始出現(xiàn)在計(jì)算機(jī)技術(shù)中。 我們使用鼠標(biāo)和鍵盤(pán),它們能夠非常準(zhǔn)確的操作UI。鼠標(biāo)光標(biāo)的精度是1pt,也就是說(shuō)理論上你可以創(chuàng)建一個(gè)能讓任何人點(diǎn)擊的1*1pt的按鈕。

請(qǐng)看下面圖解:

什么是DPI?什么是PPI?33

這是個(gè)Chrome OS光標(biāo)的20x版本。 紅色區(qū)域是能在UI上觸發(fā)一個(gè)事件的實(shí)際區(qū)域,十分準(zhǔn)確。 你知道我的標(biāo)題。什么是不準(zhǔn)確的呢?手指。

那么如何為觸屏設(shè)計(jì)呢?最好的辦法就是讓所有東西變得更大。

手指大小

這里有交互中最常用到的兩根手指(食指和大拇指)的平均大小,這代表了觸摸區(qū)域和被手指遮擋了的區(qū)域。實(shí)際的觸摸區(qū)域(例如,你手指接觸屏幕的那部分)當(dāng)然會(huì)小一點(diǎn)并且更準(zhǔn)確,除非你把你的手指壓在屏幕上。

在設(shè)計(jì)觸屏的時(shí)候,放大觸摸目標(biāo)的尺寸比低估更安全。

什么是DPI?什么是PPI?34

如何將此應(yīng)用到我的設(shè)計(jì)流程

如我們已經(jīng)看到的,在像素世界英寸或者厘米并不是一個(gè)好的計(jì)量方法,即使是像素也不是真正好的計(jì)量方法。所以你怎么確保你的設(shè)計(jì)是可被觸摸的呢?

我雖然講了很多理論知識(shí),但是更重要的是自己試著在目標(biāo)設(shè)備/臺(tái)式機(jī)上設(shè)計(jì)。 但是為了避免浪費(fèi)更多時(shí)間,有一些基礎(chǔ)的像素的大小使用起來(lái)是比較安全的,并且被推薦使用在每個(gè)OS上。

各平臺(tái)推薦的觸屏目標(biāo)

需要注意的是,這些大小都是為了方便,都不是現(xiàn)實(shí)生活中的測(cè)量單位,他們依賴(lài)于OEM和各廠商遵守這個(gè)指南來(lái)生產(chǎn)屏幕,使之保持大小、dpi比例一致。

什么是DPI?什么是PPI?35

如你看到的,每個(gè)OS都有一系列自己的推薦規(guī)范,但是都在48pt左右。Windows的規(guī)格是包含了padding的,所以我把它加到這里。

尺寸的不同是源于不同的因素。 Apple可以控制它的硬件,因此知道觸屏的質(zhì)量并且能夠控制這個(gè)確切的比例,它可以觸摸更小的目標(biāo),另外,本身的物理尺寸也更小。另一方 面,Android和Windows有不同的OEM,都各自生產(chǎn)自己的硬件,有更大的觸摸目標(biāo)會(huì)更“安全”。他們的UI更加無(wú)規(guī)范(特別是 Windows),物理尺寸也越來(lái)越大了。

Chrome為例

這是在Chrome上的應(yīng)用,編碼使觸摸目標(biāo)呈藍(lán)色。

什么是DPI?什么是PPI?36

如你所見(jiàn),兩個(gè)平臺(tái)上工具欄都是被推薦的觸摸目標(biāo)的高度??梢暦秶趇OS和Android上分別是4444pt和4848pt的正方形,這不僅使得UI在大小方面和其他OS保持一致,而且也能讓與用戶(hù)交互的部分都保持最小的規(guī)格。

web,混合設(shè)備和未來(lái)

如果你在為手機(jī)設(shè)計(jì),觸屏是不二選擇。如果你在設(shè)計(jì)桌面應(yīng)用,參照非觸屏。這聽(tīng)起來(lái)很簡(jiǎn)單但是在混合設(shè)備興起的時(shí)候很容易被忽略,。

混合設(shè)備是一種既支持觸屏又支持非觸屏的設(shè)備。Chromebook Pixel,Surface Pro和Lenovo Yoga就是很好的例子。 在這樣的情況下,我們?cè)撟鍪裁茨??沒(méi)有簡(jiǎn)單的答案,但是我會(huì)首先給一個(gè)答案,觸屏方向,因?yàn)槟鞘俏磥?lái)的發(fā)展趨勢(shì)。 如果你為web或者其他相關(guān)的設(shè)計(jì),首先考慮觸屏。

附加:
移動(dòng)和觸屏設(shè)計(jì)幾乎是未來(lái)發(fā)展趨勢(shì)。
參考每個(gè)OS上建議的觸摸目標(biāo)。這能幫助你更好地設(shè)計(jì)并讓你的產(chǎn)品在OS中保持一致。觸摸目標(biāo)有參考價(jià)值,但是不代表你需要不折不扣地遵守,同時(shí)你也需要根據(jù)經(jīng)驗(yàn)判斷。

設(shè)計(jì)軟件

軟件不能制造設(shè)計(jì)師,但是在完成任務(wù)時(shí)選擇使用正確的軟件可以提率,更快完成工作。軟件“訣竅”不應(yīng)該是你唯一的技能,但是學(xué)習(xí)和操作正確的工具可以幫助你產(chǎn)生靈感。

當(dāng)涉及到在設(shè)計(jì)界面處理DPI變化,不同的軟件采用不同方式。在特定任務(wù)中有些軟件比其他的更好。下面是最常見(jiàn)的:

什么是DPI?什么是PPI?37

Photoshop

界面設(shè)計(jì)工具之母。也許也是如今使用最廣泛的工具。關(guān)于它的資源、教程、文章數(shù)不勝數(shù),Photoshop幾乎幾乎貫穿界面設(shè)計(jì)的每一個(gè)階段。

正如其名,軟件最開(kāi)始的目的并不是界面設(shè)計(jì)而是圖像或者位圖處理。隨時(shí)間推移以及界面設(shè)計(jì)的產(chǎn)生,設(shè)計(jì)師們?cè)俅问褂闷饋?lái)。部分人是因?yàn)樗麄円郧熬陀貌⑶沂悄菚r(shí)僅有的能夠把事情做得足夠好的軟件。

在今天,Photoshop是主要的位圖編輯工具,也是UI設(shè)計(jì)中使用最廣泛的軟件。數(shù)十年的積累使得它成為學(xué)習(xí)和使用比較困難的軟件。作為軟件中的瑞士軍刀,你可以用來(lái)做任何事,但是并不總是最有效的。

因?yàn)樽畛跏腔谖粓D的,所以Photoshop十分依賴(lài)DPI,下面描述的是與之相反的Illustrator和Sketch。

Illustrator

Illustrator的矢量是基于同級(jí)的。顧名思義,它重點(diǎn)在插畫(huà),但是也可以作為界面設(shè)計(jì)工具。

Illustrator也很適合平面設(shè)計(jì),因此它的界面,顏色管理,縮放,標(biāo)尺和單位首先就吸引你,只需要一些補(bǔ)丁就會(huì)更便于使用。和Photoshop一樣,他也是一款很強(qiáng)大的工具,同時(shí)也需要付出努力去學(xué)習(xí)。

日歷

鏈接

個(gè)人資料

存檔