展开

以英寸(inch)为单位-用户体验设计

网络

很多 设计师和工程师都被安卓设备纷繁的屏幕搞得晕头转向,我既做界面设计,也做过一点安卓UI布局,刚好对这块内容比较熟悉,也曾在公司内部做过相关的讲座,在此,我将此部分知识重新梳理出来分享给大伙儿 !

1、了解几个概念

(1)分辨率。分辨率确实是 手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800、720×1280、1080×1920等。720×1280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素。

(2)屏幕大小。屏幕大小是手机对角线的物理尺寸,以英寸(inch)为单位。比如某某手机为“5寸大屏手机”,确实是 指对角线的尺寸,5寸×2.54厘米/寸=12.7厘米。

(3) 密度(dpi,dots per inch;或PPI,pixels per inch)。从英文顾名思义,确实是 每英寸的像素点数,数值越高所以 显示越细腻。假如我们懂一部手机的分辨率是1080×1920,屏幕大小是5英寸,UI设计公司,你 能否算出此屏幕的密度呢?哈哈,中学的勾股定理派上用场啦!通过宽1080和高1920,依照 勾股定理,我们得出对角线的像素数大约是2203,那么用 2203除以5确实是 此屏幕的密度了,计算结果是440。440dpi的屏幕基本相当细腻了。

技术分享

2、实际密度与系统密度

尚未发现他处使用“实际密度”和“系统密度”这两个词汇,暂时由我如此定义吧。

“实际密度”确实是 我们自己算出来的密度,那个 密度代表了屏幕真实的细腻程度,如上述例子中的440dpi确实是 实际密度,讲 明这块屏幕每寸有440个像素。5英寸1080×1920的屏幕密度是440,而相同分辨率的4.5英寸屏幕密度是490。如此看来,屏幕密度将会出现特别 多数值,呈现严重的碎片化。而密度又是安卓屏幕将UI进行缩放显示的依据,那么安卓是如何适配这么多屏幕的呢?

其 实,每部安卓手机屏幕都有一个初始的固定密度,这些数值是120、160、240、320、480,我们权且称为“系统密度”。大伙儿 发现规律没有?相隔数 值之间是2倍的关系。一般情况下,240×320的屏幕是低密度120dpi,即ldpi;320×480的屏幕是中密度160dpi,即 mdpi;480×800的屏幕是高密度240dpi,即hdpi;720×1280的屏幕是超高密度320dpi,即xhdpi;1080×1920的 屏幕是超超高密度480dpi,即xxhdpi。

安卓对UI元素进行缩放的比例依据正是系统密度,而不是实际密度。

技术分享

3、一个重要的单位dp

dp 也可写为dip,即density-independent pixel。你能够 想象dp更类似一个物理尺寸,比如一张宽和高均为100dp的图片在320×480和480×800的手机上“看起来”一样大。而实际 上,它们的像素值并不一样。dp正是如此 一个尺寸,不管那个 屏幕的密度是多少,屏幕上相同dp大小的元素看起来始终差不多大。

另外,文字尺寸使用sp,即scale-independentpixel的缩写,如此 ,当你在系统设置里调节字号大小时,应用中的文字也会随之变大变小。

技术分享

4、dp与px的转换

在安卓中,系统密度为160dpi的中密度手机屏幕为基准屏幕,即320×480的手机屏幕。在那个 屏幕中,1dp=1px。

100dp 在320×480(mdpi,160dpi)中是100px。那么100dp在480×800(hdpi,240dpi)的手机上是多少px呢?我们懂 100dp在两个手机上看起来差不多大,依照 160与240的比例关系,我们能够 懂,在480×800中,100dp实际覆盖了150px。因此,假如 你为mdpi手机提供了一张100px的图片,这张图片在hdpi手机上就会拉伸至150px,然而 他们基本上 100dp。

中 密度和高密度的缩放比例大概 能够 不通过160dpi和240dpi计算,而通过320px和480px也能够 算出。然而 按照宽度计算缩放比例不适用于超高 密度xhdpi和超超高密度xxhdpi了。即720×1280中1dp是多少px呢?假如 用720/320,你会得出1dp=2.25px,实际如此 算 出来是不对的。dp与px的换算要以系统密度为准,720×1280的系统密度为320,320×480的系统密度为160,320/160=2,那么在 720×1280中,1dp=2px。同理,深圳UI设计,在1080×1920中,1dp=3px。

