资源站

蠢站主的【私人】设计绘画类的存档收藏站。可能夹杂其他站主觉得需要的小资源。

*因为太烦所以关掉了转载和喜欢抱歉。如果喜欢可以存到摘抄笔记类软件上,比如有道云笔记、Evernote等等。

© 资源站
Powered by LOFTER

关于图像知识的基础学习

羅卜世家子:

阅读安卓设计规范的时候,遇到了DPI(像素点密度)、PPI(像素密度)、px(像素)、dp(安卓独立像素点密度) 等图像处理的基础知识,所以做了基础了解。

问题的开始:

安卓设计规范:因为安卓的安卓设备屏幕众多不可能为每个屏幕单独开发,根据屏幕尺寸和像素密度的不同,将设备设计尺寸分类:按像素密度分类的类别有 LDPI、MDPI、HDPI 、 XHDPI和 XXXHDPI。为不同的设备优化应用界面,为不同的像素密度提供不同的位图。


按设备大小的两个类别分别是手持设备 (小于 600 dp) 和 平板 (大于等于 600 dp)。

 

在具体设计和开发的时候,主要使用到的对应关系:

1、市场上主流分辨率有:480*800、 720*1280、 1080*1920;

2、对应的屏幕密度:

240dpi(480*800)

320dpi(720*1280)

480dpi(1080*1920)

3、固定 DPI 下,dp 和 px 的转换关系:

240dpi下,1dp=1.5px

320dpi下,1dp=2px

480dpi下,1dp=3px

4、sp:和dp一样,只是用于描述字体大小的单位

240dpi下,1sp=1.5px

320dpi下,1sp=2px

480dpi下,1sp=3px

了解为什么是这样转换的?

—————————————————————————————————

解答(答案来自知乎bigyang):

首先是DPI、PPI、px、dp的概念:

1、像素 px:

液晶屏显示图像,放大来看是一个个小点组成的,这些小点就是像素点(px)。


有的手机屏幕小像素点少,比如HTC G11的4寸480x800屏幕,还有的屏幕大像素点多,比如三星note2的5.5寸720x1280屏幕。

这个图标在不同的手机屏幕上显示出来,就是上图的效果。可以想象一下我们不同的手机打开同一个应用,按钮的尺寸相差很大。

图片显示大小是由什么决定的呢,屏幕尺寸?上图第1和第2个屏都是4.3英寸。像素数?第2和第3个屏都是720x1280的像素。最后我们找到了点密度(density),也就是像素数和屏幕尺寸的比值。density是每单位长度容纳的像素数量,一般用像素/英寸,也就是Pixel per inch(ppi)。


2、dpi是dot per inch,每英寸多少点,ppi是 Pixel per inch,每英寸像素数。

针对显示器的设计时,dpi=ppi。

ppi计算方法是长宽各自平方之和开方,除以对角线长度(单位英寸)。

3. ppi表示显示设备的点密度,dpi表示印刷品点密度。


屏幕的尺寸是屏幕对角线的长度,计算对角线像素数量再除以屏幕尺寸就得到了ppi值。上面3个屏的点密度分别是217ppi,342ppi,267ppi。

对比上图可以知道,ppi越低图片显示的越大,ppi越高图片显示的越小。

要让不同屏幕显示图片的大小相同,就需要对图片进行缩放,给高ppi屏提供更大的图片。

高ppi屏幕需要更大的图片才能得到同样的显示效果,反之亦然。ppi和图片px的关系如下

px1/px2=ppi1/ppi2

选定一个ppi值作为基础绘制图片,用ppi的比值计算出图片缩放比例就可以适配各种屏幕

px2=px1*(ppi2/ppi1)

安卓选定的这个基础值就是160ppi

px2=px1*(ppi2/160)

我们已经解决了图片放大缩小的问题,还需要一个单位用来描述长度(因为px不固定,inch不方便)。安卓创造了一个新的单位dp,中文名设备独立像素。并且规定在160ppi的屏幕上,1dp=1px。

