设计师如何为 Android 应用标注尺寸

下面这篇文字是转载来的,版权归原作者所有

—————-

对追求高还原的产品来说,设计稿上的精确尺寸标记是必不可少的。但 Android 生态中各种尺寸和密度不同的设备让这件事情变得麻烦,设计师好不容易搞清楚了什么是 dp ,什么是 sp,但 Photoshop 里没有这些单位啊,还要换算?这就要了命了。

如果你不想搞清楚这件事的来龙去脉,就先拿这个结论去用吧。

设计 Android 应用的最佳实践
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 中各种尺寸单位的介绍,没看过的最好看一下

http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

在 Android 应用设计中涉及到的单位都是密度无关像素(Density-independent Pixels),这个说法太拗口了,通俗点讲,Android 应用设计中只用物理尺寸,类似厘米,英寸这种单位,不用像素。之所以这样,是由于像素在手机领域说不清楚问题,比方说规定列表项高度是 48 px,在 HTC C510e 上看起来就不错,但在三星 Galaxy SIII 上看起来就会非常矮,导致很难看,这是因为这两个机器的屏幕的 dpi 相差很大,前一个大约 160 dpi,后一个大约 320 dpi。这就是手机屏幕不同带来的问题,如果不考虑平板,不同主要是密度不同,而不是尺寸不同,也不是分辨率不同,给设计带来困扰的根本是屏幕密度不同。不幸的是,很少人对这个有概念,通常介绍手机,会说屏幕尺寸,3.5 寸还是 4 寸,会说分辨率,480 x 800 还是 720 x 1280,但通常不会介绍屏幕密度是多少。其实通过尺寸和分辨率可以算出密度来,dpi 的 定义是 dot per inch,即每英寸的像素点,把分辨率和尺寸除一除就能得到。一个不确切的分法是,720 x 1280 的手机很可能接近 320 dpi (Android 里的 xhdpi),480 x 800 的手机很可能接近 240 dpi (Android 里的 hdpi)。

Android 选择的单位是 dp 和 sp,dp 的定义是「在 160 dpi 的屏幕上,1 dp 大约等于 1 px」。这个说法也很拗口,简单点说,1 dp ≈ 1 / 160 inch,他就是物理界的一长度单位。用这个单位设计就统一了,比方说规定列表项高度是 48 dp,在所有手机上看起来都差不多是 48 / 160 inch 那么高,虽然在不同手机上它对应了不一样多的像素点,但这个转换是 Android 手机完成的,每个 Android 手机都得知道在我这 1 dp 对应多少像素。sp 也是同样解释,18 sp 的字在所有手机上看起来应该都差不多大(自己改了字体大小设置的除外)。看到这里,可能有人会想,那岂不是不同手机显示的内容不同。确实是这样,同样一个列表,在 A 手机上只能显示五行,但在 B 个手机上就能显示六行;还是这个列表,在 A 手机上文字左边的留白就显得没有 B 手机多。

铺陈完了,逐条解释开始的最佳实践。

设计师在设计的时候是用不了 dp 的,他不可能拖一个 48 x 48 dp 的框,不可能设置一个 8 dp 的边距,Photoshop 里全是 px。于是我们就只有挑一个特定密度的屏幕,在这个特定密度的屏幕上,dp 和 px 的关系是确定,把设计做了,再把 px 转换成 dp 给工程师。另外有一点是,长度可以乘除一下就解决,图片是不能除的,图片必须手动缩放。

我们挑哪一个密度好呢?答案是挑密度最大的,因为图片缩小比放大好,放大会失真,选 320 dpi 作为目标屏幕,为其他屏幕提供图片时,只需要缩小。而 320 dpi 屏幕的分辨率最常见的是 720 x 1280,以这个尺寸作为画布尺寸,是最带感的,这样的设计稿就和应用在最多数的 320 dpi 的机器上运行起来的样子一样。当然你可以选其他画布大小,但再大也不见得方便,这个大小也够施展了。72 dpi 是 Photoshop 的默认设置,不要改就好,这个数字和后面的换算有关系。

字体的问题,Android 4.0 以后的设计规范中建议只使用四种字号,分别是 12 sp,14 sp,18 sp 和 22 sp,这也是 Android framework 用到的全部字号。我们需要找到在这个画布上,这些字号和 pt 的对应关系,以及,px 和 dp 的对应关系。有两种算法:

  • 算法一
    根据 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 倍。120 dpi 的机器已经很罕见,可以不考虑了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值