第四篇 Android界面设计规范

在B612上发芽

北京/UX设计师/5年前/3361浏览

版权

第四篇 Android界面设计规范

在B612上发芽

本文讲述Android端设计中分辨率选择、元素尺寸、文字大小及间距、切图标注等内容

一、目前Android手机的分辨率与尺寸

1、主流分辨率调研

众所周知，安卓手机的分辨率是比较复杂的，每个品牌都有自己的产品定位和设计规范，所以很难像iOS那样有个统一的趋势，但我们可以总结一个主流产品的分辨率以供参考。

下图是在199IT上得到的2019年手机品牌的关注度与购买排名，我们看到的这些产品都是我们所熟知的品牌，品牌关注度上华为仍然稳居第一，消费单品购买量上荣耀系列排名比较靠前。

(图片来源199IT)

以下是199IT针对消费者最关注的这10大品牌汇总的2019年发布的主要机型。从各品牌新品发布数量以及价位段分布可以看出其对自身品牌的定位以及对市场变化趋势的认识。

(图片来源199IT)

我们在针对于2019年主要机型整理出尺寸与分辨率图后发现4倍分辨率的机型增多，目前设备尺寸除了折叠屏都稳定到6~7英寸之间，分辨率为3倍分辨率，以1080为宽，高的尺寸2340、2400居多（设计稿中3倍分辨率以1080 x 1920为设计尺寸），所以设计的时候需要注意高度会带来设计的变化。

2、Android主流分辨率

Android机分辨率这么多，设计时我们通过“倍率”来进行分辨率的分类与适配，安卓端常用的DPI有LDPI、MDPI、HDPI、XHDPI、XXHDPI与为适应高分辨率产生的XXXHDPI。我们的基准线为MDPI 160dpi，为1倍率图，目前设计稿还是以XHDPI 320dpi，2倍分辨率为主。

下图为不同DPI下的分辨率，目前主流设计分辨率为 720 x 1280（@2X）、1080 x 1920（@3X）两个分辨率，我们只需要设计2倍图或者3倍图的界面，向上向下适配即可

具体用720 x 1280做还是用1080 x 1920做，团队综合评定去选择

以720 x 1280px作为设计稿标准尺寸的原由：

（1）虽然现在手机比较多的分辨率是1080×1920，你可以选择这个尺寸作图，但是图片素材将会增大应用安装包的大小。并且尺寸越大的图片占用的内存也就越高。以720 x 1280设计出的界面，在720 x 1280中显示完美，在1080 x 1920中显示也很清晰，并且这个分辨率下切出的图片尺寸、文件大小适中，内存消耗不会过高，安装包也不会过大；研发同学计算也很简单，就是1dp=2px，简单！
（2）设计一套720 x 1280的图，就可以直接适配iOS端，不需要设计两套图了。

以1080 x 1920px作为设计稿标准尺寸的原由：

（1）1080 x 1920已成为Android手机的主流分辨率了，同时也是目前分辨率中的中间分辨率，从中间尺寸向上和向下适配的时候界面调整的幅度最小，最方便适配。
（2）大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角，用1080 x 1920做设计尺寸，视觉展示更好，关键是设计的时候爽呀，所以好多设计师在设计ROM时通常选用该尺寸。

二、设计时所用尺寸及各栏目详细尺寸

首先了解一下Android系统中单位及换算方式，方便我们理解后面内容

1、Android单位了解

dp：Density-independent pixel，是安卓开发用的长度单位，1dp表示在屏幕像素点密度为160ppi时1px长度。

sp：scale-independent pixel，安卓开发用的字体大小单位。以160PPI屏幕为标准，当字体大小为 100%时， 1sp=1px（一般情况下可认为sp=dp）。

PPI： Pixels per inch，每英寸上的像素数,即 "像素密度"。

DPI：dpi最初用于衡量打印物上每英寸的点数密度。DPI值越小图片越不精细。当DPI的概念用在计算机屏幕上时，就应称之为ppi。同理： PPI就是计算机屏幕上每英寸可以显示的像素点的数量。因此，在电子屏幕显示中提到的ppi和dpi是一样的，可认为dpi=ppi。

dp和px的换算公式：dp*ppi/160 = px。比如1dp x 160ppi/160 =1px

sp与px的换算公式：sp*ppi/160 = px

