文档章节

iOS 开发 界面 字体pt 与px 关系

 汉唐盛京
发布于 2015/03/02 00:28
字数 1082
阅读 273
收藏 0

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
博文 26
码字总数 5038
作品 0
昌平
程序员
私信 提问
iOS和Android的app界面设计规范

iOS篇 界面尺寸 设备 分辨率 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus 1242×2208 px 60px 132px 147px iPhone6 750×1334 px 40px 88px 98px iPhone5/5s/5c 640×1136 px 40px 88px......

AK_47
2015/04/21
0
0
一款APP,从设计稿到切图(Android篇)

原文出处:BATLCK 依旧声明:这里写的依旧只是某一种工作方法,而不是一种规范,你可以参考,但不要照搬,在具体工作中,一定要灵活运用。 汇总贴,整理了之前零散的关于Android的文章……这...

BAT_LCK
2015/12/03
0
0
一款股票行情及交易 IOS app 界面及简单功能修改

【业务需求】 1 根据要求修改界面字体颜色及字体 2 修改K显示图显示错误。 4 K线图界面修改,添加显示内容, 5 自选股票列表,点击显示K线缩略图。 6 股票搜索功能留历史记录。 【人员要求】...

李_克
2016/08/03
2
0
一款股票行情及交易 iOS app 界面及简单功能修改

【业务需求】 1 根据要求修改界面字体颜色及字体 2 修改K显示图显示错误。 4 K线图界面修改,添加显示内容, 5 自选股票列表,点击显示K线缩略图。 6 股票搜索功能留历史记录。 【人员要求】...

李_克
2016/08/03
1
3
十八般武艺!移动应用开发者必备的18款利器

“工欲善其事,必先利其器”。身为一名移动应用的开发者,光有技术是不够的,必备的应用可以为您的开发工作如虎添翼。随着Android与iOS系统的不断更新换代,相关的的应用也层出不穷,本文推荐...

looen
2011/11/25
2.3K
3

没有更多内容

加载失败,请刷新页面

加载更多

spring学习笔记(二)spring 事件的使用

spring 中的事件 spring事件通过订阅发布 可以解耦操作 可以同步 可以异步 步骤 编写事件 通过继承org.springframework.context.ApplicationEvent 来编写事件 public ApplicationEvent(Obj...

NotFound403
19分钟前
1
0
特斯拉车主成功破解了自己Model 3汽车

据汽车博客Electrek消息,一位特斯拉车主成功破解了自己Model 3汽车,还在此基础上运行了Ubuntu。 这位叫trsohmers的网友表示,“功劳大多要归到Ingineerix的头上,他花了数月才找到初始的那...

linuxCool
34分钟前
1
0
Gitbook : random errors when using gitbook plugin on running "gitbook serve"

在执行gitbook serve时,会有不定的失败错误 参考问题 :#1309 解决方案: 更新gitbook版本,这个问题似乎是3版本的问题 , 官方也不打算在这个版本解决了。 更新 到最新版本后, 不再出现问...

ol_O_O_lo
48分钟前
1
0
提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字

提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字: 作者:王健茜;断断续续一个多月才读完了《中国文化的深层结构》,这并不是一本难懂的书,之所以读得慢,源于对书中观点的思...

原创小博客
50分钟前
1
0
高德地图-行政区域接口

1、获取全国各省信息 https://restapi.amap.com/v3/config/district?extensions=all&key=应用Key&s=rsv3&output=json 2、获取下级行政区域信息 https://restapi.amap.com/v3/config/distric......

voole
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部