博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
设计您iPhone应用程序的用户界面
阅读量:6678 次
发布时间:2019-06-25

本文共 35446 字,大约阅读时间需要 118 分钟。

  hot3.png

设计您iPhone应用程序的用户界面

iPhone OS中的用户界面元素包括视图和控件。视图是提供了良好定义的功能集合的内容区域。控件则是能够触发即时动作或可视化结果的图形对象。虽然一个应用程序的所有视图和控件都包含在同一个应用程序窗口中,用户却是根据它们不同的可见状态在屏幕中与之交互的。

iPhone OS定义了这些用户界面元素的标准外观,并提供了用户所期望的行为。第二部分中的章节能够帮助您了解可用的用户界面元素的类型以及如何在您的应用程序的用户界面中使用它们。

用户界面概述

在深入研究视图和控件的具体细节之前,先对这些元素在一起工作的方式以及用户期望的行为有一个较高层次的理解,对您来说大有裨益。本章将介绍构成大多数应用程序的各种视图,帮助您了解它们的具体信息以及如何使用它们。

想要详细了解每一个用户界面元素的外观,行为和使用指南,请务必阅读本章后面的章节。理解每个用户界面元素是如何针对它的用法进行设计的,能够帮助您在应用程序中正确地使用它,并在适当的情况下根据您的需要定制用户界面元素。

应用程序的屏幕及其内容

无论是什么类型的应用程序,都有一个应用程序窗口,该窗口为您提供了一个能够呈现应用程序的所有信息的背景。但是用户对这个窗口没有概念,他们对应用程序的体验来自屏幕上的画面,并且用户通过屏幕对应用程序进行操作。

虽然不是一个程序中的结构,但是您仍可以认为每个屏幕对应于应用程序的不同的可视化状态或模式。当用户浏览信息,切换标签页,或者点击信息按钮查看侧边弹出的配置信息时,他们看到的是各个独立的屏幕。

取决于程序的类型,您的应用程序的屏幕可能有多有少。例如,邮件应用程序可以显示一个帐户屏幕,各个帐户中的邮箱列表屏幕,各个邮箱内容的屏幕和显示一条消息的屏幕,还有一个写邮件的屏幕。然而,股票应用程序只显示两个屏幕:一个屏幕显示公司列表和股票走势图,另一个屏幕显示应用程序的配置信息。

通常,用户会把应用程序屏幕和设备屏幕当成是一回事。然而,应用程序屏幕的内容可能会超出设备屏幕的边界,这就需要用户滚动屏幕。例如,电话应用程序中的联系人只有一个单独屏幕,即使它的内容是设备屏幕的好几倍。

应用程序的屏幕可以包含各种各样的视图和控件的组合。某些视图会包含一些特定的控件,而有些控件可以用于很多不同的视图当中。

告警,动作表单和模式视图和普通视图不同,普通视图一般存在于应用程序的屏幕中,而它们浮动于应用程序的屏幕及其视图之上。更多有关这些视图的信息请参考。

下面四种类型的视图在应用程序的用户界面中具有特殊的地位,但是它们并不需要在每个应用程序中被包含或总是可见。

  • 状态栏 这是一个独一无二的视图,虽然应用程序可以在一定程度上自定义状态栏的外观,但从技术角度讲,它并不属于应用程序窗口的一部分。更多信息请参考。
  • 导航栏 这是个可选的视图,它出现于状态栏的下方,可以包括标题,按钮和分段控件。更多信息请参考。
  • 标签栏 这是个可选的视图,它位于屏幕底部的边缘,能够切换应用程序中不同的模式。更多信息请参考。
  • 工具栏 这也是个可选的试图,它同样位于屏幕底部的边缘,包含在应用程序的当前上下文中完成特殊动作的控件。更多信息请参考。

5-1在一个应用程序屏幕中显示了这些视图中的三种。请注意,如果该应用程序使用工具栏,它将出现在图中的标签栏处。

5-1  一个包含状态栏,导航栏和标签栏的应用程序屏幕

ui_statusnavmodeswitcher.jpg

在一个能够显示这四种视图的组合的应用程序中,您可以将导航栏底部到工具栏顶部之间的区域视为内容区。在该区域中,应用程序屏幕可以包含任意视图来显示内容,如表视图,web视图和图像视图。图5-2显示了两个在iPhone操作系统中可用的内容区视图:表视图的一种和图像视图。请参阅以了解更多有关这些视图的行为和外观,以及与其相关的控件。

5-2  两种类型的内容区视图

ui_arbitraryviews.jpg

正如上文说过的那样,有一些控件只能在特定的视图中使用。显示提示符控件就是这样的一个例子,它在表视图中具有特殊用法。您可以在中的左边的列表中看到显示提示符(它看上去像是一个大于号>)。在介绍其相应视图的小节对这些控件有具体描述,但是,需要补充一点,也有少量控件(如详细显示提示符)具有更广泛的用途。请参阅来获得更多控件相关的信息。

在应用程序屏幕中使用视图和控件

iPhone OS中,UIKit决定了视图以及控件的行为和默认外观。您应该尽可能地使用UIKit提供的标准用户界面元素,并遵循它们的使用建议。这样做对您最主要的好处有两点:

  • 用户已经习惯了标准视图和控件的外观和行为。当您使用相似的用户界面元素时,用户之前的经验对于他们学习使用您的应用程序有所帮助。
  • 即使iPhone OS改变了标准视图或控件的外观或行为,您的应用程序也能够继续工作,并且只需要少许改动(如果有的话)就能自动更新。

许多控件支持某种程度上的用户自定义,通常是颜色或内容(比如添加一个文本标签或一幅图像)方面。如果您想要开发一个能使用户沉醉其中的应用程序,一个好的做法是,您所创建的控件完全不同于默认控件。这是因为您创造了一个独特的环境,而去探索如何操控这个环境正是用户在优秀的应用程序中所期待的体验。

然而,一般来讲您应该避免彻底改变标准行为控件的外观。如果您使用用户不熟悉的控件执行标准行为,则用户不得不花时间熟悉如何使用它们,并且好奇这些控件具有哪些(哪怕只有一丁点)标准控件不具备的功能。

导航栏,标签栏,工具栏和状态栏

状态栏,导航栏,标签栏和工具栏在iPhone应用程序中具有特别定义的外观和行为的视图。它们不需要在每个应用程序中都出现(在那些令人惊叹的应用程序中经常是一个也不出现),不过一旦决定让它们出现在应用程序中,就一定要正确地使用这些视图。原因在于使用iPhone OS设备的用户都熟悉它们所提供的功能,对它们显示的信息和执行的功能类型早已习惯。

状态栏

状态栏显示与用户设备相关的重要信息,包括电话信号强度,当前网络连接和电量信息。图6-1显示了一个状态栏的例子。

6-1  一个包含用户所需的重要信息的状态栏

ui_statusbar.jpg

尽管一个全屏的应用程序可以隐藏状态栏,但是您应该仔细考虑这一设计方案。人们总是希望可以看到当前设备的电量;隐藏这一信息,会迫使用户需要退出您的应用程序才能获取电量信息,这可不是一种理想的用户体验。

例如,照片应用程序以全屏幕视图显示相机中的各个照片时,会在几秒钟之后渐渐隐去状态栏,导航栏和工具栏。这种做法是很恰当的,因为在照片应用程序中,用户仅仅关注照片的内容,而并不与应用程序进行交互。但是,用户可以通过轻轻点击屏幕,让状态栏,导航栏和工具栏重新显示出来。

如果您想要不时地在应用程序中隐藏状态栏,那么您应该使得用户能够通过单击屏幕重新获得状态栏。除非您有非常令人信服的理由,否则最好避免用自定义的方式来重新显示状态栏,因为用户未必会发现或记住这样的方式。

虽然您难以控制状态栏的内容,但是您可以定制它的外观,并在一定程度上定制它的行为。具体来说,您可以:

  • 设定网络活动指示器是否应该可见。如果您的应用程序正在执行的一项网络操作会持续几秒钟以上,则应该显示网络活动指示器。如果该网络操作将在几秒钟之内完成,则不必显示网络活动指示器,因为它很可能在用户意识到它的存在之前便消失了。(在您的代码中,您可以使用UIApplication的方法networkActivityIndicatorVisible来控制指示器的可见性。)
  • 指定状态栏的颜色。您可以选择灰色(默认的颜色),不透明的黑色或半透明的黑色(也就是α值为0.5的黑色)。图6-2显示了这些样式。(请注意,您应该在Info.plist文件中设置一个值来指定状态栏的样式;更多相关的信息请参考iPhone应用程序编程指南。)
  • 设置是否应该采用动画方式显示状态栏颜色的改变。(请注意,动画效果会使旧的状态栏一直滑出屏幕,最后消失,同时新的状态栏会滑动到相应的位置上。)

6-2  状态栏的三种样式

ui_statusbartypes.jpg

请确保状态栏的外观与您的应用程序的其余部分能够协调搭配。例如,如果导航栏是不透明的,就要避免使用半透明的状态栏。

导航栏

导航栏位于应用程序屏幕的上边缘,在状态栏之下。导航栏通常会显示当前视图的标题,包含导航控件,并在适当的情况下也可以包含作用于视图内容的控件。在效率型应用程序(详见)中,导航栏非常有用,因为这些应用程序通常会按照层次结构显示信息。

导航栏有两种用途:

  • 激活应用程序中不同视图之间的导航
  • 提供一些控件,用于管理视图中的条目

6-3 显示了这两种用途的示例。

6-3  包含导航控件和内容管理控件的导航栏

ui_navbarpurposes.jpg

导航栏的内容

导航栏可以根据当前视图标题的宽度居中显示标题,如图6-4所示。效率型应用程序中的初始视图应该包含一条导航栏,上面只需显示第一个视图的标题,这是因为用户还没有切换到其它位置。

6-4  显示当前视图标题的导航栏

ui_navbartitleonly.jpg

一旦用户切换到另一个视图,导航栏就应该将它的标题更改为新视图的标题,并且应该提供一个返回按钮,标记为先前视图的标题。例如,图6-5显示了日期和时间设置中的导航栏,该设置属于常规设置视图中的一部分。

6-5  包含导航控件的导航栏

ui_navbarnavigationonly.jpg

标准的返回按钮为用户提供了一种返回到先前屏幕的可靠方式,所以一定不要改变该按钮的行为。特别地,您应该避免创建多段的返回按钮,比如图6-6中所示的按钮。

6-6  不推荐多段的返回按钮

ui_navbarmultisegment.jpg

使用多段的返回按钮会引起以下列问题:

  • 多段返回按钮持续增长的宽度会占用显示当前视图标题的空间。
  • 无法表明单独某一段的选定状态。
  • 段越多,每一段的可点击区域就越小,这使得用户很难准确点击到特定的某一段。
  • 当用户浏览层次比较深时,无法确定显示哪些层的内容。

如果您认为没有多段返回按钮的帮助来显示路径,用户可能会感到迷惑,那么这也就意味着用户必须浏览很深的信息层次才能找到他们所需要的内容。为了解决这个问题,您应该尽量将信息层次扁平化。

除了返回按钮之外,导航栏还可以在标题的右侧包含另一个按钮。如果您不需要显示返回按钮(由于您的应用程序不支持分层导航),您也可以选择在标题的左侧显示一个作用于视图内容的按钮,比如编辑按钮。图6-7显示了这样的一个例子。

6-7  包含用于管理视图内容的控件的导航栏

ui_navbarnonavigation.jpg

要了解如何在您的应用程序中实现导航栏,请参考。

