学科:UI设计/移动应用

iOS UI 元素尺寸参考

编辑

以下单位均为点(points),高清屏幕下1pts=2px,其他情况1pts=1px。

屏幕尺寸

编辑
  • iPad Air、The New iPad、iPad 3,1024 x 768 pt,9.7 英寸屏,264 ppi
  • iPad 2,1024 x 768 pt,9.7 英寸屏,132 ppi
  • iPad mini,1024 x 768 pt,7.9 英寸屏,163 ppi
  • iPad mini with Retina,326 ppi,其余跟 mini 一样
  • iPhone 5 及 iPod touch 5,568 x 320,4 英寸屏,326 ppi
  • 早期 iPhone 及 iPod touch,480 x 320,3.5 英寸屏

状态栏

编辑
  • 状态栏正常高 20,来电后40。
  • iOS 7 后,在不显示导航栏的界面中,视图中的内容可以显示在正常状态栏的区域中(状态栏下面,相当于状态栏高度可以是0)。

通常位于顶部的栏

编辑
  • 导航栏、搜索栏、工具栏正常高44,iPhone横屏后缩小为32。
  • 导航栏标题字号22,iPhone横屏后缩小为16。
  • UIBarButtonItem,按钮框视觉高度为29(包括底部高光则为30),字号12,建议设置这些按钮的背景图高度为30。iPhone横屏后缩小为24,字号12。
  • 竖版导航栏左右按钮的视图大小默认是 71x33,标题视图大小默认是 128x33,但这只是默认,宽度都是可以调整的(导航栏自动调整,代码手动调整,高度也可以调整)。控件的实际高度可能会比 33 大。

导航栏背景

编辑
  • iOS 7 上,导航栏背景区域是包含状态栏的,背景高度 64pt,不足会左上对齐平铺,如果高度大于 64pt,多出的部分会被截断。如果使用 iOS 6 高度的背景图,顶部会是黑的。具体表现待详细考证 --BB9z (talk) 10:43, 10 January 2014 (UTC)
  • iOS 6 及以下,背景图高度为 44pt。高度不足的,会平铺显示;若多出的话,多出部分不会被截断,会一直延伸下去。

Tab bar

编辑
  • UITabBar 高49,字号9,图标支持到48 x 32(不是32 x 32,但你用正方形的图标一点问题也没有)。
  • 标签在 iPhone 上最多能同时显示 5 个, iPad 上则是 8 个。
  • 提示:系统控件其实支持无上限的标签,显示不下的会创建一个更多的标签,里面是个带导航的列表可以收纳显示不下的标签,这些都是自动提供的。更赞的是支持用户自行调整显示的标签和标签顺序(保存顺序需要一点开发)。

应用图标

编辑

参见 HIG:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html

其他

编辑
  • iPad上不存在横屏后元素缩小的情况。
  • 需要特别注意的是,iOS 7 和之前版本的默认控件尺寸并不相同。建议设计时考虑到元素尺寸如何根据内容多少进行调整,可以定义好元素之间的间隙(开发抱怨不能做自适应的让他们学 Auto Layout 去)。

网页设计

编辑
  • 这段还是不对,元素宽度可能会变,但还不确定什么因素决定变与不变。Web页面横竖屏字体调节是伪命题,拉伸的是viewport宽度。对于页面内部元素来说,其尺寸没有变化,该是16px还是16px,只是投射到屏幕的比列不同。改变的比例与设备屏幕长宽比一致,在iPad上就是4/3的关系,到了iPhone 4寸屏上差别会高达76%。


字体

编辑

iOS 提供的字体列表可见:iOS 6: Font listiOS 7: Font list。其中,Additional Information 提及的字体可以按需从 Apple 网站上加载,SDK demo DownloadFont 演示了如何下载并使用这些字体。

参考:

工作流程

编辑

iOS 资源文件命名

编辑

Xcode 5 发布后,增加了 Asset Catalog,可以不必按下面的方式命名了,但命名方式仍是推荐的。

不必直接调用@2x的资源文件,iOS会在Retina设备上自动完成@2x资源的加载。

关于iPad中使用iPhone应用的2x模式,这种模式只是简单的将像素拉伸,并不会调用@2x的资源文件。

~iphone & ~ipad

编辑

跟@2x资源文件类似,iOS会根据这两个后缀自动完成设备适配。iOS 4.0及之后版本支持。

注:~iphone,~ipad 均要小写,iOS设备上区分文件名大小写。


参考

编辑

资源:

交互

编辑

资源文件优化

编辑