文档章节

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

 汉唐盛京
发布于 2015/03/02 00:28
字数 1082
阅读 1.4K
收藏 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自己对比调节字体大小。


下一篇: px与pt
粉丝 0
博文 31
码字总数 6044
作品 0
昌平
程序员
私信 提问
加载中
请先登录后再评论。
IOS字体规范与多屏幕适配

移动界面设计由于针对繁杂的设备尺寸,适配和字体规范往往是新手容易头疼的问题。这次主要介绍IOS的设计规范与流程。由于iphone 6的出现,苹果手机的分辨率也多了起来,适配进而也变的复杂。...

行云流水8848
2015/04/13
1
0
DPI/PPI/dp/sp/px/pt 移动设计手册

做移动设计的同学,不管是原生app或者web app,应该对字体字号都是很头痛的问题。根本原因是,我们用唯一分辨率的电脑,设计各个不同尺寸大小分辨率的设备,那简直要疯掉了。 但不要着急,我...

远舰攻城狮
2015/04/21
14
0
屏幕分辨率基础概念PX,PT,DP,DPR,DPI说明

屏幕分辨率基础概念说明 缩写 全称 说明 PX Device Pixels 设备像素,指设备的物理像素 PX CSS Pixels CSS像素,指CSS样式代码中使用的逻辑像素 DOT Dot 点,屏幕或打印纸上的点,等同物理像...

osc_ho8dcqsx
06/22
10
0
2018最新iOS端界面UI设计规范整理

在iPhone 6还没出的时候,都是用640×1136 px来做设计稿的,自从6的发布,所有的设计稿尺寸以750×1334 px来做设计稿尺寸 以750x1334px作为设计稿标准尺寸的原由: 从中间尺寸向上和向下适配...

osc_pfth9njc
2018/05/17
4
0
Android UI 切图命名规范、标注规范及单位描述(转载)

本文转自:https://blog.csdn.net/klxh2009/article/details/74938009 很多UI设计师做APP切图都会有两套,一套是Android的,一套是IOS的。IOS我这边暂不作讲解,因为我本人也不是开发IOS。这...

osc_o37lu093
2019/04/17
2
0

没有更多内容

加载失败,请刷新页面

加载更多

真的,不要迷信数据分析。

点击上方“咸鱼学Python”,选择“加为星标” 第一时间关注Python技术干货! 来源:知乎 作者:Allen Sun 最近有同学问了我一个很致命的问题:数据分析真的有必要做吗?为什么感觉都是伪需求...

咸鱼学Python
05/07
9
0
StartIsback设置备份工具 1.0

点击箭头处 “蓝色字” ,关注我们哦!! 软件介绍 现在很多人都用StartIsBack(开始菜单)来替代Windows默认开始菜单(主要还是因为新硬件没法装win7)。但重做系统后,反复设置很麻烦,于是...

萌海无涯
2019/12/24
0
0
C# SqlSugar框架的学习使用(四)-- 插入数据的详细用法

前言 上一篇《C# SqlSugar框架的学习使用(三)-- 查询的多种用法》我们已经把SqlSugar的查询多种用法实现了,这篇我们就来说说插入数据的多种用法。 数据源 数据表 POSTemp 我们还是用前面介...

Vaccae
2019/08/15
16
0
Qt自定义Widget之仪表盘

点击上方蓝字可直接关注!方便下次阅读。如果对你有帮助,麻烦点个在看或点个赞,感谢~ 上次和大家分享了使用Qml制作的仪表盘的过程,这次和大家分享下Qt的自定义控件过程。 效果图如上,有图...

SparkFire
03/28
6
0
使用 Linux 实用程序 gPhoto2 备份手机存储

尽情地拍照吧,gphoto2 能够方便、快速地将照片从你的设备传输到 Linux 计算机上。 移动设备的最大缺点之一就是其将数据从设备传输到计算机很困难。移动设备在这一缺点上有着悠久的历史。早期...

osc_252iaxru
26分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部