iPhone界面元素说明

iPhone界面元素说明目录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. 导航栏、工具栏和标签栏上的图标 31界面设计元素说明在深入研究iPhone界面的视图和控件之前，有必要理解这些元素的操作方式和隐喻含义。本文将介绍应用于大多数程序的视图，以及它们的属性和使用方式。状态栏状态栏显示iPhone的重要信息，包括信号强度、网络连接和电池量。全屏式的程序是否隐藏状态栏需要慎重考虑，否则用户退出程序才能看到手机的状态，这样的用户体验并不理想。例如，拍照时用户的注意力集中在照片上，这时隐藏状态栏几秒钟是合理的，用户可以通过点击找回状态栏、导航栏和工具栏。如果非要隐藏状态栏，那也必须有利于用户体验，并且用户可以通过点击轻易地重现状态栏，但也不要为了重现状态栏而定义一个手势，用户不喜欢发现和记住这样的操作。尽管不能限定状态栏的内容，但是可以定制它的外观、大小和操作，具体而言：是否显示网络连接。如果程序需要花费一小会时间连接网络，状态栏上的显示网络连接是有必要的。如果网络连接可以在瞬间完成，网络连接的图标也不是必须的，因为用户可能还没有注意到这个图标，程序已经完成网络连接了状态栏的颜色。可以选择灰色、黑色或者透明的黑色，并设置状态栏的颜色是否动态变化确保状态栏和程序界面协调一致。例如，如果导航栏不透明，就不要使用有透明的状态栏导航栏（navigationbar）导航栏显示在状态栏的下方，包括标题、按钮和分段控件。导航栏对于信息层次分明的产品应用型软件尤其有用。导航栏有两个作用：强调程序中不同视图的导航便于管理视图中的内容如上图，导航栏居中显示当前视图的标题。导航栏中的标题随着界面的变化而更换，并且可以加上带有界面标题的回退按钮。标准的回退按钮明确用户返回到上一个界面，因此也避免改变按钮的操作方式，如上图的分段式回退按钮就是不可取的，这种作法容易导致如下几个问题：分段式回退按钮占据标题的显示空间无法显示单个片断的已选状态分段越多，显示空间越少，也就难以点击难以选择哪种方式显示分段式导航如果认为用户容易在程序中迷失，不用分段回退按钮而才采用面包屑路径，这可能就意味着用户进入深层次的信息才能找到他们想要的，这时更应该做的是减少信息的深度。除了回退按钮，在标题的右边还可以增加第二个按钮。如果不需要回退按钮的话（程序不支持分层式导航），也可以像上图一样在左上角加上一个作用于视图内容的按钮，如编辑按钮。导航上的按钮都有边框，如果在导航栏上放置一个无边框的按钮，程序会自动将其转化为有边框的按钮。按钮可以自己设计，也可以采用iPhone自带的按钮。导航栏上的字体也可以自定义，但是系统自带的字体更有利于阅读，当使用UIKit创建导航栏时，系统将自动使用自带的字体。当手机竖屏变为横屏时，导航栏的高度会自动改变（不必定义导航栏的高度）。横屏幕的导航栏变窄，界面上可以显示更多的内容，所以在设计导航栏上的图标和界面上的图层时，要考虑到设计不同的高度样式以便适应导航栏的变化。导航栏的颜色和透明图可以自定义，也可以使用标准色彩：蓝色（默认值）黑色在导航栏上增加透明效果，尤其是横屏幕上，使得界面看起来的可视区域更大。但不要用半透明的导航栏结合不透明的工具栏，也不要在同样的显示方式下使用不同颜色和不同透明度的导航栏。工具栏和标签栏工具栏（toolbar）当用户需要操作当前界面内容时，使用界面底部的工具栏更为合适。例如，当用户在邮件中浏览一条信息时，工具栏上选项可以删除、回复或者移动信息，也可以新建邮件和撰写新信息。这样，用户可以停留在当前界面管理邮件。一个选项的区域为44×44像素,所以工具栏上选项要限定在五个以内,这样用户也容易点击想要的选项。工具栏中的选项可以不设边框，这在iPhoneOS中称作平原风格，当然也可以像导航栏上的按钮一样给选项加上边框。选项的图标可以自己绘制，或者使用iPhoneOS自带的图标。标签栏（statusbar）标签栏显示在屏幕的最底部，用于变换同组数据的不同显示方式，或者调用程序的子单元。用户可以在程序的任何界面使用标签栏切换模式或者视图，而不是像工具栏一样包含可以作用于当前界面的按钮。如上图，iPhone的时钟提供了世界世界、闹铃、秒表和计时器四种功能，用户可以随时切换功能并明确地知道当前界面是什么功能。标签由图标和文字组成，在黑色的背景上以等宽的形式出现，当标签被选中时，背景和图片都会高亮。另外在不同的显示方式下（横屏或者竖屏），标签的透明度和高度都不会改变。当标签多于五个时，iPone会显示其中四个并增加一个“More”标签，当点击“More”标签时，会在单独的界面显示其余的标签，使用导航栏上的“Edit”按钮，可调整标签栏上的标签，比如将最常用的标签显示在标签栏上，而同样的标签图标可以出现在三个地方（标签栏，More界面，Configure界面）。标签上还可以增加白色边框和填充红色的椭圆形标记，合理地提示用户某些反馈信息，就像显示未接电话的数目那样，而标记对于用户的任务或者情境并不是关键性信息。使用方法和行为警示框、控件列表和模态视图迫使用户点击按钮之后才能继续使用程序，尽管它们时常警告用户潜在的危险或者提供额外的选择，也要避免过度使用，原因在于：所有类型的模态视图都会打断用户的工作流。需求确认或者承认视图的频繁出现更让用户厌烦。尤其是当警示框出现太频繁时，用户会直接关闭它们，而不是阅读警示框上的文字并在考虑之后点击按钮。警示框提示程序的重要信息。警示框的出现通常很意外，因为它们一般告知用户需要当前程序上出现的问题或者改变采用行动。控件列表提供用户更多可选择的控件。当点击工具栏上的按钮即不是破坏性操作（如删除已拨电话），也不是完成多步骤操作时（如发邮件），用户期待界面上会出现控件列表。模态视图在当前任务情境中提供更多的功能，也可以直接执行和用户工作流有关系的子任务。警示框的应用（alert）突然在界面中间弹出并浮在界面上的警示框能明显地提示用户一些关键信息。警示框的外观强调其出现是由于程序和设备的改变而引起的，但不一定归咎于用户最新的操作，警示框上文字解释当前的状况并引导用户完成操作。使用警示框告知用户任务被阻止是很重要的，而且要提供可选择的方法去处理警示框。警示框可以给予用户两个按钮，接受或者拒绝潜在的危险，也就是关闭警示框并执行命令或者关闭警示框并不执行命令（通常为“取消”按钮）。请谨慎使用警示框，并保证每个警示框提供关键信息和有效的选项。一般而言，避免创建以下形式的警示框：更新用户的正常进度的任务。而应该使用进度条或者活动指标来提供进度上的反馈给用户。对于用户启动的行为进行询问确认，应该使用控件列表去确认用户启动的命令，甚至是潜在的危险命令，如删除联系地址。告知让用户束手无策的错误或者问题。尽管告知用户无法处理的关键性问题是有必要的，但如可能，最好将信息合并在界面上。例如，与其告诉用户链接服务器每次都失败了，不如显示最后一次链接成功的时间。警示框的设计警示框的文字、按钮的数目和按钮上的内容都可以自定义，但其背景不可以改变。对于用户而言，在两者之间做出选择是最容易的，警示框上的按钮数目最好也是两个，如使用单个按钮，用户将没有选择的余地。因为用户有时并不仔细阅读警示框上文字就进行操作，所以要高亮右边的按钮作为默认选项。比如点击“取消”按钮可以避免无意操作而执行危险的命令，如果不是破坏性的操作，可以执行最普遍的操作。设置警示框上的按钮的方法：警示框上有两个按钮时，左边的按钮通常使用深色，而右边的按钮从不使用深色。如操作有潜在危险时，“取消”按钮应该在右边并使用浅色；如操作没危险时，“取消”按钮应该在左边并使用深色。警示框上有一个按钮时，按钮使用浅色。上文提到用户有时不会仔细越多警示框上的文字，所以文本内容和标题必须简明扼要，有时，描述状况或者事件的标题就足够了。但也不要创建无法传达有效信息的单词类标题，比如“错误”，作为标题无法告知用户为什么会出现警示框。事实上，在任何界面上都尽量避免出现“错误”字样并描述实际情况。如果使用了同样的标题，而警示框是由不同原因触发时，就需要增加句子或者信息去提示用户更为详细的信息。如果标题对于信息的传达并没有任何帮助时，可以将标题去掉。控件列表控件列表的应用（actionsheet）控件列表集合了通过点击而启动任务的选择性按钮，通常应用在：提供完成任务的多个可选方式。例如在拍照功能中，控件列表提供发送照片的三个目的地。在完成具有潜在危险的任务之前获取确认。例如，根据邮件设置，点击工具栏上的垃圾箱按钮，通过控件列表删除邮件或者取消删除。控件列表的设计控件列表的背景须和程序界面相协调，按钮的数目可以自定义，作为用户操作（如点击删除或者发送按钮）的的结果，所以无需像警示框一样加上文字说明。如果操作具有潜在的危险，比如删除所有的购物列表，应该使用红色的按钮提醒用户，而且要将这样的按钮放在控件列表的顶部：顶部的按钮，视觉更明显。有时用户在试图点击“Home”按钮时，意外地触发了控件列表，将有危险性的按钮放在底部会增加误操作的概率。可以在控件列表上设置多个按钮，但要确保每个按钮都容易辨认。模态视图模态视图的应用模态视图默认从界面底部滑出并占据整个界面，并短暂地显示与之前不同的界面，直到用户完成某项操作。模态视图完成和程序主功能有关系的独立任务，尤其适合于主功能界面中欠缺的多级子任务。例如撰写新邮件时的模态视图，包含了地址和消息文本、输入光标、取消和发送按钮。模态视图的设计标题通常定义了模态视图的类别，也可以加上和任务或者导向有关的文字描述。比如短信程序包括了导航栏、标题“新短信”、取消按钮和文本输入区域。为了让用户意识到模态视图是过渡性的操作，可以指定以下切换方式：竖向移动。模态视图从屏幕的底部滑进滑出。翻转。当前界面切换到模态视图时从右到左翻转，视觉上看起来模态视图好像在当前界面的背面。为了让用户易于发现和记住，最好使用风格统一的翻转方式。\o"PermanentLinkto表视图、文本视图和网页视图"表视图、文本视图和网页视图通用元素表视图、文本视图和网页视图在程序中经常应用。例如表视图用于显示简短的列表选项、分组的详细信息表或者项目索引列表，文本视图和网页视图可以不受限制地接收和显示内容。表视图（tableview）表视图以栏列表的形式显示数据，栏可以拆分成项或者组，每栏可包含文本、图片或者控件。使用方法和行为不论是多少数量的信息，表视图都可以提供有效的管理方式，因而在iPhone界面设计中非常有用。表视图内置的元素容可供用户浏览和处理信息：项或者组列表的上下显示页眉和页脚。用户可以增加、移除或者重新编排列表，也可以对多个列表同时操作。当用户选中一个列表项目时，应该提供适当的反馈：要么显示新视图，要么栏被标记为已选中。另外，表应该无间断地显示内容，如果表内容多或者复杂，数据可以逐步显示，避免在调取所有数据前不显示任何内容。如果数据变化不太频繁，可以先显示“过期”的数据直到更新新数据。这些设计都是期望使用户立即就看到有用的数据。如无法立即更新数据，为了避免出现死机的假象，可以在屏幕中显示进度条和文字说明，如“加载中…”，让用户知道程序仍在运行中。表视图类型iPhoneOS定义了两种外观不同的表视图类型：普通型。如上图，用边框将表拆分成背景为白色的栏，可以使用界面右边的标签搜索。编组型。编组型的栏从屏幕的边际插入，背景为垂直的条纹背景，而栏本身用白色填充。表视图内的组数量不受限制，组中的栏数量也不受限制，但不提供索引功能。表视图元素iPhoneOS中带有少量只能在表视图应用的功能性元素：扩展图标。当显示扩展图标时，用户直到点击栏上的任何位置就会显示下一级列表或者选项。细节扩展按钮。点击此按钮可以获得关于列表项的细节信息。删除按钮。用于删除列表项，当用户用力点击栏或者在编辑中点击删除控件按钮。删除控件按钮。点击删除控件按钮，显示或者隐藏删除按钮，为了增加反馈，删除按钮显示时，左边的水平负号旋转了90度。插入栏按钮。用于在列表项中增加栏，栏重新排序按钮。选中标记。显示在已选中的列表项右边。开关控件开关控件用于互斥的选项，例如是/否或者开/关，每次只显示其中一个选择。视图元素表视图使用户操作更容易表视图在iPhone界面设计中很常见，因为它能适应用户多种操作方式，比如：选项。iPhoneOS不包括类似于菜单那样的多项选择式控件，但表视图也有可供用户选项的列表项。信息分级导航。表视图可以显示多级信息，用户也易于通过扩展图标发现信息的层级关系。浏览分组信息。可以将通讯录分组，如同事、家庭或者学校，信息在视觉上清晰可辨。查找索引信息。如果使用普通表视图，可以通过界面右边的索引信息（如字母表）帮助用户快速查找。文本视图顾名思义，文本视图就是用于显示文本，例如写邮件的正文，可以设置整个文本的字体、颜色、边距或者特定的输入法。网页视图网页视图可以显示富内容和HTML，适用于网页或者web程序。iPhoneOS的几种控件被用户所熟知，有些控件可以在特殊界面中应用（如表视图），而本文将介绍可以应用在所有界面的控件。运行指示运行指示表示后台有程序正在运行，但任务完成时不会提醒用户。当程序无法立即完成联网时，状态栏上会显示运行指示。当程序执行的任务无法立即完成时，工具栏上会显示稍大点的运行指示。运行指示提供了很好的反馈机制，明确地告知用户程序正在运行比告诉用户任务已经完成更为重要。运行指示的颜色默认为白色，当然颜色和尺寸也可以自定义。日期和时间选择器（dataandtimepicker）日期和时间选择器可以同时显示四个独立的转轮，每个都可以表示单独的种类，例如月份或者小时。预先将值限定在一定范围内，可以避免用户多次输入。日期和时间选择器有以下模式：时间。显示小时和分钟，AM/PM选项。日期。显示月、日和年。日期和时间。默认显示日历、小时和分钟。倒数计时器。显示小时和分钟，最大值23小时59秒。分钟的值默认是0-59分钟，共60个值，也可以将60个值均分为四个值：0、15、30和45。细节扩展按钮点击细节扩展按钮，可以浏览到关于信息的更多细节。信息按钮信息按钮用于设置程序，例如上图天气程序的右下角。在iPhoneOS中点击此按钮，会有发光的视觉效果。标签标签适用于显示少量的文本，可以对部分界面命名或者提供有限的辅助信息。标签的字体、颜色和间距都可以自定义。页面指示页面指示以圆点代表每个已打开的视图，发光的圆点代表当前视图，从左到右的圆点表示了视图被打开的先后顺序，但不能像面包屑一样显示视图的路径。如上图的天气程序，界面指示位于视图底部和屏幕底部的中间，在竖屏幕的情况下最多可以显示20个圆点。选择器（picker）选择器是日期和时间选择器的通用版本，可以显示任意的值。这是，部分值会被转轮掩藏，如果值数量较少或者用户知道被掩藏值是什么，就像月份选择器，只有1-12月的值，可以考虑使用选择器。但是如果用户并不能预先知道被掩藏的值是什么，那使用选择器就不合理了。如果数量过大，使用表视图更能便于用户快速选择。进度视图（progressview）进度视图用于显示任务的进度，和运行指标的区别在于：任务完成的时间可以预计时，使用进度视图，否则使用运行指标。进度视图有高度不同的两种类型：默认类型适用于程序的主要界面条型比默认类型更细，可以应用在工具栏上。圆角的矩形按钮圆角的矩形按钮是用于执行命令的通用按钮，如上图中的“TextMessage”和“AddtoFavorites”按钮。搜索栏（searchbar）搜索栏用于内容搜索，点击之后会显示虚拟键盘，除了左边默认的搜索图标之外，搜索栏还包含其他元素：占位符文本。可以提醒用户搜索栏的功能（例如“Search”）或者搜索的内容（如Google或YouTube）。书签按钮。记住用户的搜索内容，如在地图搜索中，书签按钮可以快速地查到已标记位置、最新搜索的内容和联系人。默认在搜索栏上用户没有输入文本或者占位符文本时，书签按钮才可能显示。清除按钮。可以快速地删除搜索栏中内容，默认在用户在搜索栏中输入文本时，才会显示清除按钮。描述性标题。搜索栏上的文字说明。分段控件（segmentedcontrol）点击分段控件显示不同功能视图，如上图，使用分段控件修改邮箱协议。分段控件的宽度是固定的