关于设计规范研究

1 2017-03-23 12:26:49 下午 1 244 | 设计

前几天小乱给我看了一张某人设计的APP原型图,然后里面有标注单位用的是px。小乱问我对设计图进行标注时是用的逻辑像素还是物理像素,我当时就说是逻辑像素,因为我自己标注经常用逻辑像素。然后小乱接着问,那他这样标注是不是错误的,这我就不清楚了,我印象中px和dp有转化关系,如果给的是px的标注的话,就需要再转化为dp进行编辑

研究过后整理如下:


px、pt、ppi、dpi、dp、sp的定义

px: pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元

pt: point,点,印刷行业常用单位,等于1/72英寸

ppi: pixel per inch,每英寸像素数,该值越高,则屏幕越细腻

dpi: dot per inch,每英寸多少点,该值越高,则图片越细腻

dp: dip,Density-independent pixel, 是屏幕虚拟的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度

sp: scale-independent pixel,字体大小单位


再来看下现在的问题:

关于px与dp的转换

设配屏幕不同,对应像素密度也就不同

密度idpimdpihdpixhdpixxhdpi
密度值120160240320480
代表分辨率240×320320×480480×800720×12801080×1920

 1dp定义为屏幕密度值为160ppi时的1px

密度idpimdpihdpixhdpixxhdpi
逻辑像素1dp1dp1dp1dp1dp
物理像素0.75px1px2px3px4px
像素倍率@0.75x@1x@2x@3x@4x

这样看来,dp与px具体的关系就出来了

对原型图利用px标注也可以接受,但必须要注意考虑设备的适配,编码实现就需要对dp的比值关系进行计算

相对的,直接用dp标注要方便得多,所以app设计原型图的标注规范是用dp进行标注


就这样,引发了我对设计规范的思考

为什么要进行设计规范:

效率优先,快速协作

在设计原型或者产品概念稿事,你可以按自己心中想象的模样随意呈现界面,不用在意尺寸或者间距,更多的是产品思路的梳理,唯一目的就是要清楚地传达一个提议的解决方案。但是当要真实的编码实现一个产品设计的时候,作为一个设计师你的交付产出物必须符合这么几个基本原则:

设计实现的可行性,设计实现时间成本,设计在设备上的性能问题,更重要(基础)的是你的设计在用户的设备中如何表现

那么就要求我们尽可能做到减少设计到编码实现之间的流畅性,保证UI设计实现与编码实现的高效快速


就这样,信息世界不断跃动着,人们从不间断地寻找高效快速的工作方式,以这样的方式进化着。

他们表示“我很懒,不,我还能更懒”

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

*