iPhone界面元素说明版本日期拟稿和修改说明0.12010-03-12戴传庆初稿20目录1. 界面设计元素说明 11.1. 状态栏 21.2. 导航栏 31.3. 工具栏和标签栏 51.3.1. 工具栏 51.3.2. 标签栏 61.3.3. 使用方法和行为 71.4. 警示框的应用 81.5. 警示框的设计 91.6. 控件列表 101.6.1. 控件列表的应用 101.6.2. 控件列表的设计 101.7. 模态视图 111.7.1. 模态视图的应用 111.7.2. 模态视图的设计 121.8. 表视图、文本视图和网页视图 131.8.1. 表视图 131.8.2. 使用方法和行为 131.8.3. 表视图类型 141.8.4. 表视图元素 151.9. 开关控件 161.10. 视图元素 161.10.1. 表视图使用户操作更容易 161.10.2. 文本视图 171.10.3. 网页视图 171.10.4. 运行指示 181.10.5. 日期和时间选择器 191.10.6. 细节扩展按钮 201.10.7. 信息按钮 201.10.8. 标签 211.10.9. 页面指示 211.10.10. 选择器 221.10.11. 进度视图 231.10.12. 圆角的矩形按钮 231.10.13. 搜索栏 241.10.14. 分段控件 251.10.15. 滑杆 261.10.16. 输入框 261.11. iPhone标准按钮和图标 271.11.1. 工具栏和导航栏上的标准按钮 271.12. 标签栏上的标准图标 291.13. 创建自定义图标和图片 291.13.1. 程序图标 291.13.2. 小图标 301.13.3. 启动图片 301.13.4. 导航栏、工具栏和标签栏上的图标 311. 界面设计元素说明在深入研究iPhone界面的视图和控件之前，有必要理解这些元素的操作方式和隐喻含义。
本文将介绍应用于大多数程序的视图，以及它们的属性和使用方式1.1. 状态栏状态栏显示iPhone的重要信息，包括信号强度、网络连接和电池量 全屏式的程序是否隐藏状态栏需要慎重考虑，否则用户退出程序才能看到的状态，这样的用户体验并不理想例如，拍照时用户的注意力集中在照片上，这时隐藏状态栏几秒钟是合理的，用户可以通过点击找回状态栏、导航栏和工具栏如果非要隐藏状态栏，那也必须有利于用户体验，并且用户可以通过点击轻易地重现状态栏，但也不要为了重现状态栏而定义一个手势，用户不喜欢发现和记住这样的操作尽管不能限定状态栏的内容，但是可以定制它的外观、大小和操作，具体而言：· 是否显示网络连接如果程序需要花费一小会时间连接网络，状态栏上的显示网络连接是有必要的如果网络连接可以在瞬间完成，网络连接的图标也不是必须的，因为用户可能还没有注意到这个图标，程序已经完成网络连接了· 状态栏的颜色可以选择灰色、黑色或者透明的黑色，并设置状态栏的颜色是否动态变化· 确保状态栏和程序界面协调一致例如，如果导航栏不透明，就不要使用有透明的状态栏1.2. 导航栏（navigation bar）导航栏显示在状态栏的下方，包括标题、按钮和分段控件。
导航栏对于信息层次分明的产品应用型软件尤其有用导航栏有两个作用：· 强调程序中不同视图的导航· 便于管理视图中的内容如上图，导航栏居中显示当前视图的标题导航栏中的标题随着界面的变化而更换，并且可以加上带有界面标题的回退按钮标准的回退按钮明确用户返回到上一个界面，因此也避免改变按钮的操作方式，如上图的分段式回退按钮就是不可取的，这种作法容易导致如下几个问题：· 分段式回退按钮占据标题的显示空间· 无法显示单个片断的已选状态· 分段越多，显示空间越少，也就难以点击· 难以选择哪种方式显示分段式导航如果认为用户容易在程序中迷失，不用分段回退按钮而才采用面包屑路径，这可能就意味着用户进入深层次的信息才能找到他们想要的，这时更应该做的是减少信息的深度除了回退按钮，在标题的右边还可以增加第二个按钮如果不需要回退按钮的话（程序不支持分层式导航），也可以像上图一样在左上角加上一个作用于视图内容的按钮，如编辑按钮导航上的按钮都有边框，如果在导航栏上放置一个无边框的按钮，程序会自动将其转化为有边框的按钮按钮可以自己设计，也可以采用iPhone自带的按钮导航栏上的字体也可以自定义，但是系统自带的字体更有利于阅读，当使用UIKit创建导航栏时，系统将自动使用自带的字体。
当竖屏变为横屏时，导航栏的高度会自动改变（不必定义导航栏的高度）横屏幕的导航栏变窄，界面上可以显示更多的内容，所以在设计导航栏上的图标和界面上的图层时，要考虑到设计不同的高度样式以便适应导航栏的变化导航栏的颜色和透明图可以自定义，也可以使用标准色彩：· 蓝色（默认值）· 黑色在导航栏上增加透明效果，尤其是横屏幕上，使得界面看起来的可视区域更大但不要用半透明的导航栏结合不透明的工具栏，也不要在同样的显示方式下使用不同颜色和不同透明度的导航栏1.3. 工具栏和标签栏1.3.1. 工具栏（toolbar）当用户需要操作当前界面内容时，使用界面底部的工具栏更为合适例如，当用户在邮件中浏览一条信息时，工具栏上选项可以删除、回复或者移动信息，也可以新建邮件和撰写新信息这样，用户可以停留在当前界面管理邮件一个选项的区域为44×44像素,所以工具栏上选项要限定在五个以内,这样用户也容易点击想要的选项工具栏中的选项可以不设边框，这在iPhone OS中称作平原风格，当然也可以像导航栏上的按钮一样给选项加上边框选项的图标可以自己绘制，或者使用iPhone OS自带的图标1.3.2. 标签栏（status bar）标签栏显示在屏幕的最底部，用于变换同组数据的不同显示方式，或者调用程序的子单元。
用户可以在程序的任何界面使用标签栏切换模式或者视图，而不是像工具栏一样包含可以作用于当前界面的按钮如上图，iPhone的时钟提供了世界世界、闹铃、秒表和计时器四种功能，用户可以随时切换功能并明确地知道当前界面是什么功能标签由图标和文字组成，在黑色的背景上以等宽的形式出现，当标签被选中时，背景和图片都会高亮另外在不同的显示方式下（横屏或者竖屏），标签的透明度和高度都不会改变当标签多于五个时，iPone会显示其中四个并增加一个“More”标签，当点击“More”标签时，会在单独的界面显示其余的标签，使用导航栏上的“Edit”按钮，可调整标签栏上的标签，比如将最常用的标签显示在标签栏上，而同样的标签图标可以出现在三个地方（标签栏，More界面，Configure界面）标签上还可以增加白色边框和填充红色的椭圆形标记，合理地提示用户某些反馈信息，就像显示未接的数目那样，而标记对于用户的任务或者情境并不是关键性信息1.3.3. 使用方法和行为警示框、控件列表和模态视图迫使用户点击按钮之后才能继续使用程序，尽管它们时常警告用户潜在的危险或者提供额外的选择，也要避免过度使用，原因在于：· 所有类型的模态视图都会打断用户的工作流。
· 需求确认或者承认视图的频繁出现更让用户厌烦尤其是当警示框出现太频繁时，用户会直接关闭它们，而不是阅读警示框上的文字并在考虑之后点击按钮· 警示框提示程序的重要信息警示框的出现通常很意外，因为它们一般告知用户需要当前程序上出现的问题或者改变采用行动· 控件列表提供用户更多可选择的控件当点击工具栏上的按钮即不是破坏性操作（如删除已拨），也不是完成多步骤操作时（如发邮件），用户期待界面上会出现控件列表· 模态视图在当前任务情境中提供更多的功能，也可以直接执行和用户工作流有关系的子任务1.4. 警示框的应用（alert）突然在界面中间弹出并浮在界面上的警示框能明显地提示用户一些关键信息警示框的外观强调其出现是由于程序和设备的改变而引起的，但不一定归咎于用户最新的操作，警示框上文字解释当前的状况并引导用户完成操作使用警示框告知用户任务被阻止是很重要的，而且要提供可选择的方法去处理警示框警示框可以给予用户两个按钮，接受或者拒绝潜在的危险，也就是关闭警示框并执行命令或者关闭警示框并不执行命令（通常为“取消”按钮）请谨慎使用警示框，并保证每个警示框提供关键信息和有效的选项一般而言，避免创建以下形式的警示框：· 更新用户的正常进度的任务。
而应该使用进度条或者活动指标来提供进度上的反馈给用户· 对于用户启动的行为进行询问确认，应该使用控件列表去确认用户启动的命令，甚至是潜在的危险命令，如删除联系地址· 告知让用户束手无策的错误或者问题尽管告知用户无法处理的关键性问题是有必要的，但如可能，最好将信息合并在界面上例如，与其告诉用户链接服务器每次都失败了，不如显示最后一次链接成功的时间1.5. 警示框的设计警示框的文字、按钮的数目和按钮上的内容都可以自定义，但其背景不可以改变对于用户而言，在两者之间做出选择是最容易的，警示框上的按钮数目最好也是两个，如使用单个按钮，用户将没有选择的余地因为用户有时并不仔细阅读警示框上文字就进行操作，所以要高亮右边的按钮作为默认选项比如点击“取消”按钮可以避免无意操作而执行危险的命令，如果不是破坏性的操作，可以执行最普遍的操作设置警示框上的按钮的方法：· 警示框上有两个按钮时，左边的按钮通常使用深色，而右边的按钮从不使用深色如操作有潜在危险时，“取消”按钮应该在右边并使用浅色；如操作没危险时，“取消”按钮应该在左边并使用深色· 警示框上有一个按钮时，按钮使用浅色上文提到用户有时不会仔细越多警示框上的文字，所以文本内容和标题必须简明扼要，有时，描述状况或者事件的标题就足够了。
但也不要创建无法传达有效信息的单词类标题，比如“错误”，作为标题无法告知用户为什么会出现警示框事实上，在任何界面上都尽量避免出现“错误”字样并描述实际情况如果使用了同样的标题，而警示框是由不同原因触发时，就需要增加句子或者信息去提示用户更为详细的信息如果标题对于信息的传达并没有任何帮助时，可以将标题去掉1.6. 控件列表1.6.1. 控件列表的应用（action sheet）控件列表集合了通过点击而启动任务的选择性按钮，通常应用在：· 提供完成任务的多个可选方式例如在拍照功能中，控件列表提供发送照片的三个目的地· 在完成具有潜在危险的任务之前获取确认例如，根据邮件设置，点击工具栏上的垃圾箱按钮，通过控件列表删除邮件或者取消删除1.6.2. 控件列表的设计控件列表的背景须和程序界面相协调，按钮的数目可以自定义，作为用户操作（如点击删除或者发送按钮）的的结果，所以无需像警示框一样加上文字说明如果操作具有潜在的危险，比如删除所有的购物列表，应该使用红色的按钮提醒用户，而且要将这样的按钮放在控件列表的顶部：· 顶部的按钮，视觉更明显· 有时用户在试图点击“Home”按钮时，意外地触发了控件列表，将有危险性的按钮放在底部会增加误操作的概率。
可以在控件列表上设置多个按钮，但要确保每个按钮都容易辨认1.7. 模态视图1.7.1. 模态视图的应用模态视图默。