ppi的运算方式是：PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数

eg:荣耀play3 PPI = √（1560² + 720²） / 6.39≈269ppi，在~320范围内，采用倍率为@2X，则在该分辨率中1dp=1sp=2px

2、状态栏、导航栏、标签栏图标大小

下图为安卓手机设计常用的两个分辨率的各栏目尺寸与内容区域尺寸。

下面是Android界面详细尺寸总结

上述尺寸是应用设计的建议尺寸，不是绝对尺寸，设计过程中保持所有可操作元素最小点击区域尺寸：48dp x 48dp，规范中状态栏大小、应用程序图标是固定的，目前没有应用去打破这个尺寸传统，应用商店图标则和应用市场上架要求有关系，具体请查看 https://blog.csdn.net/a_zhon/article/details/94558415

至于其他，不同应用个性化设计比较多，在下方举例中能看到常用应用除了状态栏按规范尺寸走，其他栏目尺寸都是各成一套，像微信、支付宝、钉钉等都已经作为平台生成了自己一套规范，公众号、小程序、生活号等接入需按照平台规范设计。

微信官方文档

https://developers.weixin.qq.com/doc/

支付宝开放平台文档中心

https://openhome.alipay.com/docCenter/docCenter.htm

钉钉开放平台文档

https://ding-doc.dingtalk.com/doc#/kn6zg7/qx3f8s

（后期我会针对这些平台应用接入的规范做总结，敬请期待！）

三、字体规范

1、字体选择

2、文字大小

设计风格随着历史变化，设计的规范也产生相应的变化，Google推出MeterDesign的风格初衷也是为了Android端设计进行扁平化风格的统一与应用界面视觉展示最优化，然而这种统一有利有弊，各厂商、各应用为避免大量的同质化，在规范的基础上加以探索形成自己的风格，所以能看到下面常用文字的大小是个范围，而不是一个绝对的值。

3、文字颜色

MD中要求通过明度、饱和度、不透明度的变化来选取颜色，颜色不宜过多，选取一种主色、一种辅助色（非必需），在此基础上进行明度、饱和度变化，构成配色方案。文字的颜色则以黑色与白色为基础色，调节不同的透明度用于不同场景。

四、布局及间距

栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：

（1）可操作元素最小点击区域尺寸：48dp x 48dp
（2）悬浮按钮尺寸：56x56dp/40x40dp
（3）用户头像尺寸：64x64dp/40x40dp
（4）小图标点击区域：48x48dp
（5）侧边抽屉到屏幕右边的距离：56dp
（6）卡片间距：8dp
（7）分隔线上下留白：8dp
（8）大多元素的留白距离：16dp
（9）屏幕左右对齐基线：16dp
（10）文字左侧对齐基线：72dp

另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。

还有非常多规范，不详细列举，遵循8dp栅格很容易找到适合的尺寸与距离。

五、切图及标注

有了插件后切图和标注已经不再是让设计师头疼的事儿了！原生切图已经是很久以前的事儿了，拉标注、做范围、做切片、命名等等累死人且无技术含量的工作最终是会被代替的。标注有时候还需要动手去标一下，不过我的宗旨是花最少的时间做最好的设计，专攻切图的cutterman、Sketch Measure、做标注的Markman、交互+切图+标注一条龙的墨刀、蓝湖、摹客等，国外的 Figma、invision 等，各自都有优秀的特点，我们只需要选择适合自己团队的工具与开发一起协作即可。

切图注意事项

（1）切图的尺寸必须为偶数（如果是单数切图的话，手机系统就会自动拉伸切图）；
（2）同一模块内，切图大小应保持一致；
（3）切可点击部件应当注意其点击区域不小于48dp(安卓)、44pt（苹果）；
（4）如果有背景，尽量用平铺的背景图案来设计（减少程序体积）；
（5）可点击的部件要把相关状态都切图输出，比如：正常状态、点击状态、不可点击状态；
（6）为了提升APP使用速度，尽量降低图片文件大小，我们可以对切除的图压缩大小，以降低 APP 的总大小（推荐在线压缩：https://tinypng.com）；
（7）所有的变形字体把它当成 icon 来切；
（8）切图输出格式：png-24；
（9）动效切图切出动效序列、导出 json、保存小体积gif都可以；
（10）重复的东西只切一个;
（11）注意命名要规范。