本文主要是介绍纯干货,dp和px,那些不得不吐槽的故事—Android平台图片文字元素单位浅析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
感谢蔡沁宇的分享,原文地址: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像素无法显示的问题时采用的修正值非常奇怪,并且没有发现明显的规律。如有同学清楚,望不吝赐教。
这篇关于纯干货,dp和px,那些不得不吐槽的故事—Android平台图片文字元素单位浅析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!