UI設計尺寸單位

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

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

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

設計師以小屏幕機種的尺寸來畫稿子，工程師拿著大支手機來問：「那這要怎么辦？」

明明工程師照著設計來做，但一放到手機上，字就變得太小或太大。

各種屏幕的分別

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

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

分辨率、像素密度

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

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