移动设计师该了解的Android分辨率

安卓手机千千万,屏幕尺寸也千千万。作为移动端的设计师,仅仅用PS或者AI画出视觉稿,明显是不够的,还应该提供不同屏幕的适配方案。

移动端适配和Web页面适配有相似之处,一般来说,纵向由于可以上下scroll,不需要特别严格的控制,但是横向一般都是确定的,对于不同的宽度,设计师心中应该很清楚自己的设计稿应该如何呈现。对于Web页面,为了适应不同宽度的展现效果,主要会使用Responsive Design的设计技巧。Responsive Deisgn的原理是,宽度变化的小时,通过减少空隙或者按照%来计算宽度,宽度变化太大时,就换一种layout。

安卓端的适配也类似,一般来说,都属于宽度变化较小的情况。但是现在大屏手机层出不穷,为了较好的大屏体验,有时可能也需要layout上的变化。

1. 这里就是100px,为什么程序员不能画出一样宽度的?

不同屏幕上,px和px是不一样大的!要说完全一样宽,那必须是100 Inch或者100 mm这样的单位,才可能表示不同屏幕上的完全对等宽度。可惜现实是,机器只认px。更加糟糕的是,安卓程序员只能使用dp单位。

2. 什么是高清屏

高清屏仅仅是分辨率高?1280*720?错。一个像素1px的大小越小屏幕越清晰。你可以理解每个像素点为一个矩形,越小越好。这里就有另外一个参数,就是像素密度,每英寸里有多少个像素,比如魅族MX2的像素密度就是343ppi,就是说每英寸有343个px。显然,像素密度越高,一个像素越小,屏幕越清晰。

3. 安卓程序员控制的dp单位和px如何换算?

其实这个不重要,仅仅是一些数学计算。重要的是,你可以认为每个dp在不同的设备上一样大

4. 不同手机的宽度有多少dp?

公式为,宽的像素数 / ( 像素密度 / 160 )
计算一下我接触到手机的宽度:

魅族MX2: 800 / (343 / 160) = 373.18 dp

小米2S: 720 / ( 342 / 160 ) = 336.84 dp

三星5S: 1080 / ( 432 / 160 ) = 400 dp

可以看到,三星的5S要比小米宽了约20%。如果直接用px像素数计算区别,恐怕程序员永远也实现不了你的设计稿。

5. 高度需要考虑嘛?

如果你的设计需要认真的考虑高度,其实是同理的,按照计算dp的方式,计算出手机的宽和高的dp,然后决定在不同长宽比的情况下,layout如何自动适应。

6. 如何告诉程序员尺寸?

最好是能直接说dp数是多少。

在PS中,设计师一般拖一个1280*720的canvas直接就画了,然后跟程序员说,这个是多少多少px。程序员抓了半天头发,想了半天,要么根据宽度,重新算一遍得到dp,要么就完全凭感觉吧。。

在实践中,一些设计师会以320ppi, 1280*720的屏幕参数作为基准,此时,一个2px = 1dp,这时设备宽度为360dp。这个仅仅是大致的估算,对于小米2s和MX2的适配可以差不多近似。

7. 更好的告诉程序员尺寸的方法

我个人认为,设计师无论画布有多大,在最终导出的标注图时,可以让标注图的px宽度值为一个实际手机的dp宽度值。例如,为小米2S的导出一张宽336px的图,为魅族MX2的导出一张宽为373px的图,看看两张图的效果。

不过,这样,导出的两张图中的细节尺寸不一样大呀?这时候,对于固定px宽度的元素,设计师就要以某个宽度为准,标注以后,另外一张图在实现的时候,细节尺寸也按这个来,中间的空隙可以自由伸缩。

程序员看到这样的标注图,也很轻松,因为直接认为1px=1dp了,不用换算,直接写就行。

One thought on “移动设计师该了解的Android分辨率

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>