相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

浅谈UI设计中分辨率、倍率相关概念的释义及实际运用

blue发布于:2018-11-22 16:42 |原作者: Dina丶|
blue
上海市 徐汇区 平面设计师
发私信 + 关注
简介: 虽然主要职责是交互设计师,但在实际项目中对接UI设计时,发现大多UI设计都不太清楚分辨率、倍率相关概念及实际运用,故整理下。

版权申明:本文出自“Dina丶”原创,感谢“Dina丶”的原创教程分享!

虽然主要职责是交互设计师,但在实际项目中对接UI设计时,发现大多UI设计都不太清楚分辨率、倍率相关概念及实际运用,故整理下。

■ 相关术语说明

● 屏幕尺寸

指的是屏幕对角线的长度,单位英寸。1in=2.54cm

● 物理分辨率(绝对单位)

又称设备像素,指设备能控制显示的最小物理单位,意指显示器上一个个的点。是显示屏固有的参数,不能调节,其含义是指显示屏最高可显示的像素数。

物理分辨率也叫标准分辨率,是指LED显示屏显示的图像原始分辨率,也叫真实分辨率。和物理分辨率对应的是压缩分辨率,决定图像清晰程度的是物理分辨率,决定显示屏的适用范围的是压缩分辨率。物理分辨率即LED液晶板的实际分辨率,在LED液晶板上通过网格来划分液晶体,一个液晶体为一个像素点。那么,输出分辨率为1024×768 时,就是指在LED液晶板的横向上划分了1024个像素点,竖向上划分了768个像素点。物理分辨率越高,则可接收分辨率的范围越大,则显示屏的适应范围越广。通常用物理分辨率来评价LED显示屏的档次。

● 逻辑分辨率(相对单位)

设备独立像素,与设备像素密度无关,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素,这个点是没有固定下限的,越小越清晰,然后由相关系统转换为物理像素。

● DPR(设备像素比)

设备像素比 = 设备像素 / 设备独立像素

-非视网膜屏:在iPhone 3GS时代(320x480,PPI为163),设备像素=独立像素,都为320像素(320个点),屏幕上的像素点肉眼可见,屏幕有颗粒感

-视网膜屏:Retina Display,Retina 屏幕是一种具备超高像素密度的液晶屏,它可以将960×640的分辨率压缩到一个3.5英寸的显示屏内。也就是说,该屏幕的像素密度达到326像素/英寸(ppi)。iPhone4使用的就是 Retina Display 技术。与上几代iPhone相比,Retina屏幕的像素数扩大了4倍,但屏幕尺寸并未变化,这就使得其像素密度实现翻番。

同样的屏幕尺寸(3.5英寸),iPhone3GS的屏幕分辨率为320*480,iPhone4(视网膜屏)像素分辨率提高到(320 * 2) * (480 * 2) = 640 * 960,显示分辨率提高到iPhone3GS的4倍所以在Retina屏的iphone上,DPR为2。1个逻辑像素相当于2个物理像素

浅谈UI设计中分辨率、倍率相关概念的释义及实际运用 飞特网 设计理论

为了使得我们所看到的区域在不同设备保持着差不多的大小,如果使用像素为单位,在低分辨率显示屏看着合适的图像,在高分辨率显示屏下就显得特别小了。

所以iOS提出了单位pt(point),Android提出了单位dp(图形的单位)。

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

● 其他相关

PPI:屏幕像素密度,即每英寸(1英寸=2.54厘米)存在的像素点个数,这里的一英寸是对角线长度。计算公式,PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数,PPI越高则代表设备的显示越清晰,当高于300ppi时,人眼就无法识别出单独的像素了。

scale(iOS):缩放因子,单位长度内的数量比(pixel/point)

DPI(Android):屏幕物理区域中的像素量;通常称为 dpi(每英寸 点数)。例如, 与"正常"或"高"密度屏幕相比,"低"密度屏幕在给定物理区域的像素较少,为简便起见,Android 将所有屏幕密度分组为六种通用密度: 低、中、高、超高、超超高和超超超高。

■ iOS设备型号规格对照表

浅谈UI设计中分辨率、倍率相关概念的释义及实际运用 飞特网 设计理论

因设备本身和系统版本支持的原因,iOS设备的适配基本不再考虑iphone4s以下的设备了

■ 常见Android设备规格对照表

浅谈UI设计中分辨率、倍率相关概念的释义及实际运用 飞特网 设计理论

因安卓设备的厂商对于屏幕分辨率和屏幕密度没有一个统一的行业标准,比方说同处于hdpi屏幕密度的两台设备,实际像素可能略有不同。所以Android给的屏幕密度显示为区间,仅用提供通用尺寸和密度的设计UI,系统按需处理进行不同设备的适配。

■ 以iOS设备为例,倍率换算的实际栗子

浅谈UI设计中分辨率、倍率相关概念的释义及实际运用 飞特网 设计理论

以iphonex(@3x)和iphone5s(@2x)为例

通过截图的标注来看:列表高度分别为162px/108px,等于54pt;文字大小33px/22px,等于11pt;图标大小72px/48px,等于24pt。(标注仅供参考,实际略有误差)

说明了上述2倍、3倍的换算关系

在实际项目中,为了每种设备都有的良好的用户体验,在一些图片及图标的显示上,并没有完全按照2倍、3倍的关系进行换算,而是针对一些机型做了单独的适配。这些可能需要单独进行说明,对设计进行调整。


■ 针对一套设计稿适配多种终端设备的说明


现在iOS和Android的操作方式越来越接近,大部分公司在界面设计上并没有针对不同设备进行单独的适配,通常是一套设计稿就iOS和Android通用了(按照iOS设备4.7寸,750*1334的分辨率出),而Android最为接近的分辨率为720*1280,这个时候的两端的界面是如何通用的呢?等比缩放?并不是,从上述表格中可以看到两种设备的分辨率对应的DPR(设备像素比)都为"2",在倍率相同的情况下,列表的高度、图片文字大小,左右间距一致,也就可以看成横向750px比720px多显示30px的内容,右侧内容向左缩进30px:

浅谈UI设计中分辨率、倍率相关概念的释义及实际运用 飞特网 设计理论

同样的,倍率为"3"Android设备设计稿1920*1080分辨率,适配到iOS三倍设备1242*2208,也可看做横向内容多显示162px的内容,以此类推。

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

18

好评
17

差评

刚表态过的朋友 (35 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

blue
上海市 徐汇区 平面设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计