纯干货,dp和px,那些不得不吐槽的故事—Android平台图片文字元素单位浅析

本文主要是介绍纯干货,dp和px,那些不得不吐槽的故事—Android平台图片文字元素单位浅析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

感谢蔡沁宇的分享,原文地址:http://blog.sina.com.cn/s/blog_6499f8f101014ipq.html

一个优秀的手机软件,不仅要有精巧的功能,流畅的速度,让人赏心悦目的UI也往往是用户选择的重要理由。作为移动产品的PM,也需要了解一些在UI设计中的基本知识。

 

1. pxpt,一对好伙伴

在视觉设计中,我们经常会见到以下两个单位: px和磅数pt

P,是英文单词pixel的缩写,意为像素。在设计领域中,像素是用来计算数码影像的一种单位。计算机中显示的图像并非连续的线条组成,而是由许多肉眼看不见的小点组成。如果把把影像放大数倍,会发现这些连续色调其实是由许多色彩相近的小点所组成,这些小点就是构成影像的最小单位“像素”。由于是最小的独立显示单位,px均为整数,不会出现0.5px的情况。

 

图一 看这个色彩鲜艳的LED灯(原图大小)

[转载]dp和px,那些不得不吐槽的故事——Android平台图

图二 你能想象这才是他的本来面目吗?(放大之后)

[转载]dp和px,那些不得不吐槽的故事——Android平台图

 

Pt,则是point的缩写,一般音译为磅数,也有人直译为点数,请大家自行转换。这是使用在印刷领域的单位,一磅等于1/72英寸。在国际上一般会用pt作为字体的单位。

一般情况下,设计师们采用px来进行标注设计图中的图形,用pt来标注文字。在过去很多年的视觉设计中,pxpt的配合堪称天衣无缝,把PC打扮得花枝招展,堪称史上最佳配合的好伙伴。

 

2. 那些年,我们一起追过的Android

在突如其来的移动互联网时代,pxpt的配合变得不那么和谐。原因就在于Android携众高矮不一,胖瘦各异的爱妃来到世人面前,给他们化妆就变成横看成岭侧成峰,远近高低各不同了。

