第二話——什麼是 dp、pt、sp？

01-26

簡評：我們自稱 UI/UX/PD/etc. 設計師，但是我們對自己手頭上設備的屏幕卻一無所知 -- 沃茲基·碩德??

dpi、ppi、dp、pt、sp 等等這些個單位我們天天接觸，但是真正理解這些單位的設計師恐怕並不太多，畢竟真的有點兒複雜，別說學美術出身的設計師了，很多程序員都搞不太懂。但是作為一名 UI/UX/PD/etc. 設計師，因為不了解這些知識而鬧笑話的事情幾乎每天都在發生，不知道這些甚至連自己的做設計的電腦屏幕都不了解你覺得真的好嗎？

本次分享將在盡量不涉及數學，盡量用最簡單的語言，盡量使用最貼近生活的例子來為在座各位患者朋友將心頭這些個疑慮全部消除。

由於本文篇幅有點兒長，所以將會分成四部分分享給大家，這是第二篇。大家可以點個關注，即時收到推送。

什麼是 dp、pt、sp？

DP 或者說 DiP 是 Device independent Pixel 的縮寫，而 PT 是 Point 的縮寫，DP 用於安卓系統開發，而 PT 用於 iOS 系統開發。但從根本來講它們都是一個意思。

上一篇文章我們仔細地對屏幕最基礎的幾個屬性——解析度、PPI、和物理尺寸，似乎我們只要知道了這幾個東西那我們的設計就怎麼樣也不會錯。但是聰明的童鞋可能發現了一些不對，我們不可能對每一塊屏幕都進行了解，然後專門針對這塊屏幕再進行一次設計吧？世界上那麼多屏幕，那一個界面我要畫多少個稿啊！！

沒錯，假如真是這樣的話，那麼面對不同的屏幕，不僅要從新設計，連程序都可能要重新寫一回，這顯然是不可能的事情。不過這個問題不僅我們想到了，那些計算機、智能手機的生產商也想到了，為了讓廣大程序員和設計師朋友能夠更加容易地解決適配問題，讓更多的開發者來來為他們開發軟體，他們使用了一種很聰明的方法，同時這也是為什麼我們又多了 DP、PT、SP 等那麼多「雜七雜八」的單位的原因。

解析這幾個單位的必要，可能要從開發的角度來講會比較清晰一點。

程序員在搭建界面的時候也會像我們設計師畫圖一樣，首先會有一個畫布，一個畫布代表針對設備的一屏，程序員將會在這個畫布內對界面進行搭建。針對 iPhone（6~7）而言，這個畫布的最佳大小是 375*667 pt。下面這張圖就是程序員的畫布，長這樣的，有點像 Sketch，注意紅框裡面的數字。

等等，不是說 iPhone（6~7）的解析度是 750*1334px 嗎？這個奇怪東西又是什麼？這是 iPhone（6~7）的邏輯點解析度（或稱虛擬點解析度），這個就是人們為了解決屏幕尺寸繁多而設計出來的一套機制。iOS 系統就是根據這個 375*667pt 的畫布進行一個二倍放大渲染來填滿 750*1334px 的屏幕的。這也是為什麼那麼多設計師推薦使用一倍圖進行設計的原因，這樣是最接近開發環境的，開發不需要換算就能直接照著你的設計稿設置各個元素的尺寸和位置。

比如說，你在 Sketch 裡面使用一倍稿（375*667px 的畫布）畫了一顆 44*44 px 的按鈕，對於開發來說，這顆按鈕在畫布上並不是 44px 大小，而是 44 pt。的確，我們在輸出按鈕這張圖的時候會輸出成 88px（@2），或132px（@3）但是我們輸出的只是一張 .png 的圖片，是這顆按鈕的「表皮」而已。而對於開發來說，這顆按鈕是一個控制項，是界面的一個零部件，這個控制項的大小就不能定義成幾多幾多 px 了，px 是死的， pt 是活的，這就是為什麼會有倍率這一說的原因所在，面對iPhone 7，44pt 將會被渲染成 88px 大小的一枚按鈕，上面覆蓋上了你輸出的 @2.png 表皮，而面對 iPhone 7 Plus，它將會被渲染成 132px 大小的一枚按鈕，上面覆蓋上了你輸出的 @3.png 表皮。系統是以這樣的機制，來保證能夠使用一個布局文件來對不同解析度、不同 PPI 的屏幕進行盡量正確的布局。

DP 或 DiP 也差不多是這個道理，只不過這個單位用於安卓開發。

SP 是 Scale-independent pixels 的縮寫，大意是可放大像素的意思，這個單位多用在安卓設備的字體大小上面。它跟 DP、 PT 的概念差不多，能夠面對不同的屏幕尺寸渲染出大小適合文字。

羅里吧嗦那麼多，敢不敢來張圖？

此處只以 iPhone7 來舉例，其實其他設備也是這個原理，包括電腦、手機、平板電腦、甚至是智能手錶。

太長了不想看

不想看看上面的圖吧 233333。

本人才疏學淺，如文章出現紕漏，敬請各位前輩大方指出，感謝??。

相關閱讀：什麼是 DPI，什麼又是 PPI ？

參考鏈接：Designers guide to DPI

歡迎關注

知乎專欄：「極光日報」，每天為 Makers 導讀三篇優質英文文章；
個人專欄：「DesignCoder」設計是一項工程；
我的追波：Zhuyuxuan