《《iPhone界面设计指南》.doc

iPhone界面元素说明 版本 日期 拟稿和修改 说明 0.1 2010-03-12 戴传庆 初稿 目录 1. 界面设计元素说明 1 1.1. 状态栏 2 1.2. 导航栏 3 1.3. 工具栏和标签栏 5 1.3.1. 工具栏 5 1.3.2. 标签栏 6 1.3.3. 使用方法和行为 7 1.4. 警示框的应用 8 1.5. 警示框的设计 9 1.6. 控件列表 10 1.6.1. 控件列表的应用 10 1.6.2. 控件列表的设计 10 1.7. 模态视图 11 1.7.1. 模态视图的应用 11 1.7.2. 模态视图的设计 12 1.8. 表视图、文本视图和网页视图 13 1.8.1. 表视图 13 1.8.2. 使用方法和行为 13 1.8.3. 表视图类型 14 1.8.4. 表视图元素 15 1.9. 开关控件 16 1.10. 视图元素 16 1.10.1. 表视图使用户操作更容易 16 1.10.2. 文本视图 17 1.10.3. 网页视图 17 1.10.4. 运行指示 18 1.10.5. 日期和时间选择器 19 1.10.6. 细节扩展按钮 20 1.10.7. 信息按钮 20 1.10.8. 标签 21 1.10.9. 页面指示 21 1.10.10. 选择器 22 1.10.11. 进度视图 23 1.10.12. 圆角的矩形按钮 23 1.10.13. 搜索栏 24 1.10.14. 分段控件 25 1.10.15. 滑杆 26 1.10.16. 输入框 26 1.11. iPhone标准按钮和图标 27 1.11.1. 工具栏和导航栏上的标准按钮 27 1.12. 标签栏上的标准图标 29 1.13. 创建自定义图标和图片 29 1.13.1. 程序图标 29 1.13.2. 小图标 30 1.13.3. 启动图片 30 1.13.4. 导航栏、工具栏和标签栏上的图标 31 界面设计元素说明 在深入研究iPhone界面的视图和控件之前，有必要理解这些元素的操作方式和隐喻含义。本文将介绍应用于大多数程序的视图，以及它们的属性和使用方式。 状态栏 状态栏显示iPhone的重要信息，包括信号强度、网络连接和电池量。 全屏式的程序是否隐藏状态栏需要慎重考虑，否则用户退出程序才能看到手机的状态，这样的用户体验并不理想。例如，拍照时用户的注意力集中在照片上，这时隐藏状态栏几秒钟是合理的，用户可以通过点击找回状态栏、导航栏和工具栏。如果非要隐藏状态栏，那也必须有利于用户体验，并且用户可以通过点击轻易地重现状态栏，但也不要为了重现状态栏而定义一个手势，用户不喜欢发现和记住这样的操作。 尽管不能限定状态栏的内容，但是可以定制它的外观、大小和操作，具体而言： 是否显示网络连接。如果程序需要花费一小会时间连接网络，状态栏上的显示网络连接是有必要的。如果网络连接可以在瞬间完成，网络连接的图标也不是必须的，因为用户可能还没有注意到这个图标，程序已经完成网络连接了 状态栏的颜色。可以选择灰色、黑色或者透明的黑色，并设置状态栏的颜色是否动态变化 确保状态栏和程序界面协调一致。例如，如果导航栏不透明，就不要使用有透明的状态栏 导航栏（navigation bar） 导航栏显示在状态栏的下方，包括标题、按钮和分段控件。导航栏对于信息层次分明的产品应用型软件尤其有用。导航栏有两个作用： 强调程序中不同视图的导航 便于管理视图中的内容 如上图，导航栏居中显示当前视图的标题。 导航栏中的标题随着界面的变化而更换，并且可以加上带有界面标题的回退按钮。 标准的回退按钮明确用户返回到上一个界面，因此也避免改变按钮的操作方式，如上图的分段式回退按钮就是不可取的，这种作法容易导致如下几个问题： 分段式回退按钮占据标题的显示空间 无法显示单个片断的已选状态 分段越多，显示空间越少，也就难以点击 难以选择哪种方式显示分段式导航 如果认为用户容易在程序中迷失，不用分段回退按钮而才采用面包屑路径，这可能就意味着用户进入深层次的信息才能找到他们想要的，这时更应该做的是减少信息的深度。 除了回退按钮，在标题的右边还可以增加第二个按钮。如果不需要回退按钮的话（程序不支持分层式导航），也可以像上图一样在左上角加上一个作用于视图内容的按钮，如编辑按钮。导航上的按钮都有边框，如果在导航栏上放置一个无边框的按钮，程序会自动将其转化为有边框的按钮。按钮可以自己设计，也可以采用iPhone自带的按钮。导航栏上的字体也可以自定义，但是系统自带的字体更有利于阅读，当使用UIKit创建导航栏时，系统将自动使用自带的字体。 当手机竖屏变为横屏时，导航栏的高度会自动改变（不必定义导航栏的高度）。横屏幕的导航栏变窄，界面上可以显示更多的内容，所以在设计导航栏上的图标和