A3- DPI指南

DPI指南? 文章結(jié)尾有很多資源

【基礎(chǔ)概念】

DPI(Dots Per Inch)

圖像分辨率所使用的單位:在圖像中每英寸所表達(dá)的像素?cái)?shù)目靶剑。

PPI(Pixels Per Inch)

打印分辨率使用的單位:每英寸所表達(dá)的打印點(diǎn)數(shù)塔嬉。

px=pixel? “相對(duì)大小”

px是一個(gè)點(diǎn),它不是自然界的長(zhǎng)度單位

如果點(diǎn)很小谜慌,那畫面就清晰,我們稱它為“分辨率高”,反之藕溅,就是“分辨率低”。

pt=point ?“絕對(duì)大小”

是印刷行業(yè)常用單位继榆,等于1/72英寸

使用px定義文字巾表,無(wú)論用戶怎么設(shè)置汁掠,都不會(huì)改變大小集币;

使用pt定義文字考阱,當(dāng)用戶設(shè)置超過(guò)96DPI的值,數(shù)值越大鞠苟,字體就越大乞榨。

px = pt * DPI / 72

px/pt=96/72=4/3(DPI=96時(shí))


px/ppi=inch;左邊正好1英寸,右邊需要1.5英寸來(lái)顯示


屏幕PPI固定時(shí)当娱,調(diào)整屏幕分辨率吃既,物體會(huì)被放大


屏幕的原始分辨率是2560*1440px。如果分辨率減小跨细,像素點(diǎn)還是被展示在PPI為109的屏幕上鹦倚。你的操作系統(tǒng)會(huì)自動(dòng)拉伸所有元素來(lái)填補(bǔ)間隙,使得整個(gè)屏幕被填滿扼鞋。

如果想要設(shè)置27寸屏幕分辨率為1280*720(之前寬的一半申鱼,高的一半),GPU會(huì)讓一個(gè)像素點(diǎn)變成原來(lái)的2倍大來(lái)填充屏幕云头,那么結(jié)果就是會(huì)變得模糊捐友。


在原始分辨率的屏幕上畫一條1px的線,然后設(shè)置分辨率為50%溃槐。

為了填滿屏幕匣砖,CPU需要制造150%的視覺(jué)效果,所有像素點(diǎn)都要乘以1.5昏滴,1*1.5=1.5猴鲫,但是因?yàn)椴荒苡邪雮€(gè)像素點(diǎn),這就使得填充周圍的像素點(diǎn)的顏色只有一部分谣殊,便產(chǎn)生了模糊拂共。

如果你希望你的設(shè)計(jì)精確到像素,那么最好不要改變?cè)挤直媛省?/div>

什么是像素比

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

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


一個(gè)是標(biāo)準(zhǔn)PPI(iPhone 3)的Jim.png版本春贸,一個(gè)是200%PPI(iPhone 4)的Jim@2x.png版本混萝。

什么是DP遗遵、PT、SP

DP(Dip)表示獨(dú)立于設(shè)備的像素點(diǎn)譬圣,PT表示點(diǎn)瓮恭。

DP用在Android上雄坪,PT用在Apple上厘熟,但是他們本質(zhì)上是相同的。

SP表示與比例無(wú)關(guān)的像素维哈,通常用來(lái)定義字體大小绳姨。

從技術(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ǔ)购撼。

Android和iOS會(huì)調(diào)整自身大小適應(yīng)屏幕并且使用正確的像素比來(lái)進(jìn)行換算跪削。

這就是為什么我發(fā)現(xiàn)使用屏幕的原始的PPI設(shè)計(jì)會(huì)更簡(jiǎn)單。


什么是視網(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)付枫。


“如果我在設(shè)計(jì)工具里改變PPI配置,會(huì)發(fā)生什么呢驰怎?”

任何非打印的設(shè)計(jì)使用像素大小不用考慮原始PPI配置阐滩。

你的畫布和圖像總是會(huì)被被軟件按照對(duì)應(yīng)的像素比換算成像素點(diǎn)。

這就是我們使用像素比而不直接用PPI值的原因县忌。


在PS里更改PPI 后掂榔,圖形大小不變,文本大小改變

