From: http://www.1000phone.net/thread-7933-1-1.html
介绍
iPhone 和iPod touch融合了革命性的多点触摸技术和多种强大功能,如电子邮件,即时通信,全功能网页浏览器和iPod等,另外iPhone还具有移动电话的功能。 iPhone OS是在iPhone和iPod touch上运行的系统软件。随着iPhone SDK的发布,这些强大的功能为开发人员提供了众多的开发可能。开发者不但可以创建在iPhone OS设备上使用的网页内容,还可以使用iPhone SDK来创建在设备中储存和使用的本地程序。
本 文档可以帮助您了解可以为iPhone OS创建何种类型的应用程序以及优秀iPhone程序基础的人机界面设计准则。在本文档中,您可以了解到如何在设计最佳用户界面和用户体验时遵循这些原 则。不论您是经验丰富的计算机程序开发员,或是一位熟练的移动设备程序开发员,还是程序开发领域的新手,本文档中都能够帮助您开发出用户需要的 iPhone程序。
- 注意:本文档简要地介绍了如何为iPhone OS设备进行基于网页的开发。更多详细信息,请参考iPhone Web应用程序人机界面指南 。
本文档的组织结构 iPhone人机界面指南 分为两部分,每一部分都包含几个章节:
- 第一部分“设计您的iPhone应用程序” 描述了iPhone OS环境和您可以为它开发的软件类型。它也涵盖了基本的人机界面设计原则,并描述了如何在您的iPhone应用程序中应用这些原则。
- 第二部分“设计您的iPhone应用程序的用户界面” 深入讨论了那些用于创建iPhone应用程序的用户界面的元素。它描述了各种可用的视图和控件并提供了如何有效使用它们的说明。
- iPhone应用程序编程指南
- iPhone Web应用程序人机界面指南
iPhone OS平台:丰富的可能性 iPhone OS支持很多类型的软件,从基于Safari的Web应用,到iPhone本地应用程序,都可以运行在iPhone OS设备上。本章概要地介绍了为iPhone OS设备创建不同类型软件的解决方案。如果您刚接触该平台,您应先阅读第一节中iPhone OS设备和其他计算机的差异总结,“牢记平台间的差异”。虽然此节的信息并不全面,但已经包含了您在设计iPhone应用程序时需要意识到的问题。接下 来,本章阐述了设计不同应用程序风格和特点时的思维方式,以帮助您设计iPhone应用程序。本章也阐述了如何将现有的Mac OS X应用程序转换为iPhone OS版本的应用程序。 牢记平台间的差异 iPhone OS设备不同于台式机或笔记本电脑,iPhone应用程序也与桌面应用程序不同。虽然这些似乎只是常识性陈述,但是您在为这些设备开发软件时意识到这些差 异还是非常重要的。为iPhone OS设备开发软件需要的思维方式可能是也可能不是您所习惯的。尤其是在您的经验主要是开发桌面应用程序的情况下,您应该了解为移动平台设计软件和为台式机 设计软件的差异。本小节总结了这些具体的差异。这些差异对于您的设计选择具有潜在的影响。有关如何处理这些差异以及iPhone应用程序开发过程中的其他 问题的具体信息,请参考 iPhone应用程序编程指南。 紧凑的屏幕尺寸 iPhone OS设备具有高分辨率的小型屏幕,适合用户放入口袋且具有强大的显示功能。然而这个对用户来说巨大的优势可能成为您的挑战。因为这意味着您必须设计一个可 能与您的设计习惯差异较大的用户界面。iPhone OS设备屏幕的尺寸是480 x 320。考虑到这一点,用户界面应该主要关注必不可少的部分。您没有空间来放置那些非必要的设计元素。另外,拥挤的用户界面将降低程序的吸引力并会提高使 用的难度。 内存是有限的 内存是iPhone OS的重要资源,所以在应用程序中管理内存至关重要。因为iPhone OS的虚拟内存模型不包括磁盘交换空间,所以您必须注意避免分配的内存超出设备的可用内存。发生内存过低的情况时,iPhone OS将警告运行中的应用程序,若问题仍然存在,应用程序可能被终止。确保您的应用程序对于内存使用警告作出回应,并及时清理内存。在您设计应用程序时,可 以通过避免内存泄漏,减小资源文件大小以及延迟加载资源的方式,尽力地降低程序的内存占用。关于如何在iPhone应用程序中合理处理内存的的更多信息, 请参考 iPhone应用程序编程指南 。 每次只能显示一个窗口 iPhone OS环境和计算机环境的最大区别之一就是窗口模式。除了一些模式视图外,在iPhone OS设备上,用户每次在屏幕上只能看到应用程序的单个窗口。iPhone应用程序可以包含必要数量的不同窗口,但是用户不能同时访问,只能顺序访问和查 看。如果应用程序的台式机版本需要用户同时看到几个窗口,那么您需要考虑是否存在其他的方式让用户能够在单个窗口或一系列顺序查看的窗口中完成同样的任 务。如果不存在这种方式,您的iPhone应用程序不应考虑复制计算机版本程序的完整功能,而应改为实现计算机版本的单个子任务。 每次只能运行一个程序 同 一时刻只有一个iPhone应用程序可以运行,第三方应用程序不能在后台运行。这意味着当用户切换到另一个应用程序,接电话或是查看邮件时,他们当前使用 的应用程序将被关闭。重要的是,您应确保这一特点没有对用户产生负面影响。也就是说,在用户离开您的iPhone应用程序并在稍后返回时,用户应该不会感 到比在计算机上的程序切换更加困难。保证用户享有良好的程序切换体验的最有效方法就是将您的应用程序的启动时间降到最低。关于如何尽可能地减少启动时间的 更多信息,请参考 iPhone应用程序编程指南 。一般说来,用户通过切换至设备上其他应用程序或服务的方式退出您的应用程序时,他们不会 特地关闭您的应用程序。因此,不要期望用户显式地从菜单中选择退出或是点击关闭按钮。这意味着您的程序可能在没有太多通知的情况下退出,由此您应尽可能迅 速地保存用户所做的修改。这样就能在应用程序切换时形成快速而平稳的过渡,并且保证下一次您的应用程序启动时能够显示用户最近做的修改。简单程序模型的另 一个重要方面是您处理程序特定配置的方式。在iPhone OS设备上,用户在设置程序中设定配置。您的iPhone应用程序可以提供这种配置,但是这意味着当用户想在设置中访问这些配置时,他们必须退出您的程 序。如果您根据标准指南提供用户仅需设定一次的设置,那么您的程序的用户体验就会比较流畅。 简短的用户帮助 移动用户在使用您的应用程序前没有时间通读大量的帮助内容。更重要的是,您也不想用宝贵的空间显示或存储帮助内容。iPhone OS设备的设计特点是易用,所以满足用户的期望并使您的应用程序用法清晰明确是十分关键的。您可以采取如下措施:
- 正确地使用标准控件。因为用户已经熟悉在内置应用程序中看到的标准控件,所以他们了解如何在您的应用程序中使用这些控件。
- 确保您的信息中呈现的路径具有逻辑性,让用户能够轻松作出预测。另外,确保提供标记,比如后退按钮,这样用户就可以知道他们的位置并且了解如何重复原来的步骤。
- iPhone应用程序 ,也就是您用iPhone SDK开发的,在iPhone OS设备上本地运行的程序。
- 仅在网页上显示的内容 ,包括Web应用等,也就是像内置iPhone应用程序一样运行的网站。
- 混合应用程序 ,在Web视图区域中提供网页内容的访问,但是也包含了一些iPhone OS用户界面元素。
- Web应用 提 供了一个任务集中解决方案且遵从某种准则的网页被称为Web应用,因为它们的行为与iPhone OS内置的应用程序类似。Web应用与所有仅在网页上显示的内容相同,都在iPhone中的Safari上运行;用户仅需跳转到Web应用的URL,而不 用在其设备上安装Web应用。
- 优化网页 根据iPhone上的Safari特点进行显示和操作优化的网页(除了某些基于不支持的技术的元素,如插件,Flash和Java)。另外,优化网页的内容尺寸应适合设备的屏幕。常常将其设计为在iPhone OS设备上显示时进行检测,以对所提供的内容做相应调整。
- 兼容网页 显示和操作与iPhone上的Safari兼容的网页(除了某些基于不支持的技术的元素,如插件,Flash和Java)。虽然兼容网页不会采取额外的措施来优化其在iPhone OS设备上的视觉体验,但是一般均能成功地在设备上进行显示。
- 注意:应用程序的风格并没有规定实现方法。虽然本文档主要阐述本地的iPhone应用程序设计,但是此处探讨的程序风格同样可以在iPhone OS设备的网页或混合应用程序中实现。
- 您设想用户是出于什么样的动机去使用您的应用程序?
- 您计划中的用户会获得怎样的用户体验
- 您应用程序的目标或专注点是在哪儿?
- 您的应用程序如何组织,显示人们关心的信息?是否和应用程序的主要任务有天然的关系?
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ds_hierachicalmodel.jpg)
效率型应用程序中的典型的用户交互模型通常包含:
- 组织列表
- 从列表中添加和删除
- 逐步细化信息直到达到目标的详细级别,而后执行与该详细级别对应的任务
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ds_weatherfront.jpg)
实用型应用程序具有视觉上的吸引力,但是又能够突出它们显示的信息。用户使用实用型应用程序来查看一些事情的状态或是查找一些东西,所以用户希望能够快速 方便地看到他们感兴趣的信息。因此,实用型应用程序的用户界面十分简洁,并提供简单的,标准的视图和控件。实用型应用程序一般以平面列表的方式显示信息; 用户通常不需要深入信息层次结构。实用型应用程序中的每一个视图通常都提供同样的数据组织结构和细节深度,但是数据来源可以不同。由此,用户可以打开单个 实用型应用程序以对多个主题进行相似处理。一些实用型应用程序能显示打开的视图的数量;由此用户可以按顺序浏览,在一个视图后选择另一个视图。图1-3显 示了这种类型的数据组织结构。 图 1-3 实用型应用程序通常在平面列表中显示数据
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ds_flatmodel.jpg)
实用型应用程序的用户交互模型非常简单:用户打开程序浏览信息摘要,然后能够选择改变信息的设置或来源。实用型应用程序可能需要支持频繁修改设置和信息来 源,所以它们通常在主视图的背面提供一小部分这样的选项。用户可以点击位于主视图右下角的,与信息按钮相似的按钮来查看主视图的背面。在调整完成之后,用 户点击完成按钮即可返回主视图的正面。在实用型应用程序中,主视图背面的选项是应用程序功能的一部分,而不是用户设置一次以后就极少再用的一组偏好设置。 因此,实用型应用程序不应该把特定设置放在设置应用程序中。图1-4显示了天气应用程序在主视图背面提供的配置选项。 图 1-4 用户可以在天气应用程序的背面进行调整
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ds_weatherback.jpg)
沉浸式应用程序 沉浸式应用程序 提供具有丰富视觉效果的全屏环境,专注于内容和用户 对内容的体验。用户通常使用沉浸式应用程序进行娱乐,不论是玩游戏,观看多媒体内容还是执行简单的任务。虽然很容易发现游戏非常适合这种iPhone应用 程序风格,但是您可以想象一下,沉浸式应用程序的特点也可以增加其他类型任务的吸引力。呈现一个独立环境,不显示大量的文字信息,需要用户注意力的任务就 十分适合采用沉浸式应用程序。例如,一个应用程序模拟了使用气泡水平仪的体验,它在全屏环境下执行的很好,即使它不符合游戏的定义。在这类程序中,也像游 戏中一样,用户的焦点在于视觉上的内容和体验,而非体验背后的数据。图1-5显示了沉浸式应用程序的例子,它模拟了实际的用户体验并执行了简单的任务。 图 1-5 沉浸式应用程序不一定是游戏
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/bubble_level.jpg)
- 注意: 虽然横向显示的程序启动时主页按钮应处于屏幕的右边,但是图1-5中显示的水准仪程序启动时的方向恰恰相反。这保证了设备边缘的物理按钮不会干扰测量。关于启动的更多信息,请参考“启动”一节。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ds_mailondesktop.jpg)
但是在人们处于移动状态时,他们需要一个更加简单,且能够快速完成其核心功能的邮件程序。因此,在iPhone OS的设备上的邮件应用程序致力于实现用户处理邮件的最关键事项:收取,撰写,发送和管理邮件。为此,用户界面被精简,使得用户的帐户和邮箱的结构更为清 晰,并将用户的注意力集中在邮件上。iPhone OS中的邮件应用程序是一个效率型应用程序的完美例子。为了便于内容导航,iPhone OS中的邮件应用程序利用了人们邮件中自然的层次结构,使用一连串的页面显示帐号,邮箱,邮件列表以及邮件内容。用户可以在列表中选择某一项,从一般(帐 号列表)至特殊(一条信息)地进行深入了解,并查看与该项相关的事物。了解更多效率型应用程序风格的iPhone应用程序,请参考“效率型应用程序” 。 另外,iPhone OS中的邮件应用程序允许多种操作,比如创建和发送。这是通过显示几个可以被点击且用户熟悉的控件来实现的。图1-7显示了邮件应用程序如何使用户在 iPhone OS中查看和发送邮件变得简单。注意每一屏上方的元素,它们让用户更轻松地了解到他们过去和当前在程序中所处的位置。图 1-7 iPhone OS中的邮件应用程序使得查看和发送邮件变得简单
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ds_mailscreens.jpg)
iPhoto 另一个从Mac OS X应用程序重构为iPhone OS程序的例子是iPhoto。在台式机上,iPhoto支持全面搜索和管理,具有强大的编辑能力以及富有创意的打印选项。当人们在他们的台式机或笔记本 电脑上使用iPhoto时,他们希望能够查看和管理整个收藏集,对照片进行调整并且以各种方式来操纵照片。虽然iPhoto的重点是用户的内容,但是程序 也在其窗口中提供了丰富的功能。图1-8显示了台式机上iPhoto的用户界面。图 1-8 iPhoto用户界面
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ds_iphoto.jpg)
但是在用户处于移动状态时,他们没有时间来编辑图片(同时他们也不期望能够打印图片);而是希望能够快速浏览并分享他们的图片。为了在iPhone OS设备上满足这一要求,苹果提供了照片应用程序。该程序能够显示图片并与其他用户分享图片。照片应用程序的用户界面完全以照片为核心;以至于实际设备的 用户界面被部分隐藏。当用户选择以幻灯片形式查看图片时,照片应用程序将隐藏导航栏,工具栏甚至状态栏。当用户需要查看这些工具栏时,这些元素又以半透明 状态显示出来。照片应用程序使用层级结构使得用户可以来轻松地整理,查找照片:用户可以选择一个包含了一系列照片的相册,而后从相册中选择单张照片。按照 这种方式,照片应用程序就是一个结合了效率型应用程序风格和沉浸式应用程序风格特性(了解更多有关这些风格的信息,见“三种应用程序风格” )的应用程序。图1-9显示了用户如何在照片应用程序中查看图片。图 1-9 照片应用程序中的三个界面
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ds_photosscreens.jpg)
另外,照片应用程序提供临时视图,称为动作表单(如“警告,动作表单以及模式视图” 所述),从而让用户能够在不退出图片查看视图的情况下使用其他的功能。图1-10显示了照片应用程序如何为单张图片提供动作表单。图 1-10 照片应用程序的动作表单
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ds_photosmodalview.jpg)
人机界面准则:创建优秀的用户界面 优秀的用户界面应该遵循一些人机界面设计准 则,这些准则来源于人—也即用户—思考和工作的方式,而不是设备的能力。没有吸引力的,令人难以理解的或是不合逻辑的用户界面会让一个原本优秀的程序成为 垃圾,而漂亮,直观而又吸引人的用户界面不仅可以改善程序的功能,还能激发用户的正面依赖感。即使您已经对基本的设计准则有所了解,这一章也值得您读一 下,因为本章着重讲述了这些准则是如何应用在iPhone应用程序中的。隐喻 尽可能按照现实世界中的对象和操作来对您 程序中的对象和操作建模。这能够帮助用户,尤其是新手,迅速地理解您的应用程序的是如何工作的。文件夹就是一个典型的软件隐喻。因为在现实世界中,人们将 文件放在文件夹里,所以人们就能够迅速地理解在计算机上将数据放入文件夹的概念。iPhone OS中的隐喻包括iPod播放控件,点击控件来触发事件,滑动开关,以及调色板上的数据。虽然隐喻暗示了iPhone OS用户界面中对象和操作的含义,但是并没有限制其软件实现。回到文件夹的例子,软件实现的文件夹对象所具有的容量与现实世界中所对应的文件夹的物理容量 毫无关系。在您设计程序时,需要注意iPhone OS中已存在的隐喻,避免重复定义。同时,检查您的程序功能是否有对应的可用的自然隐喻。记住,即使如此,相较于为了适应您的应用程序用户界面而勉强使用 现实世界的对象或操作的隐喻而言,使用标准控件和操作更为妥善。除非您选择的隐喻能得到大部分用户的认可,包括那些会增加而不是减少用户困惑的隐喻。直观操作 直 观操作意为人们感到他们在物理上,而非抽象地控制某物。其优点在于,用户更容易理解他们的行为对于操作对象所产生的结果。得益于多点触摸的用户界 面,iPhone OS用户享有高度直观的操控感。手势的使用让人们感到屏幕上显示的对象具有更大的亲和力和更强的操控感,因为他们并不需要用任何中间设备(如鼠标)就操控 它们。为了提高您的iPhone应用程序的操控感,您应确保:
- 当用户操作屏幕上的对象时,这些对象保持可见
- 用户操作的结果是一目了然的
设计iPhone应用程序:从产品定义到品牌宣传 当您开发iPhone应用程序时,您需要了解iPhone OS以及移动设备环境的各个方面给您的设计带来的影响。本章涵盖了从产品定义到品牌宣传的一系列程序设计问题的指导方针,并介绍了在iPhone应用程序中是如何解决这些问题的。给出产品定义说明 在开始设计您的应用程序之前,精确定义您的应用程序是用来做什么的非常重要。一个比较好的方法是撰写一份产品定义说明 — 用于描述您的应用程序的主要功能及目标用户的文档。创建产品定义说明不仅仅是一种练习,相反地,它是将一系列产品功能转化成一个清晰完整的产品的最佳方法 之一。首先,花些时间定义您的目标用户:他们是专家还是新手?是严谨的还是随和的?是带着特定任务来寻求帮助还是为了娱乐消遣的?了解这些可以帮助您根据 用户的特殊需求来定制用户体验和用户界面。由于您是在设计一个iPhone应用程序,有一些用户需求是已知的。例如:
- 他们是移动的。
- 他们希望能够尽可能快地打开您的应用程序,并立即看到有用的信息。
- 他们应只需要简单几步就能够完成任务
- 获取关于特定食品的营养信息
- 寻找打折和优惠信息
- 创建和使用购物清单
- 定位商店
- 查阅食谱
- 比较价格
- 查看购物总额
- 如何使用您的应用程序应显而易见。
- 常见的功能和信息集中于屏幕的顶部。
- 最大限度地减少文本输入。
- 简洁地表达基本信息。
- 为所有可点击元素提供一个指尖大小的目标区域。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/stop_watch.jpg)
由上而下的布局 用户可以用手指或大拇指点击一个iPhone OS的设备的屏幕。用户倾向于用他们的非惯用手握住设备(或搁在手心),用惯用手的手指点击设备。当使用大拇指时,人们要么将设备一手握住,然后用大拇指 点击,要么将设备握于双手间,同时用两根大拇指点击。无论用哪一种方式,对于用户来说屏幕最上方都是最显眼的。由于这些使用模式,您在设计应用程序的用户 界面时,应将最常使用的(通常也是重要的)信息置于最明显且最方便的顶部。当用户从屏幕顶部浏览到底部的时候,呈现的信息的过程应该是由一般到特殊,从高 级到低级的过程。 最大限度地减少所需的输入 无论用户是点击控件还是使用键盘,输入信息都会占用他们的时间和精力。如果 您的应用程序需要用户在获取有用信息前进行大量输入,这将降低用户效率,并且会妨碍用户继续使用您的程序。当然,您通常需要一些来自用户的信息。但您应该 在用户提供的信息和您反馈给用户的信息之间做出权衡。换句话说,努力为用户提供的每一条信息反馈尽可能多的信息或功能。这样,当用户使用您的应用程序时他 们会感到正在取得进展,并没有被阻塞。当您向用户请求输入时,考虑使用表格视图(或选择器)来代替文本输入框。对用户来说,从一个列表中选择一项通常比输 入单词容易得多。有关表格视图和选择器的细节,请分别参考 “表格视图” 和 “选择器” 小节。 简洁地表达信息 当 用户界面上的文本简短而又直接的话,用户就能够快速地理解它。因此,简明扼要地表达最重要的信息,并显著地突出该信息,这样用户不必为了所寻找的信息或为 了弄清下一步该怎么做而阅读大段的文字。为了帮助您做到这一点,您可以像一位报纸编辑一样地思考,努力用压缩标题的风格传递信息。为控件加上简短的标签 (或易于理解的符号),以便用户一眼就能了解如何使用它们。 为控件提供指尖大小的目标区域 如果您的布局将控件放置得过 于靠近,用户需要花费更多的时间和精力来确定他们点击的区域,并且很容易点错控件。一个简单易用的用户界面应该合理地分配控件和其他用户界面元素,使得用 户能够更方便地点中控件。例如,内置的计算器应用程序显示很大的,易于点击的控件,每个控件的目标区域大约44x44像素。图3-2 展示了计算器应用程序。 图 3-2 内置计算器应用程序的控件
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/calculator.jpg)
将重点放在主要功能上 一个令用户满意且愉快iPhone应用程序应将重点放在它的主要功能上,因此,当您设计应用程序时,要始终将重点放在您的产品定义说明上,并确保每个产品功能和用户界面元素支持这个说明。关于如何创建产品定义说明的相关建议, 请参考 “给出产品定义说明” 。 一个比较好的方法是确定在每个上下文中什么是最重要。当您决定要在每个屏幕中显示什么时不断问问自己,这是用户现在需要的关键信息或功能吗?或者,想得更 加具体些,当用户在商场购物或在会议间步行时,这个信息或功能是不是他们需要的?如果不是,那它在另一个不同上下文中是不是重要?或者它终究不是那么重 要?例如,一个帮助用户记录汽车里程数的应用程序不应关心汽车经销商的位置。当您遵照这些准则时,您的解决方案变得更为清晰。特别是,您的应用程序使用起 来更为显而易见,且最小限度地减少了用户输入。集中关注您的解决方案的重点,从而使得用户能更加方便,快速地进入到应用程序中最重要的部分(关于这些准则 的具体内容,请参考 “简单和易用性” )。 例如,内置的日历应用程序(如图3-3 所示)重点在于日期及当天发生的事件。用户可以使用具有明确标签的按钮显示当前日期,选择查看选项,添加事件等。最重要的信息是日期以及与之相关的事件, 也是最显眼的。用户输入也很简单,它允许用户从列表中选择时间,重复间隔以及提醒选项,而不是要求按键输入。 图 3-3 内置的日历应用程序重点是日期和事件
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/calendar.jpg)
有效地沟通 沟通和反馈,在iPhone应用程序中的重要性和在桌面应用程序一样。用户需要知道他们的请求是否正在处理 中,以及他们的行为是否会导致数据丢失或其他问题。尽管如此,避免矫枉过正的沟通也很重要,例如在并非真正严重的情况下提醒用户或过于频繁地请求确认。动 画是一种进行有效沟通的好方法,前提是它不会妨碍用户的任务或影响他们的效率。精细适当的动画可以传递信息,提供有用的反馈,以可视化的方式向用户展示他 们行为的结果。但是过多或无意义的动画会阻碍应用程序的流程,影响其性能,并困扰用户。在所有与用户的基于文本的沟通中,一定要使用以用户为中心的术语, 特别是要避免在用户界面中使用技术术语。例如,在Wi-Fi无线网络偏好设置界面使用清楚的,非技术性的语言来描述如何将设备连接到网络,如图3-4所 示。 图 3-4 在应用程序的用户界面中使用以用户为中心的术语
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/da_userlanguage.jpg)
适当的支持手势 人们习惯用手指来操作iPhone OS设备独特的多点触摸界面,使用如轻敲,摇动,夹等手势来选择,操作,阅读网页内容或使用应用程序。使用手指操作设备其真正的优势在于:手指总是可用 的,它们有能力完成许多不同的动作,并且它们给用户一种直观的,和设备关联的感觉,这是诸如鼠标等外部输入设备无法实现的。然而,手指有一个主要缺点,和 鼠标指针相比,无论是在大小,形状还是灵敏度方面都要差很多。在屏幕的上下文中,手指永远不可能像鼠标指针一样精确。所幸的是,您可以用一个良好的用户界 面设计来弥补手指输入设备带来的挑战。在大多数情况下这意味着您需要确保您的布局可容纳一个指尖的平均大小,同样也意味着您需要响应手指的动作以让用户获 得其期望的行为。用户进行一些特定的动作,从而获得特殊的结果,这种动作称之为 手势 。例如,用户点击一个按钮来选中 它,并摇动,或拖拽以滚动一个列表。因为内置的应用程序一致使用,iPhone用户已经习惯了这些手势。因此,您应该在您的应用程序中恰当地使用这些手 势,避免混淆。还有一些更加复杂的手势,如swipe或pinch open,一样在内置的应用程序中被使用,但它们并不常见。一般来说,这些手势被用作快捷方式来加快完成任务,而不是执行任务的唯一方法。例如,当查看邮 箱中邮件列表时,用户显示消息预览行中的删除按钮并点击它来删除一条正在查看的消息。用户可以用两种不同的方式显示删除按钮:
- 点击导航栏中的编辑按钮,这个按钮将在每个预览行里显示一个删除控件。然后点击该控件就会显示删除按钮。
- 在特定的预览行使用swipe手势,就会显示这条消息的删除按钮。
手势
操作
Tap
按或选择一个控件或项目(类似于单击一次鼠标)。
Drag
拖动
Flick
快速滚动或摇晃
Swipe
在一个表视图行中,显示删除按钮。
Double tap
放大并将内容或图片部分居中。缩小(如果已经被放大的话)。
Pinch open
放大
Pinch close
缩小
Touch and hold
在可编辑文本中,显示一个放大的光标视图。
慎重地融合品牌元素 当品牌的设计巧妙且简约时,它是最有效的。用户使用您的iPhone应用程序来完成某项任务或娱乐 时,他们不希望产生被强迫观看广告的感觉。因此,您应该以一种低调的方式引入您的品牌的颜色或图片。例如,您可以在视图和控件中使用一个自定义的配色方 案。应用程序图标是例外情况,它应该突出显示您的品牌(应用程序图标是用户在安装完应用程序后,在主屏幕中可以看到的图标),用户会经常看到这个图标,因 此,花费点时间让您的品牌更吸引眼球是有必要的。关于如何设计一个应用程序图标,请参考 “应用程序图标 。
处理常见任务 如果您具有使用桌面计算机或便携式计算机应用程序的经验,那么您会发现iPhone应用程序处理很多常见任务的方式与它们不同。本节从人机界面的角度描述了这些常见任务;关于代码实现的技术细节,请参考 iPhone应用程序编程指南 。 启动 iPhone应用程序应能够迅速启动,从而用户可以立即开始使用它们。启动时,iPhone应用程序应该:
- 指定适当的状态栏样式(关于可用样式的信息请参考“状态栏” 一节)。
- 显示一幅酷似应用程序初始屏幕的启动图像。这减少了用户感知到的应用程序的启动时间。要了解更多有关的信息,请参考“启动图像” 。
- 避免显示“关于”窗口,启动画面,也不要提供任何其他类型的妨碍用户立即使用应用程序的体验。
- 默 认情况下,在屏幕上纵向启动应用程序。如果您打算让应用程序只能在屏幕横向时使用,则无论设备当前的方向如何,都在屏幕上横向启动应用程序。如果必要的 话,要允许用户将设备旋转为横向。仅横向显示的应用程序应该支持两种“横向”—不论“主页”按钮在屏幕右侧还是左侧,都能够正常显示应用程序。如果设备本 身已经被横向放置,则这种仅横向显示的应用程序就按照设备的方向启动。否则,在默认情况下,仅横向显示的应用程序在启动时,“主页”按钮只能在应用程序的 右方。
- 将您的应用程序恢复到最后一次运行时的状态。
- 重要:不要在您的应用程序 安装完成后提示用户重新引导或重新启动他们的设备。如果您的应用程序存在内存使用或其他方面的问题,导致除非系统是刚刚启动过的,否则您的应用程序难以运 行,那么您需要解决这些问题。例如,您可以阅读iPhone应用程序编程指南中的“高效地使用内存”一节,了解如何开发运转良好的应用程序。
- 随时准备接收退出或终止通知。因此,要尽可能快并且在合理情况下经常保存用户数据。
- 当应用程序终止时,尽可能详细地保存它的当前状态。例如,如果您的应用程序能够显示滚动的数据,则应该保存当前的滚动位置。
- 它提供了反馈信息,告诉用户您的应用程序没有出现错误,使用户放心。
- 它能够控制用户行为,让他们决定是采取一些纠正的行动来继续使用您的应用程序,还是按下“主页”按钮来打开另一个应用程序。
- 非常简洁地描述当前情况
- 提供一个执行纠正动作的按钮
- 仅 当用户试图访问无法正常工作的功能时显示警告
- 使您的解决方案满足80%用户的需求。 当您采用这样的设计时,大多数用户不需要提供设置信息,因为您的应用程序已经按照大部分用户所预期的行为进行了设置。可以不考虑那些只有少数用户需要的功能和大部分用户仅需使用一次的功能。
- 从其他途径获取尽可能多的信息。 如果您可以用到任何用户在内置应用程序或设备设置中提供的信息,那么您可以向操作系统查询这些信息的值;不要让用户再次输入它们。
- 如果您必须向用户请求设置信息,请在应用程序内部提示用户输入信息。 然后立即将这一信息存储在您的应用程序的设置中。这样,用户在开始使用您的应用程序之前,就不会被迫退出应用程序而先打开“设置”界面。如果用户稍后需要更改这些信息,他们可以随时在您的应用程序的设置中进行更改。
与设置不同,由于用户会选择从新资源或以不同布局来查看信息,因此配置选项很可能经常发生改变。对于这些选项所做的更改,您可以动态地作出响应,因为用户 不需要离开您的应用程序来访问它们。您可以在主用户界面或屏幕的背面提供配置选项。具体使用哪一种技术更合理取决于该选项代表的是不是主要功能以及用户对 其进行更改的频率。例如,“日历”程序允许用户以日,星期和月为单位查看他们的时间表。这些选项本来可以在屏幕的背面提供给用户,但是查看日历的不同部分 是程序的主要功能,并且用户可能会频繁改变所关注的焦点。再举一个例子,“天气”程序的主要功能是显示一个城市的当前天气状况和6天之内的天气预报。虽然 让用户能够选择是以摄氏还是华氏为单位显示温度也很重要,但是用户不太可能经常改变这个选项,因此,将它放在主用户界面中并不合理。在“天气”屏幕的背面 提供温标选项,就显得既方便又不突兀。 支持复制和粘贴 iPhone OS提供了编辑(或粘贴板)菜单,它支持在文本视图,Web视图和图像视图中的“剪切”,“复制”,“粘贴”,“选择”和“全选”操作。一种向用户显示该 菜单的方法是,首先用户触摸并按住设备屏幕直到出现放大的视图(该视图允许用户将插入点或选择点移动到正确的位置),然后放开。如果当前的上下文支持这种 菜单,则当用户抬起手指时它就会出现。菜单中的“选择”操作可以选择视图中的单词或应用程序定义的项。用户可以通过拖动当前所选区域的把手来扩大他们选择 的内容。在内容被选中之后,菜单就会根据情况显示“剪切”,“复制”或“粘贴”。您可以调整编辑菜单的某些行为以适应您的应用程序。(要了解更多关于如何 用编码实现这些行为的信息,请参考 iPhone应用程序编程指南 中的“复制和粘贴操作”一节。)例如,您可以指定菜单中显示的操作,您可以 改变菜单出现的位置。但是,您不能控制菜单本身的颜色和形状。编辑菜单中可见的操作在当前上下文都是有意义的。例如,如果没有任何内容被选中,菜单中不会 包含“复制”或“剪切”操作,因为这些操作要作用于被选中的内容。同样,如果有内容被选中,菜单则不包含“选择”操作。如果您要在一个自定义视图中支持编 辑菜单,您应该确保菜单所显示的操作适用于当前上下文。请注意,您不能在菜单中显示自定义的操作。UIKit会根据可用空间的大小,在插入点或被选中内容 的上方或下方显示编辑菜单,并放置菜单指针,以便用户可以看到菜单操作是如何与当前内容相关联的。您可以通过编程的方式,在菜单出现之前决定它的位置,因 此,在必要的情况下,您可以防止应用程序的用户界面中的重要部分被菜单遮住。请注意,虽然“触摸并按住”这个操作是向用户显示编辑菜单的主要方式,但是用 户也可以通过双击文本视图中的一个单词来选中它,同时显示出菜单。如果您要在自定义视图中支持菜单,那么您应该对这两种操作都做出响应。此外,您可以定义 在用户双击时默认被选中的对象。如果一个按钮执行的是编辑菜单中已有的操作,则要避免创建这样的按钮。例如,要让用户执行复制操作的话,使用编辑菜单比向 用户提供“复制”按钮更好,因为用户会很困惑,为什么在您的应用程序中要有两种方式来完成同样的事情。您可以启用对静态文本的选择,但是应该仅当静态文本 显示对用户有用的内容时才这样做。例如,用户有可能想要复制一幅图像的标题,但是他们可能不想复制一个标签项或屏幕标题的标签,比如“帐户”。在文本视图 中,默认应该是按单词选取的。按钮的标题应该是不可以被选中的,因为很难不触发按钮的点击事件并显示出编辑菜单。一般来说,具有按钮行为的元素不需要被选 中。如果您在自己的应用程序中支持“剪切”,“复制”和“粘贴”操作,您也应该支持撤销和重做(在 “支持撤销和重做” 介绍)。这是因为编辑菜单不需要在动作执行前进行确认,而且如果用户改变了主意,他们总是希望能够撤销最近的操作。 支持撤销和重做 iPhone OS在文本视图中为用户提供了撤销和重做的能力。用户通过摇晃设备发起撤销动作,设备会显示一个警告,允许用户撤销他们刚才的输入,重做先前未完成的输入 或取消撤销操作。UIKit允许您在自己的应用程序中以一种更通用的方式支持撤销(有关如何在代码中实现这一行为的信息,请参考 撤销架构 )。您可以指定:
- 用户可以撤销和重做的操作
- 您的应用程序应该何时将一个摇晃事件理解为触发撤销
- 支持多少层的撤销
- 提供简短的描述性的语言精确地向用户描述他们正在撤销或重做的内容。 UIKit 自动采用字符串“撤销”和“重做”作为撤销警告按钮的标题,但是您需要提供一至两个单词来描述用户可以撤销和重做的动作。(请注意,“取消”按钮不能被改 变。)例如,您可以提供文本“删除姓名”或“地址变更”来创建如“撤销删除姓名”或“重做地址变更”这样的的按钮标题。一定要避免提供过长的文本:过长的 按钮标题会被截断,并且用户很难解读。此外,由于文本位于按钮的标题中,因此要使用标题式的大写方式,而且不要添加标点。(简单地说,标题式的大写方式是 指每个单词都大写,但冠词,并列连词和四个或四个字母以下的介词除外。)
- 避免重载摇晃操作。 即使您 可以通过编程来制定您的应用程序何时将一个摇晃事件理解为触发撤销,但是如果摇晃可以用来执行另一个动作,用户会感到迷惑。摇晃操作是用户期望的发起撤销 和重做的主要方式,但是在适当情况下,您也可以在导航栏中包含系统提供的“撤销”和“重做”按钮。如果在您的应用程序环境中,明确地显示一个专用按钮来执 行这些功能非常重要,则您可以采取这种做法,但这种情况很不常见。
- 考虑您允许撤销和重做的动作所处的环境。 一般来说,用户希望他们所做的更改和执行的动作能够立即生效。撤销和重做功能应该尽可能明确地关联到用户当前所处的环境,而非先前的环境。
- 在应用程序的主屏幕图标上更新一个 标记
- 播放警告声音
- 显示一条警告消息
- 注意:推送通知的投递是无保证的。此外,用户也可以拒绝接收系统范围内的通知。推送通知的目的是提醒用户有新数据到达,而不是向您的应用程序传递关键的数据。
- 标记。 标记是一种对用户打扰最小的方式,它告诉用户有新的他们可能感兴趣的内容出现。标记是一个红色的小椭圆形,出现在主屏幕图标的右上角。您对于标记的外观没 有任何控制权,它仅包含数字,不包含字母和标点符号。标记适用于告诉用户有多少项有待他们查阅。例如,标记中的数字表示的可能是未读的消息数,新分配的任 务数,或当前有多少个远程玩家正在进行游戏。
- 声音。 您可以提供自定义的警告声音,也可以使用内置的警告声音。如果您创建了自定义的声音,一定要保证它简短,独特并且制作专业。(要了解有关自定义声音的技术要求,请参考苹果推送通知服务编程指南 中 的“准备自定义警告声音”一节。)请注意,当有通知被投递时,您不能强制使设备振动;用户能够控制收到警告时是否伴有振动。如果通知到达本身就为用户提供 了足以采取行动的信息,在这种情势下,采用一种容易辨识的声音是非常适合的。例如,一个协同任务管理系统在成员的任务完成时可能会伴随着一段独特的声音。 仅仅是听到这种声音,用户就知道任务已经完成了。
- 警告。 警告是一种通知用户有新内容时最打扰用户的一种方式。在警告的顶端显示您的应用程序的名称,在它下面是您发送的消息,在警告底部有一至两个按钮。如果您指 定了两个按钮,则警告会在左侧显示“关闭”按钮,右侧显示“查看”按钮(用户点击“查看”按钮可以在解除警告的同时启动您的应用程序)。如果您只指定了一 个按钮,则警告只显示一个“确定”按钮。“关闭”按钮和“确定”按钮都会关闭警告而不会打开您的应用程序。警告会打断用户的工作流程,因此最好谨慎地使用 它,并且只用它来投递有关某事件的简短的,重要的消息。特别地,一定要避免在您的警告消息中包含任何广告内容。
- 重要:为了使您的应用程序易于访问,您要做的工作包括为VoiceOver提供它所需的信息来帮助用户使用您的应用程序。您不需要为了适应VoiceOver而改变用户界面的视觉设计。
- 为您的数据建立索引,以便随时进行搜索。
- 实时过滤本地的数据,一旦用户开始输入,您就显示结果,并且随着用户继续输入而逐步缩小结果范围。
- 如果可能的话,在用户输入时也同时过滤远程数据,但是,如果这部分的响应时间有可能将搜索结果的计算推迟1-2秒钟以上,一定要经过用户的允许。
- 在列表上面显示搜索栏或者在列表内显示索引。
- 避免为搜索打开一个标签页,除非它是您应用程序中的主要功能,应该被标识为一个不同的模式。
- 如果您的应用程序在没有这些信息的情况下无法执行它的主要功能,您最好在用户启动应用程序时尽快让他们看到警告。用户不会为此感到困扰,因为他们明白应用程序的主要功能依赖于知晓他们的位置。
- 如 果用户的位置不是您应用程序基本功能的一部分,您可以选择简单地限制那些用到位置信息的功能。例如,当位置服务关闭时,相机应用程序会自动关闭将用户的位 置添加到他们所拍摄的照片的功能。但应用程序并不会阻止用户拍照,除非他们改变偏好设置的选项,这是因为“将位置信息添加到照片”只是一个附加功能,而不 是基本功能。
- 如果某项功能需要位置信息才能工作,一定要避免在用户实际选择该功能之前执行任何编程调用触发警告。(获取用户偏好设置信息的调用不会触发警告。)这样,您就可以避免让用户感到奇怪,为什么您的应用程序在用户做一些看似不需要位置信息的事情时,想要得到他们的位置信息。
- 注意加速度表的值(关于加速度表和加速度表编程接口参考的更多信息,请阅读iPhone应用程序编程指南 )。如果合适的话,您的应用程序应该对所有的设备方向变化做出响应。
- 如 果您的应用程序用户界面的某一部分只在一个方向上显示内容,则该区域只适于在此方向上出现,而且不需要对设备方向的变化做出响应。例如,当用户选择一个 iPod视频来观看时,无论当前设备方向如何,该视频都横向显示。这向用户表明,要旋转设备以便更好地观看该视频。该例中最重要的一点是,iPod没有提 供“旋转”按钮;相反,用户知道要旋转设备,因为视频是横向显示的。让用户旋转设备来正确地浏览应用程序用户界面中需要特定方向的部分。避免创建新的控件 或定义新的操作,告诉用户旋转设备。
- 利用一步操作就能改变方向的过程,完成更顺畅且往往更快的旋转。但是,如果您的屏幕布局非常复杂,当发生方向变化时,您可以选择执行一种淡入淡出的转换。要了解如何在您的代码中支持一步操作过程,请参考UIViewController类参考 。
- 用户经常因为想要“看到更多”而将他们的设备旋转为横向。如果您只是按比例放大屏幕的内容,则无法满足用户的期望。相反,您应该重新打包文本行,而且如果必要的话,重新安排用户界面的布局,以便更多的内容填充到屏幕当中。
- 描述您应用程序的声音应该如何与设备上的其他声音保持一致。
- 确保应用程序的声音能够按照用户的期望进行播放。
- 避免被意外的声音打扰,比如电话铃声和来信提示音。
- 避免听到用户操作的附带声音,比如键盘或其它反馈的声音,偶然的声音或应用程序启动的声音。
- 避免听到游戏的声音,包括附带的声音和配乐,它们并不是使用游戏程序所必需的。
- 媒体应用程序中的媒体播放不会被“振铃/静音”切换静音,因为媒体播放是用户明确请求的。
- 时钟应用程序的警告不会被“振铃/静音”切换静音,因为此警告是用户明确设置的。
- 语言学习程序中的音效素材不会被“振铃/静音”切换静音,因为用户采取明确行动想要听到它。
- 语音聊天程序中的会话不会被“振铃/静音”切换静音,因为用户启动此类应用程序的唯一目的就是进行语音聊天。
- 当用户连接到无线音频设备时,他们打算继续听到当前的声音,只是转为私下收听。在这种情况下,他们希望音频能够继续播放。
- 当用户断开无线设备时(或者当设备超出作用范围或关闭时),他们不想自动将正在收听的内容分享给他人。在这种情况下,他们希望暂停正在播放的音频,让他们准备好之后显式地重新开始播放。
- 当设备锁定或切换至静音时,您的音频是否应该继续播放。
- 您的音频是否应该与当前正在播放的其他音频混合在一起(比如iPod中的歌曲)。
- 您的应用程序是否需要顺序或并行地同时处理音频输入和输出。
- 您的音频是否应该在中断后自动恢复播放。
- 注 意:如果您的应用程序仅需要产生功能附带的用户界面音效,您可以使用“系统声音服务”。系统声音服务是iPhone OS技术,用于产生警告声音和用户界面音效,以及振动;它不适用于任何其他目的,而且它产生的声音不由“音频会话服务”管理。使用此技术的示例请参考 SysSound示例项目。
- 重要:无论您使用何种技术产生音频,无论您如何定义它的行为,电话可以随时中断当前正在运行的应用程序。这是因为任何应用程序都不应该阻止用户接听来电。
- 注 意:由于空间有限,表4-1只显示了每个类别名称的最后一部分。每个类别的实际符号名称均以AVAudioSessionCategory开始。例 如,MixWithOthers属性的实际符号名称是 kAudioSessionProperty_OverrideCategoryMixWithOthers
类别
含义
通过“振铃/静音”切换置为无声并锁定
与其他音频混合
SoloAmbient
增强应用程序功能的声音,应该将其他音频静音
是
否
Ambient
增强应用程序功能的声音,但不应将其他音频静音s
是
是
Playback
对应用程序功能来说必不可少的声音,可以与其他音频混合
否
否(默认)是(当添加MixWithOthers属性时)
Record
用户录制的音频
否
否
PlayAndRecord
代表音频输入和输出的声音,顺序地或并行地
否
否(默认)s是(当添加MixWithOthers属性时)
AudioProcessing
执行辅助硬件的音频编码的应用程序(它不播放或录音)
-
否
小结 下面是一些场景,它们说明了如何选择音频会话类别,以提供用户期望的音频体验。 场景 1 . 假设您正在开发一个教育应用程序,帮助人们学习一门新的语言。您需要提供在用户点击特定控件时播放的反馈声音;并提供在用户想要听到正确的发音示例时播放 的单词和短语的录音。在这个应用中,声音对于应用程序的主要功能来说是必不可少的。人们使用该应用程序,收听他们所学语言中单词和短语的发音,所以,即使 当“振铃/静音”切换设置为静音或设备锁定时,也应该播放应用程序的声音。由于用户需要清楚地听到发音,因此,他们希望其他正在播放的音频被静音。为了产 生用户期望的音频体验,您应该使用Playback类别。虽然您可以改进这一类别,以便与其他音频(如 表4-1 中所述)进行混合,但是这个应用程序应该使用默认的行为,以确保其他音频不会与用户明确选择要收听的学习内容发生竞争。 场景 2 . 假设您正在开发一个游戏,让用户控制屏幕上的人物完成许多不同的任务。您需要提供各种各样的游戏音效和一段游戏配乐。在这个应用中,声音会大大提升用户的 体验,但它并不是主要任务必不可少的一部分。此外,用户很可能希望能够在静音状态下玩游戏,或者一边听音乐库中的歌曲(而不是游戏的配乐)一边玩游戏。最 好的策略是,要了解当您的应用程序启动时用户是否正在收听其他音频。不要让用户选择是否想要听其他的音频或您应用程序的配乐。相反,要使用“音频会话服 务”的AudioSessionGetProperty功能,查询kAudioSessionProperty_OtherAudioIsPlaying 属性的状态。根据查询的结果,您可以选择Ambient类别或Solo Ambient类别(这两个类别都允许用户在静音状态下玩游戏):
- 如果用户正在收听其他音频,您应该假设他们想要继续收听,而不想被迫收听游戏的配乐。在这种情况下,您应该选择Ambient类别。
- 如果当您的应用程序启动时,用户没有收听任何其他音频,应选择Solo Ambient类别。
- 列表 (即表格视图)。用户点击列表中的某一行选择一项。列表几乎适合于显示任何数量的选项。有关在应用程序中使用表格视图的方法的详细信息,请参考“表格视图” 。
- 选择器 ,包括日期和时间选择器。用户转动选择器的转轮,直到每个转轮显示出值的相应部分,比如包含年,月,日的日历日期。要了解有关在您的iPhone应用程序中使用选择器的更多信息,请参考“日期和时间选择器” 和“选择器” 。
- 开关控件 。用户将开关控件从一侧滑动至另一侧,显示出两个值之一。开关控制的设计意图是在列表的内部提供一个简单的选项。有关开关控件的更多信息,请参考“开关控件” 。
设计您iPhone应用程序的用户界面 iPhone OS中的用户界面元素包括视图和控件。视图 是提供了良好定义的功能集合的内容区域。控件 则是能够触发即时动作或可视化结果的图形对象。虽然一个应用程序的所有视图和控件都包含在同一个应用程序窗口中,用户却是根据它们不同的可见状态在屏幕 中与之交互的。iPhone OS定义了这些用户界面元素的标准外观,并提供了用户所期望的行为。第二部分中的章节能够帮助您了解可用的用户界面元素的类型以及如何在您的应用程序的用户界面中使用它们。
用户界面概述 在深入研究视图和控件的具体细节之前,先对这些元素在一起工作的 方式以及用户期望的行为有一个较高层次的理解,对您来说大有裨益。本章将介绍构成大多数应用程序的各种视图,帮助您了解它们的具体信息以及如何使用它们。 想要详细了解每一个用户界面元素的外观,行为和使用指南,请务必阅读本章后面的章节。理解每个用户界面元素是如何针对它的用法进行设计的,能够帮助您在应 用程序中正确地使用它,并在适当的情况下根据您的需要定制用户界面元素。应用程序的屏幕及其内容 无论是什么类型的应用 程序,都有一个应用程序窗口,该窗口为您提供了一个能够呈现应用程序的所有信息的背景。但是用户对这个窗口没有概念,他们对应用程序的体验来自屏幕上的画 面,并且用户通过屏幕对应用程序进行操作。虽然不是一个程序中的结构,但是您仍可以认为每个屏幕对应于应用程序的不同的可视化状态或模式。当用户浏览信 息,切换标签页,或者点击“信息”按钮查看侧边弹出的配置信息时,他们看到的是各个独立的屏幕。取决于程序的类型,您的应用程序的屏幕可能有多有少。例 如,邮件应用程序可以显示一个帐户屏幕,各个帐户中的邮箱列表屏幕,各个邮箱内容的屏幕和显示一条消息的屏幕,还有一个写邮件的屏幕。然而,股票应用程序 只显示两个屏幕:一个屏幕显示公司列表和股票走势图,另一个屏幕显示应用程序的配置信息。通常,用户会把应用程序屏幕和设备屏幕当成是一回事。然而,应用 程序屏幕的内容可能会超出设备屏幕的边界,这就需要用户滚动屏幕。例如,电话应用程序中的联系人只有一个单独屏幕,即使它的内容是设备屏幕的好几倍。应用 程序的屏幕可以包含各种各样的视图和控件的组合。某些视图会包含一些特定的控件,而有些控件可以用于很多不同的视图当中。告警,动作表单和模式视图和普通 视图不同,普通视图一般存在于应用程序的屏幕中,而它们浮动于应用程序的屏幕及其视图之上。更多有关这些视图的信息请参考“告警,动作表单和模式视图” 。下面四种类型的视图在应用程序的用户界面中具有特殊的地位,但是它们并不需要在每个应用程序中被包含或总是可见。
- 状态栏 。 这是一个独一无二的视图,虽然应用程序可以在一定程度上自定义状态栏的外观,但从技术角度讲,它并不属于应用程序窗口的一部分。更多信息请参考“状态栏” 。
- 导航栏 。 这是个可选的视图,它出现于状态栏的下方,可以包括标题,按钮和分段控件。更多信息请参考“导航栏” 。
- 标签栏 。 这是个可选的视图,它位于屏幕底部的边缘,能够切换应用程序中不同的模式。更多信息请参考“标签栏” 。
- 工具栏 。 这也是个可选的试图,它同样位于屏幕底部的边缘,包含在应用程序的当前上下文中完成特殊动作的控件。更多信息请参考“工具栏” 。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_statusnavmodeswitcher.jpg)
在一个能够显示这四种视图的组合的应用程序中,您可以将导航栏底部到工具栏顶部之间的区域视为 内容区 。在该区域中,应用程序屏幕可以包含任意视图来显示内容,如表视图,web视图和图像视图。图5-2显示了两个在iPhone操作系统中可用的内容区视图:表视图的一种和图像视图。请参阅 “表视图,文本视图和Web视图” 以了解更多有关这些视图的行为和外观,以及与其相关的控件。 图 5-2 两种类型的内容区视图
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_arbitraryviews.jpg)
正如上文说过的那样,有一些控件只能在特定的视图中使用。显示提示符控件就是这样的一个例子,它在表视图中具有特殊用法。您可以在 图8-1 中的左边的列表中看到显示提示符(它看上去像是一个大于号>)。在介绍其相应视图的小节对这些控件有具体描述,但是,需要补充一点,也有少量控件(如详细显示提示符)具有更广泛的用途。请参阅 “应用程序控件” 来获得更多控件相关的信息。 在应用程序屏幕中使用视图和控件 在iPhone OS中,UIKit决定了视图以及控件的行为和默认外观。您应该尽可能地使用UIKit提供的标准用户界面元素,并遵循它们的使用建议。这样做对您最主要的好处有两点:
- 用户已经习惯了标准视图和控件的外观和行为。当您使用相似的用户界面元素时,用户之前的经验对于他们学习使用您的应用程序有所帮助。
- 即使iPhone OS改变了标准视图或控件的外观或行为,您的应用程序也能够继续工作,并且只需要少许改动(如果有的话)就能自动更新。
导航栏,标签栏,工具栏和状态栏 状态栏,导航栏,标签栏和工具栏在 iPhone应用程序中具有特别定义的外观和行为的视图。它们不需要在每个应用程序中都出现(在那些令人惊叹的应用程序中经常是一个也不出现),不过一旦 决定让它们出现在应用程序中,就一定要正确地使用这些视图。原因在于使用iPhone OS设备的用户都熟悉它们所提供的功能,对它们显示的信息和执行的功能类型早已习惯。状态栏 状态栏显示与用户设备相关的重要信息,包括电话信号强度,当前网络连接和电量信息。图6-1显示了一个状态栏的例子。图 6-1 一个包含用户所需的重要信息的状态栏
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_statusbar.jpg)
尽管一个全屏的应用程序可以隐藏状态栏,但是您应该仔细考虑这一设计方案。人们总是希望可以看到当前设备的电量;隐藏这一信息,会迫使用户需要退出您的应 用程序才能获取电量信息,这可不是一种理想的用户体验。例如,照片应用程序以全屏幕视图显示相机中的各个照片时,会在几秒钟之后渐渐隐去状态栏,导航栏和 工具栏。这种做法是很恰当的,因为在照片应用程序中,用户仅仅关注照片的内容,而并不与应用程序进行交互。但是,用户可以通过轻轻点击屏幕,让状态栏,导 航栏和工具栏重新显示出来。如果您想要不时地在应用程序中隐藏状态栏,那么您应该使得用户能够通过单击屏幕重新获得状态栏。除非您有非常令人信服的理由, 否则最好避免用自定义的方式来重新显示状态栏,因为用户未必会发现或记住这样的方式。虽然您难以控制状态栏的内容,但是您可以定制它的外观,并在一定程度 上定制它的行为。具体来说,您可以:
- 设定网络活动指示器是否应该可见。如果您的应用程序正在执行的一项网络操作会持续几秒钟以上,则应该 显示网络活动指示器。如果该网络操作将在几秒钟之内完成,则不必显示网络活动指示器,因为它很可能在用户意识到它的存在之前便消失了。(在您的代码中,您 可以使用UIApplication的方法networkActivityIndicatorVisible来控制指示器的可见性。)
- 指定状态栏的颜色。您可以选择灰色(默认的颜色),不透明的黑色或半透明的黑色(也就是α值为0.5的黑色)。图6-2显示了这些样式。(请注意,您应该在Info.plist文件中设置一个值来指定状态栏的样式;更多相关的信息请参考iPhone应用程序编程指南 。)
- 设置是否应该采用动画方式显示状态栏颜色的改变。(请注意,动画效果会使旧的状态栏一直滑出屏幕,最后消失,同时新的状态栏会滑动到相应的位置上。)
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_statusbartypes.jpg)
请确保状态栏的外观与您的应用程序的其余部分能够协调搭配。例如,如果导航栏是不透明的,就要避免使用半透明的状态栏。 导航栏 导航栏位于应用程序屏幕的上边缘,在状态栏之下。导航栏通常会显示当前视图的标题,包含导航控件,并在适当的情况下也可以包含作用于视图内容的控件。在效率型应用程序(详见 “ 效率型应用程序 ” )中,导航栏非常有用,因为这些应用程序通常会按照层次结构显示信息。导航栏有两种用途:
- 激活应用程序中不同视图之间的导航
- 提供一些控件,用于管理视图中的条目
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_navbarpurposes.jpg)
导航栏的内容 导航栏可以根据当前视图标题的宽度居中显示标题,如图6-4所示。效率型应用程序中的初始视图应该包含一条导航栏,上面只需显示第一个视图的标题,这是因为用户还没有切换到其它位置。 图 6-4 显示当前视图标题的导航栏
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_navbartitleonly.jpg)
一旦用户切换到另一个视图,导航栏就应该将它的标题更改为新视图的标题,并且应该提供一个返回按钮,标记为先前视图的标题。例如,图6-5显示了“日期和时间”设置中的导航栏,该设置属于“常规”设置视图中的一部分。 图 6-5 包含导航控件的导航栏
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_navbarnavigationonly.jpg)
标准的返回按钮为用户提供了一种返回到先前屏幕的可靠方式,所以一定不要改变该按钮的行为。特别地,您应该避免创建多段的返回按钮,比如图6-6中所示的按钮。 图 6-6 不推荐多段的返回按钮
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_navbarmultisegment.jpg)
使用多段的返回按钮会引起以下列问题:
- 多段返回按钮持续增长的宽度会占用显示当前视图标题的空间。
- 无法表明单独某一段的选定状态。
- 段越多,每一段的可点击区域就越小,这使得用户很难准确点击到特定的某一段。
- 当用户浏览层次比较深时,无法确定显示哪些层的内容。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_navbarnonavigation.jpg)
要了解如何在您的应用程序中实现导航栏,请参考 “导航控制器” 。 正如您在上述示例中所见,导航栏上的按钮周围有一圈带边角的框。在iPhone OS中,这种样式被称为边框样式。导航栏的所有控件都要使用边框样式。事实上,即使您在导航栏上放置一个无格式(没有边框)的控件,它也会自动转换为有边 框的样式。您可以设计自己的图标用作导航栏的按钮,或者您也可以利用iPhone OS提供的预定义按钮。关于您可以使用的按钮相关的更多信息,请参考 “用于工具栏和导航栏的标准按钮” 。虽然您可以为所有在导航栏中显示的文本指定字体,但为了可读性,推荐您使用系统字体。当您使用适当的UIKit编程接口创建导航栏时,其标题将自动采用系统字体来显示。 导航栏的尺寸和颜色 当 设备的方向由纵向变为横向时,导航栏的高度也会自动随之改变(您不应该通过编程的方式指定它的高度)。设备处于横向时,窄一点的导航栏可以为屏幕上的内容 留出更大的空间。您在设计导航栏控件的图标和设计屏幕上的布局时,一定要将这种高度上的差异计算在内。您可以指定导航栏的颜色和半透明效果,以和您的应用 程序的整体外观以及其它栏目(即工具栏,标签栏和状态栏)一致。您可以使用自定义颜色或选择下列标准颜色中的一种:
- 蓝色(默认颜色)
- 黑色
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_taskstyleexample.jpg)
工具栏的内容 工具栏在其宽度范围内等距离地显示工具栏上的项。对于工具栏上显示的项,最好对其数目加以限制,这样用户 可以轻松地点击到他们所需的项。我们向您推荐的用户界面元素的点击区域为44 x 44像素,因此,为用户提供五个以下的工具栏项是比较合理的。图6-9中的例子向您展示了一个各项间距适中的工具栏示例。 图 6-9 间距适当的工具栏
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_taskstyletoolbar.jpg)
图6-8 和图6-9中的项都没有边框。在iPhone OS中,这种样式叫做无格式样式。(关于边框样式的例子请参考 图6-7 。)虽然您既可以在工具栏中使用带边框样式的按钮,也可以使用无格式按钮,但是您不要将这两种样式在同一工具栏中混合使用。您可以为工具栏按钮自行设计图标,或者您也可以充分利用iPhone OS提供的预定义按钮。(关于可以使用的按钮的更多信息,请参考 “用于工具栏和导航栏的标准按钮” 。)如果您选择创建自定义的工具栏按钮,请尽可能保持它们的尺寸相近,以获得均匀而又不失吸引力的外观。 工具栏的尺寸和颜色 当 设备的方向由纵向变为横向时,工具栏的高度也会自动随之改变(您不应该在程序中指定它的高度)。设备处于横向时,窄一点的工具栏可以为屏幕上的内容留出更 大的空间。您在设计工具栏按钮的图标和设计屏幕上的布局时,一定要将这种高度上的差异计算在内。您可以指定工具栏的颜色和半透明效果,以和应用程序的整体 外观以及其它栏目(即导航栏,标签栏和状态栏)一致。您可以使用自定义颜色或选择下列标准颜色中的一种:
- 蓝色(默认颜色)
- 黑色
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_modesinclock.jpg)
标签栏使用标签显示图标和文本,这些标签的宽度一致,并且都以黑色为背景。当一个标签被选中时,它的背景变亮,标签中的图像也会高亮显示。图6-11显示了这一场景。 图 6-11 标签栏中被选中的标签
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_selecteditemmodeswitcher.jpg)
注意: 不管设备的方向如何变化,标签栏不会改变它的不透明性和高度。
iPhone OS为标签提供了一系列图标,比如像图6-11中“功能”和“书签”标签项那样的图标。如果您选择使用这些图标,请确保对它们的使用符合图标所表达的意思。关于您可以使用的标签栏图标的更多信息,请参考 “ 用于标签栏的标准图标 ” 。 提供附加标签 如果您的应用程序的标签栏只包含五个或五个以下的标签,那么iPhone OS可以在标签栏上等距离地将它们全部显示出来,如图6-12所示。 图 6-12 iPhone OS的标签栏最多可显示五个标签
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_fivetabsintabbar.jpg)
如果您的应用程序的标签栏包含的标签数目超过五个,iPhone OS会在标签栏上显示四个标签,并添加一个“更多”标签,如 图6-11 所示。用户点击“更多”标签后,能够在一个单独的屏幕中查看附加标签的列表,如图6-13所示。 图 6-13 当用户点击“更多”标签时显示附加标签
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_tabitemmore.jpg)
在“更多”屏幕中同样能够包含一个“编辑”按钮,用户可以通过点击该按钮来配置标签栏,使其显示用户最常用的标签。例如,当用户在iPod程序的“更多”屏幕上点击“编辑”按钮后,他们会看到如图6-14 所示的“配置”屏幕。 图 6-14 当应用程序具有五个以上的标签时,用户可选择在标签栏上显示他们最喜爱的标签
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_tabitemconfiguration.jpg)
请注意iPod在以上三处(标签栏,“更多”屏幕和“配置”屏幕)都使用了相同的标签图标。这有助于使用户确定不管该图标出现在哪里,它都代表相同的意思。 为标签栏上的标签做标记 您 可以在标签上显示一种标记,通过这种低调的,不十分显眼的方式与用户进行通信。在用户的任务或上下文环境中可能有些信息并非不可或缺,但它们对用户很有帮 助,因此做标记的反馈方式就很适合于传递这些信息。通过在一个特定的标签上做标记,您可以把标记所表达的信息和您的应用程序中的一种特定模式—甚至是非当 前模式—联系在一起。图6-15显示了一个在标签上做标记的例子。 图 6-15 标签栏上传达信息的标记
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_badgeintoolbar.jpg)
请注意,如果您注册了苹果通知推送服务并且用户允许显示标记,那么您也可以在应用程序的主屏幕上显示标记。请参考 “启用推送通知” 来详细了解这些内容是如何实现的。
警告,动作表单和模式视图 警告,动作表单和模式视图是视图的几种类型,当需要引起用户的注意,或者需要提供额外的选项或功能时,这些视图就会出现。图7-1显示了这几种视图的例子。图 7-1 动作表单,模式视图和警告
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_modalexamples.jpg)
要了解这几种类型视图的编程实现,请参考“模式视图控制器”。用法和行为 警告,动作表单和模式视图都是模式的,这意味着用户必须通过点击按钮显式地关闭它们,然后才可以继续使用应用程序。虽然有些时候您需要警告用户潜在的危险动作,或是向他们提供额外的选项,但您一定要避免过度使用这些视图,这是因为:
- 所有类型的模式视图都会中断用户的工作流程。
- 过度频繁地出现请求确认的视图很可能会适得其反,它们想要带给用户的帮助反而变成了打扰。
- 警告为用户提供影响他们使用应用程序(或设备)的重要信息。 警告通常是不可预料的,因为它们一般会向用户报告某个问题或当前环境的变化,这可能需要用户采取相应的行动。
- 动作表单为用户提供与他们当前执行的动作相关的额外选项。 当用户点击一个工具栏按钮,开始执行一个具有潜在破坏性的动作(比如删除所有最近的通话)或是一个可以以不同的方式完成的动作(比如用户可以从多个目的地中指定其中一个作为发送动作的目的地)时,他们会期待动作表单的出现。
- 模式视图能够在当前任务的环境下提供更广泛的功能。 对于那些与用户的工作流程直接相关的子任务,模式视图还能够提供执行这些子任务的方法。
- 将正常进行中的任务的最新消息通知用户。相反,您应该考虑使用进度视图或活动指示器,向用户提供与进度相关的反馈信息(“进度视图” 和“活动指示器” 介绍了这些控件)。
- 请求确认用户发起的动作。如果要确认用户发起的动作,即使是删除联系人这种具有潜在危险性的动作,您应该使用的是动作表单(在下面的“使用动作表单” 中介绍)。
- 通知用户令他们无法操作的错误或问题。即使有必要使用警告来告诉用户出现了他们无法修复的关键问题,但如果可能的话,更好的做法是将这些信息融入到用户界面中。例如,与其在每次连接服务器失败时都通知用户,不如在用户界面上显示上一次成功连接服务器的时间。
- 选 择完成任务的方法。例如,在照片应用程序中,用户可以在浏览单独的一张照片时点击“发送”按钮。这时会出现一个动作表单,有三个发送目的地供用户选择(还 有一个“取消”按钮,用于取消发送)。在类似这样的情况下,显示动作表单十分有用,因为您可以提供一系列在当前任务环境下有意义的选项,而无需在用户界面 中为这些选项保留一片固定的区域。
- 在完成一项具有潜在危险性的任务之前获得用户的确认。例如,根据邮件应用程序的设置,当用户点击 “邮件”工具栏上的“垃圾邮件”按钮时,会显示一个动作表单,允许他们选择继续进行删除还是取消该动作。当您在类似的情况下显示动作表单时,要确保用户了 解他们将要执行的步骤能够带来的危险后果,并且您可以提供一些可选的方案。在iPhone OS设备上,这种类型的交互是非常重要的,因为用户有时会无意中点击控件。
- 标题大写 指每个单词都大写,除了冠词,并列连词和四个或更少字母的介词。
- 句子大写 指第一个单词大写,其余的单词都小写,除非它们是专有名词或专有形容词。
警告的标题(以及可选的消息)应该简明扼要地说明相关的情况,并且告诉用户可以做些什么。理想情况下,您写的文本应该向用户提供足够的背景信息,使他们明白为什么会出现警告并决定点击哪个按钮。 当您撰写警告标题时 :
- 请保持标题足够简短,如果可能的话,尽量显示在一行之内。长的警告标题对于人们来说难以快速阅读,并且可能会导致警告消息滚动显示。
- 避免创建仅包含一个单词的标题,它无法提供任何有用的信息,比如“错误”或“警告”。
- 推荐使用句子片段。一个简短且内容丰富的说明往往比一个完整的句子更容易理解。
- 不要害怕负面消息。人们能够理解大部分警告是在告诉他们出现的问题,或是在向他们发出有关危险情况的警告。因此,直接的负面消息远比拐弯抹角的正面消息要好得多。
- 尽量不要使用“你”,“你们”或“我”。有时候,直接指明人物对象的文本可能会引起歧义,甚至可能会被理解为一种侮辱。
- 使用标题式的大写方式且不要使用结束标点,如果:
- 标题是一个句子片段
- 标题由一个非疑问句的单句组成
- 如果标题由一个疑问句单句组成,请使用句子式的大写方式和结束问号。在一般情况下,请考虑使用疑问句作为警告的标题,如果这样可以让您避免增加一条额外的消息。
- 如果标题由两个或更多的句子组成,请使用句子式的大写方式,并且为每个句子添加适当的结束标点。实际上,很少有必要使用包含两个句子的警告标题,虽然您可能认为它可以让您避免一条额外的警告消息。
- 请保持消息足够简短,如果可能的话,尽量显示在1-2行之内。如果消息太长,将需要滚动显示。
- 始终使用句子式的大写方式和适当的结束标点。警告消息应该是一个完整的句子。
- 一定要使用单词“tap”(而不是“touch”,“click”或“choose”)来描述选择动作.
- 不要将按钮标题括在引号之内,但要保留其大写方式。
- 在指出潜在危险动作的双按钮警告中,取消动作的按钮应该位于右边,而且是亮色的。
- 在指出人们所期望的安全动作的双按钮警告中,取消动作的按钮应该位于左边(因此它应该是暗色的)。
为警告按钮提供简短并合乎逻辑的标题。 最好的标题应该由1-2个单词组成,并且这些单词在警告文本的上下文环境中是合理,有意义的。当您为警告按钮创建标题时,请遵循如下准则:
- 和所有的按钮标题一样,请使用标题式的大写方式,且不要使用结束标点。
- 推荐使用动词和动词短语,比如与警告文本直接相关的“取消”,“允许”,“回复”和“忽略”。
- 如果没有更好的选择,推荐使用“确定”作为简单的接受选项。避免使用“是”或“否”。
- 尽量不要使用“你”,“你们”和“我”。使用这些单词的按钮标题往往既容易产生歧义又显得缺乏尊重。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_threebactionsheet.jpg)
如果您需要提供一个按钮来执行具有潜在破坏性的动作,比如删除用户购物清单上的所有条目,那么按钮的颜色应该采用红色。这样的破坏性按钮一定要显示在动作表单的顶部,这一点至关重要,原因有两个:
- 一个按钮越是靠近动作表单的顶部,它的可视性就越强。
- 当用户想要点击Home按钮时,有时他们会误点击设备屏幕的底部。所以不要将具有破坏性的按钮放置在动作表单的底部,这样因用户的误操作引发不良后果的可能性就会比较小。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_blacktransparentdialog.jpg)
您可以在动作表单中显示多个按钮,只要确保每个按钮都能很容易地与其它按钮区分开来。图7-4显示了一个动作表单,其背景与标准的蓝色工具栏相匹配,并且除“取消”按钮之外,它还提供了三个可选的按钮。 图 7-4 具有四个按钮的动作表单
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_toolbarmatchdialogblue.jpg)
设计模式视图 模式视图的整体外观应该与显示它的应用程序是一致的。例如,模式视图通常包含一个导航栏,导航栏具有标题 和用于取消或完成模式视图任务的按钮。该导航栏应该与应用程序的导航栏具有相同的背景外观。模式视图通常应该显示一个以某种方式标识任务的标题。如果合适 的话,您还可以在视图的其它区域显示文本,来更充分地描述任务信息或提供一些指导。例如,消息应用程序在用户想要撰写文本消息时提供了一个模式视图。如图 7-5所示,该模式视图显示了一个导航栏,它与应用程序的导航栏背景相同,标题为“新消息”。 图 7-5 模式视图应该与应用程序屏幕保持一致
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_modalviewexample.jpg)
在模式视图中,您可以使用完成任务所需的任何控件。例如,您可以在视图中包含文本域,按钮和表视图。您可以根据您的应用程序选择显示模式视图的方式,增强用户对该视图所表现的临时环境转换的感知。为了做到这一点,您可以指定以下切换风格中的一种:
- 垂直 模式视图从屏幕的下边缘滑出,视图关闭时则向下滑动直到消失。(这是默认的切换风格。)
- 翻转 当前视图从右向左水平翻转来显示模式视图。在视觉上,模式视图看起来好像是当前视图的背面。当模式视图关闭时,它会从左向右水平翻转来显示先前的视图。
表格视图,文本视图和Web视图 表格视图,文本视图和web视图是具有多种功能的界面元素,它们在iPhone应用程序中有着不同的用途。例如,表格视图可以用来显示简短的选项列表,详细信息的分组列表或者长的项目索引列表。文本视图和web视图相对来说可以不受约束地接受和显示内容。表格视图 表格视图 通过多行单列的表格呈现数据。行可以被分为不同的段或组,每一行可以包含文本,图像和控件的组合。用户可以以轻击或拖动的方式来滚动行或行的分组。图8-1显示了不同样式的表格视图,它们以不同的方式显示列表。图 8-1 使用表格视图显示列表的三种方式
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_tablestyleexamples.jpg)
用法和行为 表格视图在iPhone应用程序中非常有用,因为无论是信息量的多少,它们都提供了组织信息的有效方式。尽 管实用型应用程序也可以小范围的使用表格视图,但表格视图通常在需要处理大量用户数据的效率型应用程序中最为有用。沉浸式应用程序一般不会使用表格视图来 显示信息,但是它可能会使用表格视图来显示简短的选项列表。表格视图提供了允许用户浏览和操作信息的内置界面元素。此外,表格视图还支持:
- 显示页眉和页脚信息。您可以在列表中每一段或一组的上方或下方显示描述文本,也可以在整个列表的上方或下方显示描述文本。
- 编辑列表。您可以允许用户以统一的方式对列表项进行添加,删除或排序等操作。表格视图还支持对多个列表项的选择和操作,您可以利用这一点向用户提供一种能够同时删除多个列表项的便捷方法。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_simplelist.jpg)
分组样式 (UITableViewStyleGrouped)这种视图样式显示行的分组,每组表格行会相对屏幕两侧缩 进。这些分组显示在独特的垂直条纹背景下,而分组内部的背景则是白色的。分组样式的表格可以包含任意数量的分组,每一个分组可以包含任意数量的行。在每一 组之前可以加入页眉文本,其后可以加入页脚文本。这种样式的表格视图不提供索引。图8-3显示了一个分组样式的列表,其中每个分组均包含一行。该列表出现 在设置应用程序中,不包含页眉或页脚文本。 图 8-3 一个包含四个分组的,具有分组样式的列表
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_grouptablesingles.jpg)
单元格样式 iPhone OS 3.0及后续版本中包含了四种预定义的单元格样式,您可以使用它们快速,方便地为无格式样式和分组样式的表格行创建常用的布局。请注意,从编程角度而言, 这些样式是应用在表格视图的单元格上的,单元格规定了表格应该如何绘制各行。当您使用标准单元格样式时,您的应用程序的风格会与内置应用程序保持一致,这 将在以下几个方面使您获益:
- 用户可以更快地了解您的应用程序如何工作
- 如果今后标准单元格样式有所改进,您的应用程序可以轻松地保持一致,而无需付出大量的额外工作
- 默认 单元格样式(UITableViewCellStyleDefault)包含位于左侧的可选图像,后面紧跟左对齐的黑色文本标签。图 8-4 分组表格(左)和无格式表格(右)中的默认单元格样式
文本标签代表一个表格项的名称或标题,而且其左对齐的格式使得列表很易于浏览。因此,默认样式非常适合于显示不需要根据附加信息加以区分的表格项列表。最好使用简短的文本标签,但是如果文本截断无法避免,要尽量确保最重要的信息包含在前几个单词中。 - 副标题 单元格样式(UITableViewCellStyleSubtitle)包含位于左侧的可选图像,后面紧跟一行左对齐的文本标签,以及另一行位于文本标签下方的左对齐的详细信息文本标签。文本标签采用黑色字体,详细信息文本标签则采用较小的灰色字体。图 8-5 分组表格(左)和无格式表格(右)中的副标题单元格样式
文本标签代表一个表格项的名称或标题,而详细信息文本标签则表明它包含与该表格项相关的附加信息。文本标签的左对齐格式使得列表很易于浏览。在列表项看起 来比较相似的情况下,这种单元格样式很适用,因为用户可以参考详细信息文本标签中的附加信息,以便区分文本标签中列举的表格项。文本标签应该尽量简短,以 避免发生文本截断。如果文本截断无法避免,请注意将最重要的信息放在前几个单词中。如果详细信息文本标签发生截断,用户则不会太介意,因为他们认为它只是 用于加强或补充文本标签中列举的表格项。 - value 1 单元格样式(UITableViewCellStyleValue1)将文本标签和详细信息文本标签显示在同一行,文本标签采用左对齐格式和黑色字体,而详细信息文本标签采用右对齐格式和较小的蓝色字体。这种单元格样式不宜使用图像。图 8-6 分组表格(左)和无格式表格(右)中的value 1单元格样式
文本标签代表一个表格项的名称或标题,而详细信息文本标签提供了与该表格项紧密相关的重要信息。文本标签的左对齐格式和字体样式有助于用户浏览他们所需的 项目列表,而详细信息文本标签的右对齐格式可以引起用户对表格项相关信息的关注。这种单元格样式适合于显示表格项的当前值,而该值可能选自一个子列表。在 这种布局中,可能很难避免文本截断的发生(因为两个标签位于同一行),但是仍值得您努力尝试。否则,两组标签之间没有留白,用户很难了解这两部分信息之间 的关系。虽然您可以在无格式表格或分组表格中使用 value 1单元格样式,但是其外观更适合于分组表格。例如,在设置应用程序的“用法”屏幕中,分组表格使用了value 1样式:图 8-7 在分组表格中具有最佳视觉效果的value 1单元格样式 - value 2 单元格样式(UITableViewCellStyleValue2)同样将文本标签和详细信息文本标签显示在同一行,文本标签采用右对齐格式和较小的蓝色字体,而详细信息文本标签采用左对齐格式和较大的黑色字体。这种单元格样式不宜使用图像。图 8-8 分组表格(左)和无格式表格(右)中的value 2单元格样式
文本标签的右对齐格式,受限宽度及其字体样式意味着它仅起到一标题的作用,左对齐详细信息文本标签则包含更重要的信息。在这种布局中,标签是每一行中的相 同位置相向排列的。这样,就在列表中的文本标签和详细信息文本标签之间形成了一条清晰的垂直边缘,有助于用户一眼就能看到详细信息文本标签的首单词。如果 您允许文本标签被截断,该垂直边缘的清晰程度则会有所消减,这会造成用户浏览详细信息文本标签中的信息变得更加困难。虽然您可以在无格式表格或分组表格中 使用 value 2单元格样式,但是其外观更适合于分组表格。例如,在联系人应用程序的“信息”屏幕中,分组表格使用了value 2样式:图 8-9 在分组表格中具有最佳视觉效果的value 2单元格样式
您也许能够通过增加表格行的高度,以支持文本换行,从而避免文本截断,但这可能会产生一些问题:
- 您必须以编程的方式检查文本的长度,并判断是否可能发生文本换行。您必须针对纵向和横向这两种情况都作出相应的判断,因为表格的宽度会对文本换行产生影响。
- 您应该避免在设备处于一个方向时显示换行的文本,而在处于另一个方向时不显示。
- 无论表格视图的样式如何,可变的行高都会对表格视图在应用程序中的整体性能产生负面影响。
- 展开指示符 当这个元素出现时,用户知道他们可以点击这一行中的任意位置来查看下一级的信息,或是与当前列表项相关的选项。当选中一行后会显示另一个列表时,应使用展开指示符。不要使用展开指示符来显示某个列表项的详细信息;这种情况下应使用详细信息展开按钮。
- 详细信息展开按钮 用户可以通过点击该元素来查看某个列表项的详细信息。(请注意,您可以在表格视图之外的其他视图中使用这个元素,以显示指定对象的详细信息;更多信息请参考“详细信息展开按钮” )。 在表格视图中,可以在某一行中使用详细信息展开按钮,来显示与该列表项相关的详细信息。请注意,与展开指示符不同,详细信息展开按钮所执行的动作可以独立 于行的选择动作。例如,在电话收藏夹应用程序中,点击某一行会呼叫在该行位置上显示的联系人;而点击该行中的详细信息展开按钮会显示该联系人的详细信息。
- 删除按钮 用户通过点击该元素可以删除对应的列表项。当用户用力点击某一行,或者在编辑环境下点击删除控制按钮时,该元素会出现在列表项的右边。(该元素的例子请参考图8-10)。
- 删除控制按钮 用户通过点击该元素可以显示或隐藏每个列表项的“删除”按钮。为了向用户提供更多的反馈信息,当用户点击这个按钮时,该按钮内的减号标志由水平方向变为垂 直方向,并显示“删除”按钮。该元素的例子请参考图8-10。.在支持临时编辑模式的分组表格中,删除控制按钮出现在表格视图外部的左侧。例如,您可以在 编辑联系人应用程序中的个人信息时看到这种情景。在处于固定编辑模式的分组表格中(比如“股票”和“天气”应用程序中的分组表格),删除控制按钮出现在表 格内部的左侧。在无格式样式的表格中,删除控制按钮总是出现在表格内部的左侧,如图8-10所示。
- 行插入按钮 用户通过点击该元素可以向列表中添加一行。
- 行排序控件 当该元素出现时,用户可以拖动一行到列表中的另一位置上。
- 选定符号 该元素出现在列表项的右侧,表明该项当前被选中。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_tableelements.jpg)
开关控件 开关控件 呈现给用户两种互斥的选项或状态,比如“是/否”或“开/关”。开关控件每次只能显示两个选项中的一个;用户滑动该控件可以显示隐藏的选项或状态。图8-11显示了开关控件的例子。 图 8-11 表格视图中的开关控件
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_switchcontrolexample.jpg)
当您需要向用户提供两个简单的,完全对立的选项时,您可以在分组表格视图中使用开关控件。由于其中一个选项始终是隐藏的,因此最好在用户已经知晓这两个选 项是什么的情况下才使用开关控件。换句话说,不要让用户仅仅为了弄清楚另一个选项是什么而滑动开关控件。您可以使用开关控件来改变视图中的其他用户界面元 素的状态。根据用户做出的选择,可能会有新的列表项出现,或者有列表项消失,或者有的列表项变为有效或无效的状态。 使用表格视图实现常用的用户操作 表格视图是非常通用的用户界面元素,因为它们可以通过不同的配置方式来支持不同的用户操作,比如:
- 选项列表。 在iPhone OS中没有类似于菜单或弹出式菜单那样的多项选择控件,但是表格视图能够以一种简单的,整洁的方式显示选项列表,供用户进行选择。此外,表格视图可以提供选定标记图像,向用户标识列表中的哪一项(或哪些项)处于被选中的状态,如图8-12 所示。图 8-12 选项列表中的选定标记
如果您需要在用户点击表格视图中的某行时向用户显示选项列表,您可以使用任意一种样式的表格视图。但是,如果您需要在用户点击按钮或其它位于表格行之外的用户界面元素时向用户显示选项列表,则您应该选用无格式样式的表格视图。 - 导航层次信息。 表格视图适用于显示有层次结构的信息,也就是说每个节点(即列表项)可以包含它自己的子集,因为其子集可以显示在一个单独的列表中。用户可以很轻松地沿着层次结构中的路径,从每层列表中选择一项。展开指示符表示用户点击该行中的任意位置都可以在一个新列表中查看其子集,如图8-13 所示。图 8-13 展开指示符表示下一屏将显示该行的信息子集
如果一个表格视图用于导航时,当用户按照层次结构回溯他们浏览过的内容时,先前被选中过的表格行不再保持高亮显示。 - 查看按概念分组的信息。 您可以使用任意一种表格视图样式,将信息归类为不同的逻辑分组,比如工作,家庭或学校。无格式样式表格和分组样式表格都允许您通过提供页眉和页脚文本来为每一段提供上下文信息,如图8-14 所示。图 8-14 无样式样式的表格视图中通过页眉来分组
一般来说,分组样式表格提供了更清晰的,可视化的分组表示,因为即使在快速滚动的情况下,用户也很容易认出分组所具有的圆形的四角。 图8-15 显示了iPod设置中一些概念相近的分组。图 8-15 分组样式表格视图可以包含多个分组 - 查看索引过的信息。 如果您正在使用无格式样式的表格视图,则您可以显示索引来帮助用户迅速找到他们需要的东西。索引由一列悬浮于屏幕右边缘的条目(通常是字母表中的字母)组成,如图8-16 所示。用户点击(或拖移至)一条索引项可以看到在列表中与之对应的区域。当列表的长度跨越数个屏幕时索引最为有用。图 8-16 包含索引的无格式样式的表格视图
如果您在无格式样式表格中包含了索引,您就应该避免使用那些需要在表格的右边缘显示的表格视图元素(比如展开指示符),因为这些元素会影响索引的使用。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_textview.jpg)
您不但可以使用文本视图来显示多行文本,如一份大文本文件的内容,而且您还可以使用文本视图来支持用户编辑。如果您提供的文本视图是可编辑的,那么当用户 在文本视图内点击时会自动显示键盘。键盘的输入法和布局取决于用户的语言设置。当用户点击“.?123”键(如图8-17所示)时,键盘会切换到数字键 盘,使得数字和标点符号的输入更加方便。您也可以指定不同的键盘样式,这取决于您希望用户所输入的文本类型。关于可使用的键盘样式请参考 “文本框” 。 您可以在文本视图中控制文本的字体,颜色和对齐方式,但这些属性会应用于整个文本。也就是说,您无法只对部分文本做出上述属性的改变。正如您所期望的那 样,默认的字体和颜色采用系统字体和黑色,因为其可读性最强。默认的对齐属性为左对齐(您可以将其改为居中对齐或右对齐)。如果您一定要在同一个文本视图 中使用不同的字体,颜色和对齐方式,您可以使用web视图代替文本视图,使用HTML来格式化文本。 Web视图 Web视图 是应用程序屏幕上可以显示丰富的HTML内容的一片区域。例如,邮件应用程序使用web视图显示邮件的内容,因为这种视图可以包含比纯文本更丰富的内容(图8-18显示了这样的一个例子)。 图 8-18 Web视图可以显示基于web的内容
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_taskstyleexample.jpg)
除了显示web内容之外,web视图还提供了一些元素来支持用户浏览开放的网页。虽然您可以选择向用户提供网页浏览功能,但是最好避免让您创建的应用程序 看起来像是一个小型web浏览器。如果您拥有一个网页或web应用程序,您可以选择使用web视图对其进行包装,实现一个简单的iPhone应用程序。如 果您打算访问由您操控的web内容,请首先阅读 Safari Web内容指南 ,确保您已经知道对于iPhone OS设备,如何创建与之兼容并针对其显示进行过优化的web内容。
应用程序控件 iPhone OS为您提供了若干控件,您可以在自己的应用程序中使用它们,并且这些控件中的绝大部分已经被iPhone OS设备的用户所熟知。这些控件有很多只能用于特定位置,比如表格视图,但也有一些控件具备一定的通用性。本章将向您介绍可以在应用程序的任意视图中使用 的控件。当您设计应用程序的用户界面时,永远要牢记一点:对于熟悉的控件,用户期望它们具有与内置应用程序中一样的行为。只要您在应用程序中适当地使用这 些控件,一定会为自己的程序增色不少。活动指示器 活动指示器 表示有一项持续时间未知的任务或进程正在进行当中。如果已知一项任务的持续时间,需要显示该任务的进度,请使用进度视图(更多关于该控件的信息请参考“进度视图” )。 活动指示器看起来像一个“旋转的齿轮”,告诉用户处理正在进行中,但不知何时能够完成。图9-1显示了两种活动指示器。状态栏上的是网络活动指示器;如果 您的应用程序访问网络时超过了一定的秒数,状态栏就会显示该指示符。工具栏上较大一点的活动指示器在您的应用程序执行当前任务的时间多于1秒或2秒时显 示。图 9-1 两种活动指示器
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_activityindicatorexample.jpg)
活动指示器是一种很好的反馈机制,它告诉用户他们的任务或进程并没有终止,而不是说明任务何时结束。您可以选择活动指示器的大小和颜色来配合它所在的视图 的背景。默认情况下,活动指示器是白色的。当任务或进程已经完成时,活动指示器就会消失。推荐您使用这种默认行为,因为用户期望在有动作发生时看到活动指 示器,而且他们会将静止不动的活动指示器与停滞的进程联想到一起。要了解如何显示网络活动指示器,请参考UIApplication类参考 中的networkActivityIndicatorVisible方法。要了解如何在您的代码中显示一个较大的非网络活动指示器,请参考UIActivityIndicatorView类参考 。日期时间选择器 日期时间选择器 为 用户提供了一种简单的选择特定日期或时间的方式。日期时间选择器最多可以有4个独立的转轮,每个轮只显示一种类型的值,比如月份或小时。用户通过点击或拖 拽使转轮转动,直到它将用户想要的值显示在选择器中间的一条突出显示的选择栏上。最终的值由各个轮上的值组合而成。图9-2显示了一个日期时间选择器的例 子。图 9-2 日期时间选择器
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_datetimepicker.jpg)
使用日期时间选择器可以避免用户输入由多段组成的值,比如一个日期的年,月,日。日期时间选择器使用起来很方便,因为每一部分的值都有相对小的范围,并且 用户知道这些值应该是多少。日期时间选择器会根据您指定的不同模式显示出不同数量的转轮,每个转轮都有一组不同的值。日期时间选择器定义了如下模式:
- 时间 时间模式下显示小时和分钟的转轮,以及一个指定上午/下午的可选轮。
- 日期 日期模式下显示月,日和年的转轮。
- 日期和时间 日期和时间模式下显示日历日期,小时和分钟的轮,以及一个指定上午/下午的可选轮。这也是默认的模式。
- 倒数计时器 倒数计时器模式下显示小时和分钟的转轮。您可以指定倒计时的总时长,最长为23小时59分钟。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_detaildisclosure.jpg)
要了解更多有关在您的代码中使用详细信息展开按钮的内容,请参考 UIButton类参考 。 信息按钮 信息按钮 提供了一种显示应用程序配置信息详情的方法,它通常位于屏幕的背面。因此,信息按钮特别适合于工具应用程序。您可以在天气应用程序(图9-4所示)的右下角看到一个信息按钮的例子。 图 9-4 信息按钮用于显示信息,通常是配置信息详情
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_infobutton.jpg)
信息按钮提供了亮色和暗色两种背景。亮色背景样式(如图9-4所示)在暗色背景的视图中效果比较好。相反,暗色背景的信息按钮在亮色背景的视图中效果更 佳。信息按钮会在用户点击它时短暂发光。当您使用iPhone OS提供的信息按钮时,您将自动获得这种处于被按下状态下的外观。要了解有关在您的代码中使用信息按钮的更多内容,请参考 UIButton类参考 。 标签 标签 是一种大小可变的静态文本。图9-5显示了一个标签的例子。 图 9-5 为用户提供信息的标签
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_label.jpg)
您可以使用标签为用户界面的各部分命名,或者向用户提供一定的帮助信息。标签最适合显示数量相对较少的文本。您可以设定标签文本的各种属性,比如字体,文 本颜色和对齐方式,但最重要的是,您要确保您的标签清晰易读。不要为了华丽的字体或鲜艳的颜色而牺牲文本的清晰度。当您撰写标签的文本时,一定要使用用户 的词汇。请检查您的应用程序中的文本,如果存在以开发人员为中心的词语,请使用以用户为中心的词语替换它们。要了解有关在您的代码中使用标签的更多内容, 请参考 UILabel类参考 。 页指示符 页指示符 为当前在应用程序中 打开的每一个视图显示一个小圆点。这些小圆点从左到右的顺序表示了视图被打开的顺序(最左边的小圆点代表第一个视图)。对于当前屏幕上显示的视图,用发光 的小圆点加以表示。用户点击发光小圆点的左右两侧可以查看上一个或下一个打开的视图。图9-6显示了一个页指示符的例子。 图 9-6 页指示符
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_pageindicator.jpg)
页指示符为用户提供了一种快捷的方法来查看当前有多少打开的视图,同时也能表示出这些视图被打开的先后顺序;它并不能帮助用户追踪他们在视图层次中所处的 位置。因为实用型应用程序中的视图彼此之间往往是对等的,所以页指示符能够充分帮助用户在各视图之间进行导航。另一方面,能够显示层次信息的效率型应用程 序应该通过导航栏(请参考 “导航栏” 获 取更多信息)上的元素提供导航信息。典型情况下,页指示符最好出现在应用程序屏幕的下边缘,位于它所包含的视图的下方。这样就可以把屏幕的上面部分留给更 重要的信息(视图本身),使用户很容易看到。一定要确保页指示符垂直居中于视图的下边缘和屏幕的下边缘之间。虽然对于在页指示符中可以显示的小圆点的数量 没有规划性的限制,但是当页面越来越多时,指示点之间不能过于密集。例如,当设备处于纵向时,您只能在一个页指示符上显示至多20个小圆点。因此,您应该 在应用程序中避免发生这种情况。虽然您可以在只有一个打开的视图时隐藏页指示符,但默认的行为是显示它。要了解有关在您的代码中使用页指示符的更多内容, 请参考 UIPageControl类参考 。 选择器 选择器 是日期时间选择器(关于该控件的更多信息请参考 “日期时间选择器” )的通用版本。您可以使用选择器来显示任意一组值。与日期时间选择器一样,用户旋转选择器的单个或多个转轮直到出现他们想要的值。图9-7显示了一个单轮的选择器。 图 9-7 iPhone的Safari中出现的选择器
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_pickerview.jpg)
当您决定是否在应用程序中使用选择器时,要考虑到当转轮静止时,轮上的许多甚至绝大多数数值对用户来说是隐藏的。但这不一定是个问题,特别是在用户已知这 些值是多少的情况下。例如,在日期时间选择器中,用户了解在月份轮上隐藏的值只能是1到12之间的数字。然而,如果您要提供的选项不是像这样的一组众所周 知的值,那么使用选择器控件可能并不合适。如果您需要显示特别多数量的值,则您应该用表格视图将这些值列出,而不是用选择器。这是因为表格视图具有更高的 高度,能够更快速地进行滚动。如果您需要为选择器中的值提供上下文信息,比如计量单位,请将它显示在水平地穿过控件中心的半透明选择栏中。不要在选择器上 方或转轮本身上显示这样的标签。有关正确显示标签的例子,请参考内置的时钟应用程序的“定时器”功能,可以看到在用户选择的值旁边显示了单位“小时”和 “分钟”。与日期时间选择器一样,通用的选择器可以一直可见(作为您的用户界面的焦点)或者只在需要时出现。选择器的整体大小,包括它的背景,都是固定 的,与键盘的尺寸相同。要了解更多有关在您的代码中使用选择器的内容,请参考 UIPickerView类参考 。 进度视图 进度视图 显示具有确定持续时间的任务或进程的进度。如果您需要显示未知持续时间的任务的进度,请使用活动指示器(关于该控件的更多信息请参考 “活动指示器” )。iPhone OS提供了两种样式的进度视图,分别是默认样式和栏样式。这两种样式的外观非常相似,区别在于高度不同:
- 默认样式用于应用程序的主内容区。
- 栏样式比默认样式薄一些,非常适合在工具栏中使用。例如,在邮件应用程序中,当用户下载新邮件或发送电子邮件时,工具栏上就会出现栏样式的进度视图。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_barstyleprogressview.jpg)
进度视图是那些具有明确持续时间的任务向用户提供反馈信息的好方法,尤其是在向用户显示一项任务大约会执行多久十分重要的情况下。当您显示进度视图时,用 户会得知他们的任务正在执行,并且用户获得了足够的信息,他们可以决定是否等待任务完成,或者取消该任务。要了解更多有关在您的代码中使用进度视图的内 容,请参考 UIProgressView类参考 。 圆角矩形按钮 圆角矩形按钮 是一种多功能的按钮,您可以在视图中使用它来执行一个动作。您可以在每一个联系人视图的底部看到这种按钮的例子:文本消息和添加到收藏夹按钮就是圆角矩形按钮,如图9-9所示。 图 9-9 执行应用程序特定动作的圆角矩形按钮
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_roundrectbutton.jpg)
当您为圆角矩形按钮创建标题时,请务必:
- 使用标题式的大写方式(即每个单词都大写,但冠词,并列连词和五个字母以下的介词除外)
- 避免创建过长的标题。长度过长的文本会被截断,这样会使用户很难理解。
- 占位符文本。该文本可以用来显示控件的功能(例如“搜索”),或者用来提醒用户他们所处的搜索环境(例如“YouTube”或“Google”)。
- 书签按钮。该按钮可以提供信息的快捷方式,使得下一次用户也能够轻松地找到这些信息。例如,通过地图应用程序搜索模式中的书签按钮,用户可以访问已保存在书签的地点,最近的搜索和联系人。
- 清除按钮。大多数搜索栏都包含一个“清除”按钮,允许用户通过点击该按钮清除搜索栏中的内容。
- 一个可以被称作提示的描述性标题,位于搜索栏的上方。举例来说,这种提示可以是一个短语,为搜索栏提供简要介绍或应用程序特定的环境信息。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_searchbar.jpg)
默认情况下,书签按钮和清除按钮会按下列方式对彼此产生影响:
- 当搜索栏包含非占位符文本时,清除按钮是可见的,用户可以使用它来清除文本。如果搜索栏中不存在用户提供的文本或非占位符文本,清除按钮是隐藏的,因为没必要清除搜索栏的内容。
- 只有当搜索栏中不存在用户提供的文本或非占位符文本时,书签按钮才是可见的。这是因为当搜索栏中存在用户可能想要清除的文本时,清除按钮是可见的。
- 蓝色(与工具栏和导航栏的默认外观一致的默认渐变颜色)。默认的背景样式如图9-10所示。
- 黑色
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_segmentedcontrol.jpg)
分段控件的长度取决于您所显示的段的数量以及最长一段的尺寸。分段控件的高度是固定的。虽然您可以指定要显示的段的数目,但要注意,用户必须能够舒服地点 击到任何一段,而无需担心触碰到相邻的段。由于点击区域应该是44 x 44像素,因此建议将分段控件分为5段或5段以下。分段控件可以包含文本或图像;每一个单独的分段要么包含文本,要么包含图像,但不能同时包含两者。一般 来说,最好避免在同一个分段控件中混合使用文本和图像。分段控件要保证每一段的宽度与段的总数相称。这意味着您要确保为每一段设计的内容在尺寸上要大致相 等。要了解有关在您的代码中使用分段控件的更多内容,请参考 UISegmentedControl类参考 。 滑块 滑块 允许用户在允许的值的范围内对一个值或一个过程进行调整。当用户拖拉滑块时,相应的值或过程也不断被更新。图9-12显示了一个带有最小值和最大值的图像滑块的例子。 图 9-12 滑块
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_sliderexample.jpg)
滑块主要在下面两种情况下很有用:
- 当您希望用户能够对他们选择的值进行较高精度的控制时
- 当您希望用户能够对当前的过程进行较高精度的控制时
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_sliderparts.jpg)
您可以设定滑块的宽度,使其适合于您的应用程序的用户界面。此外,您可以选择水平地或垂直地显示滑块。有以下几种方法自定义滑块:
- 您可以定义滑块的外观,以便用户可以一眼辨认出滑块是否处于活动状态。
- 您可以提供在滑块两端出现的图像(通常,它们分别对应最小值和最大值),以此帮助用户理解滑块的作用。例如,控制字体大小的滑块可以在最小值一端显示一个非常小的字符,而在最大值一端显示一个特别大的字符。
- 您可以根据滑块所在的位置和控件所处的状态,为轨道定义不同的外观。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_textfields.jpg)
您可以使用自定义文本框来帮助用户在您的应用程序中进行输入。例如,您可以在文本框的左侧或右侧显示自定义的图像,或者显示一个系统提供的按钮,比如图 9-14中的“书签”按钮。在一般情况下,您应该在文本框的左端指明该文本框的用途,而在右端显示一些附加的功能,比如书签。您也可以在文本框的右端显示 清除按钮。当该按钮存在时,不论您在它的上面显示什么图像,点击该按钮都会清除文本框的内容。有时候,如果文本框显示一些提示信息,比如“姓名”,则有助 于用户理解这个文本框的用途。文本框支持显示占位符文本,它们可以在文本框中没有其他文本时显示。要了解与使用文本框,以及自定义显示图像和按钮的文本框 的详情,请参考 UITextField类参考 。您可以指定不同的键盘样式,来迎合用户输入的内容的不同类型。(注意,您不能控制键盘的输入 法和布局,这些是由用户的语言设置决定的。)例如,你可能希望用户能够方便地输入URL地址,PIN密码或电话号码。iPhone OS提供了几种不同的键盘类型,这样设计是为了方便不同类型的输入。要了解可供您使用的键盘类型,请参考UIKeyboardType。要了解更多有关在 您的应用程序中管理键盘的内容,请阅读 iPhone应用程序编程指南 中的“键盘管理”一节。
系统提供的按钮和图标 为了打造一致的用户体验(也为了让您的工作更加轻 松),iPhone OS提供了许多用于导航栏和工具栏的标准按钮,以及用于标签栏的图标。本章介绍了可供您使用的标准图标和按钮,以及如何正确地使用它们。不论您正在开发哪 种类型的应用程序,您都应该熟悉本章中所介绍的按钮和图标,这有助于您:
- 正确地使用系统提供的元素
- 避免设计出与系统提供的图标过于相似的自定义图标
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_taskstyleexample.jpg)
像图10-1所示的这几个按钮—“刷新”,“组织”,“删除”,“回复”和“撰写”,早已被许多内置的应用程序所使用,因此,用户非常熟悉它们的含义和用 法。这意味着,如果您的应用程序支持这些功能,您就可以利用用户对它们的熟悉,使得应用程序的用户界面更加简洁而高效。反之,这也意味着,如果您将这些按 钮与其他任务联系起来,很可能会使用户觉得迷惑和不适应,因为用户以为这些按钮仍具有他们所熟知的功能,但实际上它们会执行另外的功能。除了可以充分利用 用户以往的使用经验之外,使用系统提供的按钮和图标还能够带来另外两大好处,具体为:
- 缩短开发时间,这是因为您不需要为标准功能创建自定义的图形元素。
- 增强用户界面的稳定性,即使日后iPhone OS的更新版本改变了标准图标的外观也没有问题。换句话说,您尽可信赖于标准图标,即使外观有所变化,它们代表的意思始终保持不变。
- 边框样式—例如,电话联系人应用程序导航栏中的“添加”按钮。这种样式对于导航栏和工具栏都适用。
- 无格式样式—例如,邮件应用程序工具栏中的“撰写”按钮。这种样式只适用于工具栏。事实上,即使您指定一个导航栏中的按钮为无格式样式,它也会被转换为边框样式。
按钮
含义
名称
打开动作表单,允许用户执行应用程序特定的动作
动作
打开动作表单,显示相机模式下的照片选择器
相机
打开新消息的编辑模式视图
撰写
显示应用程序特定的书签
书签
显示搜索框
搜索
创建一个新项
添加
删除当前项
回收站
在应用程序中将某一项移动或路由至指定目的地,如文件夹
组织
将某一项发送或路由至另一位置
回复
停止当前进程或任务
停止
刷新内容(只在必要时使用;其他情况下自动刷新)
刷新
开始播放媒体或幻灯片
播放
快进当前播放的媒体或幻灯片
快进
暂停当前播放的媒体或幻灯片(请注意,这意味着上下文保存)
暂停
快退当前播放的媒体或幻灯片
快退
除了表10-1所示的按钮之外,在您的应用程序中,您也可以使用表10-2中由系统提供的“编辑”,“取消”,“保存”和“完成”按钮,以支持编辑或其他 类型的内容操作。(有关这些按钮的符号名称和可用性的信息请参考介绍UIBarButtonSystemItem的文档。)这些按钮对于导航栏和工具栏都 适用,但只能以有边框样式提供给用户。如果您使用上述按钮,即使您将其指定为无格式样式,它也会被转换为有边框样式。 表 10-2 用于导航栏的有边框样式的动作按钮
按钮
含义
名称
进入编辑或内容操作模式
编辑
退出编辑或内容操作模式而不保存更改
取消
保存更改,并在合适的情况下退出编辑或内容操作模式
保存
退出当前模式并保存修改(如果有的话)
完成
用于标签栏的标准图标 iPhone OS提供了用于标签栏的标准图标,如表10-3所示。有关这些图标的符号名称和可用性的信息请参考介绍UITabBarSystemItem的文档。与所 有的标准按钮和图标一样,您必须根据其规定含义使用这些图标。尤其要注意,要基于图标代表的含义来使用图标,而不是它的外观。这样即使图标的外观发生改 变,它所代表的特定含义不变,从而使应用程序的用户界面看起来仍然合理,请参考 “使用系统提供的按钮和图标” 一节,进一步了解为什么正确使用这些图标如此重要。 表 10-3 用于标签栏的标准图标
图标
含义
名称
显示应用程序特定的书签
书签
显示联系人
联系人
显示下载
下载
显示当前用户的收藏夹
收藏夹
显示应用程序的特色内容
特色
显示用户操作的历史
历史
显示标签项上的更多项
更多
显示最近一次使用的项
最近一次使用
显示所有用户最关注的项
最多关注
显示由应用程序定义的一段时间以来用户访问过的项
最近使用
进入搜索模式
搜索
显示用户评级最高的项
最高级
用于表格行和其它用户界面元素的标准按钮 iPhone OS提供了少量用于表格行和其他元素的按钮。表10-4列出了这些按钮,与所有的标准按钮和图标一样,它们应该按照其含义被正确地使用。特别是要避免只根据外观选择按钮,而不是这个按钮的文档描述。请参考 “使用系统提供的按钮和图标” 一节,这部分内容讨论了正确使用这些图标的重要意义。虽然“详细信息展开”按钮通常在表格行中使用,但它也可以用在别处。有关该按钮的更多信息请参考 “详细信息展开按钮” 。iPhone OS还提供了一组只能在表格行中使用的控件;有关这些控件的具体信息请参考 “表格视图元素” 一节。有关这些按钮的符号名称和可用性的信息请参考介绍UIButtonType的文档。(表格视图元素“详细信息展开”的符号名称和可用性的信息请参考介绍UITableViewCellAccessoryDetailDisclosureButton的文档。) 表 10-4 用于表格行和用户界面元素的标准按钮
Button
Meaning
Name
显示联系人选择器,向某一项中添加联系人
添加联系人
显示一个新视图,其中包含当前项的详细信息
详细信息展开
翻转至视图的背面(通常出现在工具程序中)以显示配置选项或其他信息。请注意,“信息”按钮也可以是暗色的圆圈当中有一个亮色字母“i”。
信息
创建自定义图标和图像 iPhone应用程序的用户界面向来以其精美的图像和丰 富的色彩著称。作为应用程序的设计者,您需要提供一个美观的用户界面以融入这样的整体风格。虽然iPhone OS提供了大量精美的用户界面元素,但是每个应用程序仍然需要两个自定义元素:应用程序图标和启动图像。此外,应用程序还应该为iPhone OS提供用于显示在Spotlight搜索结果中的小图标。有些应用程序需要自定义图标,用于在导航栏,工具栏和标签栏中表示应用程序的特定功能和模式。 遵循创建这些图标的准则,您就可以设计出既与内置图标相称,又能巧妙地突显您应用程序风格的图标和图像。注意: 图标和图像的标准比特深度是24位(其中,红色,绿色和蓝色各占8比特),外加8位的alpha通道。建议您使用PNG格式,因为它保留了颜色深度,并且 内置支持ɑ通道。您可以使用预览应用程序产生最终的PNG文件。您无须将颜色限定在Web安全色内。虽然您可以在为导航栏,工具栏和标签栏创建的图标中使 用alpha透明度,但不要在应用程序图标中这么做。
应用程序图标 应用程序图标 是用户会放置在其主屏幕上的图标,点击该图标可以启动应用程序。在这里您可以将品牌宣传和强烈的视觉效果结合起来,使其简洁,易辨认且引人注目。用户可以选择想要在主屏幕上显示的应用程序图标,因此您应该设计一个这样的图标:
- 具有吸引力的,以至于用户觉得应该将它留在主屏幕上
- 独特的,以便用户可以很容易地在众多的图标中找到它
- 圆角
- 阴影
- 反光
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/star.jpg)
图11-2显示了同一个图标被iPhone OS显示在主屏幕时的样子。 图 11-2 一个简单的应用程序图标,显示在主屏幕时的样子
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/star_button.jpg)
在主屏幕上,具有清晰背景的应用程序图标看起来效果最佳。这主要是因为iPhone OS添加了圆角效果:统一的圆角效果使用户主屏幕上的所有图标都具有一致的可点击外观。如果您创建的图标具有黑色背景,当显示在主屏幕上时,它的背景会消 失,用户就无法看到它的圆角效果。这样的图标往往让人觉得是无法点击的,会干扰到主屏幕的次序结构。为了确保您的图标可以充分利用iPhone OS所提供的视觉增强功能,建议您创建这样的PNG格式图像:
- 尺寸为57x57像素,90度直角(如果图像使用了其它尺寸,iPhone OS会对其进行调整)
- 不要使用光晕或者修饰效果
- 不要使用alpha透明度
当您提交您的应用程序时,必须包含一个512 x 512像素版本的应用程序图标,用于在App Store中显示。虽然,让用户一眼就能认出这个版本的图标就是您的应用程序的图标非常重要,但这个版本的图标应该更华丽,更精细。换句话说,您不应该只 是简单地放大应用程序图标,直接作为您为App Store创建的图标。如果您正在开发一个私下发布的应用程序(即不通过App Store发布),您也必须提供一个512 x 512像素版本的应用程序图标。在这种情况下,将图标文件命名为iTunesArtwork(没有文件扩展名),并把它放在应用程序包的顶层。这个图标用 于在iTunes中标识您的应用程序。 小图标 每个应用程序都应该提供一个小图标,当应用程序的名称与 Spotlight搜索栏中的词条相匹配时,iPhone OS可以显示这个小图标。具有设置功能的应用程序也应该提供这种小图标,用于在内置的设置应用程序中标识应用程序。您的小图标应该能清晰地标识您的应用程 序,以便用户可以在搜索结果列表中明确地识别出来。要做到这一点,您应该创建这样精简而吸引人的图标:
- 使用PNG格式。
- 尺寸约为29 x 29像素。
启动图像 为了增强应用程序启动时的用户体验,您应该提供一个 启动图像 。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。一定要强调的是,之所以提供启动图像,是为了改善用户体验,并 不 是为了提供:
- “应用程序进入体验”,比如启动动画
- “关于”窗口
- 品牌宣传元素,除非它们是您应用程序首屏幕的静态组成部分
- 尺寸为320 x 480像素。其中包含的状态栏区可以立即显示您选择的状态栏颜色,而不是等到您的应用程序启动完成后才显示。
- 与应用程序的首屏幕相同,除了:
- 文本。启动图像是静态的,因此您在其中显示的任何文本都不会本地化。
- 可能动态改变的用户界面元素。不要包含在应用程序启动完成后看上去不同的元素,防止用户感觉到启动图像和应用程序首屏幕之间的闪动。
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ic_defaultsettings.jpg)
另一个启动图像的例子源自内置股票应用程序,如图11-4所示。请注意,只有包含在启动图像中的图像才是静态的图像,它们在股票应用程序的正面视图中总是可见的。 图 11-4 股票应用程序的启动图像
![](http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ic_defaultstocks.jpg)
导航栏,工具栏和标签栏的图标 如果可能的话,您应该在导航栏,工具栏和标签栏中使用系统提供的按钮和图标。 iPhone OS提供了各式各样的标准按钮和图标,用户看到它们就会联想到内置应用程序所支持的标准任务和模式。如果您的应用程序支持一些标准功能(比如刷新内容区视 图或删除一项),或者会显示不同的数据子集(比如联系人或书签),一定要使用系统提供的相应按钮或图标来表示它们。关于标准按钮和图标的完整列表,以及如 何使用它们的指南,请参考 “系统提供的按钮和图标” 。 当然,并不是应用程序所执行的每个任务都是一个标准功能。如果您的应用程序支持一些用户需要频繁执行的自定义任务,您需要创建自定义的图标,用于在工具栏 或导航栏中代表这些任务。同样,如果您的应用程序显示了标签栏,允许用户在自定义的应用程序模式之间,或者自定义的数据子集之间进行切换,你需要设计自定 义的标签栏图标,用于清晰地描述这些模式和子集。本节向您介绍如何设计出能够很好地用于导航栏,工具栏和标签栏的图标。在您为图标创建美术图案之前,您需 要花些时间想想该图标应该传达些什么信息。当您考虑设计的时候,请以这样的图标为目标:
- 简明扼要。太多的细节会使图标显得杂乱或是难以理解。
- 不会被误认为是系统提供的图标。用户应该能够一眼就将您的自定义图标与标准图标区分开。
- 易于理解且广为接受。请尽力创建一个能够被大多数用户正确理解,不会令任何用户反感的符号。
- 使用PNG格式。
- 使用带有适当alpha透明度的纯白色。
- 不要添加阴影效果。
- 使用抗锯齿效果。
- 如果您要添加斜边效果,请确保角度为90°(为了便于理解和操作,您可以想象在图标的顶部有一处光源)。
- 对于工具栏和导航栏图标,尺寸应为20 x 20像素。对于标签栏图标,尺寸应为30 x 30像素的图标。
iPhone OS自动为导航栏,工具栏和标签栏中的项目提供了被按下或被选中时的外观,因此您只需要提供图标的单个版本。由于这些视觉效果是自动呈现的,您无法改变它们的外观。