iOS 开发 界面 字体pt 与px 关系
iOS 开发 界面 字体pt 与px 关系
汉唐盛京 发表于3年前
iOS 开发 界面 字体pt 与px 关系
  • 发表于 3年前
  • 阅读 168
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

1、分辨率

iPhone 界面尺寸:320×480、640×960、640×1136 
iPad 界面尺寸:1024×768、2048×1536 
(以上单位都是像素,至于分辨率一般网页UI和移动UI基本上都只要 72 ppi)

2、单位换算px、pt

这里需要先区分pt、px,pt(磅值)是物理长度单位,指的是72分之一英寸。手机上看来同一大小的字磅值是一样的,但是换算成不同分辨率手机的字号px值不一样。( px=pt*ppi/72 )

iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px,屏幕密度是163ppi,4S的屏幕像素是640x960px,屏幕密度是326ppi,翻了一倍。iPhone5的ppi没有变化,兼容性方面要增加类似首屏画面等程序上的判断。

在iPhone界面上元素的定位、尺寸是通过一个单位point,而非px,屏幕上固定有320x480pt,retina屏两倍的分辨率改变的只是pt和px之间的比例而已,这样就能实现不改变程序,只上传两套图片就兼容两个分辨率。

在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机尺寸来设计,比较方便预览效果,一般用 640×960 或者 640×1136 的尺寸设计。其中设计稿的画布分辨率设为默认的72ppi(此时1px=1pt ),所以设计师可以统一采用px为单位。

开发拿到设计稿时,将上面标注的以px为单位的字号大小、图像尺寸除以2,就是非retina屏上的pt值,这样在retina屏上也可以根据此pt值换算对应的px大小,以确保不同的分辨率下有合适的效果。

3、基本元素的尺寸设置

iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域。

这里取用 640×960 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸: 
状态栏: 就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40 px 
导航栏: 显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88 px 
主菜单栏: 类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98 px 
内容区域: 展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:734 px=960-40-88-98 
以上尺寸适用于 iPhone 4、4S,iPhone5/5s 的 640×1136 的尺寸,其实就是中间的内容区域高度增加到:910 px,其他尺寸也同上。

4、常用图像、图标大小(来自官方规范文档)

单位:像素 

iOSicon

5、字体大小

iOS交互设计规范文档上,对字体大小没有做严格的数值规定,只提供了一些指导原则: 
单位:点pt 
- 即便用户选择了最小文字大小,文字也不应小于 22 点。作为对照,正文样式在大字号下使用 34 点字体大小作为默认文字大小设置。 
- 通常来说,每一档文字大小设置的字体大小和行间距的差异是 2 点。例外情况是两个标题样式,在最小、小和中等设置时都使用相同字体大小、行间距和字间距。 
- 在最小的三种文字大小中,字间距相对宽阔;在最大的三种文字大小中,字间距相对紧密。 
- 标题和正文样式使用一样的字体大小。为了将其和正文样式区分,标题样式使用加粗效果。 
- 导航控制器中的文字使用和大号的正文样式文字大小(明确来说,是 34 点)。 
- 文本通常使用常规体和中等大小,而不是用细体和粗体。

百度用户体验做过的一个小调查: 
单位:像素px 

iOSfont

还有个方法就是找你觉得好的APP应用,手机截图后放进PS自己对比调节字体大小。


共有 人打赏支持
粉丝 0
博文 10
码字总数 4717
×
汉唐盛京
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: