背景
按照UI设计图的标注的尺寸,包括尺寸和大小,字体,图片
比如:
和,按照该尺寸,去,简单的除于2,而得到的iOS真实设备的尺寸
代码中去设置的尺寸
有差别
比如上述的字体,标注了18px
代码中去设置为
18/2=9
let RightSegmentedFont:UIFont = UIFont.systemFontOfSize(9) |
显示出来的效果,就偏小:
而稍微调整大一点点,比如:
//let RightSegmentedFont:UIFont = UIFont.systemFontOfSize(10) let RightSegmentedFont:UIFont = UIFont.systemFontOfSize(11) |
则效果好很多,且和UI设计图相对比较接近,比较一致:
就好像每次都需要:
px/2 * 一个系数
这个系数,感觉就是在0.8或0.9左右
现在想要去搞清楚:
到底对于UI标注图中的尺寸,
根据何种换算关系去转换到代码中
才能使的代码运行出来的,iOS设备真机的效果,能最接近设计图
其中需要考虑到:
常见的iPhone 5,iPhone6, iPhone6P,分别是用何种换算关系
好像就是:
px 转 point的换算关系?
ios px to font
UI 设计师提供 iOS 字体和长度应当用什么单位? – iOS 开发 – 知乎
“iOS 的 1 pt = 逻辑像素 1 px = 物理像素 1 px(非 Retina)或 2 px(Retina)
如果你新建 Photoshop 文档时将 PPI 设定为 72,则文档中 1 pt = 1 px;如果你把 PPI 设为 144,则 1 pt = 2 px。
所以,你做非 Retina 设计时用 72 PPI,做 Retina 设计时用 144 PPI,这样就能保证你的 pt 数值永远是开发者需要的数值了。"
->很明显:
没有给出我要的换算关系
“我的经验是 pt=px/2*0.85,非常接近了。:前题是,Photoshop 默认使用 1 inch = 72 pt 的标准”
-》和我的感觉是类似的。
“1.UI designer一般设计时用什么单位?
使用逻辑像素单位。
展开一点回答:什么是逻辑像素(逻辑分辨率)?是各设备对开发者使用的一个单位,根据设备各有不同。
比如
iPhone4的逻辑分辨率是:320*480.
iPhone5的逻辑分辨率是:320*536
iphone6的逻辑分辨率是:375*667
6plus的逻辑分辨率是:414*736
安卓的设备分辨率更多,但主要的几个宽度都是 320或者360,
那么这些逻辑分辨率在哪儿找?答案:自己收集并记住。”
-》这好像就得麻烦UI设计师了。。
“(iOS字体)公式如下:pt=(px/96)*72"
->
即 pt=px/2 * (48/72) = px/2 * 0.667
->很明显这个公式没法用
-》实际经验中,应该是0.9前后都值才对。
不过这个表格,有空可以去试试:
Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 26px 1.6em 160% 22pt 29px 1.8em 180% 24pt 32px 2em 200% 26pt 35px 2.2em 220% 27pt 36px 2.25em 225% 28pt 37px 2.3em 230% 29pt 38px 2.35em 235% 30pt 40px 2.45em 245% 32pt 42px 2.55em 255% 34pt 45px 2.75em 275% 36pt 48px 3em 300% |
“
pt,即是 point,是一個標準的長度單位。定義上 1pt=1/72 英吋。因此它跟我們所熟悉的公分、公尺一樣,可以明確的指出 1pt 的長度是多少。
開發 iOS App 的時候,雖然沒有這麼多樣的單位可選,但設計師只需要簡單的利用一些小技巧即可讓文字尺寸與最後的結果相符:由於 Photoshop 使用 1 inch = 72 pt 的標準,因此當文件檔案的解析度設定為 72 的時候(這是預設值),1 pt = 1 px ,而設定為 144 的時候 1 pt = 2 px 。
”
-》还是只是pt=px/2
-》是不准的。
iOS、Android 字級單位 · 嫁給 RD 的 UI Designer
Ask DN: Pixels to Points for iOS – Designer News
[原创]IOS字体大小,字号的问题 UIFont – 互联万物 – ITeye技术网站
ios px to font size
iphone – Font size in pixels – Stack Overflow
“Point sizes are defined as 1/72 of an inch. That is, a 72-point font is approximately 1 inch from the lowest descent to the highest ascent. So the maximum height of a glyph in a 72pt font is about 1 inch.
Apple’s iphone tech specs page claims that the iPhone currently has a resolution of 163 pixels per inch. So 72 points is 163 pixels, or about 2.2639 pixels per point. Just remember that every glyph varies in height and width, so this is a very rough estimate of size. Generally, the distance between baselines will be a bit larger than the font’s point size so that lines of text don’t crash into each other.”
->那对于@2x的iOS设备来说,那就对了:
72pt=163px
->
1pt=163/72 px = 2.26388888888889px
->
px = 1/2.264 pt
px = 0.4417 pt
1/2 * x = 0.4417
0.5 * x = 0.4417
x = 0.4417/0.5=0.8833922261484
->
至少对于@2x的iOS设备,这个0.883,才是我们真正要的那个系数
-》反过来说:
iphone 5 ppi
Mobile UI Design: What is the best way to translate font sizes from Photoshop to iOS code? – Quora
Resolution & Pixel Density Comparison of Apple Retina Displays
“
DEVICE RESOLUTION PIXEL DENSITY (PPI)
iPhone 6 Plus 1,920 x 1,080 401
iPhone 6 1,334 x 750 326
iPhone 5 1,136 x 640 326
iPhone 4 960 x 640 326
iPad mini with Retina Display 2,048 x 1,536 326
iPad with Retina Display 2,048 x 1,536 264
13-inch MacBook Pro with Retina Display 2,560 x 1,600 232
15-inch MacBook Pro with Retina Display 2,880 x 1,800 226
27-inch iMac with 5K Retina Display 5,120 x 2,880 218
"
iPhone – Compare Models – Apple
iPhone 6s Plus
iPhone 6s
iPhone 6 Plus
iPhone 6
iPhone SE
1920 x 1080 像素分辨率,401 ppi
1334 x 750 像素分辨率,326 ppi
1920 x 1080 像素分辨率,401 ppi
1334 x 750 像素分辨率,326 ppi
1136 x 640 像素分辨率,326 ppi
iphone 163 pixels per inch
5.3.2 iOS尺寸单位pt、ppi与px之间换算关系 – 简书
别处整理的:
机型 | 屏幕宽高,单位点 | 屏幕模式 | 屏幕对角线长度 |
iPhone 3GS | 320 x 480 | 1x | 3.5英寸 |
iPhone 4 | 320 x 480 | 2x | 3.5英寸 |
iPhone 5 | 320 x 568 | 2x | 4英寸 |
iPhone 6 | 375 x 667 | 2x | 4.7英寸 |
iPhone 6 Plus | 414 × 736 | 3x | 5.5英寸 |
72
@2x 144 -》 实际163 -》 72/163=0.44171779141104=0.442 -》pt值=px/2 * 0.883
@3x 216 -》 实际326 @2x -> 实际326/2=163->如上-》0.442
@3x 216 -> 实际 401@3x -> 实际401/3=133.66666666666667 -> 133.66666666666667/144=0.92824074074074 -> pt值=px/3 * 0.928
[总结]
1. 1pt=1point=1/72 inch
2.UI设计图中标记的px像素,和我们iOS代码中使用的UIFont的size大小,的换算关系应该是:
@2x的iOS设备:1pt = px值/2 * 0.883 = px值 * 0.442
@3x的iOS设备:1pt = px值/3 * 0.928 = px值 * 0.309
3.UI设计师经常是按照@2x的尺寸去设计,标注,和切图的
-》拿到手的px值,按照 标注的px值*0.442,即可得到真实的point的尺寸了。
转载请注明:在路上 » [基本解决]iOS页面切图的尺寸距离,图片,字体的大小和代码中所使用的iOS设备真实的尺寸的关系