正如您在上述示例中所见,导航栏上的按钮周围有一圈带边角的框。在iPhone OS中,这种样式被称为边框样式。导航栏的所有控件都要使用边框样式。事实上,即使您在导航栏上放置一个无格式(没有边框)的控件,它也会自动转换为有边框的样式。

您可以设计自己的图标用作导航栏的按钮,或者您也可以利用iPhone OS提供的预定义按钮。关于您可以使用的按钮相关的更多信息,请参考。

虽然您可以为所有在导航栏中显示的文本指定字体,但为了可读性,推荐您使用系统字体。当您使用适当的UIKit编程接口创建导航栏时,其标题将自动采用系统字体来显示。

导航栏的尺寸和颜色

当设备的方向由纵向变为横向时,导航栏的高度也会自动随之改变(您不应该通过编程的方式指定它的高度)。设备处于横向时,窄一点的导航栏可以为屏幕上的内容留出更大的空间。您在设计导航栏控件的图标和设计屏幕上的布局时,一定要将这种高度上的差异计算在内。

您可以指定导航栏的颜色和半透明效果,以和您的应用程序的整体外观以及其它栏目(即工具栏,标签栏和状态栏)一致。您可以使用自定义颜色或选择下列标准颜色中的一种:

  • 蓝色(默认颜色)
  • 黑色

如果能对您的应用程序的外观有所帮助,您还可以为导航栏添加半透明效果。当您使用半透明的导航栏时,屏幕会给人感觉具有更大的可视区域,这在设备横向放置时效果非常理想。一定要避免将半透明的导航栏和黑色不透明的状态栏混合使用(然而半透明的导航栏可以同灰色不透明的状态栏一起显示)。

导航栏的外观要力争与应用程序中的其它栏目的外观保持一致。例如,如果您使用半透明的导航栏,就不要将它与不透明的工具栏一起使用。此外,请避免在同一方向的不同屏幕中改变导航栏的颜色或半透明效果。

工具栏

如果您的应用程序为用户提供了一系列可在当前上下文中执行的动作,那么您可以为用户提供一个工具栏。工具栏位于屏幕的下边缘,它包含若干按钮,这些按钮用于执行与当前视图中的对象相关的动作。工具栏不是用来切换应用程序的不同模式的。如果您需要这样做,您应该使用标签栏而非工具栏(更多信息请参考)。

例如,当用户在邮件应用程序中查看消息时,应用程序提供了一个工具栏,除了查收新邮件和撰写新邮件之外,工具栏中还包含了用于删除,回复和移动消息的项。通过这样的方式,用户即使停留在消息查看的上下文环境中,也仍然可以使用他们所需的命令来管理他们的电子邮件。图6-8显示了这个场景。

6-8  当前上下文下提供功能的工具栏

ui_taskstyleexample.jpg

工具栏的内容

工具栏在其宽度范围内等距离地显示工具栏上的项。对于工具栏上显示的项,最好对其数目加以限制,这样用户可以轻松地点击到他们所需的项。我们向您推荐的用户界面元素的点击区域为44 x 44像素,因此,为用户提供五个以下的工具栏项是比较合理的。图6-9中的例子向您展示了一个各项间距适中的工具栏示例。

6-9  间距适当的工具栏

ui_taskstyletoolbar.jpg

和图6-9中的项都没有边框。在iPhone OS中,这种样式叫做无格式样式。(关于边框样式的例子请参考。)虽然您既可以在工具栏中使用带边框样式的按钮,也可以使用无格式按钮,但是您不要将这两种样式在同一工具栏中混合使用。

您可以为工具栏按钮自行设计图标,或者您也可以充分利用iPhone OS提供的预定义按钮。(关于可以使用的按钮的更多信息,请参考。)如果您选择创建自定义的工具栏按钮,请尽可能保持它们的尺寸相近,以获得均匀而又不失吸引力的外观。

工具栏的尺寸和颜色

当设备的方向由纵向变为横向时,工具栏的高度也会自动随之改变(您不应该在程序中指定它的高度)。设备处于横向时,窄一点的工具栏可以为屏幕上的内容留出更大的空间。您在设计工具栏按钮的图标和设计屏幕上的布局时,一定要将这种高度上的差异计算在内。

您可以指定工具栏的颜色和半透明效果,以和应用程序的整体外观以及其它栏目(即导航栏,标签栏和状态栏)一致。您可以使用自定义颜色或选择下列标准颜色中的一种:

  • 蓝色(默认颜色)
  • 黑色

如果能对您的应用程序的外观有所帮助,您还可以为工具栏添加半透明效果。当您使用半透明的工具栏时,屏幕会给人感觉具有更大的可视区域,这在设备横向放置时效果非常理想。

工具栏的外观要力争与应用程序中的其它栏目的外观保持一致。例如,如果您使用半透明的工具栏,就不要将它与不透明的导航栏一起使用。此外,请避免在同一方向的不同屏幕中改变工具栏的颜色或半透明效果。

标签栏

如果您的应用程序为同一组数据提供了不同的视图,或者与应用程序的整体功能相关的不同子任务,您可能会想要使用标签栏。标签栏出现在屏幕的下边缘。

标签栏使用户能够在应用程序的不同模式或不同视图之间进行转换,并且用户应该能够从应用程序的任何地方进入这些模式。但是,标签栏绝不应该被当做工具栏使用,区别在于工具栏上的按钮是对当前模式下的元素起作用的(有关工具栏的更多信息请参考)。

例如,在iPhone中,iPod使用了播客,艺术家,视频和播放列表等标签栏,使得用户能够在他们的媒体收藏中选择他们所关注的部分。另外,时钟应用程序也使用了标签栏,让用户访问该程序的四项功能,即世界时钟闹钟秒表计时器。图6-10显示了在标签栏中选择标签是如何改变时钟程序的视图的。请注意图6-10中的标签栏,在时钟应用程序的不同模式中是如何保持始终可见的。这使得用户能够很容易地看到他们正处于哪种模式,并且不论当前处于哪种模式都能访问时钟应用程序的所有模式。

6-10  使用标签栏切换应用程序视图

ui_modesinclock.jpg

标签栏使用标签显示图标和文本,这些标签的宽度一致,并且都以黑色为背景。当一个标签被选中时,它的背景变亮,标签中的图像也会高亮显示。图6-11显示了这一场景。

6-11  标签栏中被选中的标签

ui_selecteditemmodeswitcher.jpg

注意: 不管设备的方向如何变化,标签栏不会改变它的不透明性和高度。

iPhone OS为标签提供了一系列图标,比如像图6-11功能书签标签项那样的图标。如果您选择使用这些图标,请确保对它们的使用符合图标所表达的意思。关于您可以使用的标签栏图标的更多信息,请参考。

提供附加标签

如果您的应用程序的标签栏只包含五个或五个以下的标签,那么iPhone OS可以在标签栏上等距离地将它们全部显示出来,如图6-12所示。

6-12  iPhone OS的标签栏最多可显示五个标签

ui_fivetabsintabbar.jpg

如果您的应用程序的标签栏包含的标签数目超过五个,iPhone OS会在标签栏上显示四个标签,并添加一个更多标签,如所示。

用户点击更多标签后,能够在一个单独的屏幕中查看附加标签的列表,如图6-13所示。

6-13  当用户点击更多标签时显示附加标签

ui_tabitemmore.jpg

更多屏幕中同样能够包含一个编辑按钮,用户可以通过点击该按钮来配置标签栏,使其显示用户最常用的标签。例如,当用户在iPod程序的更多屏幕上点击编辑按钮后,他们会看到如图6-14 所示的配置屏幕。

6-14  当应用程序具有五个以上的标签时,用户可选择在标签栏上显示他们最喜爱的标签

ui_tabitemconfiguration.jpg

请注意iPod在以上三处(标签栏,更多屏幕和配置屏幕)都使用了相同的标签图标。这有助于使用户确定不管该图标出现在哪里,它都代表相同的意思。

为标签栏上的标签做标记

您可以在标签上显示一种标记,通过这种低调的,不十分显眼的方式与用户进行通信。在用户的任务或上下文环境中可能有些信息并非不可或缺,但它们对用户很有帮助,因此做标记的反馈方式就很适合于传递这些信息。

通过在一个特定的标签上做标记,您可以把标记所表达的信息和您的应用程序中的一种特定模式甚至是非当前模式联系在一起。图6-15显示了一个在标签上做标记的例子。

6-15  标签栏上传达信息的标记

ui_badgeintoolbar.jpg

请注意,如果您注册了苹果通知推送服务并且用户允许显示标记,那么您也可以在应用程序的主屏幕上显示标记。请参考来详细了解这些内容是如何实现的。

警告,动作表单和模式视图

警告,动作表单和模式视图是视图的几种类型,当需要引起用户的注意,或者需要提供额外的选项或功能时,这些视图就会出现。图7-1显示了这几种视图的例子。

7-1  动作表单,模式视图和警告

ui_modalexamples.jpg

要了解这几种类型视图的编程实现,请参考模式视图控制器

用法和行为

警告,动作表单和模式视图都是模式的,这意味着用户必须通过点击按钮显式地关闭它们,然后才可以继续使用应用程序。虽然有些时候您需要警告用户潜在的危险动作,或是向他们提供额外的选项,但您一定要避免过度使用这些视图,这是因为:

  • 所有类型的模式视图都会中断用户的工作流程。
  • 过度频繁地出现请求确认的视图很可能会适得其反,它们想要带给用户的帮助反而变成了打扰。

特别地,应该尽量少使用警告。如果警告出现得过于频繁,用户很可能为使自己免受它们的打扰,不经阅读就关闭这些警告。

警告,动作表单和模式视图的设计目的在于传递不同的信息:

  • 警告为用户提供影响他们使用应用程序(或设备)的重要信息。警告通常是不可预料的,因为它们一般会向用户报告某个问题或当前环境的变化,这可能需要用户采取相应的行动。
  • 动作表单为用户提供与他们当前执行的动作相关的额外选项。当用户点击一个工具栏按钮,开始执行一个具有潜在破坏性的动作(比如删除所有最近的通话)或是一个可以以不同的方式完成的动作(比如用户可以从多个目的地中指定其中一个作为发送动作的目的地)时,他们会期待动作表单的出现。
  • 模式视图能够在当前任务的环境下提供更广泛的功能。对于那些与用户的工作流程直接相关的子任务,模式视图还能够提供执行这些子任务的方法。

这几种类型的视图在外观和行为上也各不相同,这也强调了它们向用户传递的消息不同。由于用户已经习惯了这些视图的外观和行为,所以您一定要在应用程序中正确地,一致地使用这些视图。请阅读下面的章节来了解更多有关警告,动作表单和模式视图的信息。

使用警告

警告会在应用程序屏幕的中间弹出并浮在应用程序的视图之上,以具有高可视性的方式向用户提供关键信息。其特别的外观强调的是,警告的出现是由于应用程序或设备中的一些变化,而未必是用户最近执行的动作所产生的结果。警告应该显示文本信息来说明当前的情况,在理想情况下,还应该允许用户为下面的操作选择适当的动作。

用户对于设备和后台运行的内置应用程序所发出的警告已经习以为常,比如消息应用程序,但是您还是应该少在应用程序中使用这样的警告。例如,您可能会使用警告告诉用户,他们启动的任务被阻塞了。采用警告显示这类消息是有道理的,因为告诉用户问题所在并让他们来选择如何处理是非常重要的。

