一個優秀的手機軟件，不僅要有精巧的功能，流暢的速度，讓人賞心悅目的UI也往往是用戶選擇的重要理由。作爲移動產品的PM，也需要了解一些在UI設計中的基本知識。
1. px和pt，一對好夥伴
在視覺設計中，我們經常會見到以下兩個單位： px和磅數pt。
Px ，是英文單詞pixel的縮寫，意爲像素。在設計領域中，像素是用來計算數碼影像的一種單位。計算機中顯示的圖像並非連續的線條組成，而是由許多肉眼看不見的小點組成。如果把把影像放大數倍，會發現這些連續色調其實是由許多色彩相近的小點所組成，這些小點就是構成影像的最小單位“像素”。由於是最小的獨立顯示單位，px均爲整數，不會出現0.5px的情況。
圖一 看這個色彩鮮豔的LED燈（原圖大小）
![[轉載]dp和px，那些不得不吐槽的故事——Android平臺圖](https://pic1.xuehuaimg.com/proxy/csdn/http://s4.sinaimg.cn/middle/6499f8f1hbd7b87ba5df3&690 "[轉載]dp和px，那些不得不吐槽的故事——Android平臺圖"){kind=small}
圖二 你能想象這纔是他的本來面目嗎？（放大之後）
![[轉載]dp和px，那些不得不吐槽的故事——Android平臺圖](https://pic1.xuehuaimg.com/proxy/csdn/http://s5.sinaimg.cn/bmiddle/6499f8f1hbd7b8c1d5e24&690)
Pt，則是point的縮寫，一般音譯爲磅數，也有人直譯爲點數，請大家自行轉換。這是使用在印刷領域的單位，一磅等於1/72英寸。在國際上一般會用pt作爲字體的單位。
一般情況下，設計師們採用px來進行標註設計圖中的圖形，用pt來標註文字。在過去很多年的視覺設計中，px和pt的配合堪稱天衣無縫，把PC打扮得花枝招展，堪稱史上最佳配合的好夥伴。
2. 那些年，我們一起追過的Android
在突如其來的移動互聯網時代，px和pt的配合變得不那麼和諧。原因就在於Android攜衆高矮不一，胖瘦各異的愛妃來到世人面前，給他們化妝就變成橫看成嶺側成峯，遠近高低各不同了。
由於Google對Android的開放政策，使得所有廠商都可以加入到智能手機的研發中來。於是乎，Android手機一時間百花齊放，出現了各種不同的手機樣式。比如：
表一 Android分辨率規格（寬*高）：
240*320 320*240 320*480 480*800 480*854 640*960 720*1280，……還有平板
|
分辨率 |
比率 |
市場對應手機 |
|
320×480 |
2:3 |
三星S5830 Galaxy Ace、三星 I5700、三星I7500、華爲U8500 |
|
索尼愛立信X8 (E15i) 、華爲 C8600、Motorola XT502 |
||
|
Motorola ME600、Motorola CLIQ、Motorola ME501 |
||
|
LG P503、LG GT540、LG GW620、LG P500 |
||
|
HTC G6 Legend、HTC Aria (G9)、酷派 D530、酷派 W711 |
||
|
夏普 SH8118U、天語 W606 、中興 R750、首派 A60 |
||
|
240x320 |
3:4 |
HTC A3366 Wildfire、HTC A3380 、HTC A3360 |
|
Motorola ME511 、Motorola XT301 、Motoroal XT300 |
||
|
華爲 C8500、三星 I5508、中興 X850、索尼愛立信 U201、SAMSUNG S5570、 |
||
|
480x800 |
3:5 |
HTC Desire (G7)、HTC A9191 、HTC 雙擎T9199 |
|
HTC A9191、HTC Desire HD (G10) 、HTC Desire Z |
||
|
HTC Incredible S (S710e)、 HTC EVO 4G、三星 I9003 |
||
|
三星 I9010、三星 I9088、三星 I909、三星 I9088、三星I9000 |
||
|
三星I909 (SPhone)、三星I9020、三星T959、三星W899 |
||
|
酷派N930、Google Nexus S、、酷派 N930、戴爾Venue |
||
|
聯想W101 樂phone (1.6系統非原生)、中興 V9E、中興 V880 |
||
|
聯想W100樂phone(1.6)、聯想C101、夏普 SH8128 、 |
||
|
夏普 SH7218U(新機)、Motorola A1680、華爲 U8800 |
||
|
戴爾Mini5 (Streak) 、Google Nexus One (G5) |
||
|
600x1024 |
75:128 |
三星 Galaxy P1000 |
|
480x854 |
|
Motorola XT702、Motorola XT711 |
|
Motorola ME722 (里程碑2)、Motorola XT800 |
||
|
Motorola ME811 (Droid X)、Motorola ME525 |
||
|
Motorola XT800+ 、Motorola XT806Ix |
||
|
索尼愛立信 X10i |
圖三 Android屏幕物理尺寸規格
屏幕物理尺寸3.2、3.5、3.75、4.0、4.3、5.0、7、9.3、10.1
![[轉載]dp和px，那些不得不吐槽的故事——Android平臺圖](https://pic1.xuehuaimg.com/proxy/csdn/http://s9.sinaimg.cn/bmiddle/6499f8f1hbd7b8d3f2e88&690)
爲了更好的描述這種多樣化引發的問題，我們需要引入一個新的概念density，也就是密度。它指的是在一定尺寸的物理屏幕上顯示像素的數量，一般使用dpi(dots per inch，每英寸像素數)作爲單位。比如一臺分辨率爲240x320，屏幕物理尺寸爲1.5英寸x2英寸的手機，他的密度可以用分辨率/尺寸，240/1.5或者320/2，密度爲160dpi。對於用戶來說，密度越大的屏幕顯示效果越精細，因爲每英寸顯示的像素數量更多。
如果是要使用px和pt給程序貼圖，假設生成了一條240px的直線，在240*320的屏幕上剛好可以鋪滿，而放到480x800的分辨率下才剛剛到一半的位置。
如果要解決這樣的問題，那麼程序在實現的時候就必須爲每個分辨率都寫一個配置，否則就會出現圖形在低密度的屏幕上顯示的更大，而在高密度的屏幕上顯示的更小。最麻煩的事情在於，一旦出現新的分辨率，所有程序都沒辦法直接運行了。這明顯不符合手機快速發展的客觀規律。
3. 新的搭檔，dp和sp
爲了解決這個問題，Google爲Android引入了一套新的單位dp和sp。
首先登場的是dp，Density Independent Pixel，可以翻譯爲密度無關像素。和px相比，dp在不同密度的屏幕中實際顯示比例將保持一致。根據規定，一個dp相當於160dpi屏幕中的一個px。在320dpi的屏幕中，一個dp相當於2個px。通過這樣的成比例放縮，Android解決了需要多個不同屏幕中的大小顯示問題。
爲了便於對多屏幕進行管理，Android對屏幕密度做了重新的規定，將密度與分辨率綁定起來，如下表
表二 Android屏幕密度
|
密度 屏幕大小 |
Low density (120)ldpi |
Medium density (160)mdpi |
High density (240)hdpi |
Extra high density （320）xdpi |
|
Small screen 2.5寸到3.2寸 |
240x320 |
|
|
|
|
Normal screen 3寸到4.3寸 |
240x400 240x432 |
320x480 |
480x800 480x854 540x960 |
640x960
|
|
Large screen |
480x800 480x854 |
480x800 480x854 |
|
|
具體而言，當屏幕的的分辨率爲320x480時，無論實際的物理尺寸大小，密度都會被設置爲160dpi，也就意味着這個設備上，一行最多可以放置320dp，而對於480x800的設備，只需屏幕尺寸在3寸到4.3寸之間，密度都會被設置爲240dpi，一行同樣可以放置320dp。
因此在開發中，用dp作爲單位，只需要設置一次，就可以適配到多個屏幕上。
同樣，sp，scaled pixels，這個單位也採用了和dp同樣的設計理念，將需要獨立設置的pt轉化爲可以自動適配的sp，從而解決了文字的優化顯示。
4. 設計的疑惑
既然android提供了這麼方便的適配機制，設計師的效果圖也如此驚豔，爲什麼最後實現出來的效果經常會讓人大跌眼鏡，列表的高度不對，文字的大小不對。原因何在呢？
原因也正好出現在設計和實現的單位轉換上。
設計師在設計的過程中，一般仍然採用了px和pt作爲標註單位。根據目前的主流分辨率和發展趨勢來看，我們將480x800定義爲設計圖的基準版本。通過查詢上邊的密度對應表，我們可以看到在這個分辨率下1dp=1.5px。
舉例而言，19px的線條，轉化成dp，應該使用19px/1.5= 12.67，由於dp無法支持小數點，所以一般會增加0.5dp，再四捨五入，變爲13dp。當他顯示到屏幕中的時候，仍然會對應成爲真實的像素13dp*1.5=19.5，最終顯示將會變爲20px。這樣的差異可能會體現在軟件的各個地方，在每一個px都是體驗問題的時代，就變得讓人難以接受了。
看看下錶的對應關係
表三 dp、sp在屏幕中的實際顯示效果（480x800分辨率下測得）
|
sp/dp值 |
實測pt值 |
理論px值 |
修正偏移 |
實測px |
|
1 |
7 |
1.5 |
1.5+0.5 |
2 |
|
2 |
8 |
3 |
1.5x2 |
3 |
|
3 |
9 |
4.5 |
1.5x3+0.5 |
5 |
|
4 |
10 |
6 |
1.5x4 |
6 |
|
5 |
10 |
7.5 |
1.5x5-0.5 |
7 |
|
6 |
12 |
9 |
1.5x6 |
9 |
|
7 |
13.5 |
10.5 |
1.5x7+0.5 |
11 |
|
8 |
14 |
12 |
1.5x8 |
12 |
|
9 |
16.5 |
13.5 |
1.5x9+0.5 |
14 |
|
10 |
17 |
15 |
1.5x10 |
15 |
|
11 |
17 |
16.5 |
1.5x11+0.5 |
17 |
|
12 |
19 |
18 |
1.5x12 |
18 |
|
13 |
20 |
19.5 |
1.5x13-1.5 |
18 |
|
14 |
22 |
21 |
1.5x14+1 |
20 |
|
15 |
23 |
22.5 |
1.5x15+-1.5 |
21 |
|
16 |
25 |
24 |
1.5x16+1 |
23 |
|
17 |
25 |
25.5 |
1.5x17-1.5 |
24 |
|
18 |
26 |
27 |
1.5x18-1 |
26 |
|
19 |
27 |
28.5 |
1.5x19-1.5 |
27 |
|
20 |
28 |
30 |
1.5x20-1 |
29 |
|
21 |
略 |
31.5 |
1.5x21-1.5 |
30 |
|
22 |
略 |
33 |
1.5x22-1 |
32 |
|
23 |
略 |
34.5 |
1.5x23-1.5 |
33 |
|
24 |
略 |
36 |
1.5x24-1 |
35 |
|
25 |
略 |
37.5 |
1.5x25-1.5 |
36 |
|
26 |
略 |
39 |
1.5x26-1 |
38 |
|
27 |
略 |
40.5 |
1.5x27-1.5 |
39 |
|
28 |
略 |
42 |
1.5x28+1 |
41 |
第一列是在android程序中使用的dp/sp單位，第二列是sp實際生成的文字的pt大小，第三列是dp根據密度定義推算出的理論大小，第四列是dp理論大小和實際顯示大小的差距，第五列是dp在手機屏幕上實際顯示的大小。（以上數值都是在480x800的分辨率下測得）
從圖中不難看出，許多在ps中可以輕易實現的線條長度和字體大小在Android的實際顯示中無法正確展示。
5. 啓示和疑問
對於PM和UI設計來說，我們關注的是在Android平臺的開發中，如何保證設計效果被良好的實現。這裏提供兩個解決方案：
1. 使用320x480作爲基礎分辨率，因爲密度和Android定義的標準設備密度一致，均爲160dpi。視覺設計圖上的元素可以和屏幕顯示一一對應，最大程度保障了設計效果和實現的一致性。缺陷是在適配高分辨率時，需要再出一套高分辨率切圖，工作量較大。同時在高分辨率機型上，由於顯示不準確仍然需要調整。
2. 使用480x800作爲基礎分辨率。在設計元素尺寸和間距時，採用系統可以顯示的長度和文字大小，從而保證實現時的RD反覆調試，但是找不到合適大小的尷尬局面。同時，高分辨率資源可以在低分辨率上自動壓縮複用，需要調整的元素相對較少。
Google目前對Android採取的開放式政策，讓它的發展勢頭如火如荼，機型種類衆多。但是高速發展中，爲開發者埋下無數的隱憂。除了文中分析的顯示錯位的問題，還有包括像雙卡雙待，系統數據庫字段修改等問題，也很容易引發程序出現各類奇怪的bug。這也提醒Android產品的設計師和PM注意，需要經常切換各種手機試用，發現其中的問題。
最後，存留有一個疑問，筆者尚未能得到答案。Android在修正0.5像素無法顯示的問題時採用的修正值非常奇怪，並且沒有發現明顯的規律。如有同學清楚，望不吝賜教。