android dp sp px_设计规范 | Android系统

762e9813d3a1b955fcfe9813c377d764.png

一、基础概念

1.1 屏幕尺寸

屏幕尺寸指的是手机屏幕的物理尺寸,一般用屏幕对角线长度表示,以英寸(inch)为单位。如,小米M4尺寸为5英寸。

1.2 屏幕密度

由于Android属于开源系统,任何用户、开发者、运营商都可以对Android进行专属定制,因此导致国内安卓手机尺寸众多,然而设计稿适配所有设备是不切实际的。

为了解决这个问题,谷歌通过对手机屏幕密度区域的划分,很好的解决了手机屏幕碎片化的问题,设计师可以通过屏幕密度计算公式,计算出屏幕密度,得出界面尺寸的倍率,从而更好的切图标注和系统适配等工作。

以下是安卓手机密度划分和有代表性的分辨率。

f99535ddb1d3d48cac4798750cc846d7.png

如,小米M4手机,屏幕宽高为1080*1920px,屏幕尺寸为5英寸,即为屏幕斜对角线长。

屏幕密度 = √(1080^2+1920^2)/ 5 = 440dpi。

附注:(1)表格中的屏幕密度为Android设立的密度划分初始值,一般称为系统密度,而根据小米M4计算出来的屏幕密度,一般称为实际密度,代表屏幕真实的细腻程度;

(2)Android对界面元素进行缩放的比例依据的是系统密度,而非实际密度;

(3)目前主流安卓手机尺寸主要为720*1280px、1080*1920px;

1.3 分辨率

分辨率,指整个显示屏的点数,如图片的尺寸为1920*1080px。当分辨率为72dpi时,即72像素/英寸,由于1英寸=25.4mm。

所以:72÷25.4=2.834≈2.8像素/mm。

提起分辨率,我们需要了解两个概念,图像分辨率和输出分辨率。

图像分辨率,是指每英寸图像内的像素点数,以ppi为单位,如640*480px、960*1280px,一般被用于ps、ai等设计软件中,用来改变图像的清晰度。

而输出分辨率,是指设备输出图像时每英寸显示的点数,以dpi为单位。

附注:(1)在计算屏幕尺寸时,像素与毫米/英寸不能直接转换,只有在提供分辨率(dpi)下才能转换。

(2)英寸与毫米之间是可以转换的,1英寸=25.4mm。

0ba6d622a5f3e5f2a1f35114e650351c.png

1.4 度量单位与网格

Android设备,除了屏幕尺寸不同,屏幕密度也存在一定的差异,为了简化不同屏幕,可以将设备按照大小和屏幕密度进行分类。

按设备大小分为手机(<600dp)和平板(>=600dp);

按屏幕密度分为LDPI、MDPI、HDPI、XHDPI、XXHDPI;

a5cdc6758b59d8a7f8fe21cea1d10b61.png

二、Android界面规范

2.1 Android常用尺寸 (1)一般将48dp作为可触摸元件(9mm),刚好在触摸控件推荐的大小范围(7-10mm)内,这是用户手指能够准确舒适触摸的最小尺寸; (2)Android界面“icon”可点击区域最小尺寸为48dp; (3)Android界面默认“列表”高度为48dp; (4)Android界面元素之间l留白“最小间距”为8dp; (5)Android界面“按钮”默认高度为40dp; 附注:以上常用尺寸均为@1x尺寸,若设计稿为720*1280px,则所有尺寸均要乘2;

7bdedfc636250287a88fd16266e87826.png

2.2 Android开发单位

DP:安卓长度单位。以160DPI为标注,则1dp=1px。

dp与px换算公式:dp=dpi/160*px;

例,以720*1280px(320dpi)为例,1dp=320/160*px=2px;

SP:安卓字号单位。当屏幕ppi为160时,字体大小为100%,则1sp=1px。

sp与px换算公式:sp=dpi/160*px;

