Andriod界面设计的分辨率和尺寸适配全攻略

article/2025/11/9 9:06:15

第一、屏幕尺寸:

一般表示是手机的实际物理尺寸,屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。

比如常见的屏幕尺寸有3.5、3.7、4.2、5.0、5.5、6.0等。

以下是相关的单位术语:

(1), Screen size 屏幕的尺寸,即对角线长度(单位inch-英寸)

(2), Screen density屏幕密度,即单位长度像素点数(pots/inches)

(3), Resolution 分辨率,即屏幕的总像素点数(width * height)

(4), Density-independent pixel (dp)独立像素密度。标准是160dip.即1dp对应1个pixel,计算公式如:px = dp * (dpi / 160),屏幕密度越大,1dp对应 的像素点越多。

 

第二屏幕分辨率:屏幕上显示的像素个数,单位尺寸内像素点越多,显示的图像就越清楚。单位是px,1px=1个像素点。

分辨率720*1280表示手机水平方向的像素为720,垂直方向为1280.

市场上主流分辨率有:480*800、 720*1280、 1080*1920(其他的早该淘汰了,忽略不计)。

特别注意:这里的分辨率和我们ps里面设置的分辨率不是同一个分辨率。

一般设计的时候我们设置PS的分辨率为:72 像素/英寸

app chicun

 

第三、屏幕密度:表示屏幕每英寸有多少个像素。即屏幕像素密度。 单位是dpi

幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。

 

第四、Andriod相关的单位:

px:像素(设计师都知道像素是什么)。

dp:andriod开发中用于描述尺寸和间距。

sp:和dp一样,只是用于描述字号和行距。  这个跟android开发工程师相关。我们设计师只要按照设计的单位 px即可。但是标注的时候,必须采用。

android-分辨率

 

下图为图标的各个屏幕密度的对应尺寸

屏幕密度 图标尺寸
mdpi 48x48px
hdpi 72x72px
xhdpi 96x96px
xxhdpi 144x144px
xxxhdpi 192x192px

下面是目前主流的屏幕密度:

240dpi(480*800px) 、320dpi(720*1280px)、480dpi(1080*1920px)

 

第五、android适配原理

Android手机的程序会寻找最佳界面资源:

1, 排除与设备设置不符合的资源

2, 根据限定词(qualifier)的优先级,按照顺序查找

3, 在限定词下,是否存在资源路径

4, 排除不包含在限定词中的资源路径

5,  继续执行不同的限定词查找,直到找到相应的资源

换句话说:

android会有专门放置适配图片的地方:

drawable—xhdpi、drawable—hdpi、drawable—mdpi、drawable—ldpi

 

第六:PS的设计尺寸

1.一般采用720*1280的来设计。切图可以直接适配720*1280分辨率的机型。当然也可以是1080*1920px

2.720*1280下的切图资源基本可以适配其他机型,有些特殊的切图需要单独适配的,比如icon等。

3.适配480*800的机型,只需要把切图*0.75即可。

4.适配1080*1920机型,只需要把切图*1.5即可。

5.适配1080*1920的时候,不要单独硬生生的将图标放大1.5倍。这就要求在720*1280下画图的时候,尽量采用矢量图形来画      图。比如在720*1280下图图标是48px*48px的时候,适配1080*1920时候,48px*1.5=72px。把矢量图形调整为72px即可。把   切图资源给开发,开发会把切图单独放到xxhdpi的文件目录下,就会自动适配1080*1920的了。

同样要是适配480*800的,48px*0.75=32px,把切图给开发,开发会把切图资源单独放到hdpi的目录下,就会自动适配的。

720*1280下的切图资源,开发是放到xhdpi的目录下的。

注意:大家在设计图片的时候尽量采用偶数来设计。开发可以直接写出来的就尽量不要切图。

 

第七、只需要提供一套标注即可。

原则上需要为不同分辨单独进行标注,但由于开发成本等各种考虑。

 选取320dpi下(分辨率为:720*1280)进行设计,此分辨率下1dp=2px。

设计师要建立相对单位概念,可以直接使用dp标注尺寸、sp标注文字大小;

Andriod官网中就采用相对单位进行标注的。

其他更多关于android 界面设计的教程可以关注25学堂之前发布的APP设计经验:

1、APP产品经理必备的APP线框图工具【Android和iOS】

2、Android设计规范以及android UI kits完整PSD下载

3、Android APP设计教程与终极UI适配秘籍【图文版】

4、Android APP界面标注、尺寸换算和APP标注工具

5、Android移动APP设计字体规范详解


Android APP界面标注、尺寸换算和APP标注工具


众所周知,对追求高还原的移动APP产品来说,移动APP设计稿上的精确尺寸标记是必不可少的的一步。很多设计师都抱怨APP程序员做的效果太差,跟设计图相差太多,你有没有提供最规范的Android APP界面标注尺寸呢? 有没有提供设计师的UI设计规范给程序员呢?