4. dip或dp,dp(density-independent pixels),是安卓开发用的单位,1dp表示在屏幕点密度为160ppi时1px长度,。因为安卓设备屏幕众多不可能为每个屏幕单独开发,所以用公式 px=dp*(ppi/160)计算在不同屏幕上的像素数。

举例:HVGA屏320*480,一般是3.5寸,计算点密度为√ (320^2 + 480^2) / 3.5 = 164,约等于160,1pd=1px
WVGA屏480*800,按3.8寸屏算,点密度 √ (480^2 + 800^2) / 3.8 = 245,约等于240,1dp=1.5px。
还有更高分辨率的屏幕就不一一列举了,总之dp是为了方便适配不同屏幕的单位,在不同屏幕密度下,1dp的物理长度也相同。

设计师只需要针对160ppi的显示屏设计并制图,安卓会根据当前手机屏幕的ppi值来放大缩小图片,在不同的屏幕上得到相近的显示效果。

—————————————————————————————————

总结:所以在安卓的设计规范中,为多种屏幕设计,一种方法是以一个基本的标准 (中等尺寸,MDPI) 开始,之后将其缩放到不同的尺寸,2:3:4:6:8比例缩放。另一种方法是从最大的屏幕尺寸开始,之后为小屏幕去掉一些 UI 元素。

并且以 dp为一个确定的值,设计可触摸控件以 48 dp 为基础单位,界面元素间留白为 8 dp。



图标是48X48dp,在MDPI的屏幕上,实际尺寸是48x48px(像素),HDPI的屏幕上是,实际是x1.5(72x72px)。

—————————————————————————————————

关于安卓字体的单位sp

答案来自知乎bigyang

 

安卓设备的文字单位是sp,简单理解和dp是相同的。

下面这段是从Android Design上抄的:

使用不同大小字体对比,可以创建有序的,易理解的布局。然而,在相同的用户界面有太多

不同大小的字体,会很乱。Android 框架使用以下的大小:

对应到App中:

上面这张知乎截图(简单处理过),红字标明了对应的各种文字类型。      

实际使用中没有那么绝对。中文App,中号16SP文字过大,正文也常用小号14SP的。超小号12SP也不够小,例如知乎就用了更小的字号。

PS设计时,针对对应的标准(HDPI,XHDPI,XXHDPI),使用不同的px。

字体补充:

中文字体:默认为Droid Sans Fallback,设计时可采用微软雅黑。

英文字体:Andriod4.x及以上采用Roboto,Andrio2.x和andriod3.x采用 Droid Sans。

建议尽量采用系统默认字体。Andriod规范建议,字号采用12sp、14sp、18sp、22sp等四个级别来设计。

—————————————————————————————————

实际设计中操作补充:

1、屏幕分辨率——Dpi(每平方英寸像素数目):图像细节程度的度量

Dpi 代表每平方英寸上所含“点”的数目,它决定了一副图像在细节上到底有多细(尽管并不依赖于你的视觉感受)。但是,什么是“点”?

“点”是一个模糊不清的术语。点可以指的是像素、画笔的一“点”或者是一个油墨印迹。

“点”最通用的两个定义是:像素点(当你使用电脑屏幕的时候),喷墨点(当打印或印刷东西的时候)。

如果是 1 Dpi,你就会在每平方英尺上看见一个1*1的,单色的小方格。如果是100 Dpi,这就意味着水平方向和竖直方向上各100个小方格。这就意味着,在1平方英尺上,一共有10000个小方格。

根据以上定义Dpi 其实也就是屏幕分辨率,当垂直方向的Dpi等于水平方向 Dpi,那么一个像素点面积是正方形的,如果不相等则是微长的长方形。如果你能看到的小点越多,说明图像的细节就刻画得越真实。

dpi应该可以表示设备和图像,表示图像时的计算方法也如同ppi一样,ppi严格说只对应液晶显示器,可以理解ppi是dpi的子集。


2、pixel:像素,单位px,在不同场景下,像素被赋予不同的定义。

