|
我們自稱 UI/UX/PD/etc. 設(shè)計師,，但是我們對自己手頭上設(shè)備的屏幕去一無所知 -- 沃茲基·碩德
歡迎來我的博客逛逛 dpi、ppi,、dp,、pt、sp 等等這些個單位我們天天接觸,，但是真正理解這些單位的設(shè)計師恐怕并不太多，畢竟真的有點兒復(fù)雜,，別說學(xué)美術(shù)出身的設(shè)計師了,，很多程序員都搞不太懂。但是作為一名 UI/UX/PD/etc. 設(shè)計師,，因為不了解這些知識而鬧笑話的事情幾乎每天都在發(fā)生,，不知道這些甚至連自己的做設(shè)計的電腦屏幕都不了解你覺得真的好嗎？ 本次分享將在盡量不涉及數(shù)學(xué),，盡量用最簡單的語言,，盡量使用最貼近生活的例子來為在座各位患者朋友將心頭這些個疑慮全部消除。 DPI 和 PPI 是什么,？ DPI 是英文 Dots（點） Per Inch 的縮寫,，在最早的時候，這個單位是用來描述打印機的性能的,，意思就是這臺打印機最多能用多少個墨點來打印一寸的內(nèi)容,。目前市面上常見的家用黑白打印機普遍都去到了 600 * 600 dpi 而家用彩色照片打印機則能去到 5760 * 1440 dpi。DPI 越高,，每英寸內(nèi)的墨點就越多,，你打印出來的東西就會越清晰銳利。 PPI 是英文 Pixels Per Inch 的縮寫,，意味每寸能容納多少顆像素,，用于描述屏幕的像素密度。我們上面提到的印刷物以無數(shù)多的墨點來構(gòu)成圖像,，而屏幕同樣也是以一定數(shù)量的發(fā)光點來構(gòu)成圖像,。見過街上那些走紅字的 LED 顯示屏么,？上面的那一顆顆的 LED 燈就是這塊屏幕的發(fā)光點，我們使用的 MacBook 的 Retina 顯示屏的原理也跟這些看起來十分粗糙的走紅字顯示屏是一樣的,，只不過 Retina 顯示屏的發(fā)光點密度非常高,，人眼已經(jīng)看不出來顆粒感而已。對于屏幕來說 PPI 是用于描述每英寸發(fā)光點數(shù)量的,，它表明了一塊屏幕發(fā)光點密度的高低,，這些發(fā)光點我們更常稱之為像素，一塊屏幕寬高有幾寸是在生產(chǎn)的時候就被定好的,，而寬高各能容納下多少顆像素,，也是在生產(chǎn)的時候就被定好的，所以我們所說的 PPI 可以說是一個物理單位,。 簡單舉個例子吧,，我們手頭上的 iPhone(6~7) 寬為 2.3 英寸，高為 4.1 英寸,，根據(jù)勾股定理得出這塊屏幕的尺寸（屏幕對角線距離）是 4.7 英寸,。同時，iPhone(6~7)屏幕寬（每行）有 750 個像素（發(fā)光點）,，高（每豎）有 1334 個像素（發(fā)光點）,。
分辨率、像素和屏幕尺寸 PPI 說的是像素密度,，而分辨率說的是塊屏幕的像素尺寸,，譬如說 1334*750 就是 iPhone（6~7）的分辨率，說 iPhone（6~7）的分辨率是 326 是錯誤的表述,，326 是它的像素密度,，單位是 PPI。 詢問別人一粒像素有多大是一個非常雞賊的問題（小心面試遇到這樣的題）,，雖然我們說像素是構(gòu)成屏幕的發(fā)光的點,，是物理的，但是像素在脫離了屏幕尺寸之后是沒有大小可言的,，你可以將 1920px * 1080px 顆像素放到一臺 40 寸的小米電視機里面,，也可以將同樣多的像素全部塞到一臺 5.5 寸的 iPhone7 Plus 手機里面去，那么對于 40 寸的電視而言,，每個像素顆粒當(dāng)然會大于 5.5 寸的手機的像素,。所以光看屏幕像素尺寸對于設(shè)計師來說是不具備多少實際意義的，通過分辨率計算得出的像素密度（PPI）才是我們設(shè)計師要關(guān)心的問題,，我們通過屏幕分辨率和屏幕尺寸就能計算出屏幕的像素密度的,。
再次使用 iPhone（6~7）作為例子。我們知道該屏幕的橫向物理尺寸為 2.3 英寸 ,，且橫向具有 750 顆像素,，根據(jù)下面的公式,，我們能夠算出 iPhone（6~7）的屏幕是 326 PPI，意為每寸存在 326 顆像素,。
其實不論我們怎么除,，計算得出來的像素密度（PPI）都會是這個數(shù)，寬存在像素除以寬物理長度,，高存在像素除以高物理長度,，得數(shù)都接近于 326。 對設(shè)計會造成什么樣的影響? 一塊 326*326px 的正方形色塊在一臺 iPhone 7 上面展現(xiàn)出來的物理尺寸將會會是 1*1 英寸,。這是因為該屏幕每英寸能容納 326 顆像素,，所以 326px 湊在一起剛好就是 1 英寸。假設(shè)我們能將 iPhone 7 手機屏幕 PPI 調(diào)低 50% 變?yōu)?163,，那么這個色塊的物理尺寸就會變成 2*2 英寸,，同樣多的像素，看起來卻大了一倍,。咦,！這是為啥？ 因為我們的色塊是 326*326px 大小的,，而這臺 163PPI 的假 iPhone 7 每英寸上面只有 163 顆像素,，為了要展示 326*326px 的色塊，它就要多用 1 英寸的屏幕,，所以這個色塊在屏幕上面看起來就“長大了”一倍,。
小結(jié)
什么是 dp、pt,、sp,？ DP 或者說 DiP 是 Device independent Pixel 的縮寫,，而 PT 是 Point 的縮寫，DP 用于安卓系統(tǒng)開發(fā),，而 PT 用于 iOS 系統(tǒng)開發(fā),。但從根本來講它們都是一個意思。 上一篇文章我們仔細地對屏幕最基礎(chǔ)的幾個屬性——分辨率,、PPI,、和物理尺寸，似乎我們只要知道了這幾個東西那我們的設(shè)計就怎么樣也不會錯,。但是聰明的童鞋可能發(fā)現(xiàn)了一些不對,，我們不可能對每一塊屏幕都進行了解，然后專門針對這塊屏幕再進行一次設(shè)計吧,？世界上那么多屏幕,，那一個界面我要畫多少個稿啊??！ 沒錯，假如真是這樣的話,，那么面對不同的屏幕,，不僅要從新設(shè)計，連程序都可能要重新寫一回,，這顯然是不可能的事情,。不過這個問題不僅我們想到了，那些計算機,、智能手機的生產(chǎn)商也想到了,，為了讓廣大程序員和設(shè)計師朋友能夠更加容易地解決適配問題，讓更多的開發(fā)者來來為他們開發(fā)軟件,，他們使用了一種很聰明的方法,，同時這也是為什么我們又多了 DP、PT,、SP 等那么多“雜七雜八”的單位的原因,。 解析這幾個單位的必要，可能要從開發(fā)的角度來講會比較清晰一點,。 程序員在搭建界面的時候也會像我們設(shè)計師畫圖一樣,，首先會有一個畫布，一個畫布代表針對設(shè)備的一屏,，程序員將會在這個畫布內(nèi)對界面進行搭建,。針對 iPhone（6~7）而言，這個畫布的最佳大小是375*667pt,。下面這張圖就是程序員的畫布,，長這樣的,，有點像 Sketch，注意紅框里面的數(shù)字,。
等等,，不是說 iPhone（6~7）的分辨率是 750*1334px 嗎？這個奇怪東西又是什么,？這是 iPhone（6~7）的邏輯點分辨率（或稱虛擬點分辨率）,，這個就是人們?yōu)榱私鉀Q屏幕尺寸繁多而設(shè)計出來的一套機制。iOS 系統(tǒng)就是根據(jù)這個 375*667pt 的畫布進行一個二倍放大渲染來填滿 750*1334px 的屏幕的,。這也是為什么那么多設(shè)計師推薦使用一倍圖進行設(shè)計的原因,，這樣是最接近開發(fā)環(huán)境的，開發(fā)不需要換算就能直接照著你的設(shè)計稿設(shè)置各個元素的尺寸和位置,。 比如說,，你在 Sketch 里面使用一倍稿（375*667px 的畫布）畫了一顆 44*44 px 的按鈕，對于開發(fā)來說,，這顆按鈕在畫布上并不是 44px 大小,，而是 44 pt。**的確,，我們在輸出按鈕這張圖的時候會輸出成 88px（@2）,，或132px（@3）但是我們輸出的只是一張 .png 的圖片，是這顆按鈕的“表皮”而已,。**而對于開發(fā)來說,，這顆按鈕是一個控件，是界面的一個零部件,，這個控件的大小就不能定義成幾多幾多 px 了,，px 是死的， pt 是活的,，面對iPhone 7,，44pt 將會被渲染成 88px 大小的一枚按鈕,，上面覆蓋上了你輸出的 @2.png 表皮,，而面對 iPhone 7 Plus，它將會被渲染成 132px 大小的一枚按鈕,，上面覆蓋上了你輸出的 @3.png 表皮,。系統(tǒng)是以這樣的機制，來保證能夠使用一個布局文件來對不同分辨率,、不同 PPI 的屏幕進行盡量正確的布局,。 DP 或 DiP 也差不多是這個道理，只不過這個單位用于安卓開發(fā),。 SP 是 Scale-independent pixels 的縮寫,，大意是可放大像素的意思,，這個單位多用在安卓設(shè)備的字體大小上面。它跟 DP,、 PT 的概念差不多,，能夠面對不同的屏幕尺寸渲染出大小適合文字。 羅里吧嗦那么多,，敢不敢來張圖,？
此處只以 iPhone（6~7）來舉例，其實其他設(shè)備也是這個原理,，包括電腦,、手機、平板電腦,、甚至是智能手表,。 前面兩段說了好些基礎(chǔ)的概念，下面我們將會結(jié)合之前我們講到的數(shù)個概念來談?wù)剤D為什么要這樣切,，標(biāo)注為什么要這樣做,。 iOS 跑 iOS 的設(shè)備主要兩種，iPhone 和 iPad,。（iPod thouch就不討論了,，基本上跟 iPhone 一樣。） iPhones iPhone 方面我們從非 retina 顯示屏的 iPhone3G/S 講到 iPhone 7/Plus,。
關(guān)于 Plus 機型,，不得不仔細說說它的一個小特點。 前面說到在 iPhone 6/7 上,，系統(tǒng)會根據(jù) 350*667pt 的邏輯畫布進行一個二倍渲染,，變成 750*1334 之后再將界面投射到屏幕上面去。Plus 機型也差不多,，它的邏輯畫布的最佳大小是 414*736pt（由于與非 Plus 機型的邏輯分辨率并不太懸殊,，所以平時我們只是用一倍畫稿進行設(shè)計也沒有產(chǎn)生太大的問題，誤差將由程序員使用一些技術(shù)上的布局手段減?。?然后系統(tǒng)進行了一次三倍的渲染變?yōu)?1242*2208px,。但 Plus 機型的分辨率是 1080*1920px 的，邏輯畫布渲染出來的大小怎么跟這個不一樣,，那還怎么準(zhǔn)確投射,，充滿整個屏幕啊,！ 在 Plus 機型上,，渲染出來的 1242*2208px 會先降低采樣變成 1080*1920px 然后再投射到屏幕上面去。我們還是來看圖吧,。
1080*1920px 相較于 1242*2208px 大約縮小了 15%,，那么很多尺寸都會出現(xiàn)小數(shù)，比如說 131.3244px 這樣惡心數(shù)字,，出現(xiàn)小數(shù)的話圖片的邊緣就會出現(xiàn)模糊的狀況,，而 Plus 機型上幾乎所有圖片都不是整數(shù)的，但得益于高分辨率的 retina 顯示屏,，我們的肉眼可能看不出來端倪（湊近一點看的話有可能能夠看得出來大家不妨試試）,。絕大部分情況下 Plus 的降低采樣機制不會對我們的設(shè)計造成什么太過巨大的影響，記得輸出 @3X 圖即可,，不過要說的是,，越是細小的元素影響就會越大,。 iPads iPad 方面我們從非 retina 顯示屏的第一代 iPad 到想要代替電腦的 12.9寸的 iPad Pro 再到 iPad mini 1/2/3/4,。
有些小伙伴可能會留意到,，無論是 iPhone 還是 iPad,好幾代了屏幕的參數(shù)好像沒怎么變化過，PPI 不是越高越好嗎,？蘋果是好久沒升級自己屏幕,，一塊祖?zhèn)髌聊缓鲇葡M者？不是的,，因為人眼對于像素密度的要求會根據(jù)人眼距離屏幕的距離變化而變化,，RMBP 的 PPI 是 109，被手機完爆,，但是我們平時用起來還是覺得非常清晰銳利,，因為我們用電腦的時候眼睛距離屏幕會比手機遠，不需要那么高的像素密度也可以消除顆粒感,。相應(yīng)的使用距離配制相應(yīng)的 PPI,，所謂夠用就好。過高的 PPI 并不會帶來多大的畫質(zhì)提升,，反而會導(dǎo)致一連串不好的后果,，加大處理器渲染負擔(dān)，加大電池負擔(dān),，不利于設(shè)計開發(fā)人員設(shè)計,，屏幕的制造成本也會增加。早年安卓陣營出現(xiàn)了一些 2K 屏甚至 4K 屏的產(chǎn)品,，現(xiàn)已銷聲匿跡,，消費者根本需要這么高分辨率的屏幕。蘋果在相應(yīng)的設(shè)備（無論從電腦到智能手機再到智能手表）上維持一個穩(wěn)定的 PPI 是很明智的選擇，穩(wěn)定的屏幕參數(shù)非常非常有助于設(shè)計開發(fā)人員工作的開展,，這種穩(wěn)定性對開發(fā)者造成的便利恐怕超過了所有人的想象的,。 標(biāo)注與切圖——以 Chrome 瀏覽器為例
在蘋果尚未推出 Plus 機型的那段時間里設(shè)計師們一般都只需要輸出一倍圖和二倍圖。一倍圖針對的是沒有配備 retina 顯示屏的 iPhone 而二倍圖針對的是配備 retina 顯示屏的 iPhone,。Plus 機型推出后就開始要輸出三倍圖了,，切不配備 retina 顯示屏的 iPhone 已經(jīng)過于老舊，不再需要考慮,。一般我們會在文件名后面加上 @2X 或 @3X 的后綴以標(biāo)明文件的尺寸,，就如上圖所示，這是 iOS 的規(guī)范,，還是值得準(zhǔn)守一波的,。 至于 iPad 版本，規(guī)則也差不太多,，只是 iPad 目前不需要三倍切圖,。 小結(jié)
MDPI, HDPI, XHDPI, XXHDPI 以及 XXXHDPI 大家都知道 Android 是一個開源系統(tǒng)，不像 iOS 只有蘋果自家的機器能跑,，屏幕尺寸一直以來也比較穩(wěn)定,，而運行 Android 系統(tǒng)的設(shè)備的屏幕卻各式各樣非常跳脫，這也就是以往大家經(jīng)常說 Android 設(shè)備碎片化嚴(yán)重的原因之一,。不過這種碎片化嚴(yán)重的情況來到今天已經(jīng)改善了非常之多,，縱使 Google 對于 Andorid 開源的策略重來沒有變過,，但 OEM 們開始不約而同地開始使用不那么“奇形怪狀”的屏幕了，且某些低分辨率的機型隨著時日變遷也已經(jīng)被淘汰殆盡了,。倒是 iOS 在推出 Plus 機型之后 iOS 屏幕碎片化的問題也開始凸顯起來了,，個人認為目前兩大平臺的屏幕碎片化問題都存在且大家都差不多,，大家在對 Android 產(chǎn)品進行設(shè)計的時候大可不必那么擔(dān)心,。 與 iOS 相似的是，設(shè)計師們同樣也是需要輸出不同倍率的切圖,，只不過需要輸出的倍率更多罷了,。程序員將會把所有不同倍率的切圖都裝在同一個安裝包里面，在運行的時候系統(tǒng)會根據(jù)屏幕的分辨率來自動選用正確倍率的切圖,。 坦率地講,，假如我們要糾結(jié)到每塊屏幕的邏輯分辨率的話，那么Android 陣營的碎片化真的是無比嚴(yán)重,，但是我們知道,，只要邏輯分辨率差的不太遠的話，我們能夠用同一個稿來進行設(shè)計,、輸出切圖,，其中的誤差必不可能避免但將會在一個可接受的范圍之內(nèi)。對于Android 產(chǎn)品來說,，一般我們都使用 360*640px 作為一倍稿進行設(shè)計,。
目前為止還需要我們輸出切圖的分辨率有五種：代表 1 倍的 MDPI, 1.5 倍的 hdpi, 2 倍的 xhdpi, 3 倍的 xxhdpi 以及 4倍的 xxxhdpi（三星最近發(fā)布的 S8 就是這個倍率）。ldpi 和 tvdpi 以及可以不予考慮了,。有一點需要提出的是,，被淘汰的 tvdpi 這種分辨目前被很廣泛地使用到了 運行 Android 系統(tǒng)的可穿戴設(shè)備上，例如前陣子很火的 Moto 360 智能手邊,，假如要設(shè)計手表上面的產(chǎn)品的話那么就得輸出這個倍率的切圖,。 下面給出一張圖，讓大家看看各個檔次的 DPI 的代表機型,，某些機型年輕一點的小同學(xué)（例如我自己）可能連聽都沒過,，大家看看就好，開拓開拓眼界,，無需過分在意,。
標(biāo)注與切圖——以 Chrome 瀏覽器為例 與 iOS 一樣，我還是建議大家使用一倍稿進行設(shè)計,，然后再輸出各種倍率的切圖就好,，但是 Android 系統(tǒng)要求圖片資源的命名與管理圖片資源的方式是和 iOS 是完全不同的。 上篇我們簡單的介紹了下 iOS 的圖片資源的命名方式,，很簡單,，就是文件名加上 @2X,、@3X 這樣的小標(biāo)記。然而來到了 Andorid 平臺我們就不這樣命名了,。 以下這張長圖是 Android 工程文件管理圖片資源的方式,，我們可以看到里面有從 drawable-hdpi 到 drawable-xxxhdpi 數(shù)個文件夾，你沒猜錯,，這些文件夾里面就放著設(shè)計師們精心設(shè)計出來的各種 .png 切圖,。
Android 系統(tǒng)會自動根據(jù)屏幕的屬性來選則使用哪個文件夾里面的那套切圖。譬如說在新出的蓋樂世 S8 上面運行的話,，那么系統(tǒng)就會自動選擇使用 drawable-xxxhdpi 文件夾里面的圖,，新出的小米 6 的話，就會自動選用 drawable-xxhdpi 文件夾里面的圖,。 并且,，我們輸出的圖片的名字全部都要是一樣的，安裝不同的倍率進行導(dǎo)出,，并且不能帶有后綴或其他標(biāo)記,，同個圖切出來不同倍率五張資源，分別被放入了相應(yīng)的文件夾里面,。使用神奇 Sketch Measure 進行批量導(dǎo)出,，程序員會跪著感謝你的。 看起來可能會是這樣的： drawable-mdpi/[文件名].png drawable-xhdpi/[文件名].png drawable-xxhdpi/[文件名].png drawable-xxxhdpi/[文件名].png 以下拿運行于 Android 平板 Nexus9 上的 Chrome 瀏覽器作為例子,。Chrome 的安裝包里面帶有了這五種倍率的切圖,，然而運行在 Nexus9 這臺平板電腦之上的時候，它選用了 xhdpi 這一檔分辨率的切圖來對自己進行適配,。
這里有個非常重要的點大家一定要注意一下,。1.5 倍倍率切出來的圖片必然帶有小數(shù)，如 33pt * 1.5 = 49.5px ,，如此之大的小數(shù)會讓圖片的邊緣非常模糊,，簡直不能忍。所以遇到這兩種倍率,，我們要手動將小數(shù)去掉,，譬如就將尺寸改變?yōu)?50px，不過剛剛提到的神奇能夠自動地進行這一項工作,。千萬不要直接就把這些圖導(dǎo)出來,。 小結(jié)
|
|
|