例,以1080*1920px(480dpi)为例,1sp=480/160*px=3px;

附注:(1)规范字号,是为了保证相同字号字体在不同ppi屏幕上显示的物理高度一致;

(2)dp是一种基于屏幕密度的抽象单位,与屏幕密度无关。

(3)Android开发单位涉及到的DPI均为系统密度,是谷歌为了解决碎片化问题划分的,不是人为计算的实际密度。

(4)屏幕密度与分辨率的单位均为dpi,分辨率一般指的是整个显示屏的像素/点数,而屏幕密度指的是每英寸有多少个像素/点数。

2.3 设计稿尺寸 (1)界面尺寸 从目前安卓手机主流市场来看,我们一般用720*1280px作为设计稿尺寸,而1080*1920px一般为“安卓MD”高清界面尺寸。 Sketch苹果电脑用户设计稿尺寸分别为360*640px,540*960px。 (2)界面颜色 蓝色是Android界面的标准颜色,每一种颜色都有对应的深色版本,使用不同颜色只是为了强调信息。

952a7aa23337f150bb412207c5bb282d.png

(3)控件尺寸

720*1280px:状态栏为48px,导航栏为96px,标签栏为96px。

1080*1920px:状态栏为72px,导航栏为144px,标签栏为144px。

附注:(1)Android导航栏、标签栏尺寸可以自定义;

(2)安卓尺寸规范众说纷纭,为了保持界面尺寸规范,小编平时做的720p安卓页面,状态栏高度都设置为48px,1080p的状态栏高度为72px;

(4)图标尺寸

Android的图标相对iOS来说比较少,我们只需提供几个尺寸就可以了,但是需要提高2套,圆角和直角各一套,因为有的地方都会用到。

Android上的启动icon最小尺寸均为48dp,那么在xhdpi上图标大小为96px。

在720*1280px的设备上,安卓的按钮(登录注册)和弹出层的最小范围为240*80px,换算为工程师尺寸为120*40dp。

附注:(1)所有控件图层都是基于形状工具绘制的,每个控件的大小尽量能被4整除,并将其转化为智能对象,那么在控件放大/缩小时不用担心虚边问题;

(2)在应用商店中启动icon尺寸必须为256dp;

(3)需要保证界面图标的一致性,如Android的分享图标与iOS的分享图标;

(5)设计字体

Android 5.0之前,中文字体为Droid SansFallback,英文字体为Roboto。

Android 5.0之后,中文字体为思源黑体,英文字体为Roboto。

三、切图标注

Android界面尺寸众多,我们一般以720*1280px为基准尺寸。

3.1 切图

3.1.1 命名规则

(1)在图片的命名中不要有中文、特殊符号以及空格,子母必须为小写子母; (2)每个页面主要功能基本包括nav、tab、toolbar、menu; 命名方式:1、模块_类别_功能_状态.png;2、组件_类别_功能_状态.png;

3.1.2 注意事项

(1)切图需要提供720p和1080p,分别放在不同的文件夹,同一张不同尺寸的素材,名字必须保持一致; (2)图片需要拉伸/平铺,使用点9图进行制作,详情在“设计规范 | iOS系统”中查看; (3)iOS的切图有@2x和@3x之分,而Android的切图根据dpi的不同进行密度区域划分,分为ldpi、mdpi、hdpi、xhdpi、xxdpi。

3.1.3 切图工具

切界面,推荐使用摹客、蓝湖、墨刀等主流软件,一款可以智能标注、一键切图、多样批注、交互原型; 切图标,推荐使用Cutterman,可以选择切不同尺寸大小的图标;

6b6ffa0e4885c9622bd24cb0a1708e34.png

苹果@2x手机的屏幕密度与安卓XHDPI的屏幕密度比较接近;

而iOS系统750*1334px的@2x切图资源与Android系统XXHDPI(1080*1920px)图标大小一致,均为120*120px,该套切图资源可以通用。

