UI设计规范名词大起底【UI】

无规矩不成方圆，我们的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之间的转化，就是一个上述概念中的一个使用单位。那么dp和px之间的一个换算是怎么操作的呢？

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

sp：Scale-independent pixels，它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为 100%时， 1sp=1px。

但是px单位不被建议使用，因为同样100px的图片，在不同手机上显示的实际大小可能不同，如下图所示。