原因就是Photoshop按照PPI值放大了pt值芹枷,結(jié)果在PPI值變?yōu)閮杀兜那闆r下文本大小增加為原來(lái)兩倍衅疙。

而用像素定義的藍(lán)色正方形,保持了原來(lái)大小鸳慈。

像素就是一個(gè)像素點(diǎn)饱溢,不管PPI怎么配置它會(huì)一直保持一個(gè)像素。

造成圖形(像素定義)大小變化的是用來(lái)顯示它的屏幕的PPI值走芋。


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è)備上的樣子

在你的文件中自始至終保持相同的PPI配置



如圖所示溉仑,每次請(qǐng)求資源需要傳送兩張圖片。

【iOS規(guī)則集】

@2x的資源必須始終是1x資源的兩倍状植。

Retina資源加上@2x.

始終創(chuàng)建100%和200%比例的圖片浊竟。

1x和2x的資源始終要保持名字相同。

在100%比例下開始設(shè)計(jì)津畸,然后做乘法振定。

傳遞.png格式的圖片。

使用pt創(chuàng)建規(guī)范而不是px肉拓。




Android設(shè)備按照不同DPI分為:ldpi后频、mdpi、 tvdpi暖途、 hdpi卑惜、 xhdpi、 xxhdpi和xxxhdpi


每次請(qǐng)求資源都需要傳遞一組4張圖片:MDPI, HDPI, XHDPI和XXHDPI


【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)程瘤旨。




在像素世界英寸或者厘米并不是一個(gè)好的計(jì)量方法梯啤,即使是像素也不是真正好的計(jì)量方法。



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

Adobe Illustrator也很適合平面設(shè)計(jì),也是一款很強(qiáng)大的工具修肠,需要付出努力去學(xué)習(xí)贺辰。和Photoshop不同的是,它是獨(dú)立于DPI的,因?yàn)樗蕾囀噶繄D饲化。與點(diǎn)陣圖或者光柵圖相反莽鸭,圖像生成采用矢量圖,依靠數(shù)學(xué)公式計(jì)算吃靠,以編程方式重新調(diào)節(jié)大小并且不會(huì)損失圖片質(zhì)量硫眨。

Sketch是小團(tuán)隊(duì)開發(fā)的,而且出來(lái)得比較晚巢块。從一開始礁阁,Sketch的目標(biāo)就是供界面和UX設(shè)計(jì)師使用,沒(méi)有Photoshop和Illustrator的歷史積累夕冲,Sketch把自己定位成針對(duì)小眾用戶——界面設(shè)計(jì)師的一款完美的調(diào)整工具氮兵。

附加:并沒(méi)有完美的工具但是有最適合你的裂逐。如果你有足夠的時(shí)間和錢歹鱼,我建議你都試試,然后再?zèng)Q定卜高。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末弥姻,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子掺涛,更是在濱河造成了極大的恐慌庭敦,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件薪缆,死亡現(xiàn)場(chǎng)離奇詭異秧廉,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)拣帽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門疼电,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人减拭,你說(shuō)我怎么就攤上這事蔽豺。” “怎么了拧粪?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵修陡,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我可霎,道長(zhǎng)魄鸦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任癣朗,我火速辦了婚禮拾因,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己盾致,他們只是感情好主经,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著庭惜,像睡著了一般罩驻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上护赊,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天惠遏,我揣著相機(jī)與錄音,去河邊找鬼骏啰。 笑死节吮,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的判耕。 我是一名探鬼主播透绩,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼壁熄!你這毒婦竟也來(lái)了帚豪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤草丧,失蹤者是張志新(化名)和其女友劉穎狸臣,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昌执,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡烛亦,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了懂拾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片煤禽。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖委粉,靈堂內(nèi)的尸體忽然破棺而出呜师,到底是詐尸還是另有隱情,我是刑警寧澤贾节,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布汁汗,位于F島的核電站,受9級(jí)特大地震影響栗涂,放射性物質(zhì)發(fā)生泄漏知牌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一斤程、第九天 我趴在偏房一處隱蔽的房頂上張望角寸。 院中可真熱鬧菩混,春花似錦、人聲如沸扁藕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)亿柑。三九已至邢疙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間望薄,已是汗流浹背疟游。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留痕支,地道東北人颁虐。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像卧须,于是被迫代替她去往敵國(guó)和親另绩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容