您也可以使用警告让用户有机会选择接受或拒绝一种具有潜在危险的结果。当出现这种情况时,警告应该显示两个按钮:一个用于关闭该警告并执行动作,另一个用于关闭该警告但不执行动作。通常,应该为关闭警告但不执行动作的按钮使用取消作为标签。请注意,如果当显示这样的警告时,用户按下Home键,那么除了退出应用程序之外,其结果应该与点击取消按钮相同:即关闭警告但不执行动作。

那些很少出现的警告能够让用户认真地对待它们。因此,一定要尽量减少应用程序中显示的警告的数量,要确保每一个警告都提供了关键信息和有用的选项。一般情况下,应该尽量避免创建这些警告:

  • 将正常进行中的任务的最新消息通知用户。 相反,您应该考虑使用进度视图或活动指示器,向用户提供与进度相关的反馈信息(和介绍了这些控件)。
  • 请求确认用户发起的动作。 如果要确认用户发起的动作,即使是删除联系人这种具有潜在危险性的动作,您应该使用的是动作表单(在下面的中介绍)。
  • 通知用户令他们无法操作的错误或问题。 即使有必要使用警告来告诉用户出现了他们无法修复的关键问题,但如果可能的话,更好的做法是将这些信息融入到用户界面中。例如,与其在每次连接服务器失败时都通知用户,不如在用户界面上显示上一次成功连接服务器的时间。

使用动作表单

当用户通过点击应用程序的工具栏上的按钮发起了一项任务,动作表单显示一组与该务相关的可选方案。动作表单适合于:

  • 选择完成任务的方法。例如,在照片应用程序中,用户可以在浏览单独的一张照片时点击发送按钮。这时会出现一个动作表单,有三个发送目的地供用户选择(还有一个取消按钮,用于取消发送)。 在类似这样的情况下,显示动作表单十分有用,因为您可以提供一系列在当前任务环境下有意义的选项,而无需在用户界面中为这些选项保留一片固定的区域。
  • 在完成一项具有潜在危险性的任务之前获得用户的确认。例如,根据邮件应用程序的设置,当用户点击邮件工具栏上的垃圾邮件按钮时,会显示一个动作表单,允许他们选择继续进行删除还是取消该动作。 当您在类似的情况下显示动作表单时,要确保用户了解他们将要执行的步骤能够带来的危险后果,并且您可以提供一些可选的方案。在iPhone OS设备上,这种类型的交互是非常重要的,因为用户有时会无意中点击控件。

动作表单总是从应用程序屏幕的底部出现,覆盖应用程序的视图(如中的左图所示)。然而,与警告不同的是,动作表单的侧边缘固定在屏幕的两侧,增强了它与应用程序和用户最近动作的联系。

动作表单包含一些按钮,让用户选择如何完成他们的任务。您不应该向动作表单中添加消息,因为按钮标签再联系当前正在执行的任务应该已经为用户提供了足够多的环境信息,帮助他们理解这些选项的含义。当用户点击其中一个按钮时,动作表单就会消失。由于动作表单为用户提供动作的选项,因此它一定会提供不止一个按钮。

使用模式视图

默认情况下,模式视图会从屏幕的下边缘滑出,并且始终覆盖在整个应用程序的屏幕之上(如中位于中间的图片所示)。由于模式视图隐藏了当前的应用程序屏幕,因此它使用户明确感知到自己进入了一种不同的,临时的模式,他们可以在这种模式中完成一些任务。

模式视图可以在适当的情况下显示文本,并且可以包含执行任务所必需的控件。此外,模式视图通常会显示一个用于完成任务并关闭视图的按钮,以及一个用于放弃任务的取消按钮。

相比于动作表单,模式视图支持更广泛的用户交互。不像动作表单只能接受单一的选项,模式视图支持多重步骤的用户交互,比如多项选择或信息输入。

当您需要实现一项与应用程序的主功能相关的独立任务时,请使用模式视图。有的用户界面元素无法始终属于应用程序主用户界面,模式视图尤其适合于需要这种用户界面元素的多步骤子任务。邮件应用程序中的撰写邮件视图就是一个使用模式视图的好例子。当用户点击撰写邮件按钮时,会出现一个模式视图,包含填写地址和消息的文本区,用于输入的键盘,一个取消按钮和一个发送按钮。

设计警告

您可以指定警告中的文本,按钮的数量和按钮的内容,但是您不能定制警告本身的宽度,背景外观以及文本的对齐方式(它是中心对齐的)。

注意: 当您阅读这些准则时,应该了解以下定义:

  • 标题大写 指每个单词都大写,除了冠词,并列连词和四个或更少字母的介词。
  • 句子大写 指第一个单词大写,其余的单词都小写,除非它们是专有名词或专有形容词。

警告的标题(以及可选的消息)应该简明扼要地说明相关的情况,并且告诉用户可以做些什么。理想情况下,您写的文本应该向用户提供足够的背景信息,使他们明白为什么会出现警告并决定点击哪个按钮。

当您撰写警告标题时

  • 请保持标题足够简短,如果可能的话,尽量显示在一行之内。长的警告标题对于人们来说难以快速阅读,并且可能会导致警告消息滚动显示。
  • 避免创建仅包含一个单词的标题,它无法提供任何有用的信息,比如错误警告
  • 推荐使用句子片段。一个简短且内容丰富的说明往往比一个完整的句子更容易理解。
  • 不要害怕负面消息。人们能够理解大部分警告是在告诉他们出现的问题,或是在向他们发出有关危险情况的警告。因此,直接的负面消息远比拐弯抹角的正面消息要好得多。
  • 尽量不要使用你们。有时候,直接指明人物对象的文本可能会引起歧义,甚至可能会被理解为一种侮辱。
  • 使用标题式的大写方式且不要使用结束标点,如果:
    • 标题是一个句子片段
    • 标题由一个非疑问句的单句组成
  • 如果标题由一个疑问句单句组成,请使用句子式的大写方式和结束问号。在一般情况下,请考虑使用疑问句作为警告的标题,如果这样可以让您避免增加一条额外的消息。
  • 如果标题由两个或更多的句子组成,请使用句子式的大写方式,并且为每个句子添加适当的结束标点。实际上,很少有必要使用包含两个句子的警告标题,虽然您可能认为它可以让您避免一条额外的警告消息。

如果您选择提供警告消息:

  • 请保持消息足够简短,如果可能的话,尽量显示在1-2行之内。如果消息太长,将需要滚动显示。
  • 始终使用句子式的大写方式和适当的结束标点。警告消息应该是一个完整的句子。

避免在您的警告文本避免描述点击哪个按钮, 比如点击视图查看信息。理想情况下,清晰的警告文本和合乎逻辑的按钮标签向用户提供了足够的信息来了解当前的情况和他们的选择。当然,如果您必须提供详细的指南,请遵循以下原则:

  • 一定要使用单词“tap”(而不是“touch”“click”“choose”)来描述选择动作.
  • 不要将按钮标题括在引号之内,但要保留其大写方式。

一定要测试您的警告在两个方向上的外观。 在横向上,由于警告的高度受到限制,它可能看起来和在纵向时不太一样。推荐您优化警告文本的长度,以便它在两个方向上的效果看起来都不错(避免滚动显示)。

推荐使用具有两个按钮的警告。 通常具有两个按钮的警告是最实用的,因为在两者之间做出选择对用户来说是最容易的。显示只有单个按钮的警告并不是一个好主意,因为这样的警告无法让用户控制当前的局势;相反,它只能显示信息并提供一个关闭按钮。与具有两个按钮的警告相比,包含三个或以上按钮的警告明显更加复杂,因而应该尽量避免使用这样的警告。事实上,如果您需要向用户提供两种以上的选择,您应该考虑使用动作表单来代替警告(更多与这种类型的视图相关的信息请参考 使用动作表单 设计动作表单)。

适当地使用警告按钮的颜色。 警告按钮或是暗色的,或是亮色的。在具有两个按钮的警告中,左边的按钮总是暗色的,而右边的按钮总是亮色的。在具有单个按钮的警告中,按钮总是亮色的。

  • 在指出潜在危险动作的双按钮警告中,取消动作的按钮应该位于右边,而且是亮色的。
  • 在指出人们所期望的安全动作的双按钮警告中,取消动作的按钮应该位于左边(因此它应该是暗色的)。

注意: “取消按钮既可能是亮色的也可能是暗色的,既可能在右边也可能在左边,这取决于该选择是否具有破坏性。一定要在您的代码中正确识别哪个按钮是取消按钮。

为警告按钮提供简短并合乎逻辑的标题。 最好的标题应该由1-2个单词组成,并且这些单词在警告文本的上下文环境中是合理,有意义的。当您为警告按钮创建标题时,请遵循如下准则:

  • 和所有的按钮标题一样,请使用标题式的大写方式,且不要使用结束标点。
  • 推荐使用动词和动词短语,比如与警告文本直接相关的取消允许回复忽略
  • 如果没有更好的选择,推荐使用确定作为简单的接受选项。避免使用
  • 尽量不要使用你们。使用这些单词的按钮标题往往既容易产生歧义又显得缺乏尊重。

设计动作表单

您可以选择动作表单的背景,使其与您的应用程序的外观是一致的,您也可以指定按钮的数量和按钮上的内容。

与警告不同的是,动作表单不应该显示文本信息。这是因为动作表单是作为用户动作的结果出现的,比如点击删除发送按钮,因此没有必要解释它为什么出现。

动作表单可以有两种不同背景的外观。您需要确保动作表单的背景与应用程序的工具栏或导航栏的外观是一致的。例如,如果您的应用程序使用黑色的导航栏和工具栏,则动作表单的背景应该是半透明黑色的。默认情况下,iPhone OS在显示动作表单时采用标准的蓝色背景,这与标准的蓝色工具栏和导航栏是一致的。您的应用程序中的所有动作表单应具有相同的背景颜色,并且应该与导航栏和工具栏的颜色一致。

一定要将取消按钮显示在动作表单的底部。这样能够促使用户在看到取消选项之前通读所有的候选项。

7-2中所示的动作表单具有默认的背景外观,而且取消按钮被放置在推荐的位置上。

7-2  一个典型的动作表单

ui_threebactionsheet.jpg

如果您需要提供一个按钮来执行具有潜在破坏性的动作,比如删除用户购物清单上的所有条目,那么按钮的颜色应该采用红色。这样的破坏性按钮一定要显示在动作表单的顶部,这一点至关重要,原因有两个:

  • 一个按钮越是靠近动作表单的顶部,它的可视性就越强。
  • 当用户想要点击Home按钮时,有时他们会误点击设备屏幕的底部。所以不要将具有破坏性的按钮放置在动作表单的底部,这样因用户的误操作引发不良后果的可能性就会比较小。

7-3中所示的动作表单具有半透明的黑色背景外观,而且取消按钮和破坏性按钮都被放置在了推荐的位置上。

7-3  执行破坏性动作的按钮应该是红色的,并且要位于动作表单的顶部

ui_blacktransparentdialog.jpg

您可以在动作表单中显示多个按钮,只要确保每个按钮都能很容易地与其它按钮区分开来。图7-4显示了一个动作表单,其背景与标准的蓝色工具栏相匹配,并且除取消按钮之外,它还提供了三个可选的按钮。

7-4  具有四个按钮的动作表单

ui_toolbarmatchdialogblue.jpg

设计模式视图

模式视图的整体外观应该与显示它的应用程序是一致的。例如,模式视图通常包含一个导航栏,导航栏具有标题和用于取消或完成模式视图任务的按钮。该导航栏应该与应用程序的导航栏具有相同的背景外观。

