2017最新安卓版UI设计规范篇

2017最新安卓版UI设计规范篇

 

无规矩不成方圆，我们的UI界面设计也是一样，具有设计规范，系统建议的规范可以让我们设计具有统一性，界面视觉更美观，今天主要分享安卓版的ui界面规范。

概念篇

本文主要针对UI界面设计中安卓版的规范进行分享，如果你是新手，你就需要仔细的阅读，可能你需要先了解一些基础概念，如果你是牛哄哄的大神，可以选择直接拉到中间，也可以看看，给我奖励咯~互相探讨分享。

像素

像素（px）简单的来说就是颜色点。我们的屏幕都是由很多的小块的颜色构成的，这每一个颜色块我们就把它称为像素，如下图所示。就拿我们从小的伙伴马里奥来做个例子，整张图片就是通过很多不同颜色的点构成的，把所有的颜色点集合再一起，就成了图，而组成图片的这些点就是我们的像素了。

DPI

DPI指的是像素/英寸，直接翻译过来就是每英寸里面有多少个像素点，这个就是DPI。dpi的数值越大，就越清晰，同样拿我们的马里奥举例。第一张图是100dpi的图片，第二章是10000dpi的图片，但是图片的大小一致。简单点说就是一样大小的图片，第二张图片上的像素点比第一张多，所以就图片质量就更加的细腻，更加的清晰。

分辨率

分辨率其实跟我们dpi解释差不多，只是范围不同。我们整个显示器，电脑屏幕都是由这些像素构成的，分辨率的意思就是我们整个屏幕里面有多少个像素点，像素越多，我们看到的屏幕越清晰。例如常见的iPhone5的分辨率是640*1136，也就是说屏幕的宽有640个像素，屏幕的高有1136个像素的意思。

SP

SP是安卓中专门为字体设计的单位，由于我们市场上安卓手机的分辨率越来越多，所以去适配的时候就出现了很多的麻烦，数据太多。所以安卓为了更好的适配给出了这个设计单位。在mdpi密度的屏幕中：1px=1sp。主要用于字体显示，可以根据用户的字体大小进行缩放，打个比方：

上面对应的是三种分辨率的屏幕显示，第一个是一倍的mdpi，第二个是两倍的xhdpi，第三个是三倍的xxhdpi。如果mdpi上的字体是12px，那么所对应的是12sp。因为sp在任何分辨率上都不会改变，所以也都是12sp，而xhdpi的字体大小显示就是：12*2=24px，xxhdpi的字体大小显示就是12*3=36px，以此类推。

DP

DP也是一个为了安卓适配时用到的单位，安卓为了适配不同分辨率给出的单位，它也不会因为屏幕分辨率大小不一样而发生变化。适配分辨率的时候也是记住，在mdpi密度的屏幕中：1dp=1px，其余的分辨率用倍率乘以这个dp值就行了，如图所示。

好了，介绍了基本的几个概念，那可能有的人就不明白了，为什么要了解这些概念？

目前的市场上的手机有不同的分辨率：160/320/480dpi等。所以，我们不可能去记住那么多的数据，因此我们就通过DP这个单位和与PX的转化去记住。注意的是转化的时候不止是图标转化，间距和所有元素的大小也要相应的进行改变。而且还有一点值得注意的是，因为我们设计常用单位是PX ，设计的时候我们用这个单位，但是开发人员则用dp ，所以在这个设计过程中去适配不同的手机，安卓使用dp这个单位来进行px之间的转化，就是一个上述概念中的一个使用单位。

那么怎么去适配？单位之间怎么转化才可以让开发人员准确的还原我们的设计图，以及在设计过程中该怎么规范设计，去适配不同分辨率的手机呢？

现在市场上有很多种的系统、比如我们的安卓，苹果、黑莓、windows phone等，身为一个ui设计师，我们都应该对这些系统有所了解，了解完之后再去做APP界面就会更加的得心应手。上表是一张安卓版本的设计参考规范表，首先了解市场上用得最多安卓的分辨率种类：LDPI、MDPI、HDPI、XHDPI、XXHDPI。