由于GoogleAndroid的开放政策,使得所有厂商都可以加入到智能手机的研发中来。于是乎,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 (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.23.53.754.04.35.079.310.1

[转载]dp和px,那些不得不吐槽的故事——Android平台图

为了更好的描述这种多样化引发的问题,我们需要引入一个新的概念density,也就是密度。它指的是在一定尺寸的物理屏幕上显示像素的数量,一般使用dpi(dots per inch,每英寸像素数)作为单位。比如一台分辨率为240x320,屏幕物理尺寸为1.5英寸x2英寸的手机,他的密度可以用分辨率/尺寸,240/1.5或者320/2,密度为160dpi。对于用户来说,密度越大的屏幕显示效果越精细,因为每英寸显示的像素数量更多。

如果是要使用pxpt给程序贴图,假设生成了一条240px的直线,在240*320的屏幕上刚好可以铺满,而放到480x800的分辨率下才刚刚到一半的位置。

如果要解决这样的问题,那么程序在实现的时候就必须为每个分辨率都写一个配置,否则就会出现图形在低密度的屏幕上显示的更大,而在高密度的屏幕上显示的更小。最麻烦的事情在于,一旦出现新的分辨率,所有程序都没办法直接运行了。这明显不符合手机快速发展的客观规律。

 

3. 新的搭档,dpsp

为了解决这个问题,GoogleAndroid引入了一套新的单位dpsp

首先登场的是dpDensity Independent Pixel,可以翻译为密度无关像素。和px相比,dp在不同密度的屏幕中实际显示比例将保持一致。根据规定,一个dp相当于160dpi屏幕中的一个px。在320dpi的屏幕中,一个dp相当于2px。通过这样的成比例放缩,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
4寸到7寸

480x800

480x854

480x800

480x854

 

 

具体而言,当屏幕的的分辨率为320x480时,无论实际的物理尺寸大小,密度都会被设置为160dpi,也就意味着这个设备上,一行最多可以放置320dp,而对于480x800的设备,只需屏幕尺寸在3寸到4.3寸之间,密度都会被设置为240dpi,一行同样可以放置320dp

因此在开发中,用dp作为单位,只需要设置一次,就可以适配到多个屏幕上。

同样,spscaled pixels,这个单位也采用了和dp同样的设计理念,将需要独立设置的pt转化为可以自动适配的sp,从而解决了文字的优化显示。

4. 设计的疑惑

既然android提供了这么方便的适配机制,设计师的效果图也如此惊艳,为什么最后实现出来的效果经常会让人大跌眼镜,列表的高度不对,文字的大小不对。原因何在呢?

原因也正好出现在设计和实现的单位转换上。

设计师在设计的过程中,一般仍然采用了pxpt作为标注单位。根据目前的主流分辨率和发展趋势来看,我们将480x800定义为设计图的基准版本。通过查询上边的密度对应表,我们可以看到在这个分辨率下1dp=1.5px

举例而言,19px的线条,转化成dp,应该使用19px/1.5= 12.67,由于dp无法支持小数点,所以一般会增加0.5dp,再四舍五入,变为13dp。当他显示到屏幕中的时候,仍然会对应成为真实的像素13dp*1.5=19.5,最终显示将会变为20px。这样的差异可能会体现在软件的各个地方,在每一个px都是体验问题的时代,就变得让人难以接受了。

看看下表的对应关系

表三 dpsp在屏幕中的实际显示效果(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. 启示和疑问

对于PMUI设计来说,我们关注的是在Android平台的开发中,如何保证设计效果被良好的实现。这里提供两个解决方案:

1. 使用320x480作为基础分辨率,因为密度和Android定义的标准设备密度一致,均为160dpi。视觉设计图上的元素可以和屏幕显示一一对应,最大程度保障了设计效果和实现的一致性。缺陷是在适配高分辨率时,需要再出一套高分辨率切图,工作量较大。同时在高分辨率机型上,由于显示不准确仍然需要调整。

2. 使用480x800作为基础分辨率。在设计元素尺寸和间距时,采用系统可以显示的长度和文字大小,从而保证实现时的RD反复调试,但是找不到合适大小的尴尬局面。同时,高分辨率资源可以在低分辨率上自动压缩复用,需要调整的元素相对较少。

Google目前对Android采取的开放式政策,让它的发展势头如火如荼,机型种类众多。但是高速发展中,为开发者埋下无数的隐忧。除了文中分析的显示错位的问题,还有包括像双卡双待,系统数据库字段修改等问题,也很容易引发程序出现各类奇怪的bug。这也提醒Android产品的设计师和PM注意,需要经常切换各种手机试用,发现其中的问题。

最后,存留有一个疑问,笔者尚未能得到答案。Android在修正0.5像素无法显示的问题时采用的修正值非常奇怪,并且没有发现明显的规律。如有同学清楚,望不吝赐教。

这篇关于纯干货,dp和px,那些不得不吐槽的故事—Android平台图片文字元素单位浅析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1018012

相关文章

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

C++从序列容器中删除元素的四种方法

《C++从序列容器中删除元素的四种方法》删除元素的方法在序列容器和关联容器之间是非常不同的,在序列容器中,vector和string是最常用的,但这里也会介绍deque和list以供全面了解,尽管在一... 目录一、简介二、移除给定位置的元素三、移除与某个值相等的元素3.1、序列容器vector、deque

C++常见容器获取头元素的方法大全

《C++常见容器获取头元素的方法大全》在C++编程中,容器是存储和管理数据集合的重要工具,不同的容器提供了不同的接口来访问和操作其中的元素,获取容器的头元素(即第一个元素)是常见的操作之一,本文将详细... 目录一、std::vector二、std::list三、std::deque四、std::forwa

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现