UI设计的淘气鬼们,你们不要跳~

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
727 0 5 2018-10-21

关于UI设计中分辨率相关的问题~

UI设计的淘气鬼,你们别跳哦~


对于刚入UI设计不久的设计师们,应该有一些会被关于UI设计中px、pt、dp、sp、dpi这些概念气到,那今天就由小泥来和大家一起收服它们吧!


首先看一张手机配置信息的图:

Image title


拉出来这张图就是为了介绍英寸,分辨率,这两个数据,这两个数据属于手机出厂就设定好的数据,所以才让后来的界面设计有对应的设计规范。


1英寸(inch)=2.54cm,屏幕的尺寸就是屏幕对角线的长度了。

然后有了英寸和分辨率这两个“既定”数值,屏幕的密度也就可以用①式得到了(以5.0英寸为例):

公式①:手机屏幕密度:(dpi或ppi)


Image title


这样得到的屏幕密度对界面设计就太有用了,先说在android开发中,非文字的尺寸单位用的是dp(Density-independent pixels),使用的文字大小的单位是sp(Scale-independent pixels),但是我们在设计稿中用的单位一般会是非文字的px和文字的pt。 要想设计和开发在最后的界面效果上保持一致,就需要公式②来搭建桥梁:


公式②:   非文字单位:dp *ppi/160=px       文字单位:sp * ppi/160=pt


所以就很好理解dpi的作用了,如果是对于320ppi的屏幕, 1sp x 320ppi/160 = 2px,如果是对于480ppi的屏幕,1sp*480ppi/160=3px。这样就找到了设计人员在界面设计中可以使用的规范了。


对于为什么是除以160的疑问,在这里也解释一下:Android Design 里把主流设备的 dpi 归成了四个档次,120 dpi、160 dpi、240 dpi、320 dpi。实际开发当中,经常需要对这几个尺寸进行相互转换(比如先在某个分辨率下完成设计,然后缩放到其他尺寸微调后输出),一般按照 dpi 之间的比例即 2:1.5:1:0.75(320dpi:240dpi:160dpi:120dpi)来给界面中的元素来进行尺寸定义。也就是说如果以 160 dpi 为基准的话,只要尺寸的 DP 是 4 的倍数,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 px 。

Image title


但若以 240 dpi 作为标准,需要 DP 是 3 的倍数,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2。其他的就更不合适了,所以就选定了160dpi做基准。


那我们就进行下一步探索吧,为什么要用dp和sp代替设计时用的px和pt呐?原因是他们不会因为屏幕ppi的变化而变化(在经过公式②的运算以后ppi作为运算单位被抵消),这样出来的设计稿在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现。

说了这么多原理问题,我们针对android做界面设计具体需要怎么执行规范才能和开发更好对接呐?

在这里提供一张Android的分辨率的模式图:(密度名称、密度数值、屏幕分辨率)


Image title


当运行在xhdpi模式下时,1dp*320dpi/160dpi=2px :也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp ;


看完上面的介绍,如果你是做一款应用的话,建议用PS在720×1280的画布中作图。以这个尺寸做出来的应用,在720×1280中显示完美,在1080×1920中看起来也比较清晰;而且这个分辨率下导出的图片尺寸适中,内存消耗不会过高,并且图片文件大小适中,安装包也不会过大;计算更是简单,就是1dp=2px。做出来的图片,让界面工程师放进drawable-xhdpi的资源文件夹中就阔以啦(各个资源文件夹中的图片尺寸符合ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12的规律。)


就剩最后一块内容了,就是切图的问题了,

我们很多时候做APP切图都会有两套,一套是Android的,一套是IOS的。这里先整理一下在Android开发中一些有利于开发的资源图片命名规则。

前缀:是一种简单记忆、节约成本的纯文本标记语言,使用前缀能快速知道切图是用作那一组件类别,好的前缀也无非就以下几种:

Image title


一般情况下,所切的图片用于哪个位置、哪个组件,就需要加上这些来命名(紧跟前缀),这样一来,就很清楚切图作用了:

Image title


后缀:一般是来表示切图的颜色、透明度、状态等信息


Image title


一般就是前缀+位置用途+再加后缀的形式啦。


今天的分享就到这里吧,祝愿和我一样有一个想成为UI设计师梦想的小伙伴们都能够坚持到底,实现梦想鸭~


很久没来了,最近忙着找实习和工作,码字不易,支持就点个赞吧~

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票