原文地址:http://blog.sina.com.cn/s/blog_6499f8f101014ipq.html
一個優秀的手機軟件,不僅要有精巧的功能,流暢的速度,讓人賞心悅目的UI也往往是用戶選擇的重要理由。作爲移動產品的PM,也需要了解一些在UI設計中的基本知識。
1.
在視覺設計中,我們經常會見到以下兩個單位:
Px
圖一
圖二
Pt,則是point的縮寫,一般音譯爲磅數,也有人直譯爲點數,請大家自行轉換。這是使用在印刷領域的單位,一磅等於1/72英寸。在國際上一般會用pt作爲字體的單位。
一般情況下,設計師們採用px來進行標註設計圖中的圖形,用pt來標註文字。在過去很多年的視覺設計中,px和pt的配合堪稱天衣無縫,把PC打扮得花枝招展,堪稱史上最佳配合的好夥伴。
2.
在突如其來的移動互聯網時代,px和pt的配合變得不那麼和諧。原因就在於Android攜衆高矮不一,胖瘦各異的愛妃來到世人面前,給他們化妝就變成橫看成嶺側成峯,遠近高低各不同了。
由於Google對Android的開放政策,使得所有廠商都可以加入到智能手機的研發中來。於是乎,Android手機一時間百花齊放,出現了各種不同的手機樣式。比如:
表一
240*320
分辨率 |
比率 |
市場對應手機 |
320×480 |
2:3 |
三星S5830 |
索尼愛立信X8 |
||
Motorola |
||
LG |
||
HTC |
||
夏普 |
||
240x320 |
3:4 |
HTC |
Motorola |
||
華爲 |
||
480x800 |
3:5 |
HTC |
HTC |
||
HTC |
||
三星 |
||
三星I909 |
||
酷派N930、Google |
||
聯想W101 |
||
聯想W100樂phone(1.6)、聯想C101、夏普 |
||
夏普 |
||
戴爾Mini5 |
||
600x1024 |
75:128 |
三星 |
480x854 |
|
Motorola |
Motorola |
||
Motorola |
||
Motorola |
||
索尼愛立信 |
圖三
屏幕物理尺寸3.2、3.5、3.75、4.0、4.3、5.0、7、9.3、10.1
爲了更好的描述這種多樣化引發的問題,我們需要引入一個新的概念density,也就是密度。它指的是在一定尺寸的物理屏幕上顯示像素的數量,一般使用dpi(dots per inch,每英寸像素數)作爲單位。比如一臺分辨率爲240x320,屏幕物理尺寸爲1.5英寸x2英寸的手機,他的密度可以用分辨率/尺寸,240/1.5或者320/2,密度爲160dpi。對於用戶來說,密度越大的屏幕顯示效果越精細,因爲每英寸顯示的像素數量更多。
如果是要使用px和pt給程序貼圖,假設生成了一條240px的直線,在240*320的屏幕上剛好可以鋪滿,而放到480x800的分辨率下才剛剛到一半的位置。
如果要解決這樣的問題,那麼程序在實現的時候就必須爲每個分辨率都寫一個配置,否則就會出現圖形在低密度的屏幕上顯示的更大,而在高密度的屏幕上顯示的更小。最麻煩的事情在於,一旦出現新的分辨率,所有程序都沒辦法直接運行了。這明顯不符合手機快速發展的客觀規律。
3.
爲了解決這個問題,Google爲Android引入了一套新的單位dp和sp。
首先登場的是dp,Density
爲了便於對多屏幕進行管理,Android對屏幕密度做了重新的規定,將密度與分辨率綁定起來,如下表
表二
屏幕大小 |
Low (120)ldpi |
Medium (160)mdpi |
High (240)hdpi |
Extra (320)xdpi |
Small 2.5寸到3.2寸 |
240x320 |
|
|
|
Normal 3寸到4.3寸 |
240x400 240x432 |
320x480 |
480x800 480x854 540x960 |
640x960
|
Large |
480x800 480x854 |
480x800 480x854 |
|
|
具體而言,當屏幕的的分辨率爲320x480時,無論實際的物理尺寸大小,密度都會被設置爲160dpi,也就意味着這個設備上,一行最多可以放置320dp,而對於480x800的設備,只需屏幕尺寸在3寸到4.3寸之間,密度都會被設置爲240dpi,一行同樣可以放置320dp。
因此在開發中,用dp作爲單位,只需要設置一次,就可以適配到多個屏幕上。
同樣,sp,scaled
4.
既然android提供了這麼方便的適配機制,設計師的效果圖也如此驚豔,爲什麼最後實現出來的效果經常會讓人大跌眼鏡,列表的高度不對,文字的大小不對。原因何在呢?
原因也正好出現在設計和實現的單位轉換上。
設計師在設計的過程中,一般仍然採用了px和pt作爲標註單位。根據目前的主流分辨率和發展趨勢來看,我們將480x800定義爲設計圖的基準版本。通過查詢上邊的密度對應表,我們可以看到在這個分辨率下1dp=1.5px。
舉例而言,19px的線條,轉化成dp,應該使用19px/1.5=
看看下錶的對應關係
表三
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.
2.
Google目前對Android採取的開放式政策,讓它的發展勢頭如火如荼,機型種類衆多。但是高速發展中,爲開發者埋下無數的隱憂。除了文中分析的顯示錯位的問題,還有包括像雙卡雙待,系統數據庫字段修改等問題,也很容易引發程序出現各類奇怪的bug。這也提醒Android產品的設計師和PM注意,需要經常切換各種手機試用,發現其中的問題。
最後,存留有一個疑問,筆者尚未能得到答案。Android在修正0.5像素無法顯示的問題時採用的修正值非常奇怪,並且沒有發現明顯的規律。如有同學清楚,望不吝賜教。