一款APP设计的从0到1之:Android设计规范篇

之前 U 妹给大家分享了《 一款 APP 设计的从 0 到 1 之:iOS 篇(精华版) 》,今天 U 妹给大家带来的是 Android 的设计规范篇。
1
Android 的设计规范不同于 iOS,Android 是一个开源的系统,国内外有很多的手机厂商,这就导致了有非常多的 Android 机型,如小米、华为、魅族、三星等,每一家都有自己的操作系统,都有一套自己的 UI 设计规范。
U 妹列了一个小小的目录:
一、基础概念
二、Android 界面设计规范
三、Android 切图标注
四、安卓开发单位换算
五、总结

一、基础概念

1、什么是 DPI?

DPI (Dots Per Inch):每英寸点数,表示指屏幕密度。是测量空间点密度的单位,最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的 DPI 会产生不清晰的图片。
后来 DPI 的概念也被应用到了计算机屏幕上,计算机屏幕一般采用 PPI(Pixels Per Inch)来表示一英寸屏幕上显示的像素点的数量,现在 DPI 也被引入。

安装 Windows 操作系统的电脑屏幕 PPI 的初始值是 96,Mac 的初始值是 72,虽然这个值从 80 年代起就不是很准确了。 一般来说,非 retina 桌面(包括 Mac)的 PPI 的取值区间在 72-120 之间,因为这个取值区间能够确保你的作品在任何地方都能保持大致相同的比例。
这里有一个应用实例: 27 寸 Mac 影院显示屏的 PPI 是 109,这表示在每英寸的屏幕上显示了 109 个像素点。斜角长是 25.7 英寸(65cm),实际屏幕的宽度大概是 23.5 英寸,23.5109 约等于 2560,因此原始屏幕分辨率就是 2560x1440px。

屏幕密度计算公式:

1080x1920px 屏幕密度:

2、什么是 PPI?

PPI (Pixels Per Inch):图像分辨率;是每英寸图像内有多少个像素点,分辨率的单位为 ppi,通常叫做像素每英寸。图像分辨率一般被用于 ps 中,用来改变图像的清晰度。

二、Android 界面设计规范

1、Android 各设备屏幕密度

安卓尺寸众多,按每个屏幕去适配肯定是不现实的。
所以为了解决这个问题,安卓手机屏幕有自己初始的固定密度,安卓会根据这些屏幕不同的密度自己进行适配。这一点内容掌握到能满足自己设计工作需要就可以了……
以下是 Android 的密度划分以及代表的分辨率,这里你可以发现已经和设计稿尺寸和切图输出开始挂钩了。
安卓各屏幕密度

U 妹来带大家了解一下 iPhone 各设备的手机屏幕密度:
iphone 4/4S/5/5S/SE/6/7≈320DPI

2、Android 开发单位 DP 和 SP

DP: 安卓专用长度单位。以 160 DPI 屏幕为标注,则 1DP=1PX
计算公式:dp x dpi/160=px
例:以 720x1280px (320dpi)为例计算 1dp x 320 dpi/=2px
SP: 安卓专用字体单位。以 160 DPI 屏幕为标注,则 1SP=1PX
计算公式:sp x dpi/160=px
例:以 720x1280px (320dpi)为例计算 1sp x 320 dpi/=2px

3、设计稿尺寸

从目前市场主流设备尺寸来看,我们要用 1080 x 1920 PX 来做安卓设计稿尺寸。

以 1080x1920px 作为设计稿标准尺寸的原由:

  • 从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。
  • 大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。
  • 用主流尺寸来做设计稿尺寸,极大的提高了视觉还原和其他机型适配。

所以做安卓设计稿时请以 1080x1920px 来做设计稿
(sketch 用户以 540 x 960 来做设计稿)


界面设计控件尺寸:

4、安卓图标尺寸


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

512x512px
192x192px
144x144px
96x96px
72x72px
48x48px


因为安卓有很多的机型,不同屏幕密度的手机对应的 icon 大小也是不同的,所以 U 妹这里没法给你给出相应的 icon 所被应用的位置。

5、安卓设计字体

英文字体为 Roboto 字体
中文字体为 思源黑体 。在在 Android 5.0 之后,使用的是思源黑体,字体文件有 2 个名称,“source han sans”和“noto sans CJK”。
思源黑体是 Adobe 和 Google 领导开发的开源字体,支持繁简日韩,有 7 种字体粗细。

6、常见主流手机尺寸和分辨率

三、Android 切图标注

1、标注设计稿时,使用 px 还是 dp 或 sp?

答: 这个问题需要和安卓工程师沟通,推荐使用 dp 和 sp 进行标注(这里指的是在安卓设计稿的前提下)。但目前很多设计师对 dp 和 sp 这个单位并不理解,所以有些设计师提供安卓设计稿的时候依旧使用 px 进行标注,这一点去和你的搭档工程师进行沟通,如果不影响他开发以及他能换算清楚的前提下,你可以考虑使用 Px,但是我并不推荐。

