dp和px,那些不得不吐槽的故事——Android平台图片文字元素单位浅析
来源:互联网 发布:淘宝taobao.com 编辑:程序博客网 时间:2024/05/22 07:54
原文地址: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
4寸到7寸
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平台图片文字元素单位浅析
- dp和px,那些不得不吐槽的故事——Android平台图片文字元素单位浅析
- dp和px,那些不得不吐槽的故事——Android平台图片文字元素单位浅析
- 纯干货,dp和px,那些不得不吐槽的故事—Android平台图片文字元素单位浅析
- dp和px,那些不得不吐槽的故事——Android平台图
- dp和px,那些不得不吐槽的故事——Android平台图
- Android文字单位dip、dp、px、sp
- Android的px,dp和sp等单位的区别
- Android:px、dp和sp,这些单位的区别~
- android的长度单位 dp px 和sp
- Android中px,dp,sp单位的区别和应用
- Android px、dp和sp单位区别
- Android中的单位:px, dp和sp
- Android 中的长度单位——px/dp/sp
- 图片切换器+dp--->sp--->px 的单位转换器
- android中 px、dp和sp单位详解
- android px、dp和sp,这些单位有什么区别?
- 【Android Util】尺寸单位 dp 和 px 相互转换
- Java日期计算(Calendar类)
- java怎么学习?学习的技巧是什么?为什么要学习java?
- 西米利
- (android 功能代码) android Activity 常用功能设置(全屏、横竖屏等)
- Android system_server进程启动
- dp和px,那些不得不吐槽的故事——Android平台图片文字元素单位浅析
- 首先使人眼界放平
- 感谢折磨你的人[三]
- web.xml文件详解
- JAVA详细运行过程及与平台无关性
- 广东广州广空后勤白癜风医院
- synchronized 详解
- 赵本山再拍乡村爱情 章子怡有望出演女一号
- HDU 1863 畅通工程(prim算法)