读书笔记:图标设计常用单位解析

2018-07-2212:19:35 发表评论 451 人看过

在UI界面设计中,单位的应用非常关键,下面了解常用单位的使用。

 

一、英寸

长度单位,一般为1英寸约等于2.54厘米,如我们经常看的液晶显示器就采用英寸作为单位,规格一般有17英寸、19英寸、22英寸、25英寸等。在手机中,屏幕尺寸现在一般有4.0英寸、4.2英寸、4.5英寸、4.7英寸、4.8英寸、5.0英寸、5.2英寸、5.5英寸、5.7英寸、6.44英寸等。在平板电脑中,屏幕尺寸一般有7.9英寸、9.7英寸、12.9英寸。显示屏的大小通常以对角线的长度来衡量,以英寸为单位,通常读成“寸”。

 

二、分辨率

分辨率可以从显示分辨率和图像分辨率两个方向来分类。显示分辨率也叫屏幕分辨率,事屏幕图像的精密度,是指显示器所能显示的像素有多少。由于屏幕上的点、线、面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多,所以分辨率是个非常重要的性能指标之一。我们可以把整个图像想象成是一个大型的棋盘,而分辨率的表示方式就是所有经纬交叉点的数目。显示分辨率一定的情况下,显示屏越小图像越清晰;反之,显示屏的大小固定时,显示分辨率越高图像越清晰。图像分辨率则是单位英寸中所包含的像素点数,其定义更趋近于分辨率本身的定义。

屏幕物理像素的综合,用屏幕宽乘以屏幕高的像素数来表示,如笔记本电脑上的1366px *768px,液晶电视上的1200px1080px,手机上的480px*800px,640px*960px等。表1所示为显示屏标屏、宽屏与分辨率的大小。

读书笔记:图标设计常用单位解析

 

三、像素

像素的中文全称为图像元素,是指在由一个数字序列表示的图像中的一个最小单位,称为像素。像素仅仅是分辨率的尺寸单位,而不是画质。像素是构成数码影像的基本单元,通常以像素每英寸PPI(Pixels Per Inch)为单位来表示影像分辨率的大小。从定义来看,像素是指基本原色素及其灰度的基本编码。例如,500PPI×500PPI分辨率,即表示水平方向与垂直方向上每英寸长度上的像素数都是500,也可表示为一平米英寸内有25万(500×500)像素。

像素是图标设计中的常用单位,一般移动智能设备的界面设计都使用像素作为单位,当图片尺寸以像素为单位时,我们需要指定其固定的分辨率,才能将图片尺寸与现实中的实际尺寸相互转换。例如,大多数网页制作常用图片分辨率为72,即每英寸像素为72,1英寸等于2.54里面,那么通过换算可以得出每厘米等于28px;又如15厘米×15厘米长度的图片,等于420px*420px的长度。

 

四、屏幕密度

屏幕像素学名为PPI,PPI即英文PIxels Per Inch的缩写,即每英寸所拥有的像素数。公式表达为PPI=√(X²+Y²)/Z(X:长度像素数;Y:宽度像素数;Z:屏幕尺寸),即手机屏幕长度像素的苹方+宽度像素的苹方,然后开根号在除以屏幕尺寸。假如分辨率是360px*640px,那么这样计算,根号下360的苹方家640的苹方除以屏幕尺寸。

以搭载Android操作系统的手机为例分别为:

iDPI(低密度):120像素/英寸

mDPI(中密度):160像素/英寸

hDPI(高密度):240像素/英寸

xhDPI(超高密度):320像素/英寸

Android屏幕密度成为Density,在设计时的关系如下。

Android主要有3种屏,分别是QAVG和WQVGA屏density=120;HVGA屏density=160和WVGA屏density=240。下面以480dip×800dip的WVGA(density=240)为例,详细列出不同density下屏幕分辨率信息。

1)当density=120

屏幕实际分辨率为240px*400px,状态栏和标题栏高各19px或者25dip,横屏宽度是屏幕宽度400px或者800dip,竖屏时屏幕宽度240px或者480dip,工作区域高度381px或者775dip。

2)当density=160

屏幕实际分辨率为320px*533px,状态栏和标题栏高各25px或者25dip,横屏是屏幕宽度533px或者800dip,工作区域高度295px或者320px或者480dip,竖屏时屏幕宽度320px或者480dip,工作区域高度508px或者775dip。

3)当density=240

屏幕实际分辨率为480px*800px,状态栏和标题栏高38px或者25dip,横屏是屏幕宽度800或者800dip,工作区域高度442px或者480dip,竖屏时屏幕宽度480px或者480dip,工作区域高度762px或者775dip。

与Android相比,iPhone手机对密度版本的数量要求没有那么多,因为目前iPhone界面有多种设计尺寸——640px*960px、640*136px、750px*1334、1080px*1920px,而网点密度(DPI)采用mDPI,即160像素/英寸就可以满足设计要求。

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: