維基學院

学科:UI设计/移动应用

< Subject: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 list，iOS 7: Font list。其中，Additional Information 提及的字体可以按需从 Apple 网站上加载，SDK demo DownloadFont 演示了如何下载并使用这些字体。

参考：

工作流程

编辑

iOS 资源文件命名

编辑

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

@2x

编辑

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

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

~iphone & ~ipad

编辑

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

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


参考

编辑

资源：

交互

编辑

资源文件优化

编辑
检索自“https://zh.wikiversity.org/w/index.php?title=Subject:UI设计/移动应用&oldid=57638”