Get it！徹底搞懂UI和WEB設(shè)計(jì)中的尺寸單位

隨著信息的呈現(xiàn)方式越來(lái)越多元，UI/Web 設(shè)計(jì)師面對(duì)的工作也變得更加復(fù)雜。在這種情況下，許多基本功就容易被忽略掉，分辨率和設(shè)計(jì)的尺寸單位就是其中一個(gè)。iOS 的 pt、CSS 的 pt、Android 的 dp、ppi、px??這些單位和名詞到底是什么？該如何使用？

舉例來(lái)說(shuō)，「pt （point，點(diǎn)）」這個(gè)單位，就同時(shí)出現(xiàn)在 iOS、CSS、還有傳統(tǒng)的平面設(shè)計(jì)里，但他們?nèi)叩囊饬x卻是不同的；而 Android 設(shè)計(jì)使用的單位則是「dp」，這些單位都不像 px 那樣單純好懂，也是我觀察到現(xiàn)在，最多人學(xué)習(xí) UI 設(shè)計(jì)時(shí)會(huì)卡關(guān)的地方。有些人沒(méi)有學(xué)好，就干脆當(dāng)作沒(méi)這回事，繼續(xù)使用 px 打天下，而這樣子就會(huì)制造出一些問(wèn)題，例如：

從設(shè)計(jì)稿匯出的圖文件素材不是工程師要的正確尺寸，要不是一直被要求重出，要不就是放上畫面變成模糊的。

設(shè)計(jì)師以小屏幕機(jī)種的尺寸來(lái)畫稿子，工程師拿著大支手機(jī)來(lái)問(wèn)：「那這要怎么辦？」

明明工程師照著設(shè)計(jì)來(lái)做，但一放到手機(jī)上，字就變得太小或太大。

我認(rèn)為要能把觀念熟練地應(yīng)用在工作上，就不能只是死背單位之間的轉(zhuǎn)換公式，不過(guò)很可惜的是，我看網(wǎng)絡(luò)上大部分的文章都是直接把公式寫出來(lái)，缺乏一個(gè)對(duì)讀者友善的解釋方式；但這也有部分原因是我們的教育方法養(yǎng)成了多數(shù)人拿到課本就開始找公式的習(xí)慣，我希望能夠多多少少修正這種情況，所以有了寫這篇文章的念頭。

你會(huì)發(fā)現(xiàn)，當(dāng)你有耐心從頭開始「理解」一件事情的時(shí)候，它就會(huì)變得很簡(jiǎn)單了。

各種屏幕的分別

在我們開始解釋細(xì)節(jié)前，我們必須先定義討論的范疇。

本篇文章主要專注在探討 UI 設(shè)計(jì)師如何處理各式各樣的屏幕種類；屏幕的大小多變，就算大小一樣，其細(xì)致度也有差，有的屏幕顆粒很粗，有的則細(xì)到眼睛看不到個(gè)別像素點(diǎn)，專業(yè)的設(shè)計(jì)師如何讓自己的設(shè)計(jì)在各種屏幕上達(dá)到近似的體驗(yàn)?zāi)?？我們要先從「分辨率」看起?/p>

分辨率、像素密度

分辨率一詞在各種領(lǐng)域的定義有細(xì)微的差別，在 UI 設(shè)計(jì)中，我們可以理解成「顯示器呈現(xiàn)影像細(xì)節(jié)的能力」。也就是說(shuō)，成像單位越細(xì)小、越密集的屏幕，分辨率就越高。

而大多數(shù)屏幕的成像單位是像素（Pixel），因此描述密度/分辨率的方法就是抓一段固定長(zhǎng)度（通常是英吋），看看里面塞進(jìn)了幾顆像素點(diǎn)，固定長(zhǎng)度能塞越多顆，就代表這個(gè)屏幕的點(diǎn)越細(xì)。

這就像我們計(jì)算人口密度時(shí)，會(huì)抓出一平方公里的地區(qū)，然后看看里面塞了多少人，就能描述人口密度了。

舉個(gè)例子，現(xiàn)在蘋果發(fā)表了一支很奇葩的方形手機(jī)，屏幕長(zhǎng)寬都只有一英吋，畫面大小是 10×10 pixel，名稱叫做「iPhone Inch」：

