纯干货,dp和px,那些不得不吐槽的故事—Android平台图片文字元素单位浅析
感谢蔡沁宇的分享,原文地址:http://blog.sina.com.cn/s/blog_6499f8f101014ipq.html
一个优秀的手机软件,不仅要有精巧的功能,流畅的速度,让人赏心悦目的UI也往往是用户选择的重要理由。作为移动产品的PM,也需要了解一些在UI设计中的基本知识。
1. px和pt,一对好伙伴
在视觉设计中,我们经常会见到以下两个单位: px和磅数pt。
Px ,是英文单词pixel的缩写,意为像素。在设计领域中,像素是用来计算数码影像的一种单位。计算机中显示的图像并非连续的线条组成,而是由许多肉眼看不见的小点组成。如果把把影像放大数倍,会发现这些连续色调其实是由许多色彩相近的小点所组成,这些小点就是构成影像的最小单位“像素”。由于是最小的独立显示单位,px均为整数,不会出现0.5px的情况。
图一 看这个色彩鲜艳的LED灯(原图大小)
图二 你能想象这才是他的本来面目吗?(放大之后)
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
为了更好的描述这种多样化引发的问题,我们需要引入一个新的概念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像素无法显示的问题时采用的修正值非常奇怪,并且没有发现明显的规律。如有同学清楚,望不吝赐教。
纯干货,dp和px,那些不得不吐槽的故事—Android平台图片文字元素单位浅析相关推荐
- dp和px,那些不得不吐槽的故事——Android平台图片文字元素单位浅析 (转)
一个优秀的手机软件,不仅要有精巧的功能,流畅的速度,让人赏心悦目的UI也往往是用户选择的重要理由.作为移动产品的PM,也需要了解一些在UI设计中的基本知识. 1. px和pt,一对好伙伴 在视觉设计中 ...
- android中的尺寸单位是什么,Android中各种长度尺寸单位(dp,dip,px,sp,pt)的区别
dip : device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和 QVGA 推荐使用这个,不依赖像素 ...
- 揭秘百度核心技术:53位专家纯干货分享
2019独角兽企业重金招聘Python工程师标准>>> 揭秘百度核心技术:53位专家纯干货分享 百度--中国互联网三大巨头之一,全球最大的中文搜索引擎,拥有着中国大部分上网者的上网入 ...
- 前端面试题汇总(JavaScript面试纯干货)
前端面试题汇总(JavaScript面试纯干货) 1 闭包 闭包就是能够读取其他函数内部变量的函数 闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数, ...
- html怎么改变图片亮度,纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色 说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
- 安卓dp转px,px转dp方法
dp转px: /*** 根据手机的分辨率从 dp 的单位 转成为 px(像素)*/public static int dip2px(Context context, float dpValue) {f ...
- 星淘惠跨境:100%纯干货分享,五个要点教你打造亚马逊爆款
星淘惠跨境:100%纯干货分享,五个要点教你打造亚马逊爆款 跨境电商,是这两年被提起最多的词,提起跨境电商就不得不提起亚马逊,亚马逊作为当下主流电商平台,全球用户超2亿,Prime会员超1.12亿,很 ...
- class转java_[拒绝套路,纯干货]这一百多道 Java 基础问题你掌握了吗?
码农每日一题长按关注,工作日分享一些技术知识点. [每日一题]Java 基本数据类型基础面试题 [每日一题]Java 包装类型装箱拆箱基础面试题 [每日一题]Java 字符串(Part 1)相关面试题 ...
- 设计中涉及到的dip、dp、px、sp等单位说明
在进行UI设计中常会遇到各种数值单位,开始使用时也常搞混,于是搜集了单位解说的文章与大家一同分享 dip: device independent pixels(设备独立像素). 不同设备有不同的显示效 ...
- dp,px,pt,sp 的区别 以及dp 和 px 互转
dp = dip : device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不 ...
最新文章
- pcf8574c语言测试程序,PCF8563驱动程序(C语言版)
- 系统架构性能问题诊断及优化思路,纯干货!
- 第三十四课.模糊神经网络
- 论述Linux文件系统,linux文件系统概述
- C++,那些可爱的小陷阱(三)
- Velocity模板引擎的简单使用
- android Animator详解
- linux读写文件 简单版
- 结对项目——Subway
- 例7.8 分析下列程序的输出结果。《计算机等级考试二级C++语言》
- 2021 年全国大学生数据统计与分析竞赛
- css table 合并单元格
- CWMP\TR069协议学习随笔1——入门基础知识及环境搭建
- 卧槽!字节跳动的面试算法题,实在太变态了
- matlab高尔顿板钉试验,高尔顿钉板试验动态图形软件的设计与制作
- PMP 风险应对措施 :规避和减轻的区别
- 大众与以色列前情报头子组建网络安全公司
- 道闸系统 无法连接消息服务器,道闸系统常见故障处理
- java kryo_java kryo序列化与反序列化
- 如何做好一名合格的项目组长
热门文章
- 高通Hexagon通用计算DSP介绍
- android开发经典实战!来自阿里巴巴佛系安卓程序员的指南,专题解析
- hl7消息介绍_消息格式及编码规则-HL7协议学习笔记(转)
- Ubuntu18.04添加vim配置
- 数据库系统的结构和组成
- php干货网,php高手干货【必看】
- uclinux 嵌入式linux,2017最新嵌入式操作系统uCLinux分析
- 怎样将jpg、png制作成windows桌面ico图标文件
- 【其他】VirtualBox压缩磁盘占用空间
- 计算机的格式刷,“excle怎样取消格式刷“电脑上格式刷怎么用excel2000