模式视图通常应该显示一个以某种方式标识任务的标题。如果合适的话,您还可以在视图的其它区域显示文本,来更充分地描述任务信息或提供一些指导。例如,消息应用程序在用户想要撰写文本消息时提供了一个模式视图。如图7-5所示,该模式视图显示了一个导航栏,它与应用程序的导航栏背景相同,标题为新消息

7-5  模式视图应该与应用程序屏幕保持一致

ui_modalviewexample.jpg

在模式视图中,您可以使用完成任务所需的任何控件。例如,您可以在视图中包含文本域,按钮和表视图。

您可以根据您的应用程序选择显示模式视图的方式,增强用户对该视图所表现的临时环境转换的感知。为了做到这一点,您可以指定以下切换风格中的一种:

  • 垂直 模式视图从屏幕的下边缘滑出,视图关闭时则向下滑动直到消失。(这是默认的切换风格。)
  • 翻转 当前视图从右向左水平翻转来显示模式视图。在视觉上,模式视图看起来好像是当前视图的背面。当模式视图关闭时,它会从左向右水平翻转来显示先前的视图。

如果您决定更改应用程序中模式视图的切换风格,请不要仅仅为了追求多样化而这样做。您要意识到用户会认为这种差异意味着别的含义。因此,最好建立一个具有逻辑性和一致性的模式,使用户可以轻松地觉察到并记住,避免使切换风格发生不必要的改变。

表格视图,文本视图和Web视图

表格视图,文本视图和web视图是具有多种功能的界面元素,它们在iPhone应用程序中有着不同的用途。例如,表格视图可以用来显示简短的选项列表,详细信息的分组列表或者长的项目索引列表。文本视图和web视图相对来说可以不受约束地接受和显示内容。

表格视图

表格视图通过多行单列的表格呈现数据。行可以被分为不同的段或组,每一行可以包含文本,图像和控件的组合。用户可以以轻击或拖动的方式来滚动行或行的分组。图8-1显示了不同样式的表格视图,它们以不同的方式显示列表。

8-1  使用表格视图显示列表的三种方式

ui_tablestyleexamples.jpg

用法和行为

表格视图在iPhone应用程序中非常有用,因为无论是信息量的多少,它们都提供了组织信息的有效方式。尽管实用型应用程序也可以小范围的使用表格视图,但表格视图通常在需要处理大量用户数据的效率型应用程序中最为有用。沉浸式应用程序一般不会使用表格视图来显示信息,但是它可能会使用表格视图来显示简短的选项列表。

表格视图提供了允许用户浏览和操作信息的内置界面元素。此外,表格视图还支持:

  • 显示页眉和页脚信息。您可以在列表中每一段或一组的上方或下方显示描述文本,也可以在整个列表的上方或下方显示描述文本。
  • 编辑列表。您可以允许用户以统一的方式对列表项进行添加,删除或排序等操作。表格视图还支持对多个列表项的选择和操作,您可以利用这一点向用户提供一种能够同时删除多个列表项的便捷方法。

当用户选择一个列表项时,表格视图应该提供反馈信息。如果一个列表项可以被选中,则当用户选择该项时,包含该项的行应该暂时高亮显示,以此向用户反馈已收到用户的选择。然后,立即执行动作:要么显示一个新的视图,要么在这一行显示一个复选标记来表明该项已被选中或启用。

在极少数情况下,当与该行中的项相关的附加详细信息或控件显示在同一屏上时,该行可能会继续高亮显示。但是,并不鼓励这样做,因为要在屏幕上同时显示选项列表,被选中的项和相关的详细信息或控件,很容易造成布局拥挤,令用户感到不适。

如果选中某一行的结果是导航到新的屏幕上,那么被选中的行会在新的屏幕滑动到相应位置之前高亮显示。当用户返回到先前的屏幕时,原来被选中的行会再次高亮显示一下,提示用户他们之前的选择。

请注意,您也可以以动画的方式展现用户对列表项的更改。这样做有利于向用户提供反馈信息和增强用户的直接操作体验。例如,在设置应用程序中,当您关闭自动设置日期和时间时(在日期和时间” > “自动设置中选择关闭),列表分组会平滑地展开,显示两个新的列表项,时区以及设置日期和时间

表格视图应该立即显示其内容。如果表格的内容繁多或者十分复杂,请不要一直等到所有的数据都可用时才显示它们。相反,应该立即使用文本数据填充屏幕上可见的行,当更复杂的数据(比如图像)可用时再显示它们。这种技术能够马上为用户提供有用的信息,并且提高了您的应用程序的响应能力。

如果您的应用程序要显示的数据很少发生变化,您可以考虑在新的数据可用之前显示那些实际上已经过期的数据。这种技术也能够让用户马上看到有用的信息,但不推荐那些数据频繁变化的应用程序也这样做。在您决定这样处理之前,一定要估计数据变化的频率和用户对迅速看到新数据的期待程度。

如果很难立即显示有用的信息,也一定要避免显示空行,因为这会给用户造成应用程序已经出现问题而终止的错误暗示。相反,表应该在屏幕中心显示一个旋转的活动指示符和一条信息标签,比如加载中...”。如果您可以显示旧的数据,您就不必担心空行的问题,但是您应该在获得新数据后立即更新屏幕上的信息。这两种技术都为用户提供了反馈信息,让他们知道应用程序的处理正在进行当中。

表格视图样式

iPhone OS定义了两种样式的表格视图,它们的区别主要在于外观:

无格式样式UITableViewStylePlain)这种视图样式所显示的行从屏幕一侧的边缘延伸至另一侧的边缘。行的背景是白色的。每一行可以被分成带标签的段,并且可以在视图的右边缘垂直地显示一个可选的索引。

8-2显示了iPod应用程序中的一个无格式样式的列表(没有页眉,页脚和索引)。

Figure 8-2  一个简单的无格式样式的列表

ui_simplelist.jpg

分组样式UITableViewStyleGrouped)这种视图样式显示行的分组,每组表格行会相对屏幕两侧缩进。这些分组显示在独特的垂直条纹背景下,而分组内部的背景则是白色的。分组样式的表格可以包含任意数量的分组,每一个分组可以包含任意数量的行。在每一组之前可以加入页眉文本,其后可以加入页脚文本。这种样式的表格视图不提供索引。

8-3显示了一个分组样式的列表,其中每个分组均包含一行。该列表出现在设置应用程序中,不包含页眉或页脚文本。

8-3  一个包含四个分组的,具有分组样式的列表

ui_grouptablesingles.jpg

单元格样式

iPhone OS 3.0及后续版本中包含了四种预定义的单元格样式,您可以使用它们快速,方便地为无格式样式和分组样式的表格行创建常用的布局。请注意,从编程角度而言,这些样式是应用在表格视图的单元格上的,单元格规定了表格应该如何绘制各行。

当您使用标准单元格样式时,您的应用程序的风格会与内置应用程序保持一致,这将在以下几个方面使您获益:

  • 用户可以更快地了解您的应用程序如何工作
  • 如果今后标准单元格样式有所改进,您的应用程序可以轻松地保持一致,而无需付出大量的额外工作

如果您想要以非标准的方式布置您的表格行,您最好创建一种自定义的单元格样式,而不是大刀阔斧地修改已有的标准样式。iPhone OS表格视图编程指南中的自定义单元格一节可以帮助您了解如何创建自己的单元格。

请注意,在所有的单元格样式中,文本都会被自动截断。一般来说,您应该确保您的文本尽可能简洁,避免显示出用户难以理解的被截断的单词或词组。具体来讲,文本截断是个可大可小的问题,这取决于您使用的单元格样式和截断发生的位置。

iPhone OS提供下列标准单元格样式:

  • 默认单元格样式(UITableViewCellStyleDefault)包含位于左侧的可选图像,后面紧跟左对齐的黑色文本标签。 8-4  分组表格(左)和无格式表格(右)中的默认单元格样式
    ui_defaulttablecell.jpg
  • 文本标签代表一个表格项的名称或标题,而且其左对齐的格式使得列表很易于浏览。因此,默认样式非常适合于显示不需要根据附加信息加以区分的表格项列表。
    最好使用简短的文本标签,但是如果文本截断无法避免,要尽量确保最重要的信息包含在前几个单词中。
  • 副标题单元格样式(UITableViewCellStyleSubtitle)包含位于左侧的可选图像,后面紧跟一行左对齐的文本标签,以及另一行位于文本标签下方的左对齐的详细信息文本标签。文本标签采用黑色字体,详细信息文本标签则采用较小的灰色字体。 8-5  分组表格(左)和无格式表格(右)中的副标题单元格样式
    ui_subtitletablecell.jpg
  • 文本标签代表一个表格项的名称或标题,而详细信息文本标签则表明它包含与该表格项相关的附加信息。文本标签的左对齐格式使得列表很易于浏览。在列表项看起来比较相似的情况下,这种单元格样式很适用,因为用户可以参考详细信息文本标签中的附加信息,以便区分文本标签中列举的表格项。
    文本标签应该尽量简短,以避免发生文本截断。如果文本截断无法避免,请注意将最重要的信息放在前几个单词中。如果详细信息文本标签发生截断,用户则不会太介意,因为他们认为它只是用于加强或补充文本标签中列举的表格项。
  • value 1单元格样式(UITableViewCellStyleValue1)将文本标签和详细信息文本标签显示在同一行,文本标签采用左对齐格式和黑色字体,而详细信息文本标签采用右对齐格式和较小的蓝色字体。这种单元格样式不宜使用图像。 8-6  分组表格(左)和无格式表格(右)中的value 1单元格样式
    ui_value1tablecell.jpg
  • 文本标签代表一个表格项的名称或标题,而详细信息文本标签提供了与该表格项紧密相关的重要信息。
    文本标签的左对齐格式和字体样式有助于用户浏览他们所需的项目列表,而详细信息文本标签的右对齐格式可以引起用户对表格项相关信息的关注。这种单元格样式适合于显示表格项的当前值,而该值可能选自一个子列表。
    在这种布局中,可能很难避免文本截断的发生(因为两个标签位于同一行),但是仍值得您努力尝试。否则,两组标签之间没有留白,用户很难了解这两部分信息之间的关系。
    虽然您可以在无格式表格或分组表格中使用 value 1单元格样式,但是其外观更适合于分组表格。例如,在设置应用程序的用法屏幕中,分组表格使用了value 1样式:
    8-7  在分组表格中具有最佳视觉效果的value 1单元格样式
    ui_value1inUsage.jpg
  • value 2单元格样式(UITableViewCellStyleValue2)同样将文本标签和详细信息文本标签显示在同一行,文本标签采用右对齐格式和较小的蓝色字体,而详细信息文本标签采用左对齐格式和较大的黑色字体。这种单元格样式不宜使用图像。 8-8  分组表格(左)和无格式表格(右)中的value 2单元格样式
    ui_value2tablecell.jpg
    文本标签的右对齐格式,受限宽度及其字体样式意味着它仅起到一标题的作用,左对齐详细信息文本标签则包含更重要的信息。
    在这种布局中,标签是每一行中的相同位置相向排列的。这样,就在列表中的文本标签和详细信息文本标签之间形成了一条清晰的垂直边缘,有助于用户一眼就能看到详细信息文本标签的首单词。如果您允许文本标签被截断,该垂直边缘的清晰程度则会有所消减,这会造成用户浏览详细信息文本标签中的信息变得更加困难。
    虽然您可以在无格式表格或分组表格中使用 value 2单元格样式,但是其外观更适合于分组表格。例如,在联系人应用程序的信息屏幕中,分组表格使用了value 2样式:
    8-9  在分组表格中具有最佳视觉效果的value 2单元格样式
    ui_value2inInfo.jpg