首先我们从上往下来分析上表：

• 第一行就是我们的手机分辨率，这个是一定要记住的，比较重要的，我们去做设计图的时候就是利用它的这个分辨率作为尺寸的。

• 第二行是密度值，这个是手机出厂的时候手机厂商给的，就是一个英寸里面有的颜色点，比如LDPI这个分辨率的，它每一个英寸里面就有120个颜色点，所以密度值越高，屏幕越清晰，接下来的比例就只是一个相对应的比例了，没什么好说，接下来看一下下面的倍率关系。

以MDPI为基准，也就是说MDPI是一个一倍的分辨率，那么其它的都给出了它们相应的倍率，去适配的时候就是通过记住这个倍率去进行大小尺寸的转换。那么我们有这么多的分辨率，对应的就有这么多的尺寸，我们去设计的时候应该拿哪一个的尺寸来作为设计稿呢？一般去选择设计稿的时候有两种方法：

• 方法1：以一个基本的尺寸(MDPI=320*480或者XHDPI=720*1280) 开始，之后将其缩放到不同的屏幕尺寸。

• 方法2：从最大的屏幕尺寸开始，之后为小屏幕去掉一些 UI 元素。

因为MDPI是一倍的，而XHDPI是两倍，都是整数倍，容易去适配其它的分辨率，如果以XHDPI为设计稿，设计的所有数值都要求是双数的，去转换的时候才能保证不出现小数点，第二种方法的话就比较难去控制，所以一般还是建议用第一种，当然最好的方式自然是每一个分辨率都单独去做一套界面图。

了解完这些分辨率和用什么尺寸做标准之后，接下来让我们直接看一下界面设计要注意的一些规范。首先先从界面的布局尺寸开始：

布局规范表

上表就是我们在界面上最基本的一些控件尺寸的大小规范，比如状态栏、导航栏、和菜单栏，这些都是比较死的数据，多去看几次就记了，当然数据还是挺多的，你也可以用MDPI的尺寸标准看成DP然后再去适配其它的尺寸，这样做的话需要记住的数据就少了很多了，这就是DP的法，比如，MDPI的状态栏高度是25px，你就把它等同成25dp，然后再去进行相应的转换。

哪些基础控件的大小就不说了，记住就行，宽度的话是满屏，接下来看一下最细画笔大小，指的是一些分割线，或者一些线性图标，这些我们要保证做出来之后，用户去使用的时候可以看的清楚。

图标尺寸

在一个分辨率里，一张界面图上有太多的图标，不可能每一个图标的大小都是一样的，所有图标会根据所处的位置的不同，用处的不同，图标的大小也会不一样，图标的大小也不是我们想给多大就给多大，安卓系统有一套自己的规范。接下来我们看一下上面的这些图标指的是哪些。

第一个是启动图标，就是我们手机桌面上的图标。操作栏图标就是一个应用上操作栏上面的图标，上下文图标就是放在正文里面的一些图标，系统通知栏图标也就是状态栏上面的图标，商店启动图标是当我们去网页上下载的时候出现的那个图标，了解一下就行了。

看完了分辨率、控件大小和图标的规范，那么还有一个重要的因素，那就是字体之间的规范。

字体规范

字体的大小安卓里面也有相应的规范，比如最小字体是多大，文本是多大，按照规范来设计的话就可以保证我们的界面图整体看起来更加的美观，而且在使用的字体方面，也是有一个严格的规定，英文在安卓里面使用的是Roboto，中文字体使用的是droid sans fallback，当然现在随着安卓手机分辨率的增加， 中文，字体的选择也多了几种，比如中文也可以使用思源黑体等。

讲到这里，安卓部分的内容就算是讲完了，当然上面的所有规范也只是规范，不要因为这些规范去限制自己的想法，规范是用来打破的，设计最重要的还是设计得美观，设计的时候具体要给多大的数值，取决于设计师，规范是用来参考的。那么安卓有这样的一些规范，那ios系统的呢？想要继续了解ios是怎么去设计的，可以出门右拐进入我的个人中心查看iOS版的界面规范篇。

n/p/39aZHs4.html