欢迎您来到中软卓越!中软国际教育-权威官方IT教育机构 加入收藏
  • 教育部授予:“软件工程专业大学生实习实训基地”资质
  • 商务部授予:“中国服务外包示范培训中心”资质
  • 工信部授予:“国家信息技术紧缺人才培养工程521计划”资格
2016年产学合作
协同育人项目
优秀合作伙伴奖

400-1616-861

 > IT技术知识点

UI设计看这里:UI设计规范名词大起底

时间:2017-08-01 14:23:34 作者: 点击次数:1

 

微信图片_20170801143114.jpg
 


 

无规矩不成方圆,我们的UI界面设计也是一样,具有设计规范,系统建议的规范可以让我们设计具有统一性,界面视觉更美观。


概念篇
 

2.jpg

 


 

首先,文章中运用了几个专业性概念。如果你是新手,你就需要仔细的阅读,了解相关的概念知识。
 

 


 


 

像素

 


 

像素(px)简单的来说就是颜色点。我们的屏幕都是由很多的小块的颜色构成的,这每一个颜色块我们就把它称为像素,如下图所示。
 


 

3.jpg
就拿我们从小的伙伴马里奥来做个例子,整张图片就是通过很多不同颜色的点构成的,把所有的颜色点集合再一起,就成了图,而组成图片的这些点就是我们的像素了。


 


 

DPI

 


 

DPI指的是像素/英寸,直接翻译过来就是每英寸里面有多少个像素点,这个就是DPI。dpi的数值越大,就越清晰,同样拿我们的马里奥举例。

5.jpg

第一张图是100dpi的图片,第二章是10000dpi的图片,但是图片的大小一致。简单点说就是一样大小的图片,第二张图片上的像素点比第一张多,所以就图片质量就更加的细腻,更加的清晰。


 


 

分辨率

 


 

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

 


 


 

SP

 


 

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

5.jpg

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


 


 

DP

 


 

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

 

 

6.jpg

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


目前的市场上的手机有不同的分辨率: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的图片,在不同手机上显示的实际大小可能不同,如下图所示。

7.jpg

(图片来自android developer guide


 

偶尔用到px的情况,是需要画1像素表格线或阴影线的时候,用其他单位如dp会显得模糊。