其实,作为一名移动APP设计师,这些我们都应该在于Android程序员沟通好的基础上,尽最大的努力为他们提供最全的设计规范和设计标注、测量等信息。

下面是某安卓设计师的实践和工作总结。值得参考,也可以说是设计 Android APP的最佳实践

1. 画布大小定位 720 x 1280,72 dpi

2. 只使用偶数单位的尺寸,比如 96 px 的列表项高度,16 px 的边距,64 px 的图标边长

3. 只使用 24 pt,28 pt,36 pt 和 44 pt 的字体

4. 设计完成以后,所有尺寸的 px 值除以 2 作为 dp 数值交给工程师

5. 所有字体的 pt 值除以 2 作为 sp 数值交给工程师

6. 所有切图变成三份,分别是原始大小、缩小 1.5 倍,缩小 2 倍,分别作为 xhdpi,hdpi,mdpi 的资源交给工程师

具体的如下图:

Android界面设计入门

 

下面是一些解答你疑问的安卓术语啦!

为什么要选择720*1280来作为设计稿,而且分辨率设置为72

因为 320 dpi 屏幕的分辨率最常见的是 720 x 1280,以这个尺寸作为画布尺寸,是最带感的,这样的设计稿就和应用在最多数的 320 dpi 的机器上运行起来的样子一样。

而且挑密度最大的,因为图片缩小比放大好,放大会失真,选 320 dpi 作为目标屏幕,为其他屏幕提供图片时,只需要缩小。

72 dpi 是 Photoshop 的默认设置,不要改就好,这个数字和后面的换算有关系。

 

Android 4.0 以后的设计规范中建议只使用四种字号,分别是 12 sp,14 sp,18 sp 和 22 sp,这也是 Android framework 用到的全部字号。

下面25学堂根据前辈的一些经验,分享2个安卓字体的换算方式:

 

有两种算法:

算法一

根据 dp 的定义「在 160 dpi 的屏幕上,1 dp 大约等于 1 px」,那么在 320 dpi 的屏幕上,1 dp 约等于 2 px,我们就是为 320 dpi 做的设计,所有 px 值除以 2 就是 dp 值。字体略复杂一点,1 pt = 1 / 72 inch,即在 72 dpi 的画布上,1 pt = 1 px,我们的画布就是 72 dpi,又有 1 sp 约等于 2 px(同 dp 的定义),所以 1 sp = 2 pt,所有 pt 值除以 2 就是 sp 值。

算法二

可以想象是把一个 320 dpi 的手机屏幕放大到了 Photoshop 里,放大倍数是 320 / 72,即手机上的 1 dp,在画布上就是 320 / 72 dp,而 1 dp = 1 / 160 inch,所以在画布上就是 2 / 72 inch,而画布是 72 dpi,所以在画布上就是 2 px,即手机上的 1 dp 对应画布上的 2 px。字体的计算一样,只是多一个在 72 dpi 上,1 pt = 1 px 的转换。

至此,都算清楚了,在这个画布上,px 到 dp,pt 到 sp 都是除以 2 的关系。

最后,给 320 dpi 做的图片,到 240 dpi,160 dpi 上就要分别缩小 1.5 倍和缩小 2 倍。

 

第二部分:常用的一些APP标注工具

第一个:马克鳗

马克鳗 APP标注工具

 

 

第二个:苦逼APPUI设计师的标注切图的利器—PxCook

PxCook虽然25学堂介绍了好几款移动APP的切图工具和标注的工具。

 

第三个:nice – 标记生活的美好 是一款给图片标注的APP。非常棒,值得体验。

年轻人最爱玩的App!App store多次推荐!图片+标签让你的照片时尚时尚最时尚。

给图片打上标签,标签可以是品牌,地点,人物以及任何你想表达的情绪和想法。用标签表达你的快乐与哀愁。

 

第四个:Sketch.app Measure 标注神器

Sketch.app-Measure-标注神器

这是一款Sketch设计软件的插件,只适合苹果电脑使用。

 

下载地址和安装步骤:

1、https://github.com/utom/sketch-measure 下载最新的版本, 并解压;

2、打开 Sketch.app, Menu (菜单) -> Plugins (插件) -> Reveal Plugins Folder… (显示插件文件夹…);

3、将解压的文件夹复制到 Plugins Folder(插件文件夹)



http://chatgpt.dhexx.cn/article/0UZhKucG.shtml

相关文章

移动端界面设计之尺寸篇

画布尺寸: 新建7501334 分辨率72,像素/英寸。 常见的字体大小: 24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。 字体: 中文用苹方黑,英文用San Francisco,如果…

iPhone 界面尺寸以及各种图表尺寸

iPhone界面尺寸 设备屏幕尺寸开发尺寸状态栏高度导航栏高度 tab栏 高度 高宽比 iPhone 4/4S 3.5英寸 320*48040px88px98px0.66 iPhone 5/5S/5C/SE 4英寸320*56840px88px98px0.56 iPhone 6/6S/7/8 4.7英寸375*66740px88px98px0.56 iPhone 6/6s/7/8 5.5英寸414*73654px132px98px…

