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


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

您可以为工具栏按钮自行设计图标,或者您也可以充分利用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-11所示。

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


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

ui_tabitemmore.jpg

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


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

ui_tabitemconfiguration.jpg

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


为标签栏上的标签做标记

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

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


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

ui_badgeintoolbar.jpg

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值