注意:所有的标准单元格样式都允许添加表格视图元素,比如复选标记或展开指示符。但是一定要注意,添加这些元素会减少单元格中可用于标题和副标题的空间宽度。

您也许能够通过增加表格行的高度,以支持文本换行,从而避免文本截断,但这可能会产生一些问题:

  • 您必须以编程的方式检查文本的长度,并判断是否可能发生文本换行。您必须针对纵向和横向这两种情况都作出相应的判断,因为表格的宽度会对文本换行产生影响。
  • 您应该避免在设备处于一个方向时显示换行的文本,而在处于另一个方向时不显示。
  • 无论表格视图的样式如何,可变的行高都会对表格视图在应用程序中的整体性能产生负面影响。

最后要强调的是,虽然在分组表格中可变的行高是可以接受的,但是它们会使无格式表格显得混乱不均。

表格视图元素

iPhone OS包含一些可以扩展表格视图的表格视图元素。除非特别注明,否则这些元素都只适用于表格视图。在您的应用程序中,一定要正确地使用这些元素,因为用户已经习惯了它们在内置应用程序中的外观和行为。

注意:从编程角度而言,表格视图元素是以不同的方式实现的。有些是单元格(控制表格如何绘制各行的对象)的附属视图,其他的可能在表格视图进入编辑模式时显示。要了解管理这些元素的不同方式,请参考iPhone OS表格视图编程指南。

  • 展开指示符 当这个元素出现时,用户知道他们可以点击这一行中的任意位置来查看下一级的信息,或是与当前列表项相关的选项。 当选中一行后会显示另一个列表时,应使用展开指示符。不要使用展开指示符来显示某个列表项的详细信息;这种情况下应使用详细信息展开按钮。
  • 详细信息展开按钮 用户可以通过点击该元素来查看某个列表项的详细信息。(请注意,您可以在表格视图之外的其他视图中使用这个元素,以显示指定对象的详细信息;更多信息请参考)。 在表格视图中,可以在某一行中使用详细信息展开按钮,来显示与该列表项相关的详细信息。请注意,与展开指示符不同,详细信息展开按钮所执行的动作可以独立于行的选择动作。例如,在电话收藏夹应用程序中,点击某一行会呼叫在该行位置上显示的联系人;而点击该行中的详细信息展开按钮会显示该联系人的详细信息。
  • 删除按钮 用户通过点击该元素可以删除对应的列表项。当用户用力点击某一行,或者在编辑环境下点击删除控制按钮时,该元素会出现在列表项的右边。(该元素的例子请参考图8-10)。
  • 删除控制按钮 用户通过点击该元素可以显示或隐藏每个列表项的删除按钮。为了向用户提供更多的反馈信息,当用户点击这个按钮时,该按钮内的减号标志由水平方向变为垂直方向,并显示删除按钮。该元素的例子请参考图8-10. 在支持临时编辑模式的分组表格中,删除控制按钮出现在表格视图外部的左侧。例如,您可以在编辑联系人应用程序中的个人信息时看到这种情景。在处于固定编辑模式的分组表格中(比如股票天气应用程序中的分组表格),删除控制按钮出现在表格内部的左侧。
    在无格式样式的表格中,删除控制按钮总是出现在表格内部的左侧,如图8-10所示。
  • 行插入按钮 用户通过点击该元素可以向列表中添加一行。
  • 行排序控件 当该元素出现时,用户可以拖动一行到列表中的另一位置上。
  • 选定符号 该元素出现在列表项的右侧,表明该项当前被选中。

8-10  表格视图可以显示删除按钮和删除控制按钮

ui_tableelements.jpg

开关控件

开关控件呈现给用户两种互斥的选项或状态,比如//。开关控件每次只能显示两个选项中的一个;用户滑动该控件可以显示隐藏的选项或状态。图8-11显示了开关控件的例子。

8-11  表格视图中的开关控件

ui_switchcontrolexample.jpg

当您需要向用户提供两个简单的,完全对立的选项时,您可以在分组表格视图中使用开关控件。由于其中一个选项始终是隐藏的,因此最好在用户已经知晓这两个选项是什么的情况下才使用开关控件。换句话说,不要让用户仅仅为了弄清楚另一个选项是什么而滑动开关控件。

您可以使用开关控件来改变视图中的其他用户界面元素的状态。根据用户做出的选择,可能会有新的列表项出现,或者有列表项消失,或者有的列表项变为有效或无效的状态。

使用表格视图实现常用的用户操作

表格视图是非常通用的用户界面元素,因为它们可以通过不同的配置方式来支持不同的用户操作,比如:

  • 选项列表。 iPhone OS中没有类似于菜单或弹出式菜单那样的多项选择控件,但是表格视图能够以一种简单的,整洁的方式显示选项列表,供用户进行选择。此外,表格视图可以提供选定标记图像,向用户标识列表中的哪一项(或哪些项)处于被选中的状态,如8-12所示。
    8-12  选项列表中的选定标记
    ui_selectoption.jpg
    如果您需要在用户点击表格视图中的某行时向用户显示选项列表,您可以使用任意一种样式的表格视图。但是,如果您需要在用户点击按钮或其它位于表格行之外的用户界面元素时向用户显示选项列表,则您应该选用无格式样式的表格视图。
  • 导航层次信息。 表格视图适用于显示有层次结构的信息,也就是说每个节点(即列表项)可以包含它自己的子集,因为其子集可以显示在一个单独的列表中。用户可以很轻松地沿着层次结构中的路径,从每层列表中选择一项。展开指示符表示用户点击该行中的任意位置都可以在一个新列表中查看其子集,如8-13所示。
    8-13  展开指示符表示下一屏将显示该行的信息子集
    ui_navigating.jpg
    如果一个表格视图用于导航时,当用户按照层次结构回溯他们浏览过的内容时,先前被选中过的表格行不再保持高亮显示。 
  • 查看按概念分组的信息。 您可以使用任意一种表格视图样式,将信息归类为不同的逻辑分组,比如工作,家庭或学校。无格式样式表格和分组样式表格都允许您通过提供页眉和页脚文本来为每一段提供上下文信息,如8-14所示。
    8-14  无样式样式的表格视图中通过页眉来分组
    ui_sectionlistnoindex.jpg
    一般来说,分组样式表格提供了更清晰的,可视化的分组表示,因为即使在快速滚动的情况下,用户也很容易认出分组所具有的圆形的四角。 8-15显示了iPod设置中一些概念相近的分组。 8-15  分组样式表格视图可以包含多个分组
    ui_sectionedgrouped.jpg
  •   ▪ 查看索引过的信息。 如果您正在使用无格式样式的表格视图,则您可以显示索引来帮助用户迅速找到他们需要的东西。索引由一列悬浮于屏幕右边缘的条目(通常是字母表中的字母)组成,如8-16所示。用户点击(或拖移至)一条索引项可以看到在列表中与之对应的区域。当列表的长度跨越数个屏幕时索引最为有用。
    8-16  包含索引的无格式样式的表格视图
    ui_alphabeticallist.jpg
  • 如果您在无格式样式表格中包含了索引,您就应该避免使用那些需要在表格的右边缘显示的表格视图元素(比如展开指示符),因为这些元素会影响索引的使用。

文本视图

文本视图是一片能够显示多行文本的区域,并在内容过长超出其边界范围时可以滚动。邮件应用程序就使用了文本视图让用户创建签名,签名会出现在用户所撰写的每一封邮件的正文末尾处,如图8-17所示。

8-17  显示多行文本的文本视图

ui_textview.jpg

您不但可以使用文本视图来显示多行文本,如一份大文本文件的内容,而且您还可以使用文本视图来支持用户编辑。如果您提供的文本视图是可编辑的,那么当用户在文本视图内点击时会自动显示键盘。键盘的输入法和布局取决于用户的语言设置。当用户点击“.?123”键(如图8-17所示)时,键盘会切换到数字键盘,使得数字和标点符号的输入更加方便。您也可以指定不同的键盘样式,这取决于您希望用户所输入的文本类型。关于可使用的键盘样式请参考。

您可以在文本视图中控制文本的字体,颜色和对齐方式,但这些属性会应用于整个文本。也就是说,您无法只对部分文本做出上述属性的改变。正如您所期望的那样,默认的字体和颜色采用系统字体和黑色,因为其可读性最强。默认的对齐属性为左对齐(您可以将其改为居中对齐或右对齐)。

如果您一定要在同一个文本视图中使用不同的字体,颜色和对齐方式,您可以使用web视图代替文本视图,使用HTML来格式化文本。

Web视图

Web视图是应用程序屏幕上可以显示丰富的HTML内容的一片区域。例如,邮件应用程序使用web视图显示邮件的内容,因为这种视图可以包含比纯文本更丰富的内容(图8-18显示了这样的一个例子)。

8-18  Web视图可以显示基于web的内容

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  两种活动指示器

ui_activityindicatorexample.jpg

活动指示器是一种很好的反馈机制,它告诉用户他们的任务或进程并没有终止,而不是说明任务何时结束。

您可以选择活动指示器的大小和颜色来配合它所在的视图的背景。默认情况下,活动指示器是白色的。

当任务或进程已经完成时,活动指示器就会消失。推荐您使用这种默认行为,因为用户期望在有动作发生时看到活动指示器,而且他们会将静止不动的活动指示器与停滞的进程联想到一起。

要了解如何显示网络活动指示器,请参考UIApplication类参考中的networkActivityIndicatorVisible方法。要了解如何在您的代码中显示一个较大的非网络活动指示器,请参考UIActivityIndicatorView类参考。

日期时间选择器

日期时间选择器为用户提供了一种简单的选择特定日期或时间的方式。日期时间选择器最多可以有4个独立的转轮,每个轮只显示一种类型的值,比如月份或小时。用户通过点击或拖拽使转轮转动,直到它将用户想要的值显示在选择器中间的一条突出显示的选择栏上。最终的值由各个轮上的值组合而成。图9-2显示了一个日期时间选择器的例子。

9-2  日期时间选择器

ui_datetimepicker.jpg

使用日期时间选择器可以避免用户输入由多段组成的值,比如一个日期的年,月,日。日期时间选择器使用起来很方便,因为每一部分的值都有相对小的范围,并且用户知道这些值应该是多少。

日期时间选择器会根据您指定的不同模式显示出不同数量的转轮,每个转轮都有一组不同的值。日期时间选择器定义了如下模式:

  • 时间 时间模式下显示小时和分钟的转轮,以及一个指定上午/下午的可选轮。
  • 日期 日期模式下显示月,日和年的转轮。
  • 日期和时间 日期和时间模式下显示日历日期,小时和分钟的轮,以及一个指定上午/下午的可选轮。这也是默认的模式。
  • 倒数计时器 倒数计时器模式下显示小时和分钟的转轮。您可以指定倒计时的总时长,最长为23小时59分钟。

默认情况下,分钟轮显示60个值(059)。但是,如果您想要比较粗略地显示时间,您可以设置分钟轮,使其每隔几分钟显示一个值,只要时间间隔的值是60的因数就可以。例如,您可以以一刻钟为间隔,显示0153045

不管如何设置,日期时间选择器的整体大小是固定的,与键盘的尺寸相同。您可以选择将日期时间选择器设为视图中的焦点元素,或者让它只在需要时出现。例如,内置的时钟应用程序的计时器模式会显示一个总是可见的日期时间选择器,这是因为时间的选择对定时器的功能起至关重要的作用。另一方面,设置日期和时间首选项(在您关闭自动设置的情况下,可在设置” > “一般” > “日期和时间找到该选项)只显示临时的日期时间选择器,显示与否取决于用户是否想要设置日期或时间。