5f724364704331fe48729b63c1d60725.png

3.2 标注

安卓界面尺寸有很多,目前设计稿主要以720*1280px为主。 (1)画布大小定位 720*1280px,72 dpi; (2) 只使用偶数单位的尺寸,如 96px 的列表项高度,32px 的边距,64px 的图标边长; (3) 只使用 24px,28px,36px和44px的字体; (4) 设计完稿后,所有控件的间距、字体的大小除以2作为dp数值交给工程师;

dc917277dfa96cac84faea09ea34bf23.png

c38fa21f8027bc08e55192e456b9b70b.png

四、适配方法

考虑到安卓手机尺寸众多,Android设计稿需要进行相应的适配;

4.1 Android内部适配

第一步:

设计师按720*1280px做设计稿。

(1)除图片外,所有设计元素用矢量路径来做。

(2)图片使用智能对象,方便系统适配时的放大与缩小。

(3)定稿后,在720*1280px的设计稿上做标注,输出标注图。

第二步:

对于界面中的图标、控件等元素同时放大1.5倍,生成适配XXHDPI的@3x切图,而HDPI的切图不用单独提供,由开发调试系统自定生成。

对于界面中带圆角的控件按钮,应制作点九图,它是一种特殊的png图片。

第三步:

输出基于XHDPI的@2x切图、@3x切图与界面组件的点九图

4.2 iOS适配Android

在移动设计开发中,开发团队处于项目快速迭代、节省资源的考虑,交互设计以iOS系统的设计为主导,应用于iOS和Android两个平台,最终只用产出一套原型设计。

(1)先建立720*1280px的画布;

(2)制作状态栏,移入iOS@2x状态栏元素;

(3)除图片外,将iOS界面的其他内容直接拖入到Android界面修改(修改文字,修改尺寸,修改对齐,图片需要单独进行计算);

(4)标签栏、导航栏需要根据Android尺寸进行修改;

(5)iOS@2x(750*1334px)适配Android xhdpi(720*1280px):先在ps中进行图像大小调节,后进行画布大小调节,分辨率为72;

ed211da53688ed7f5d4b95e5dc7ba185.png

4.3 内容适配 

在进行Android内部适配,iOS适配Android过程中,需要注意以下几点:

(1)在内容适配过程中,始终要保持等比列缩小/放大不变形;

(2)banner只需等比例缩放;

(3)在同手机倍率中,金刚区图标只用调节彼此之间宽度即可;

(4)倍率相同的界面,文字大小不需要调整;

(5)内容区域界面中的其他元素,需要进行适配前后宽度比例计算,后进行相应的调节即可;

整理不易,点击在看

送你小花花

29f05521a03c8befac5790c355d8ed0c.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 设备上,像素(Pixel)是指显示屏上的最小颜色点,而 dpsppx 则用于描述在不同分辨率的设备上,一个视觉元素的尺寸和位置。 - dp(density-independent pixels):密度无关像素。是一种基于屏幕密度的抽象单位,它可以让布局在不同的设备上有相同的显示效果。1dp 对应的像素数取决于设备的屏幕密度。通常,在设计 UI 时应使用 dp 单位。 - sp(scale-independent pixels):与 dp 类似,但用于描述文字大小。与 dp 不同的是,用户可以在系统设置调整字体大小,因此 sp 的值会随着用户在系统设置调整而发生变化。 - px(pixels):像素。是屏幕上的最小显示单位,1px 对应一个实际的像素点。在设计 UI 时,应该尽量避免使用 px,因为在不同分辨率的设备上会导致 UI 显示效果不一致。 在布局文件,可以使用 dpsp 单位来设置视觉元素的尺寸和位置,例如: ``` <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:padding="8dp" android:text="Hello, world!" /> ``` 在代码,可以使用以下方法将 dpsp 转换为 px: ``` // 将 dp 转换为 px int px = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()); // 将 sp 转换为 px int px = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值