最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

[基本解决]iOS页面切图的尺寸距离,图片,字体的大小和代码中所使用的iOS设备真实的尺寸的关系

iOS crifan 548浏览 0评论

背景

按照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程序字体与ps设计字体换算

“(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

interface design – Font size on iOS7 looks different from Photoshop even with same resolution – Graphic Design Stack Exchange

Mobile UI Design: What is the best way to translate font sizes from Photoshop to iOS code? – Quora

user interface – iOS – How to find the right font size (in points) with the same height as a given CGRect? – Stack Overflow

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 – 机型比较 – Apple (中国)

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设备真实的尺寸的关系

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
13 queries in 0.225 seconds, using 10.31MB memory