除了前面提到的「DPI 点每英寸」,「PPI 像素每英寸」,还有「LPI 线每英寸」,当图片尺寸以像素为单位时,我们需要指定其固定的分辨率,才能将图片尺寸与现实中的实际尺寸相互转换。例如大多数网页制作常用图片分辨率为72,即每英寸像素为72,1英寸等于2.54厘米,那么通过换算可以得出每厘米等于28像素;又如15x15厘米长度的图片,等于420*420像素的长度。

像素:只对电脑有效;英寸:只和印刷相关

你的显示器就是由“像素”构成的,英寸对应着实际物理尺寸,而 Dpi则是在两者间转换的标准单位,也是检验打印效果的参考。人眼的视觉上限是300 Dpi,我们无法分辨过于靠近的两个像素点,所以在600 Dpi 下和1200 Dpi 下看到分辨率都不会有分别,除非使用放大镜。

像素、英寸和 Dpi 如何相互关联?

1、打印一副8英寸*10英寸,300 Dpi 的图片,那么怎样设置图像的像素长宽度?

公式:像素 = 英寸 * Dpi

2、网站上下载的图片,900*600像素,如果我想知道它在150 Dpi 下打印有多大?

公式:英寸 = 像素 / Dpi

高度 = 900像素 / 150Dpi

宽度 = 600像素 / 150Dp

3、3600 *3600的纹理素材,我想打印成12 * 12英寸大小,现在我需要知道这样弄的话打印成果会有多清楚,那我就需要计算 Dpi。

公式:Dpi = 3600像素 / 12英寸 = 300

3600像素的图片,打印成12英寸的尺寸,不会造成细节的损失了。如果我打印成6英寸见方,细节就会更丰富,因为Dpi上升到了600。


3. 到底采用哪种分辨率来设计,到底需要提供多少套标注和切图?

1.只需要提供一套标注即可。  

  • 原则上需要为不同分辨单独进行标注,但由于开发成本等各种考虑。  

  • 选取320dpi下(分辨率为:720*1280)进行设计,此分辨率下1dp=2px。  

  • 另外视觉可以直接从高分辨率进行设计、标注、切图,这样可以方便适配低分辨率。

2.只需要提供一套切图即可。   原则上设计师需要为不同分辨率单独标注切图,同样根据开发成本等要求。  

  • 一般采用720*1280的来设计。切图可以直接适配120*1280分辨率的机型。  

  • 720*1280下的切图资源基本可以适配其他机型,有些特殊的切图需要单独适配的,比如icon等。  

  • 适配480*800的机型,只需要把切图/1.5即可。  

  • 适配1080*1920机型,只需要把切图*1.5即可。 

3.使用相对单位进行标注。  

  • 设计师要建立相对单位概念,可以直接使用dp标注尺寸、sp标注文字大小;  

  • Andriod官网中就采用相对单位进行标注的。

4.采用自适应布局。

  • 由于Andriod设备尺寸较多,设计师设计时要考虑好固定和自适应部分。

5.标注尽量采用相对关系。

  • Andriod设备尺寸很多,不可能采用绝对定位方式来标注,因为绝对定位无法实现界面元素自适应,标注时说明和兄弟元素、父子元素之间的关系即可。

操作总结:

1.采用720*1280分辨率来进行设计。(设计时,采用偶数值进行设计,方便dp和px的转换)

2.开始标注了,标注尽量采用相对位置进行标注。

3.切图了,首先在720*1280下进行切图,可以完全适配720*1280的机型。切图资源

4.分别适配480*800 、1080*1920(上面已经描述过了哦)

5.开发完后要进行bug测试哦(视觉方面的)


参考:知乎答案,百度知道,UI中国https://www.ui.cn/project.php?id=27997」 

—————————————————————————————————

更多的疑问:

关于像素和分辨率还是有很多不明白的,比如物理分辨率、物理像素、逻辑point分辨率、逻辑pt分辨率、像素分辨率等关系。



显示器的物理尺寸是对角线的尺寸(单位为英寸)。长和宽,使用勾股定理计算。推荐分辨率与显示器尺寸无关,是显示器的点阵大小,或者说像素密度决定的。同样的 15 寸显示器可以有很多种不同的分辨率。他们取决于像素密度跟长宽比。

其它答案后续补充


评论
热度 ( 18 )
TOP