2015-5-26 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( www.newchinaweekly.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
我知道這個(gè)標(biāo)題念起來會(huì)讓你覺得非常拗口，如果你是中文系畢業(yè)的，或許還能從中挑出語病來，但我想你明白我要表達(dá)什么意思，對(duì)不對(duì)O(∩_∩)O哈哈~要講的東西其實(shí)都是很簡單的邏輯關(guān)系，但可能很多人都跟我一樣稀里糊涂的做了多年設(shè)計(jì)卻一直沒搞明白其中的關(guān)系。當(dāng)然你不明白其中的關(guān)系并不影響你 做出好的作品，但作為有理想有擔(dān)當(dāng)有著歷史責(zé)任感…（此處省略一萬字的排比）…的設(shè)計(jì)師，明白這些基本的知識(shí)點(diǎn)，能讓你更好的…（想了下并沒有什么實(shí)際好 處(┬＿┬)…）
====================華麗麗的分割線=========================
我們先來說說DPI和PPI之間的關(guān)系
DPI（每英寸/點(diǎn)）普遍運(yùn)用于圖像及印刷上，主要反應(yīng)圖像的精細(xì)度。通過反向推算也可以計(jì)算圖像的尺寸。
PPI（每英寸/像素點(diǎn)）是一種多用于屏幕分辨率的單位。本質(zhì)上其實(shí)兩者的概念應(yīng)該是一樣的，畢竟像素點(diǎn)也是點(diǎn)嘛。之前我一直很傻很天真的認(rèn)為基于 屏幕的圖像應(yīng)該用PPI為精度單位，并且堅(jiān)信電腦上顯示的DPI是一種錯(cuò)誤的表示方式。那其實(shí)是我的錯(cuò)誤想法，不知道你是否有同樣的想法？
講完DPI和PPI，我們?cè)賮碇v講電腦分辨率、屏幕分辨率及印刷分辨率之間的關(guān)系
我們知道電腦分辨率是72DPI，而在上面我們講了屏幕分辨率用PPI。顯然這二者是有區(qū)別的，那么問題來了，他們區(qū)別在哪？
最初的PS是運(yùn)行在蘋果電腦上的，而那時(shí)候的蘋果電腦的分辨率恰好是72PPI（注意：這里用的是PPI）。為了能使圖像的點(diǎn)與電腦屏幕上的像素點(diǎn) 一一對(duì)應(yīng)從而使圖像在顯示器上的尺寸和實(shí)際的物理尺寸相同，當(dāng)初的PS把DPI設(shè)置成為了72。而這個(gè)設(shè)置就這樣一直沿用了下來。
上面說到的蘋果電腦的分辨率是72PPI就是屏幕分辨率。現(xiàn)在我們手上的屏幕種類繁多，各種尺寸各種分辨率。稍微計(jì)算一下
21.5寸的臺(tái)式機(jī)的分辨率是√1920^2+1080^2/21.5≈102PPI
17寸筆記本的分辨率是√1366^2+768^2/17≈92PPI
屏幕分辨率的不同導(dǎo)致一個(gè)什么問題？——相同一張圖片在不同顯示器上呈現(xiàn)的大小及精度是不同的。屏幕的分辨率越高，圖片顯示越小精度越高。這點(diǎn)應(yīng)該是比較好理解的…
既然現(xiàn)在的屏幕分辨率已經(jīng)不適用于72PPI這一種分辨率了，電腦分辨率采用72DPI和屏幕分辨率之間還有什么聯(lián)系嗎？
答案是基本上沒什么邏輯上的聯(lián)系了。現(xiàn)在屏幕分辨率這么多，你基本上是無法要求有一個(gè)統(tǒng)一的DPI可以讓印刷稿和你的屏幕保持一致的。當(dāng)然，你可以 把DPI設(shè)置成與你顯示器PPI一樣的數(shù)值，以此來保證你屏幕上的圖像與印刷的圖像保持相同的尺寸。但是即使是MacBook 的Retina屏幕的分辨率也達(dá)不到印刷要求的300DPI，所以這樣設(shè)置的后果就是你的印刷品無法保持清晰度。
當(dāng)然，以上這些都是基于印刷的理論。從基于屏幕為出發(fā)點(diǎn)的界面設(shè)計(jì)從印刷的角度來考慮物理尺寸顯然是沒有什么必要的。
我們回過頭來再來說說電腦分辨率72DPI與印刷分辨率之間的關(guān)系，他們又有什么具體的實(shí)際關(guān)系呢？其實(shí)也沒什么太多的關(guān)系。我們到現(xiàn)在唯一運(yùn)用到的就是當(dāng)圖像的DPI為72時(shí)，圖像的點(diǎn)即為圖像的像素點(diǎn)。
這句話怎么理解？當(dāng)我們用PS的形狀工具繪制一個(gè)矩形并對(duì)其進(jìn)行描邊的時(shí)候會(huì)發(fā)現(xiàn)默認(rèn)的3點(diǎn)（不是圖層樣式里的描邊）。對(duì)，這里的點(diǎn)就是基于DPI而非像素點(diǎn)的，也就是說，當(dāng)且僅當(dāng)DPI為72時(shí)，這里的點(diǎn)等同于像素點(diǎn)。（記住這點(diǎn)很重要）
我們通常說的基于網(wǎng)絡(luò)的圖片分辨率設(shè)為72DPI就足夠清晰了，這句話其實(shí)是不正確的。最簡單的邏輯關(guān)系就是，當(dāng)你把一張從網(wǎng)上下下來的圖片調(diào)整它 的分辨率但又保持它的像素分辨率的時(shí)候，你會(huì)發(fā)現(xiàn)圖像本身是沒有任何變化的。這是為什么？圖像在屏幕上顯示是基于像素分辨率一一對(duì)應(yīng)原則的。也就是圖像的 一個(gè)像素對(duì)應(yīng)顯示器的一個(gè)像素，而這時(shí)候的圖像分辨率是完全不起作用的，取而代之的是屏幕分辨率。
好了，我覺得關(guān)于這對(duì)虐心的三角戀關(guān)系我已近講的夠清楚了……接下來我們講講移動(dòng)設(shè)備的一些尺寸關(guān)系。
====================華麗麗的分割線============================
DP到底是不是一個(gè)物理單位？
dp的本質(zhì)是于像素密度無關(guān)的物理單位。好吧，我沒能找到官方的解釋。但已我自己的經(jīng)驗(yàn)感覺應(yīng)該差不離是這么解釋的吧……
這種看似很明確的解釋其實(shí)讓我們產(chǎn)生了不少歧義。
既然是一個(gè)物理單位，為什么不同尺寸的安卓手機(jī)使用的界面都是360DP這個(gè)單位呢？這顯然不符合邏輯嘛。4.3英寸的720P和5.7英寸的1080P你都用360DP來表示，這整整差了1.4英寸的物理單位，怎么就換了個(gè)單位就給統(tǒng)一起來了呢？！
Google把不同的安卓設(shè)備設(shè)想成了ldpi（120PPI）/mdpi（160PPI）/hdpi（240PPI） /xhdpi（320PPI）/xxhdpi（480PPI）/xxxhdpi（640PPI）等幾種屏幕分辨率，而這幾種分辨率以mdpi為基準(zhǔn)構(gòu)成 0.75/1/1.5/2/3/4的比例關(guān)系。DP的長度公式為PD=PX/(PPI/160)。也就是我們所說的當(dāng)設(shè)備的屏幕是mdpi 時(shí)，DP=PX（注意：其實(shí)并不是所謂的當(dāng)設(shè)備屏幕的分辨率為720*1280時(shí)）
但事實(shí)是作為開源軟件，大家并不會(huì)按照你的要求來制造自己的設(shè)備。于是各種奇葩分辨率的設(shè)備應(yīng)運(yùn)而生……
魅族MX4-4.4英寸√800^2+1280^2/4.4≈343PPI
三星NOTE2-5.5英寸√720^2+1280^2/5.5≈267PPI
三星NOTE3-5.7英寸√1080^2+1920^2/5.7≈386PPI
幾乎沒有一款設(shè)備是在Google設(shè)置的那個(gè)檔上的。那么唯一能做的就是歸類了，用小于等于的方式來歸類，既把小于或等于以上某類DPI的屏幕歸檔于其中。
比如上面的魅族MX4的323大于xhdpi小于xxhdpi（雖然它尺寸只有4.4，分辨率也沒達(dá)到1080P，但它卻是一款xxhdpi設(shè)備），它就被歸檔為xxhdpi了。以此類推，NOTE2為xhdpi,NOTE3為xxhdpi。
所以，其實(shí)我們?cè)谠O(shè)計(jì)上在使用的DP不過是被歸檔后的一種近似取值罷了。這已經(jīng)和定義上的物理尺寸產(chǎn)生了一定的差異。
================又是一條華麗麗的分割線======================
講完這些看似高端燒腦子，然而卻沒什么實(shí)際用處的理論知識(shí)后，我們?cè)賮碇v一些相對(duì)實(shí)用的東西。
很多人在講設(shè)置畫布的時(shí)候是設(shè)置360*640比較合適還是720*1280會(huì)比較合適。我的建議是，現(xiàn)在的Android設(shè)備基本都是基于 xxhdpi甚至xxxhdpi，部分老舊及低端設(shè)備還在用xhdpi，至于hdpi或更低的設(shè)備，基本已經(jīng)可以放棄考慮了。而介于360*640畫布在 電腦顯示器上顯示過小無法查看細(xì)節(jié)（在Retina上就更無法看了）這點(diǎn)，我建議大家把畫布設(shè)置成720*11280，同時(shí)吧DPI設(shè)置成144。在PS 首選項(xiàng)里把單位和標(biāo)尺設(shè)置成以點(diǎn)為單位。如果我沒記錯(cuò)，在PS CC版本里的預(yù)設(shè)值里就有這些選項(xiàng)，但到CC2014之后就沒了。
為什么要設(shè)置144DPI呢？
當(dāng)我們考慮手機(jī)界面設(shè)計(jì)時(shí)，我們的假定是所有的手機(jī)界面尺寸都是相同的，即使實(shí)際當(dāng)中他們有著從4.4到5.7之間的差距，這些都是通過自適應(yīng)來調(diào) 整的。而唯一變化的就是屏幕的PPI，并且它們之間成倍率關(guān)系。在最上面我們將DPI和PPI時(shí)說道了電腦的分辨率是72DPI，當(dāng)這個(gè)分辨率下的時(shí)候， 此時(shí)你用形狀工具的描邊的時(shí)候1PT=1PX，而當(dāng)像素分辨率達(dá)到720*1280時(shí)，為了讓邏輯尺寸不變，需要將分辨率調(diào)整為72*2=144DPI。 此時(shí)你用形狀工具的描邊的時(shí)候1PT=2PX（當(dāng)然，同時(shí)也包含文字），保證了你的設(shè)計(jì)還是以DP為單位調(diào)整，這也就是我們所說的在xxhdpi界面下， 所有的像素都是偶數(shù)的。同時(shí)，當(dāng)你需要調(diào)整切圖大小時(shí)候只要講DPI以72為基準(zhǔn)進(jìn)行縮放調(diào)整即可，xxxhdpi即為72*3=216DPI以此類推。
切圖時(shí)候應(yīng)該切哪些尺寸的圖呢？
這個(gè)問題其實(shí)是比較多余的問題，上面都說了現(xiàn)在主流的就是xxdpi和xxxdpi，那就切這兩套唄。
其實(shí)我想說的不是這點(diǎn)啦(┬＿┬)，Android將對(duì)應(yīng)尺寸的圖片放在對(duì)應(yīng)的文件夾呢，xxxhdpi有對(duì)應(yīng)的文件夾，當(dāng)對(duì)應(yīng)文件夾下沒有資源時(shí) 系統(tǒng)會(huì)自動(dòng)調(diào)用下一級(jí)文件夾的資源來用，并且同時(shí)它會(huì)對(duì)資源進(jìn)行縮放調(diào)整，但系統(tǒng)的縮放僅限于整數(shù)倍縮放。當(dāng)你的切圖只有xxhdpi時(shí)，xxxhdpi 會(huì)把xxhdpi文件放大一倍來用，而這個(gè)時(shí)候這套圖的基數(shù)倍率則變成了2*2=4倍，會(huì)使你的界面不但模糊，圖片元素還會(huì)顯得特別大。除非你在mdpi 中還有一套1倍率的圖。
好吧，這條其實(shí)說了也沒什么太多必要，你只要記住記得切一套xxxdpi圖拉。
記得給你的720的版本的設(shè)計(jì)稿切一套1.5x版本的切圖哦
================又是一條華麗麗的分割線===========================
好啦，今天要講的就是這些了，不知道你看懂了沒有。
需要強(qiáng)調(diào)的是以上的所有內(nèi)容都是我在實(shí)戰(zhàn)中累計(jì)和總結(jié)的經(jīng)驗(yàn)。并沒有過多的去考據(jù)過權(quán)威資料，如果其中有明顯的錯(cuò)誤，還望指正。
雖然都是些沒什么實(shí)際作用的理論概念，但實(shí)際運(yùn)用的知識(shí)都是構(gòu)建在基礎(chǔ)理論知識(shí)之上的，當(dāng)你懂得了最基礎(chǔ)的邏輯關(guān)系之后。以后界面之間的再復(fù)雜的關(guān)系，都能用這些基礎(chǔ)知識(shí)來解開啦。（說的有點(diǎn)玄乎啦<(￣▽￣)> 哇哈哈…）
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.newchinaweekly.com