行动派行动派
  • 首页
  • 随笔
  • 建站
  • 设计
  • 前端
  • 读书
  • 歌单
  • 相册
  • 视频
  • 邻居
  • 首页
  • 随笔
  • 建站
  • 设计
  • 前端
  • 读书
  • 歌单
  • 相册
  • 视频
  • 邻居
主页 › 读书 › 读书笔记:图标设计常用单位解析
#读书#

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

3年前
1,492 0 0

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

 

0
Action
# UI设计相关# 读书笔记
相关文章
如何让自己变得更优质?
想太多会毁了你
现代孔乙己
当你设计时,你应该思考些什么?
后台设计无从下手?微信后台用这7点教会你!
评论 (0)
再想想
    Action站长
    要努力,要酷,要做一个可爱的人!
    165文章 330评论 37获赞
    猜你喜欢
    Begin 主题[阅读全文]按钮更改为鼠标经过滑出显示
    2年前
    如何让自己变得更优质?
    4月前
    如何绑定自己的域名来使用阿里云对象存储 OSS?
    2年前
    windows10 家庭版在线升级专业版的方法,免重装!
    10月前
    CSS 基础——字体属性
    2年前
    • 今日快讯
    • 站点地图
    • 给我留言
    • 给我投稿
    Copyright © 2014-2021 行动派. Designed by nicetheme. 萌ICP备20201122号 粤ICP备14089240号