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í))
屏幕的原始分辨率是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)生了模糊拂共。
什么是像素比
當(dāng)你的設(shè)計(jì)需要在不同PPI下轉(zhuǎn)換時(shí)姻几,像素比就是你的救星宜狐。當(dāng)你知道像素比后,就不需要再考慮設(shè)備的詳細(xì)規(guī)格了蛇捌。
以iPhone 3G和4為例抚恒,相同物理大小上iPhone4的像素點(diǎn)是3G兩倍,因此像素比就是2络拌,這表示只需要用你的資源乘以2俭驮,就可以兼容4G的分辨率了。
什么是DP遗遵、PT、SP
DP(Dip)表示獨(dú)立于設(shè)備的像素點(diǎn)譬圣,PT表示點(diǎn)瓮恭。
DP用在Android上雄坪,PT用在Apple上厘熟,但是他們本質(zhì)上是相同的。
SP表示與比例無(wú)關(guān)的像素维哈,通常用來(lái)定義字體大小绳姨。
但是飘庄,當(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è)計(jì)工具里改變PPI配置,會(huì)發(fā)生什么呢驰怎?”
任何非打印的設(shè)計(jì)使用像素大小不用考慮原始PPI配置阐滩。
你的畫布和圖像總是會(huì)被被軟件按照對(duì)應(yīng)的像素比換算成像素點(diǎn)。
這就是我們使用像素比而不直接用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配置
【iOS規(guī)則集】
@2x的資源必須始終是1x資源的兩倍状植。
Retina資源加上@2x.
始終創(chuàng)建100%和200%比例的圖片浊竟。
1x和2x的資源始終要保持名字相同。
在100%比例下開始設(shè)計(jì)津畸,然后做乘法振定。
傳遞.png格式的圖片。
使用pt創(chuàng)建規(guī)范而不是px肉拓。
【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定卜高。
- 文/潘曉璐 我一進(jìn)店門疼电,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人减拭,你說(shuō)我怎么就攤上這事蔽豺。” “怎么了拧粪?”我有些...
- 文/不壞的土叔 我叫張陵修陡,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我可霎,道長(zhǎng)魄鸦,這世上最難降的妖魔是什么? 我笑而不...
- 正文 為了忘掉前任癣朗,我火速辦了婚禮拾因,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己盾致,他們只是感情好主经,可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著庭惜,像睡著了一般罩驻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上护赊,一...
- 那天惠遏,我揣著相機(jī)與錄音,去河邊找鬼骏啰。 笑死节吮,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的判耕。 我是一名探鬼主播透绩,決...
- 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼壁熄!你這毒婦竟也來(lái)了帚豪?” 一聲冷哼從身側(cè)響起,我...
- 序言:老撾萬(wàn)榮一對(duì)情侶失蹤草丧,失蹤者是張志新(化名)和其女友劉穎狸臣,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昌执,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡烛亦,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了懂拾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片煤禽。...
- 正文 年R本政府宣布汁汗,位于F島的核電站,受9級(jí)特大地震影響栗涂,放射性物質(zhì)發(fā)生泄漏知牌。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一斤程、第九天 我趴在偏房一處隱蔽的房頂上張望角寸。 院中可真熱鬧菩混,春花似錦、人聲如沸扁藕。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)亿柑。三九已至邢疙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間望薄,已是汗流浹背疟游。 一陣腳步聲響...
- 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像卧须,于是被迫代替她去往敵國(guó)和親另绩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 剛開始做移動(dòng)端web開發(fā)的同學(xué)應(yīng)該都碰到過(guò)頁(yè)面適配問(wèn)題,為什么我在開發(fā)手機(jī)上調(diào)試好的頁(yè)面在其他手機(jī)會(huì)有這樣或那樣的...
- pt(磅) 計(jì)算公式:1 pt(磅)= 1 / 72 inch (1 inch = 2.54 cm) pt(磅)的...
- 如果我知道我的未來(lái)會(huì)遇見你津辩,那我一定讓以前的我不抽煙不喝酒不挑食不撒潑不瘋狂不叛逆不墮落拆撼,認(rèn)認(rèn)真真的做自己,然后在...
- 簡(jiǎn)介 Linux crontab和Windows task schedules非常的相似喘沿。Crontab可以用來(lái)在...