要了解更多有关在您的代码中使用日期时间选择器的内容,请参考UIDatePicker类参考。

详细信息展开按钮

详细信息展开按钮提供了关于某一项的额外信息或更详细的信息。通常用于表格视图中,向用户提供查看某个列表项(请参考查看更多关于该用法的信息)的详细信息的方法。然而,您也可以在其他类型的视图中使用该元素,来提供一种显示更多信息或功能的方法。

例如,地图应用程序显示了一个详细信息展开按钮,用户可以点击该按钮来访问和大头针所钉位置相关的更多功能。图9-3显示了一个详细信息展开按钮的例子。

9-3  显示额外的详细信息或功能的详细信息展开按钮

ui_detaildisclosure.jpg

要了解更多有关在您的代码中使用详细信息展开按钮的内容,请参考UIButton类参考。

信息按钮

信息按钮提供了一种显示应用程序配置信息详情的方法,它通常位于屏幕的背面。因此,信息按钮特别适合于工具应用程序。您可以在天气应用程序(图9-4所示)的右下角看到一个信息按钮的例子。

9-4  信息按钮用于显示信息,通常是配置信息详情

ui_infobutton.jpg

信息按钮提供了亮色和暗色两种背景。亮色背景样式(如图9-4所示)在暗色背景的视图中效果比较好。相反,暗色背景的信息按钮在亮色背景的视图中效果更佳。

信息按钮会在用户点击它时短暂发光。当您使用iPhone OS提供的信息按钮时,您将自动获得这种处于被按下状态下的外观。

要了解有关在您的代码中使用信息按钮的更多内容,请参考UIButton类参考。

标签

标签是一种大小可变的静态文本。图9-5显示了一个标签的例子。

9-5  为用户提供信息的标签

ui_label.jpg

您可以使用标签为用户界面的各部分命名,或者向用户提供一定的帮助信息。标签最适合显示数量相对较少的文本。

您可以设定标签文本的各种属性,比如字体,文本颜色和对齐方式,但最重要的是,您要确保您的标签清晰易读。不要为了华丽的字体或鲜艳的颜色而牺牲文本的清晰度。

当您撰写标签的文本时,一定要使用用户的词汇。请检查您的应用程序中的文本,如果存在以开发人员为中心的词语,请使用以用户为中心的词语替换它们。

要了解有关在您的代码中使用标签的更多内容,请参考UILabel类参考。

页指示符

页指示符为当前在应用程序中打开的每一个视图显示一个小圆点。这些小圆点从左到右的顺序表示了视图被打开的顺序(最左边的小圆点代表第一个视图)。对于当前屏幕上显示的视图,用发光的小圆点加以表示。用户点击发光小圆点的左右两侧可以查看上一个或下一个打开的视图。图9-6显示了一个页指示符的例子。

9-6  页指示符

ui_pageindicator.jpg

页指示符为用户提供了一种快捷的方法来查看当前有多少打开的视图,同时也能表示出这些视图被打开的先后顺序;它并不能帮助用户追踪他们在视图层次中所处的位置。因为实用型应用程序中的视图彼此之间往往是对等的,所以页指示符能够充分帮助用户在各视图之间进行导航。另一方面,能够显示层次信息的效率型应用程序应该通过导航栏(请参考获取更多信息)上的元素提供导航信息。

典型情况下,页指示符最好出现在应用程序屏幕的下边缘,位于它所包含的视图的下方。这样就可以把屏幕的上面部分留给更重要的信息(视图本身),使用户很容易看到。一定要确保页指示符垂直居中于视图的下边缘和屏幕的下边缘之间。

虽然对于在页指示符中可以显示的小圆点的数量没有规划性的限制,但是当页面越来越多时,指示点之间不能过于密集。例如,当设备处于纵向时,您只能在一个页指示符上显示至多20个小圆点。因此,您应该在应用程序中避免发生这种情况。

虽然您可以在只有一个打开的视图时隐藏页指示符,但默认的行为是显示它。

要了解有关在您的代码中使用页指示符的更多内容,请参考UIPageControl类参考。

选择器

选择器是日期时间选择器(关于该控件的更多信息请参考)的通用版本。您可以使用选择器来显示任意一组值。与日期时间选择器一样,用户旋转选择器的单个或多个转轮直到出现他们想要的值。图9-7显示了一个单轮的选择器。

9-7  iPhoneSafari中出现的选择器

ui_pickerview.jpg

当您决定是否在应用程序中使用选择器时,要考虑到当转轮静止时,轮上的许多甚至绝大多数数值对用户来说是隐藏的。但这不一定是个问题,特别是在用户已知这些值是多少的情况下。例如,在日期时间选择器中,用户了解在月份轮上隐藏的值只能是112之间的数字。然而,如果您要提供的选项不是像这样的一组众所周知的值,那么使用选择器控件可能并不合适。

如果您需要显示特别多数量的值,则您应该用表格视图将这些值列出,而不是用选择器。这是因为表格视图具有更高的高度,能够更快速地进行滚动。

如果您需要为选择器中的值提供上下文信息,比如计量单位,请将它显示在水平地穿过控件中心的半透明选择栏中。不要在选择器上方或转轮本身上显示这样的标签。有关正确显示标签的例子,请参考内置的时钟应用程序的定时器功能,可以看到在用户选择的值旁边显示了单位小时分钟

与日期时间选择器一样,通用的选择器可以一直可见(作为您的用户界面的焦点)或者只在需要时出现。选择器的整体大小,包括它的背景,都是固定的,与键盘的尺寸相同。

要了解更多有关在您的代码中使用选择器的内容,请参考UIPickerView类参考。

进度视图

进度视图显示具有确定持续时间的任务或进程的进度。如果您需要显示未知持续时间的任务的进度,请使用活动指示器(关于该控件的更多信息请参考)。

iPhone OS提供了两种样式的进度视图,分别是默认样式和栏样式。这两种样式的外观非常相似,区别在于高度不同:

  • 默认样式用于应用程序的主内容区。
  • 栏样式比默认样式薄一些,非常适合在工具栏中使用。例如,在邮件应用程序中,当用户下载新邮件或发送电子邮件时,工具栏上就会出现栏样式的进度视图。

两种样式进度视图的行为是相同的。随着任务或进程的执行,进度视图会从左到右被填满。在任意一刻,视图中已填充和未填充区域的比例都向用户表明该任务或进程还有多久能够完成。图9-8 显示了一个栏样式进度栏的例子。

9-8  工具栏上的栏样式进度视图

ui_barstyleprogressview.jpg

进度视图是那些具有明确持续时间的任务向用户提供反馈信息的好方法,尤其是在向用户显示一项任务大约会执行多久十分重要的情况下。当您显示进度视图时,用户会得知他们的任务正在执行,并且用户获得了足够的信息,他们可以决定是否等待任务完成,或者取消该任务。

要了解更多有关在您的代码中使用进度视图的内容,请参考UIProgressView类参考。

圆角矩形按钮

圆角矩形按钮是一种多功能的按钮,您可以在视图中使用它来执行一个动作。您可以在每一个联系人视图的底部看到这种按钮的例子:文本消息和添加到收藏夹按钮就是圆角矩形按钮,如图9-9所示。

9-9  执行应用程序特定动作的圆角矩形按钮

ui_roundrectbutton.jpg

当您为圆角矩形按钮创建标题时,请务必:

  • 使用标题式的大写方式(即每个单词都大写,但冠词,并列连词和五个字母以下的介词除外)
  • 避免创建过长的标题。长度过长的文本会被截断,这样会使用户很难理解。

要了解更多有关在您的代码中使用圆角矩形按钮的内容,请参考UIButton类参考。

搜索栏

搜索栏是一片接收用户输入的文本的区域,您的应用程序可以以搜索栏中的文本为输入进行搜索。当用户点击搜索栏时,会出现一个键盘;当用户键入要搜索的条目后,输入的信息将按照应用程序指定的方式处理。(关于在应用程序中处理搜索,请参考。)

默认情况下,搜索图标显示在搜索栏的左侧。此外,搜索栏还可以显示一些可选的元素:

  • 占位符文本。该文本可以用来显示控件的功能(例如搜索),或者用来提醒用户他们所处的搜索环境(例如“YouTube”“Google”)。
  • 书签按钮。该按钮可以提供信息的快捷方式,使得下一次用户也能够轻松地找到这些信息。例如,通过地图应用程序搜索模式中的书签按钮,用户可以访问已保存在书签的地点,最近的搜索和联系人。
  • 清除按钮。大多数搜索栏都包含一个清除按钮,允许用户通过点击该按钮清除搜索栏中的内容。
  • 一个可以被称作提示的描述性标题,位于搜索栏的上方。举例来说,这种提示可以是一个短语,为搜索栏提供简要介绍或应用程序特定的环境信息。

9-10显示了一个包含自定义占位符文本,书签按钮和默认搜索图标的搜索栏。

9-10  带有可选的占位符文本和书签按钮的搜索栏

ui_searchbar.jpg

默认情况下,书签按钮和清除按钮会按下列方式对彼此产生影响:

  • 当搜索栏包含非占位符文本时,清除按钮是可见的,用户可以使用它来清除文本。如果搜索栏中不存在用户提供的文本或非占位符文本,清除按钮是隐藏的,因为没必要清除搜索栏的内容。
  • 只有当搜索栏中不存在用户提供的文本或非占位符文本时,书签按钮才是可见的。这是因为当搜索栏中存在用户可能想要清除的文本时,清除按钮是可见的。

您可以通过指定一种标准颜色的背景样式来自定义搜索栏,比如:

  • 蓝色(与工具栏和导航栏的默认外观一致的默认渐变颜色)。默认的背景样式如图9-10所示。
  • 黑色

此外,您可以在搜索栏的下方显示一个范围栏,其中包含一些按钮,用户可以点击这些按钮来选择搜索的范围。范围栏的外观与您所指定的搜索栏外观相同,并且由您为范围栏提供自定义的标题。

不论设备的方向如何,范围栏总是显示在搜索栏的下方,除非您在代码中使用搜索显示控制器(详细信息请参考UISearchDisplayController类参考)。当您使用搜索显示控制器时,范围栏会显示在搜索栏的内部,如果设备横向放置,则范围栏位于搜索字段的右侧(如果设备纵向放置,则范围栏位于搜索栏的下方)。

要了解更多有关在您的代码中使用搜索栏和范围栏的内容,请参考UISearchBar类参考。

分段控件

分段控件是处在一条直线上的各段的集合,其中的每一段都相当于一个按钮,可以显示不同的视图。当用户点击分段控件中的一段时,应该产生一个瞬时的动作或可见的结果。例如,当用户使用分段控件选择一种邮件协议时,设置应用程序将显示不同的信息,如图9-11所示。

9-11  分为三个段的分段控件

ui_segmentedcontrol.jpg

分段控件的长度取决于您所显示的段的数量以及最长一段的尺寸。分段控件的高度是固定的。虽然您可以指定要显示的段的数目,但要注意,用户必须能够舒服地点击到任何一段,而无需担心触碰到相邻的段。由于点击区域应该是44 x 44像素,因此建议将分段控件分为5段或5段以下。

分段控件可以包含文本或图像;每一个单独的分段要么包含文本,要么包含图像,但不能同时包含两者。一般来说,最好避免在同一个分段控件中混合使用文本和图像。

分段控件要保证每一段的宽度与段的总数相称。这意味着您要确保为每一段设计的内容在尺寸上要大致相等。