庫(kù)克：「為了進(jìn)一步與任天堂加深合作關(guān)系，蘋果再一次重新發(fā)明了手機(jī)。」

「豪口愛喲～嗚～～～！」全場(chǎng)起立鼓掌。

好的，這支手機(jī)的屏幕長(zhǎng)寬都是 1 英吋、長(zhǎng)寬各排列了 10 顆像素，顯然我們?nèi)绻朊枋銎聊挥卸嗉?xì)致的話，可以說(shuō)：「屏幕的像素密度是每英吋 10 pixel」，或者換句話說(shuō)，「iPhone Inch 的分辨率是 10 ppi」。
等一下，ppi 這單位是什么？意思就是「Pixels Per Inch，每英吋塞進(jìn)了幾顆像素點(diǎn)（像素密度）」。

由于市場(chǎng)反應(yīng)良好，反正蘋果做什么大家買就對(duì)了；來(lái)年蘋果老調(diào)重彈，又推出了 s 升級(jí)版—— iPhone Inch s：

「這是我們有史以來(lái)最好的手機(jī)，Amazing～」庫(kù)克語(yǔ)畢，全場(chǎng)歡呼不斷。

接著播放產(chǎn)品介紹影片。

在上一輪斗爭(zhēng)失勢(shì)遭到明升暗貶，淪為影片配音員的 CDO Jony Ive 操著一口迷人的英國(guó)腔開始介紹產(chǎn)品：「??我們經(jīng)過(guò)了徹底地重新設(shè)計(jì)，現(xiàn)在有金色版，讓每個(gè)人的個(gè)性能充分表達(dá)??」

看來(lái)錢寧兄「re-design」的定義可能和大多數(shù)人不太一樣。

接著庫(kù)克把保險(xiǎn)業(yè)務(wù) Phil 叫上臺(tái)，解釋硬件配置。

「這是我們史上最好的屏幕，像素點(diǎn)的密度提升到先前的兩倍，只要你目洨，它就是視網(wǎng)膜屏幕，讓你分辨不出像素點(diǎn)，售價(jià)只要 $9999?！?/p>

好，既然長(zhǎng)寬的像素點(diǎn)都提升為兩倍來(lái)到了 20×20 pixel，那我們依照前面的說(shuō)法，這塊屏幕分辨率就是 20 ppi。

OK，現(xiàn)在我們都會(huì)作運(yùn)算了，讓我們暫且擱下上面的方塊手機(jī)，回到昔日榮光 iPhone 7，拿尺來(lái)測(cè)量看看：

這支 iPhone 7 的屏幕寬度是 2.3 吋，橫向總共排列了 750 顆 pixel，也就是說(shuō)，每英吋塞進(jìn)了 750/2.3 ≈ 326 顆 pixel，所以我們會(huì)說(shuō)「iPhone 7 的分辨率是 326 ppi」。

關(guān)系式如下：

△ 分辨率關(guān)系式

清楚了解何謂分辨率以后，現(xiàn)在來(lái)看看繪圖時(shí)的狀況吧。

iOS 的 pt 單位

讓我們繼續(xù)稍早的故事，由于蘋果又再一次重新發(fā)明手機(jī)，公司里的設(shè)計(jì)師和工程師可苦了，又要做新的 App 來(lái)上架，PM 立刻準(zhǔn)備好了兩代機(jī)種給工程師測(cè)試：

「好，美工，你要在畫面上放什么東西？」工程師一臉不耐煩地說(shuō)。
「那個(gè)??我不是美??」設(shè)計(jì)師還沒(méi)說(shuō)完，就被大吼一聲：
「??？你連分辨率都要人教，還說(shuō)自己是設(shè)計(jì)師！」

呵呵，這工程師一定南部來(lái)的。

「好啦??我要在畫面上放一條分隔線，灰色的?！?br style="text-align: left;"/>「粗細(xì)呢？」
「1 px。」
「呵呵！就說(shuō)你是美工，說(shuō)要 1px？來(lái)，你自己看看這是什么」

怎么會(huì)兩臺(tái)手機(jī)的畫面不一樣呢？