大伙儿 能够 记住下面那个 比例,dp与px的换算就十分easy啦!

ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12, 我们发现,深圳交互设计公司,相隔数字之间依然 2倍的关系。计算的时候,以mdpi为基准。比如在720×1280(xhdpi)中,1dp等于多少px呢?mdpi是 4,xhdpi是8,2倍的关系,即1dp=2px。反着计算更重要,比如你用PhotoShop在720×1280的画布中制作了UI效果图,两个元素 的间距是20px,那要标注多少dp呢?2倍的关系,那确实是 10dp!

技术分享

当安卓系统字号设为“普通”时,sp与px的尺寸换算和dp与px是一样的。比如某个文字大小在720×1280的PS画布中是24px,那么告诉工程师,那个 文字大小是12sp。

5、建议在xdhpi中作图

安卓手机有这么多屏幕,我到底依据哪种屏幕作图呢?没有必要为不同密度的手机都提供一套素材,大部分情况下,一套就够了。

现 在手机比较高的分辨率是1080×1920,你能够 选择那个 尺寸作图,深圳UI设计公司,然而 图片素材将会增大应用安装包的大小。同时 尺寸越大的图片占用的内存也就越高。如 果你不是设计ROM,而是做一款应用,我建议大伙儿 用PS在720×1280的画布中作图。那个 尺寸兼顾了美观性、经济性和计算的简单。美观性是指,以那个 尺寸做出来的应用,在720×1280中显示完美,在1080×1920中看起来也比较清晰;经济性是指,那个 分辨率下导出的图片尺寸适中,内存消耗可不能 过高,同时 图片文件大小适中,安装包也可不能 过大;计算的简单,确实是 1dp=2px啊,多好计算啊!

做出来的图片,记着让UI工程师放进drawable-xhdpi的资源文件夹中。

6、屏幕的宽高差异

在 720×1280中作图,要考虑向下兼容不同的屏幕。通过计算我们能够 懂,320×480和480×800的屏幕宽度基本上 320dp,而 720×1280和1080×1920的屏幕宽度基本上 360dp。它们之间有40dp的差距,这40dp在设计中妨碍 依然 特别 大的。如下图蝴蝶图片距离屏幕 的左右边距在320dp宽的屏幕和360dp宽的屏幕中就不一样。

技术分享

不仅宽度上有差异,高度上的差异更加明显。关于 天气等工具类应用,由于UI一般是独占式的,更要考虑屏幕之间的比例差异。

技术分享

如 果想消除这些比例差异,深圳UI设计,能够 通过添加布局文件来实现。一般情况下,布局文件放在layout文件夹中,假如 要单独对360dp的屏幕进行调整,你能够 单做 做一个布局文件放在layout-w360dp中;只是,最好是默认针对360dp的屏幕布局(较为主流),然后对320dp的屏幕单独布局,将布局文件 放到layout-w320dp中;假如 你想对某个特殊的分辨率进行调整,那么你能够 将布局文件放在标有分辨率的文件夹中,如layout-854×480。

7、几个资源的文件夹

在 720×1280中做了图片,要让开发人员放到drawable-xhdpi的资源文件夹中,如此 才能够 显示正确。个人认为仅提供一套素材就能够 了,能够 测试一下应用在低端手机上运行是否流畅,假如 比较卡顿,能够 依照 需要提供部分mdpi的图片素材,因为xhdpi中的图片运行在mdpi的手机上会比较占 内存。

以应用图标为 例,xhdpi中的图标大小是96px,假如 要单独给mdpi提供图标,那么那个 图标大小是48px,放到drawable-mdpi的资源文件夹中。各 个资源文件夹中的图片尺寸同样符合ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12的规律。

技术分享

如 果你把一个高2px的分割线素材做成了9.png图片,你想让细线在不同密度中基本上 2px,而不被安卓依照 密度进行缩放,怎样办?你能够 把那个 分割线素材 放到drawable-nodpi中,那个 资源文件夹中的图片,将按照实际像素大小进行显示,而可不能 被安卓依照 密度进行缩放。即在mdpi中细线是 2px(2dp),在xhdpi中细线是2px(1dp)。

以上是对安卓屏幕的初步总结,疑惑你看完后是豁然活泼 ,依然 一头雾水?这篇文章要紧 为了实用起见,避开了过多深入的分析,假如 你还有什么疑咨询 ,能够 留言。

----------------------------------------------------------

最后补充一下,很多 朋友咨询 我安卓平板的设计,提到最多的是1280×800的分辨率,那个 分辨率的平板一般是10.1寸的中密度屏幕,直截了当 在PS中建立1280×800的画布,提取之后的素材让开发放到drawable-mdpi中即可。同时 中密度的平板中,1dp=1px,比较好换算单位。

界面设计师不可不知的安卓屏幕知识

Copyright © 2007-2015 深圳市墨默交互科技有限公司 版权所有 粤ICP备11068991号