zoukankan      html  css  js  c++  java
  • 缩放因子和UI设计

    一、PPI

    1、像素密度PPI:PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目。

      根据勾股定理(直角三角形两边为a和b,斜边为c,那么 a²+b²=c²),可以得知iPhone4(s)的PPI计算公式为:  = 329.65  

     和标准的326 稍有出入,这是因为像素的离散采样有锯齿效应。

    2、iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸,屏幕尺寸 指的是显示 屏幕 对角线的长度。

    单位换算:   1 inch(英寸) = 2.54cm = 25.4mm

    二、UI标注

    一般现在UI给的标注图 都是用的iPhone6 的尺寸来做的,Photoshop新建750*1334的画布,切图用的自动切图工具 切成 @2x和@3x 大小的图片。

    这样适合大部分企业的App,有的生成的@3x的图标 有毛边,这时候就需要UI单独 处理。 

    UI给的标注图,我们在代码只需要 把标注的数值 除以2  就可以使用了。

    下面说下,为啥是除以2,如果UI用 iPhone6P (1242*2208)的大小来 标注,就要除以3了。

    三、缩放因子

    1、Scale起源

        iPhone3GS的屏幕分辨率是320*480(PPI=163),iOS绘制图形均以point为单位:

        1 point = 1 pixel(像素)(Point Per Inch=Pixel Per Inch=PPI)

        后来在iPhone4中,同样大小(3.5 inch)的屏幕采用了Retina显示技术,横(320)、纵(480) 方向的像素密度 各 被放大到2倍,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326), 显像分辨率提升至iPhone3GS的4倍(1个Point被渲染成1个2x2的像素矩阵)。

        但是对于开发者来说,iOS绘制图形的API依然使用以前的 point(pt,注意区分印刷行业的“磅”)为单位。在同样的逻辑坐标系下(320x480):

        1 point = scale*pixel(在iPhone4~6中,缩放因子scale=2;在iPhone6P中,缩放因子scale=3)。

    2、[[UIScreen mainScreen] scale]

        为了自动适应分辨率,系统会根据设备实际分辨率,自动给UIScreen.scale赋值,该属性对开发者只读。

    3、[UIScreen nativeScale]

        iOS8新增了nativeScale属性:

        @property(nonatomic,readonly) CGFloat nativeScale NS_AVAILABLE_IOS(8_0);

    nativeScale 在放大模式中打印的值和 scale不同,在标准模式下和scale的值是相同的。

    iPhone6和6P 的  设置 ->显示与亮度->视图 :有 标准模式 和 放大模式。

    [UIScreen nativeScale] 做偏底层的绘制工作时 会用到。平时用不到。

    打印:

    CGRect bounds = [[UIScreen mainScreen] bounds];
    
    CGFloat scale = [[UIScreen mainScreen] scale];
    
    CGFloat nativeScale = [[UIScreen mainScreen] nativeScale];

    iPhone6标准模式下输出:

     bounds: { {0, 0}, {375, 667} }

     scale: 2.000000

     native scale: 2.000000

    iPhone6放大模式下输出:

     bounds: { {0, 0}, {320, 568} }

     scale: 2.000000

     native scale: 2.343750

    四、UI设计师 眼中的 px、pt

    字体大小常用的单位 有2种:px、pt。

    px就是表示pixel,像素,是屏幕上显示数据的最基本的点;

    pt就是point,是印刷行业常用单位,等于1/72英寸。

    px是一个点,它不是自然界的长度单位,一个点 可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。

    所以,“点”的大小是会“变”的,也称为“相对长度”。

    pt全称为point,但UI设计中不叫“点”,确切的说法是 “磅”,它是一个自然界标准的长度单位,也称为“绝对长度”。

    所以 pixel是相对大小,而point是绝对大小。

    在不同分辨率下,无论是px还是pt,都会改变大小。最终显示在显示器上的还是像素。

    在CSS中 em才是真正的“相对单位”。em:即%,,1em=100%,是一个比率。

    五、iPhone尺寸规格:

    欢迎关注我的 今日头条号 名称: 云端梦想科技  

    欢迎关注我的 微信公众号:dreams2999

  • 相关阅读:
    Sql Server 2008卸载后再次安装一直报错
    listbox 报错 Cannot have multiple items selected when the SelectionMode is Single.
    Sql Server 2008修改Sa密码
    学习正则表达式
    Sql Server 查询第30条数据到第40条记录数
    Sql Server 复制表
    Sql 常见面试题
    Sql Server 简单查询 异步服务器更新语句
    jQuery stop()用法以及案例展示
    CSS3打造不断旋转的CD封面
  • 原文地址:https://www.cnblogs.com/dahe007/p/5996935.html
Copyright © 2011-2022 走看看