原來(lái)是因?yàn)?，?dāng)一個(gè)屏幕分辨率（像素密度）越高的時(shí)候，像素點(diǎn)就會(huì)越密集、越小顆，因此我們使用 px 當(dāng)單位來(lái)做 UI 的話，就會(huì)發(fā)生不同分辨率的屏幕呈現(xiàn)不同的狀況，那這要怎么解決呢？我們繼續(xù)看下去。

工程師：「來(lái)，美工，我跟你說(shuō)，我現(xiàn)在跟你講好一件事，你看一下這兩支手機(jī)的畫面?！?/p>

「看到左邊銀色機(jī)子的小紅點(diǎn)沒(méi)？」
「有喔～」
「現(xiàn)在開始，以銀色機(jī)子的『1 顆 px』為基準(zhǔn)，這顆紅點(diǎn)的大小，就當(dāng)成新的標(biāo)準(zhǔn)尺寸單位，你就叫它『1 pt (point, 點(diǎn))』，這個(gè)點(diǎn)點(diǎn)不管搬到哪里就是那么大，我現(xiàn)在把它搬到金色的機(jī)子上??」
「你看，在金色機(jī)子上，紅點(diǎn)為了維持一樣的大小，他的長(zhǎng)/寬就會(huì)各涵蓋到 2 顆 px，所以原本銀色機(jī)子上『1 pt』等于『1 px』，但到了屏幕密度兩倍的地方，『1 pt』的大小就會(huì)代表『2 px』，我們從今以后就不要用 px 當(dāng)單位了，這樣好不好？」
「好喔～但是我弄懂以后你不能再叫我美工了！」
「好啦！那剛剛的分隔線可以幫我弄粗一點(diǎn)嗎？」
「你要多粗？」
「就粗『一點(diǎn)』啊！」
「??」

所以啊，一個(gè)新單位：pt （point）的誕生，就是為了解決不同的屏幕上，px 大小會(huì)變來(lái)變?nèi)サ膯?wèn)題，現(xiàn)在先讓工程師和設(shè)計(jì)師領(lǐng)個(gè)便當(dāng)休息一下，我們來(lái)看看應(yīng)用題：

由左至右，分別為 iPhone 第一代、iPhone 4，與 iPhone 6 Plus

蘋果推出第一代 iPhone 一直到現(xiàn)在的 iPhone 7，屏幕的「像素密度」有兩次大變化（注意是密度變化喔！我們?cè)谶@里不管屏幕的大?。?，第一次是在 iPhone 4 的時(shí)候，屏幕尺寸不變，但像素密度變成兩倍，來(lái)到了 326 ppi，賈伯斯稱呼其為「視網(wǎng)膜屏幕（Retina Display）」。

而第二次是 iPhone 6 推出時(shí)，也一并出現(xiàn)了大尺寸的 iPhone 6 Plus，Plus 不只是大，而且像素密度還變成了三倍，目前蘋果所有的產(chǎn)品里，只有 iPhone 6/7 Plus 擁有三倍密度的屏幕。

細(xì)心的你可能發(fā)現(xiàn) Plus 401 ppi 明明就不是初代 iPhone 163 ppi 的三倍，那怎么會(huì)說(shuō)是三倍密呢？這個(gè)為了避免你吸收來(lái)不及，先保留待下次解釋，總之你先記住，iPhone 6/7 Plus 是目前擁有三倍密度屏幕的機(jī)種。

好，我們回憶一下剛剛的小劇場(chǎng)：

工程師在第一個(gè)屏幕上放了一顆 1 px 的小紅點(diǎn)，說(shuō)那個(gè)大小叫做「1 pt」，這個(gè)點(diǎn)拿到右邊的新機(jī)上，「大小不變」，但長(zhǎng)寬變成了 2px，所以如果以后用「pt」來(lái)當(dāng)大小單位的話，就不用再管那個(gè)變來(lái)變?nèi)サ?px 了。

在 iOS 的世界也是這么運(yùn)作的，我們?cè)诔醮?iPhone 上標(biāo)出一顆紅色的 pixel，然后說(shuō)它的長(zhǎng)度（或?qū)挾龋┙凶觥? pt」，這顆紅色的點(diǎn)拿到有視網(wǎng)膜屏幕、密度兩倍的 iPhone 4 上，它的長(zhǎng)度就會(huì)涵蓋了視網(wǎng)膜屏幕上的 2px；若拿到三倍密度的 Plus 上面，猜猜這個(gè)小紅點(diǎn)的長(zhǎng)度會(huì)涵蓋幾 px？

