学科: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 个。
- 提示：系统控件其实支持无上限的标签，显示不下的会创建一个更多的标签，里面是个带导航的列表可以收纳显示不下的标签，这些都是自动提供的。更赞的是支持用户自行调整显示的标签和标签顺序（保存顺序需要一点开发）。
应用图标[编辑 | 编辑源代码]
其他[编辑 | 编辑源代码]
- 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 演示了如何下载并使用这些字体。
参考：
- http://iosfonts.com —— 这个网站列出了iOS设备自带的字体
- http://apple4us.com/2014/01/how-to-use-additional-fonts-on-ios.html
工作流程[编辑 | 编辑源代码]
iOS 资源文件命名[编辑 | 编辑源代码]
Xcode 5 发布后，增加了 Asset Catalog，可以不必按下面的方式命名了，但命名方式仍是推荐的。
@2x[编辑 | 编辑源代码]
不必直接调用@2x的资源文件，iOS会在Retina设备上自动完成@2x资源的加载。
关于iPad中使用iPhone应用的2x模式，这种模式只是简单的将像素拉伸，并不会调用@2x的资源文件。
~iphone & ~ipad[编辑 | 编辑源代码]
跟@2x资源文件类似，iOS会根据这两个后缀自动完成设备适配。iOS 4.0及之后版本支持。
注：~iphone，~ipad 均要小写，iOS设备上区分文件名大小写。
参考[编辑 | 编辑源代码]
- 官方文档：iOS Human Interface Guidelines —— iOS 设计必读
- https://developer.apple.com/app-store/marketing/guidelines/#images —— iOS 设备的官方图片可以在 App Store Marketing Guidelines 获得，如何使用也有相应指导
- http://hicksdesign.co.uk/journal/ios-icon-corner-radii —— 图标圆角半径参考
- http://ui4app.com/ —— iOS App收集站
- 30+ tips to improve your iOS design workflow (in Photoshop) | radesign，好文
- iOS APP体验设计 http://blog.mycolorway.com/2011/06/16/ued-for-ios/
- The iOS Design Cheat Sheet http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
- iOS 7 colors http://ios7colors.com/
- Furnace iOS 程式设计中文学习网站
资源：