恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
浅谈UI设计中分辨率、倍率相关概念的释义及实际运用
0.0°
2018-11-22 原创文章 规范/资料 举报 7520 13 20 0

虽然主要职责是交互设计师,但在实际项目中对接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个物理像素

Image title

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

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


● 其他相关

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

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

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



■ iOS设备型号规格对照表


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

Image title


■ 常见Android设备规格对照表


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

Image title


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


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

Image title

通过截图的标注来看:列表高度分别为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:

Image title

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

更新:2018-11-22

收藏

13人已收藏

Dina丶

专注打杂二十年

  • 1

    作品

  • 0

    粉丝

  • 7

    关注

    猜你喜欢

      2018-11-22 原创文章 规范/资料 举报 7520 13 20 0

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

      0.0°

      你确定要举报浅谈UI设计中分辨率、倍率相关概念的释义及实际运用

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年11月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      20
      13
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录