这里要记住一点(你只需要记住能帮助你工作就可以):
当屏幕密度为 MDPI(160DPI)时,1dp=1px
当屏幕密度为 MDPI(160DPI)时,1sp=1px
像素字号 = 屏幕密度 /160 * sp 字号 可以根据这个去算算设计稿中的像素字号标注为 sp 是多少,比如 xHDPI 下,36px 的字标注为 sp 就是 18sp,以此类推。
按照不同的屏幕密度换算,也就是下图所示的意思:

2. 你需要提供几套切图资源?

答: 理论状态下,如果你想兼顾到目前还存在的各个机型,应该为不同的密度提供不同尺寸大小的切图。
但这无疑提升了巨大的工作量,而且还可能浪费很大的资源空间,实际上,很多机型已经不占有主流市场了,而且很多奇葩的分辨率也没必要去考虑适配,所以,具体输出几套需要看公司的产品需求而定。
通常我是这么干的:

选取最大尺寸提供一套切图资源,交给开发工程师处理,适配到各个屏幕密度。
这里要注意,这个“最大尺寸”,指的并不是目前市面上 Android 手机出现过的最大尺寸,而是指目前流行的主流机型中的最大尺寸,这样可节省很大的资源空间。关于最大尺寸选取多少,你需要和你们的安卓工程师沟通,每个安卓工程师对这个问题的结论并不同。(我的安卓搭档,让我提供 XXHDPI 的切图资源就好,我用的切图工具是 Cutterman,切图一键搞定)

3. Android 的切图资源提供哪个尺寸给开发哥哥?

答: iOS 的切图有 @2x,@3x 之分,那么 Android 的切图根据 dpi 的不同,其实和 iOS 的类似,只不过是按照 dpi 来进行资源文件夹的命名,如下图:

根据不同的分辨率进行切图归类,但是你看到了,如果切片特别多,提供 5 套切图岂不是要累死了?
一般情况下,我们只需要提供 3 套切图资源就可以满足安卓工程师的适配,分别是 HDPI、XHDPI、 XXHDPI 3 套切图资源。

目前我使用的办法就是只提供最大尺寸的切图,交给安卓工程师自己去缩放适配其他分辨率吧,所以和你的搭档沟通一下。

其实现在绝大多数公司限于人力物力的限制,没有这么严格的工作方式,基本上就是一个文件夹,命名好了就提供给工程师了。
这里还是提醒各位,没有固定的工作方式和方法,任何方式都是为了提升工作效率而进行的。

4. 在做设计稿时我们遇到的最多问题

(1)用哪种尺寸做设计稿?
iOS: 用 750x1334px 来做设计稿。
安卓: 就目前的市场来看,XXHDPI 属于主流机型;这样无论是标注,还是主流机型都能兼顾的到,所以推荐使用 1080x1920px 来做设计稿尺寸,这样即使你标注的是 px,工程师也可以很方便的进行换算。

(2)如何用 iOS 的设计稿去适配安卓(划重点啦)
现在有一种情况现在非常普遍,那就是 一稿两用 ;设计师都是做 IOS 版本的设计稿,来适配安卓,现在要给安卓用,应该怎么办?
iPhone 的屏幕密度已经达到 xHDPI 了,用 750x1334px 的尺寸做设计稿;
实际上, 750×1334 的 @3x 的切图资源正好是安卓 XXhdpi(1080x1920px)的切图资源; 安卓开发用 iOS 的设计稿自己进行换算就可以了,前提是你必须和安卓工程师沟通。

另一种情况:你可以把 750×1334 的设计稿等比例调整尺寸到安卓 1080×1920 尺寸下,对各个控件进行微调,重新提供标注(用 dp 标注)。也就是说,你需要提供两套标注,一套给 iOS 的标注,一套给 Android 的标注。
(3)大家可能还有一个问题,那就是我用 cutterman 切安卓图片输出的有 drawable 和 mipmap 2 个文件夹,到底将哪个给开发工程师呢?

答: 以前用的开发工具,是只有 drawable, 没有 mipmap 的,后来新的开发工具里面才有 mipmap 这个文件夹,专门用来放 png 格式的图片的,不过 drawable 里面还是可以放 png 图片。
所以现在我们给安卓工程师的切图输出文件只需给 mipmap- 前缀开头的就好。

四、Android 开发单位换算

1、安卓机型各种尺寸下的 PX 与 DP、SP 的对应关系

2、字体单位 SP 与 PX 的对应关系

3、距离单位 DP 与 PX 的对应关系

五、总结

关于《一款 APP 设计的从 0 到 1 之:安卓设计规范篇》就全部讲完了,希望可以给你有很大的帮助;U 妹这里说的只是一种工作方法,好的工作方法才能自己事半功倍,在具体工作中也要灵活应用,一定要多和开发沟通交流,良好的沟通才是解决问题的唯一方法,有疑问题也可给 U 妹留言,我们下期再见!

相关阅读

iOS 设计规范回顾:《 一款 APP 设计的从 0 到 1 之:iOS 篇(精华版)

作者:U 妹,一个只分享干货的 UI 设计师,等你,来撩妹哟。微信公众号:UI 妹儿(ID:UIfaner)