文档章节

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

 汉唐盛京
发布于 2015/03/02 00:28
字数 1082
阅读 239
收藏 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 5编程(第三版)-PDF中文版-正式发布!

目前,这是第一本介绍iOS 5.x 和 Xcode 4.4 的中文版书籍,尤其适合于iOS 编程开发初学者。本教程由 EntLib.com 团队编写。如有任何技术问题,欢迎留言。 电子版 – PDF 格式,支持iPhone、i...

entlib
2012/09/20
0
2
IOS7 Tech Talk总结

导航 一、kick off A、苹果推出了iOS7,他们希望开发者打造的apps能够更具有吸引力,首先是第一印象要好,App Store的截图制作就要好。 在开发软件的时候,应该注重字体的颜色和图像,要用透...

gaoios
2014/01/13
0
0
移动端 UI 适配最佳实践(中)

上篇谈到了一些基础概念:屏幕密度、逻辑像素什么的,接下来继续探讨 常见设备尺寸 更全的数据请参考Google 统计 说明:图中的 iPhone 6 Plus 数据看起来有些蹊跷,414 x 736 * 3 = 1242 x ...

yinjq
2015/11/10
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring 容器实现对bean的管理(注解方式解析,源码阅读)

因为最近在研究学习spring boot,所以这里想详细学习回顾了一下spring 容器对bean的一些管理方式和部分源码学习。 首先初始类AnnotationConfigApplicationContext,简单源码查看,支持两个参...

小海bug
18分钟前
0
0
数据结构:二分查找 java

二分查找的前提是有序存储,利用顺序存储和元素排序 /** * 二分查找,查找成功,返回下标记 * @param values * @param begin * @param end * @param key * @param <T> * @ret...

京一
35分钟前
0
0
@SpringBootApplication 注解

@SpringBootApplication注解是一个组合注解,包含以下注解 @Target(ElementType.TYPE) 注解的作用目标 @Retention(RetentionPolicy.RUNTIME) Reteniton的作用是定义被它所注解的注解保留多久,...

java.刘
48分钟前
0
0
sentinel自定义DataSource实战

序 本文主要研究一下如何自定义sentinel的DataSource,这里以jdbc为例。 maven <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-sen......

go4it
今天
1
0
xgboost/gbdt在调参时为什么树的深度很少就能达到很高的精度?

问题: 用xgboost/gbdt在在调参的时候把树的最大深度调成6就有很高的精度了。但是用DecisionTree/RandomForest的时候需要把树的深度调到15或更高。用RandomForest所需要的树的深度和Decisio...

tantexian
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部