手机端网页设计尺寸大小

手机端网页设计尺寸大小 对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window XP常见分辨率1024768下我们除掉任务栏,浏览器菜单栏…

手机图标ui设计尺寸:ui设计app图标尺寸规范

手机图标ui设计尺寸:ui设计app图标尺寸规范你都了解了吗?作为一个UI设计,想要自己的页面符合使用习惯,符合标准这些你必须知道,手机图标ui设计尺寸:ui设计app图标尺寸规范如果还有不知道的,快来和庞姿姿一起背!背不下来就收藏,用的时候拿出来看看~ 原型设计尺寸 1、…

Android屏幕尺寸详解

1.重要概念 随着Android厂商对系统的不断定制,Android出现越来越多不同尺寸的手机,由于尺寸和分辨率等不同,从而导致Android的适配成为一个老大难的问题,今天我们就来聊聊Android中的屏幕尺寸。 我们先了解一下几个重要的概念&a…

IOS界面尺寸

点击打开链接 Phone开发中经常用到的控件尺寸大集合 有个网上的介绍很强大,直接搬运过来 Element Size (in points) Window (including status bar) 320 x 480 pts Status Bar (How to hide the status bar) 20 pts View inside window (visible status bar) 32…

ps做手机计算机界面,手机设计!移动设备的界面设计尺寸

刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大、文字该用多大才合适、我要做几套界面才可以?什么七七八八的也着实让人有些头疼。 废话不多说,希望大家耐心看完后,不用再纠结于尺寸相关的东西了~ IOS…

最新App、手机网站尺寸规范—移动设备界面UI设计尺寸规范

app项目的一大难点就是,样式要兼容各种屏幕大小

移动端UI设计尺寸规范以及iPhone尺寸大小

本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。 目录 界面设计尺寸及栏高度边…

UI界面的尺寸规范

一、名词解释 1.DPI (Dots Per Inch): 点数密度。所表示的是每英寸所拥有的点数量。Android特有单位 DPI数值越高,即代表显示屏能够以越高的密度显示图像,从而得出,显示的密度越高,显示器显示的就越真实、越清晰 2.PPI&#xf…

手机APP UI设计尺寸基础知识

从原理开始介绍一下移动端设计尺寸规范初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是…

手机设计尺寸 - iPhone界面尺寸

参考网址: http://www.qijishow.com/down/app-index.htm iPhone界面尺寸 设备分辨率PPI状态栏高度导航栏高度标签栏高度iPhone6 plus设计版 12422208 px401PPI60px132px146pxiPhone6 plus放大版 11252001 px401PPI54px132px146pxiPhone6 plus物理版 10801920 px401P…

安卓屏幕分辨率及UI尺寸详解

1、了解几个概念 (1)分辨率。分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽高”,安卓手机屏幕常见的分辨率有480800、7201280、10801920等。7201280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素。 &…

UI app界面的尺寸规范

UI界面的尺寸规范 上周更了一篇关于Android系统界面设计的尺寸规范,有些小伙伴看了以后存在部分尺寸上的疑问,这次把这些地方简单的解释了一下,顺便把iOS系统规范也加上了,两者可以做一个对比。在这里我要强调的是这是移动端的样…

Android 界面设计尺寸规范

这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏:显示当前界面的名称,包含相应的功能或者页面…

手机端web/app界面设计尺寸规范

手机端web/app界面设计尺寸规范 移动端高清、多屏适配方案 背景 开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。 对于移动端开发而言,为了做到页面高清的效…

Android界面尺寸规范

这样的手机又vivo智能收款机、三星Galaxy A5、华为荣耀等手机。 这样的手机屏幕尺寸是:5寸 即屏幕对角线是5英寸。 计算方法:1280平方+720平方=2156800,结果再开平方=1468.6048,再5,…

【移动端】手机界面的设计尺寸

从设计方面来看,做手机界面设计的尺寸一般分为iPhone和Android两种设备。 Android的常用逻辑分辨率: Android的常用逻辑分辨率:参考屏幕尺寸大全 360 * 640 、 360 * 720、 360 * 740、 360 * 760、 360 * 780、 360 * 800 411 * 731 48…

移动界面尺寸!安卓720*1280界面尺寸规范参考

这样的手机又vivo智能收款机、三星Galaxy A5、华为荣耀等手机。 这样的手机屏幕尺寸是:5寸 即屏幕对角线是5英寸。 计算方法:1280平方+720平方=2156800,结果再开平方=1468.6048,再5&…

搭建nginx代理服务器

搭建nginx代理服务器 原理:1、在proxy-1的nginx.conf主配置文件后添加2、修改proxy-1的子配置文件3、修改存储服务器的一些配置4、启动服务测试: 原理: 通过代理服务器进行访问,减小web1和web2的负担 资源是不直接放在web1和web2下的&#x…