要了解有关在您的代码中使用分段控件的更多内容,请参考UISegmentedControl类参考。

滑块

滑块允许用户在允许的值的范围内对一个值或一个过程进行调整。当用户拖拉滑块时,相应的值或过程也不断被更新。图9-12显示了一个带有最小值和最大值的图像滑块的例子。

9-12  滑块

ui_sliderexample.jpg

滑块主要在下面两种情况下很有用:

  • 当您希望用户能够对他们选择的值进行较高精度的控制时
  • 当您希望用户能够对当前的过程进行较高精度的控制时

滑块由轨道,滑块以及可选的左右两边值的图像组成。图9-13显示了滑块的各个部分。

9-13  滑块的四部分

ui_sliderparts.jpg

您可以设定滑块的宽度,使其适合于您的应用程序的用户界面。此外,您可以选择水平地或垂直地显示滑块。

有以下几种方法自定义滑块:

  • 您可以定义滑块的外观,以便用户可以一眼辨认出滑块是否处于活动状态。
  • 您可以提供在滑块两端出现的图像(通常,它们分别对应最小值和最大值),以此帮助用户理解滑块的作用。 例如,控制字体大小的滑块可以在最小值一端显示一个非常小的字符,而在最大值一端显示一个特别大的字符。
  • 您可以根据滑块所在的位置和控件所处的状态,为轨道定义不同的外观。

要了解有关在您的代码中使用滑块的更多内容,请参考UISlider类参考。

文本框

文本框是一个接收用户输入的圆角矩形的区域。当用户点击文本框时,会出现一个键盘;当用户点击键盘上的Return键时,文本框会以应用程序指定的方式处理用户的输入信息。文本框可容纳单行的输入。图9-14显示了地图应用程序中的两个文本框。

9-14  可接收用户输入的文本框

ui_textfields.jpg

您可以使用自定义文本框来帮助用户在您的应用程序中进行输入。例如,您可以在文本框的左侧或右侧显示自定义的图像,或者显示一个系统提供的按钮,比如图9-14中的书签按钮。在一般情况下,您应该在文本框的左端指明该文本框的用途,而在右端显示一些附加的功能,比如书签。

您也可以在文本框的右端显示清除按钮。当该按钮存在时,不论您在它的上面显示什么图像,点击该按钮都会清除文本框的内容。

有时候,如果文本框显示一些提示信息,比如姓名,则有助于用户理解这个文本框的用途。文本框支持显示占位符文本,它们可以在文本框中没有其他文本时显示。要了解与使用文本框,以及自定义显示图像和按钮的文本框的详情,请参考UITextField类参考。

您可以指定不同的键盘样式,来迎合用户输入的内容的不同类型。(注意,您不能控制键盘的输入法和布局,这些是由用户的语言设置决定的。)例如,你可能希望用户能够方便地输入URL地址,PIN密码或电话号码。iPhone OS提供了几种不同的键盘类型,这样设计是为了方便不同类型的输入。要了解可供您使用的键盘类型,请参考UIKeyboardType。要了解更多有关在您的应用程序中管理键盘的内容,请阅读iPhone应用程序编程指南中的键盘管理一节。

系统提供的按钮和图标

为了打造一致的用户体验(也为了让您的工作更加轻松),iPhone OS提供了许多用于导航栏和工具栏的标准按钮,以及用于标签栏的图标。

本章介绍了可供您使用的标准图标和按钮,以及如何正确地使用它们。不论您正在开发哪种类型的应用程序,您都应该熟悉本章中所介绍的按钮和图标,这有助于您:

  • 正确地使用系统提供的元素
  • 避免设计出与系统提供的图标过于相似的自定义图标

使用系统提供的按钮和图标

iPhone OS中,许多标准的工具栏和导航栏按钮,标签栏上的项以及在内置应用程序中常见的通用按钮都是可用的。在图10-1中,您可以在邮件应用程序的工具栏上看到一些标准工具栏按钮。

10-1 邮件应用程序工具栏上的标准按钮

ui_taskstyleexample.jpg

像图10-1所示的这几个按钮—“刷新组织删除回复撰写,早已被许多内置的应用程序所使用,因此,用户非常熟悉它们的含义和用法。这意味着,如果您的应用程序支持这些功能,您就可以利用用户对它们的熟悉,使得应用程序的用户界面更加简洁而高效。反之,这也意味着,如果您将这些按钮与其他任务联系起来,很可能会使用户觉得迷惑和不适应,因为用户以为这些按钮仍具有他们所熟知的功能,但实际上它们会执行另外的功能。

除了可以充分利用用户以往的使用经验之外,使用系统提供的按钮和图标还能够带来另外两大好处,具体为:

  • 缩短开发时间,这是因为您不需要为标准功能创建自定义的图形元素。
  • 增强用户界面的稳定性,即使日后iPhone OS的更新版本改变了标准图标的外观也没有问题。换句话说,您尽可信赖于标准图标,即使外观有所变化,它们代表的意思始终保持不变。

值得重申的是,为了利用用户熟悉的优势,使用更短的开发时间并保持用户界面的语义一致性,您必须恰当地使用这些按钮和图标。具体来说,这意味着您应该按照按钮或图标规定的含义和推荐位置来使用它们,而不是依靠您对其外观的臆测。请参考,和等小节,来了解关于系统提供的按钮和图标的含义和位置信息。

Interface Builder可以很方便地使用系统提供的按钮,并将系统提供的图标应用到您的控件中。您可以参考Interface Builder用户指南中的“iPhone OS用户界面对象部分,来了解关于外观的信息。

如果任何系统提供的工具栏按钮,导航栏按钮或标签栏项目图标都无法恰当地反映您的应用程序中的某种特定功能,那么您应该设计自定义的按钮或图标。小节为您提供了一些指导,能够帮助您完成这项工作。

用于工具栏和导航栏的标准按钮

iPhone OS为您准备了在工具栏和导航栏中常见的标准按钮。所示的这些按钮具有两种样式,分别用于下列不同情况:

  • 边框样式例如,电话联系人应用程序导航栏中的添加按钮。这种样式对于导航栏和工具栏都适用。
  • 无格式样式例如,邮件应用程序工具栏中的撰写按钮。这种样式只适用于工具栏。事实上,即使您指定一个导航栏中的按钮为无格式样式,它也会被转换为边框样式。

如同所有系统提供的按钮一样,请不要将表10-1中的按钮用于其设计用途之外的操作。尤其要避免只根据外观选择按钮,而不考虑这个按钮的文档描述。请参考一节,这部分内容讨论了正确使用图标的重要意义。(有关这些按钮的符号名称和可用性的信息请参考UIBarButtonSystemItem的文档。)

10-1 可用于工具栏和导航栏的标准按钮(以无格式样式显示)

按钮

含义

名称

UIButtonBarAction.jpg

打开动作表单,允许用户执行应用程序特定的动作

动作

UIButtonBarCamera.jpg

打开动作表单,显示相机模式下的照片选择器

相机

UIButtonBarCompose.jpg

打开新消息的编辑模式视图

撰写

UIButtonBarBookmarks.jpg

显示应用程序特定的书签

书签

UIButtonBarSearch.jpg

显示搜索框

搜索

UIButtonBarNew.jpg

创建一个新项

添加

UIButtonBarTrash.jpg

删除当前项

回收站

UIButtonBarOrganize.jpg

在应用程序中将某一项移动或路由至指定目的地,如文件夹

组织

UIButtonBarReply.jpg

将某一项发送或路由至另一位置

回复

UIButtonBarStop.jpg

停止当前进程或任务

停止

UIButtonBarRefresh.jpg

刷新内容(只在必要时使用;其他情况下自动刷新)

刷新

UIButtonBarPlay.jpg

开始播放媒体或幻灯片

播放

UIButtonBarFastForward.jpg

快进当前播放的媒体或幻灯片

快进

UIButtonBarPause.jpg

暂停当前播放的媒体或幻灯片(请注意,这意味着上下文保存)

暂停

UIButtonBarRewind.jpg

快退当前播放的媒体或幻灯片

快退

除了表10-1所示的按钮之外,在您的应用程序中,您也可以使用表10-2中由系统提供的编辑取消保存完成按钮,以支持编辑或其他类型的内容操作。(有关这些按钮的符号名称和可用性的信息请参考介绍UIBarButtonSystemItem的文档。)这些按钮对于导航栏和工具栏都适用,但只能以有边框样式提供给用户。如果您使用上述按钮,即使您将其指定为无格式样式,它也会被转换为有边框样式。

10-2 用于导航栏的有边框样式的动作按钮

按钮

含义

名称

UIBarSystemItemEdit.jpg

进入编辑或内容操作模式

编辑

UIBarSystemItemCancel.jpg

退出编辑或内容操作模式而不保存更改

取消

UIBarSystemItemSave.jpg

保存更改,并在合适的情况下退出编辑或内容操作模式

保存

UIBarSystemItemDone.jpg

退出当前模式并保存修改(如果有的话)

完成

用于标签栏的标准图标

iPhone OS提供了用于标签栏的标准图标,如表10-3所示。有关这些图标的符号名称和可用性的信息请参考介绍UITabBarSystemItem的文档。

与所有的标准按钮和图标一样,您必须根据其规定含义使用这些图标。尤其要注意,要基于图标代表的含义来使用图标,而不是它的外观。这样即使图标的外观发生改变,它所代表的特定含义不变,从而使应用程序的用户界面看起来仍然合理,请参考一节,进一步了解为什么正确使用这些图标如此重要。

10-3 用于标签栏的标准图标

图标

含义

名称

UITabBarBookmarks.jpg

显示应用程序特定的书签

书签

UITabBarContacts.jpg

显示联系人

联系人

UITabBarDownloads.jpg

显示下载

下载

UITabBarFavorites.jpg

显示当前用户的收藏夹

收藏夹

UITabBarFeatured.jpg

显示应用程序的特色内容

特色

UITabBarHistory.jpg

显示用户操作的历史

历史

UITabBarMore.jpg

显示标签项上的更多项

更多

UITabBarMostRecent.jpg

显示最近一次使用的项

最近一次使用

UITabBarMostViewed.jpg

显示所有用户最关注的项

最多关注

UITabBarRecents.jpg

显示由应用程序定义的一段时间以来用户访问过的项

最近使用

UITabBarSearch.jpg

进入搜索模式

搜索

UITabBarTopRated.jpg

显示用户评级最高的项

最高级

用于表格行和其它用户界面元素的标准按钮

iPhone OS提供了少量用于表格行和其他元素的按钮。表10-4列出了这些按钮,与所有的标准按钮和图标一样,它们应该按照其含义被正确地使用。特别是要避免只根据外观选择按钮,而不是这个按钮的文档描述。请参考一节,这部分内容讨论了正确使用这些图标的重要意义。

虽然详细信息展开按钮通常在表格行中使用,但它也可以用在别处。有关该按钮的更多信息请参考。iPhone OS还提供了一组只能在表格行中使用的控件;有关这些控件的具体信息请参考一节。

有关这些按钮的符号名称和可用性的信息请参考介绍UIButtonType的文档。(表格视图元素详细信息展开的符号名称和可用性的信息请参考介绍UITableViewCellAccessoryDetailDisclosureButton的文档。)

10-4 用于表格行和用户界面元素的标准按钮

Button

Meaning

Name

UIButtonTypeContactAdd.jpg

显示联系人选择器,向某一项中添加联系人

添加联系人

UIButtonTypeDetailDisclosure.jpg

显示一个新视图,其中包含当前项的详细信息