如果你知道為什么會(huì)是 3px，那恭喜你真的完全弄懂了背后的機(jī)制，就是這樣子而已，現(xiàn)在我們來(lái)看看 Android。

Android 的 dp 單位

在 Android 的世界里，手機(jī)廠牌型號(hào)好多好多，屏幕大小和密度也是一團(tuán)亂；Google 身為教主，當(dāng)然要制訂一套規(guī)則來(lái)一統(tǒng)天下，方法呢，就是制定好幾個(gè)「密度等級(jí)」：

如果你的屏幕分辨率落在 160 ppi 左右的話(注)，我們就稱之為「MDPI (中等分辨率)」；那如果你的屏幕分辨率落在 320 ppi 左右呢，就叫做「XHDPI，Extra-High (超高分辨率)」??其余按圖類推。

注：Android 用的單位叫 dpi，但為了溝通方便，我們都還是用 ppi

接著就跟蘋果一樣。學(xué)人精 Google 說(shuō)，我們把 MDPI 的屏幕定為基準(zhǔn)點(diǎn)，它是一倍像素密度（上頭寫的 1x），我們?cè)谶@顆屏幕上挑一顆 pixel，把它弄成紅色，接著把這個(gè)小紅點(diǎn)移到 XHDPI 的 2x 屏幕上的時(shí)候，它就會(huì)變成涵蓋 2px 了，所以以后就把這顆小紅點(diǎn)的尺寸變成新單位，iOS 叫做「pt」是吧？好，那這個(gè)新單位我叫它「dp (Density-Independent Pixels)」！

所以，iOS 的 pt 和 Android 的 dp 其實(shí)是相同的運(yùn)作原理，使用它當(dāng)單位來(lái)做圖、溝通，就可以避免使用 px 造成的偏差了。

網(wǎng)頁(yè)設(shè)計(jì)里的 pt 單位

除了 iOS 和 Android 外，如果也有接觸網(wǎng)頁(yè)設(shè)計(jì)的朋友，可能知道 CSS 里也有 pt 這個(gè)單位可以使用，但在這里先給結(jié)論：CSS 的 pt 單位和我們前面所提的 iOS pt 其實(shí)是沒(méi)有關(guān)系的，其運(yùn)作方式也不相同，所以硬要放在一起想就會(huì)永遠(yuǎn)搞不清楚啦！

pt 這個(gè)單位詞，其實(shí)最早源自于傳統(tǒng)的鉛字印刷，是用來(lái)表示鉛字塊的尺寸，在印刷和平面設(shè)計(jì)的世界里，1 pt = 1/72 英吋；而 CSS 之所以有 pt 這個(gè)單位，其實(shí)是要把網(wǎng)頁(yè)印刷/打印出來(lái)的時(shí)候用到的。

在網(wǎng)頁(yè)設(shè)計(jì)里，屏幕顯示和實(shí)體印刷，可以擁有兩份不同的 CSS 來(lái)決定樣式；習(xí)慣良好的網(wǎng)頁(yè)設(shè)計(jì)師，會(huì)特別寫一份 CSS，在印刷的時(shí)候給計(jì)算機(jī)使用（例如拿掉背景圖、字體顏色改成灰階，比較省墨水），而實(shí)體世界的字級(jí)單位：pt 就會(huì)在這時(shí)派上用場(chǎng)，所以其實(shí) CSS 里的 pt 單位，不是讓你拿來(lái)在屏幕上使用的喔！

適合屏幕顯示的 CSS 單位有 em、rem、px ??等等，有興趣的朋友可以再自行研究。

結(jié)論

OK，今天這篇文章已經(jīng)完成單位的觀念解釋，而在做圖時(shí)的單位應(yīng)用、出圖時(shí)的注意事項(xiàng)，我們下篇文章再來(lái)研究。如果這篇文對(duì)你有幫助，也分享出去給更多人一起精進(jìn)吧！