UI設(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ī)上，字就變得太小或太大。

各種屏幕的分別

在我們開始解釋細(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ì)。