详细信息展开

UIButtonTypeInfoDark.jpg

翻转至视图的背面(通常出现在工具程序中)以显示配置选项或其他信息。

请注意,信息按钮也可以是暗色的圆圈当中有一个亮色字母“i”

信息

创建自定义图标和图像

iPhone应用程序的用户界面向来以其精美的图像和丰富的色彩著称。作为应用程序的设计者,您需要提供一个美观的用户界面以融入这样的整体风格。虽然iPhone OS提供了大量精美的用户界面元素,但是每个应用程序仍然需要两个自定义元素:应用程序图标和启动图像。此外,应用程序还应该为iPhone OS提供用于显示在Spotlight搜索结果中的小图标。

有些应用程序需要自定义图标,用于在导航栏,工具栏和标签栏中表示应用程序的特定功能和模式。遵循创建这些图标的准则,您就可以设计出既与内置图标相称,又能巧妙地突显您应用程序风格的图标和图像。

注意: 图标和图像的标准比特深度是24位(其中,红色,绿色和蓝色各占8比特),外加8位的alpha通道。建议您使用PNG格式,因为它保留了颜色深度,并且内置支持ɑ通道。您可以使用预览应用程序产生最终的PNG文件。

您无须将颜色限定在Web安全色内。虽然您可以在为导航栏,工具栏和标签栏创建的图标中使用alpha透明度,但不要在应用程序图标中这么做。

应用程序图标

应用程序图标是用户会放置在其主屏幕上的图标,点击该图标可以启动应用程序。在这里您可以将品牌宣传和强烈的视觉效果结合起来,使其简洁,易辨认且引人注目。

用户可以选择想要在主屏幕上显示的应用程序图标,因此您应该设计一个这样的图标:

  • 具有吸引力的,以至于用户觉得应该将它留在主屏幕上
  • 独特的,以便用户可以很容易地在众多的图标中找到它

尽量使您的图标在吸引眼球和表意清晰之间找到平衡点,这样可以使图标既丰富,漂亮,又能传达应用程序的本意。此外,调查一下具有不同文化背景的人们会对您选择的图像和颜色产生哪些不同的理解也是不错的办法。

当用户决定在主屏幕上显示您的应用程序图标时,iPhone OS会自动为其添加一些视觉效果,以便该图标与内置图标保持一致。具体包括:

  • 圆角
  • 阴影
  • 反光

例如,图11-1显示了一个由应用程序提供的简单图标。

11-1  一个简单的应用程序图标,未显示在主屏幕之前的样子

star.jpg

11-2显示了同一个图标被iPhone OS显示在主屏幕时的样子。

11-2  一个简单的应用程序图标,显示在主屏幕时的样子

star_button.jpg

在主屏幕上,具有清晰背景的应用程序图标看起来效果最佳。这主要是因为iPhone OS添加了圆角效果:统一的圆角效果使用户主屏幕上的所有图标都具有一致的可点击外观。如果您创建的图标具有黑色背景,当显示在主屏幕上时,它的背景会消失,用户就无法看到它的圆角效果。这样的图标往往让人觉得是无法点击的,会干扰到主屏幕的次序结构。

为了确保您的图标可以充分利用iPhone OS所提供的视觉增强功能,建议您创建这样的PNG格式图像:

  • 尺寸为57x57像素,90度直角(如果图像使用了其它尺寸,iPhone OS会对其进行调整)
  • 不要使用光晕或者修饰效果
  • 不要使用alpha透明度

将您的图标文件命名为Icon.png,并将它放在应用程序包的顶层。要了解更多与应用程序包的内容相关的信息,请参考iPhone应用程序编程指南中的应用程序包一节。

注意:您也可以选择让iPhone OS不要为您的图标添加光晕效果。要做到这一点,您需要在应用程序的Info.plist文件(要了解该文件,请阅读iPhone应用程序编程指南中的信息属性列表一节)中添加UIPrerenderedIcon键。

无论您是否使用光晕效果,您的图标都应该采用57 x 57像素。

当您提交您的应用程序时,必须包含一个512 x 512像素版本的应用程序图标,用于在App Store中显示。虽然,让用户一眼就能认出这个版本的图标就是您的应用程序的图标非常重要,但这个版本的图标应该更华丽,更精细。换句话说,您不应该只是简单地放大应用程序图标,直接作为您为App Store创建的图标。

如果您正在开发一个私下发布的应用程序(即不通过App Store发布),您也必须提供一个512 x 512像素版本的应用程序图标。在这种情况下,将图标文件命名为iTunesArtwork(没有文件扩展名),并把它放在应用程序包的顶层。这个图标用于在iTunes中标识您的应用程序。

小图标

每个应用程序都应该提供一个小图标,当应用程序的名称与Spotlight搜索栏中的词条相匹配时,iPhone OS可以显示这个小图标。

具有设置功能的应用程序也应该提供这种小图标,用于在内置的设置应用程序中标识应用程序。

您的小图标应该能清晰地标识您的应用程序,以便用户可以在搜索结果列表中明确地识别出来。要做到这一点,您应该创建这样精简而吸引人的图标:

  • 使用PNG格式。
  • 尺寸约为29 x 29像素。

将您的图标文件命名为Icon-Small.png,并将它放在应用程序包的顶层。要了解更多与应用程序包的内容相关的信息,请参考iPhone应用程序编程指南中的应用程序包一节。

注意:如果您没有提供名为Icon-Small.png的图标,并且您的应用程序包中不包含早期版本的名为Icon-Settings.png的小图标的话,那么iPhone OS会将您的应用程序图标进行缩放,用于在搜索结果和设置应用程序中进行显示。

如果您的应用程序包中包含名为Icon-Settings.png的小图标,但是不包含名为Icon-Small.png的图标,那么iPhone OS会在搜索结果中显示设置图标。不过,您应该更新应用程序包,使其只包含Icon-Small.png文件。

启动图像

为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。

一定要强调的是,之所以提供启动图像,是为了改善用户体验,并不是为了提供:

  • 应用程序进入体验,比如启动动画
  • 关于窗口
  • 品牌宣传元素,除非它们是您应用程序首屏幕的静态组成部分

由于用户可能会频繁,快速地在应用程序之间进行切换,因此,您应该尽一切努力将启动时间降到最短,而且您设计的启动图像应该尽量减轻用户等待的体验,而不是吸引用户的注意力。

要做到这一点,您应该设计这样的PNG格式的图像:

  • 尺寸为320 x 480像素。其中包含的状态栏区可以立即显示您选择的状态栏颜色,而不是等到您的应用程序启动完成后才显示。
  • 与应用程序的首屏幕相同,除了:
    • 文本。启动图像是静态的,因此您在其中显示的任何文本都不会本地化。
    • 可能动态改变的用户界面元素。不要包含在应用程序启动完成后看上去不同的元素,防止用户感觉到启动图像和应用程序首屏幕之间的闪动。

将您的启动图像命名为Default.png,并把它放在您的应用程序包的最顶层。要了解更多与应用程序包的内容相关的信息,请参考iPhone应用程序编程指南。

您可能觉得遵循这些准则会导致启动图像显得平淡无趣,然而,实际上正是这样。请记住,启动图像并不是为您提供机会进行艺术展示;它完全是为了增强用户对应用程序能够快速启动并立即投入使用的感知度。下面的例子向您展示了启动图像有多么简单。

第一个例子是内置设置应用程序的启动图像,如图11-3所示。设置应用程序的启动图像只显示了应用程序的背景,因为应用程序中的其他内容都无法保证是静态的。

11-3  设置应用程序的启动图像

ic_defaultsettings.jpg

另一个启动图像的例子源自内置股票应用程序,如图11-4所示。请注意,只有包含在启动图像中的图像才是静态的图像,它们在股票应用程序的正面视图中总是可见的。

11-4  股票应用程序的启动图像

ic_defaultstocks.jpg

导航栏,工具栏和标签栏的图标

如果可能的话,您应该在导航栏,工具栏和标签栏中使用系统提供的按钮和图标。iPhone OS提供了各式各样的标准按钮和图标,用户看到它们就会联想到内置应用程序所支持的标准任务和模式。如果您的应用程序支持一些标准功能(比如刷新内容区视图或删除一项),或者会显示不同的数据子集(比如联系人或书签),一定要使用系统提供的相应按钮或图标来表示它们。关于标准按钮和图标的完整列表,以及如何使用它们的指南,请参考。

当然,并不是应用程序所执行的每个任务都是一个标准功能。如果您的应用程序支持一些用户需要频繁执行的自定义任务,您需要创建自定义的图标,用于在工具栏或导航栏中代表这些任务。同样,如果您的应用程序显示了标签栏,允许用户在自定义的应用程序模式之间,或者自定义的数据子集之间进行切换,你需要设计自定义的标签栏图标,用于清晰地描述这些模式和子集。本节向您介绍如何设计出能够很好地用于导航栏,工具栏和标签栏的图标。

在您为图标创建美术图案之前,您需要花些时间想想该图标应该传达些什么信息。当您考虑设计的时候,请以这样的图标为目标:

  • 简明扼要。太多的细节会使图标显得杂乱或是难以理解。
  • 不会被误认为是系统提供的图标。用户应该能够一眼就将您的自定义图标与标准图标区分开。
  • 易于理解且广为接受。请尽力创建一个能够被大多数用户正确理解,不会令任何用户反感的符号。

在您确定了图标的外观之后,请在创建时遵循以下准则:

  • 使用PNG格式。
  • 使用带有适当alpha透明度的纯白色。
  • 不要添加阴影效果。
  • 使用抗锯齿效果。
  • 如果您要添加斜边效果,请确保角度为90°(为了便于理解和操作,您可以想象在图标的顶部有一处光源)。
  • 对于工具栏和导航栏图标,尺寸应为20 x 20像素。 对于标签栏图标,尺寸应为30 x 30像素的图标。

注意:您为工具栏,导航栏和标签栏提供的图标在您的应用程序中将用做创建图标的蒙板。没必要创建全彩色的图标。

iPhone OS自动为导航栏,工具栏和标签栏中的项目提供了被按下或被选中时的外观,因此您只需要提供图标的单个版本。由于这些视觉效果是自动呈现的,您无法改变它们的外观。

转载于:https://my.oschina.net/Xiosd/blog/56064

你可能感兴趣的文章
HDU 2831 (贪心)
查看>>
遍历js的obj中所有属性得key
查看>>
lua demo
查看>>
iOS开发-UITapGestureRecognizer手势
查看>>
在QTreeWidget中删除QTreeWidgetItem
查看>>
网页引导:jQuery插件实现的页面功能介绍引导页效果
查看>>
【CSS】使用CSS改变超链接样式
查看>>
HTC T328W刷机包 仿三星S5 UI美化 精简 S5落下
查看>>
spring AOP面向切面编程学习笔记
查看>>
Proftp设置虚拟用户(转)
查看>>
基于tiny4412的Linux内核移植(支持device tree)(二)
查看>>
iOS开发网络篇—NSURLConnection基本使用
查看>>
angularjs笔记(二)
查看>>
SQL Server数据库多种方式查找重复记录
查看>>
Target runtime Apache Tomcat v6.0 is not defined.错误解决方法
查看>>
为什么我们要研究中断?【转】
查看>>
tcpdump wireshark 实用过滤表达式(针对ip、协议、端口、长度和内容) 实例介绍...
查看>>
C#.net调用axis2webService
查看>>
NOIP2010乌龟棋[DP 多维状态]
查看>>
Linux 系统中用户切换(su user与 su - user 的区别)
查看>>