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

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

在 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 像素/英寸就可以满足设计要求。

 

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

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