iphone:Navigation-bars

出自UXGuide.net

跳转到: 导航, 搜索

请帮助我们修订和更新本文的译文部分

本文的译文部分可能是由多个贡献者提供或从不同的渠道收集,未经过最终审阅和整理,请您帮助我们一起修订和更新本文的译文部分。

导航栏
Navigation Bars

A navigation bar enables navigation through an information hierarchy and, optionally, management of screen contents.

导航栏让我们可以在信息层次中浏览,有时,也可以让我们操纵屏幕上的内容。

--图片

A navigation bar is contained in a navigation controller, which is an object that manages the display of your hierarchy of custom views. To learn more about defining a navigation bar in your code, see “Navigation Controllers” in View Programming Guide for iOS and UINavigationBar Class Reference.

目录

外观和行为 Appearance and Behavior

A navigation bar appears at the upper edge of an application screen, just below the status bar. A navigation bar usually displays the title of the current screen or view, centered along its length. When navigating through a hierarchy of information, users tap the back button to the left of the title to return to the previous screen. Otherwise, users can tap content-specific controls in the navigation bar to manage the contents of the screen.

导航栏位于应用程序屏幕的上边缘,在状态栏之下。导航栏通常会显示当前视图的标题(居中排版)。当用户在信息层次中浏览时,用户可以点击标题左边的返回按钮来返回上一个屏幕。或者,用户点击导航栏上的内容定制控件来管理当前屏幕的内容。

All controls in a navigation bar include a bezel around them, which, in iOS, is the bordered style. If you place a plain (borderless) control in a navigation bar, it automatically converts to the bordered style.

导航栏的所有控件都有一圈带边角的框,这种样式在iOS中被称为边框样式。即使你将一个无格式(没有边框)的控件放在导航栏上,它也将自动转变成边框样式。

A navigation bar can be translucent or opaque. If the bar is translucent, the top edge of the main content view meets the bottom edge of the status bar, so that users can see the content behind the navigation bar. If the bar is opaque, the top edge of the main content view meets the bottom edge of the navigation bar.

导航栏可以是半透明的,或者是黑色的。如果导航栏是半透明的,主要内容视图的上边缘会靠上状态栏的下边缘,所以用户可以透过导航栏看到内容。如果导航栏是黑色的,主要内容视图的上边缘会靠上导航栏的下边缘。

On iPhone, changing the device orientation from portrait to landscape can change the height of the navigation bar automatically. On iPad, the height and translucency of a navigation bar does not change with rotation.

在iPhone上,将设备方向从竖向改为横置将会自动改变导航栏的高度。在iPad上,导航栏的透明度和高度不会随设备方向改变。

On iPhone, a navigation bar always displays across the full width of the screen. On iPad, a navigation bar can display within a view, such as one pane of a split view, that does not extend across the screen.

在iPhone上,导航栏总是打通屏幕的宽度。在iPad上,导航栏可能被放在某个视图内,比如分裂视图的一个盘内,而不会打通整个屏幕。

规范 Guidelines

You can use a navigation bar to enable navigation among different views, or provide controls that manage the items in a view.

导航栏可以用来在不同的视图中导航,或者提供一些控件以便管理视图中的项目。

Use the title of the current view as the title of the navigation bar. When the user navigates to a new level, two things should happen:

将当前视图的标题作为导航栏的标题。当用户浏览到一个新的信息层次中时,两件事情应该发生:

Make sure it’s easy to read the text in the navigation bar. The system font provides maximum readability, but you can specify a different font, if appropriate.

确保导航栏的文字易读。系统字体提供了最大的可读性,不过,如果你觉得合适,也可以指定不同的字体。

Use a toolbar instead of a navigation bar if you need to offer a larger set of controls, or you do not need to enable navigation.

使用工具栏而不是导航栏如果需要显示一大堆控件,或者你不需要启用导航功能。

Consider putting a segmented control in a navigation bar at the top level of an application. This is especially useful if doing so helps to flatten your information hierarchy and makes it easier for people to find what they’re looking for. If you use a segmented control in a navigation bar, be sure to choose accurate back-button titles. (For usage guidelines, see “Segmented Control.”)

可以考虑在应用程序的顶层放置分段控件。如果这么做会让信息层次扁平化,那么就很有帮助了,这会让人们更容易的发现他们要找的东西。如果使用分段控件,确保选择了正确的返回按钮的标题。(见“分段控件”。)

Avoid crowding a navigation bar with additional controls, even if there appears to be enough space. The navigation bar should contain no more than a view’s current title, the back button, and one control that manages the view’s contents. If, instead, you use a segmented control in the navigation bar, the bar should not display a title and it should not contain any controls other than the segmented control.

不要增加导航栏的控件,把导航栏弄得很挤,即使看起来有足够的空间,也不要这么做。 导航栏上的元素可以包括视图的标题、返回按钮以及一个管理当前内容的控件,不能再多 了。如果使用了分段按钮,就不能显示标题了,也不能包括其他任何别的控件了。

Use system-provided buttons according to their documented meaning. For more information, see “Standard Buttons for Use in Toolbars and Navigation Bars.” If you decide to create your own navigation bar controls, see “Icons for Navigation Bars, Toolbars, and Tab Bars” for advice on how to design them.

根据文档中的意义来使用系统提供的按钮。见在“工具栏和导航栏中使用标准按钮”。如果要创建自有的导航栏控件,请参见“导航栏、工具栏和切换栏上的图标”。



Figure 6-3 shows examples of both these uses.
图6-3 显示了这两种用法的例子。

Figure 6-3  Navigation bars can contain navigational controls and controls to manage content
图6-3 导航栏可包含导航性控件和页面管理控件

ui_navbarpurposes.jpg

导航栏内容
Navigation Bar Contents

A navigation bar can display just the title of the current view, centered along its width, as shown in Figure 6-4. The initial view in a productivity application should include a navigation bar that displays only the title of the first view because the user hasn’t yet navigated to another location.

一个导航栏可以只是居中显示当前页面的名称,如图6-4所示。在一个productivity application的起始页面中,由于这个时候用户还没有导航到其他的页面,因此导航栏应该只显示起始页面的名称。

Figure 6-4  A navigation bar displays the title of the current view
图6-4 只显示当前页面名称的导航栏

ui_navbartitleonly.jpg

As soon as the user navigates to another view, the navigation bar should change its title to the title of the new location, and should provide a back button labeled with the title of the previous location. For example, Figure 6-5 shows the navigation bar in Date & Time settings, which is in General settings.

当用户导航到其他的页面上时,导航栏的名称就应相应的变为新的页面名称,并且提供一个以之前位置名称命名的后退按钮。举例来说,图6-5显示了Date&Time设置中的导航栏,Date&Time设置是Gerneral设置的一部分。

Figure 6-5  A navigation bar can contain a navigational control
图6-5 包含了导航性控件的状态栏

ui_navbarnavigationonly.jpg

The standard back button gives users a reliable way to return to the previous screen, so it’s important to avoid altering the button’s behavior. In particular, you should avoid creating a multi-segment back button, such as the one shown in Figure 6-6.

后退按钮为用户回到上一个页面提供了一种可靠的方式,要尽量避免改变该按钮的行为方式。应当尤其避免创建多个部分的后退按钮,如图6-6所示。

Figure 6-6  A multi-segment back button is not recommended
图6-6 不推荐使用多个部分的后退按钮

ui_navbarmultisegment.jpg

Using a multi-segment back button causes several problems:
使用多个部分的后退按钮会引起很多问题:

If you think users might get lost without a multi-segment back button that displays a type of breadcrumb path, it probably means that users must go too deeply into the information hierarchy to find what they need. To address this, you should flatten your information hierarchy.

如果你担心没有这种类似于面包屑导航的多部分后退按钮之后,用户可能会在程序中迷失。那么就说明用户需要非常深入到你的信息结构中才能发现他们所需要的信息。那么你最好重新审视并组织下该程序的信息层级,使其变个更加平缓。

In addition to a back button, a navigation bar can also contain a second button to the right of the title. If you do not need to display a back button (because your application does not support hierarchical navigation), you can opt instead to display a button that affects the contents of the view, such as an Edit button, to the left of the title. Figure 6-7 shows an example of this.

除了后退按钮之外,导航栏还可在页面名称的右方显示第二个按钮。如果你不需要一个后退按钮(因为你的应用程序并不支持层级式的导航),你可以在页面名称的左边使用对当前页面的操控按钮来替代,如“编辑”按钮。图6-7 显示了这样的一个例子。

Figure 6-7  A navigation bar can contain controls that manage the content in the view
图6-7 导航栏可包含页面内容操控按钮。

ui_navbarnonavigation.jpg

To learn how to implement a navigation bar in your application, see “Navigation Controllers”.

想要学习如何在你的应用程序中应用导航栏,参见“导航控件”

As you can see in the illustrations above, buttons in a navigation bar include a bezel around them. In iPhone OS, this style is called the bordered style. All controls in a navigation bar should use the bordered style. In fact, if you place a plain (borderless) control in a navigation bar, it will automatically convert to the bordered style.

如上图所示,导航栏中的按钮包含了围绕着他们的斜面。这种风格在iPhone OS系统中被称为描边风格。 所有在导航栏中的控件都应该使用描边风格。事实上,放入导航栏内的控件都会被自动转换为描边风格。

You can design your own icons for use in navigation-bar buttons, or you can take advantage of the predefined buttons iPhone OS provides. See “Standard Buttons for Use in Toolbars and Navigation Bars” for more information on the buttons available to you.

你可以自己设计导航栏中按钮的图标,也可以利用iPhone OS系统中已经定义好了的按钮。参见“工具栏和导航栏中的标准按钮”以获得更多你可以利用的按钮。

Although you can specify a font for all text displayed in a navigation bar, it’s recommended that you use the system font for maximum readability. When you use the appropriate UIKit programming interfaces to create your navigation bar, the system font is used automatically to display the title.

虽然你可以为导航栏中的所有文本指定一个字体,但最好还是使用系统字体以获得最大的可读性。当你使用适当的UIKit编程界面来创建导航栏时,系统字体会被自动用于显示页面名称。

导航栏的大小和颜色
Navigation Bar Size and Color

Changing the device orientation from portrait to landscape can change the height of the navigation bar automatically (you should not specify the height programmatically). In landscape orientation, the thinner navigation bar provides more space for your screen contents. Be sure to take the difference in heights into account when you design icons for navigation bar controls and when you design the layout of your screens.

当把iPhone OS设备有竖向改为横向放置时,导航栏的高度会被自动改变(不能通过编程语言指定高度)。在横向放置时,更窄的导航栏为页面内容提供了更多的显示空间。在为导航栏设计图标和为页面设计布局时,一定要注意横屏和竖屏是的的高度变化。

You can specify the color and translucency of a navigation bar to coordinate with the overall look of your application and with the other bars in it (that is, toolbars, tab bars, and the status bar). You can use a custom color or choose one of the standard colors:

你可以为导航栏指定颜色和透明度,从而和你应用程序的整个外观和其他功能栏(工具栏、标签栏和状态栏等)的风格保持一致。你可以自定义一个颜色或是从标准的颜色中选择一个来使用:

If it complements the look of your application, you can add translucency to the navigation bar. When you use a translucent navigation bar, the screen gives the impression of having a larger visible area, which is especially desirable in landscape orientation. Be sure to avoid mixing a translucent navigation bar with an opaque black status bar (although you can display a translucent navigation bar with an opaque gray status bar).

如果半透明效果会使你的应用程序变得更加漂亮,你可以将这种效果加入导航栏。当导航栏是半透明效果时,页面的显示空间就会显得更大,这对设备横屏时的显示大有裨益。要避免将半透明的导航栏和不透明的黑色状态栏一起使用(虽然你能够这么做)。

Strive for consistency in the appearance of navigation bars and other bars in your application. If you use a translucent navigation bar, for example, don’t combine it with an opaque toolbar. Also, avoid changing the color or translucency of the navigation bar in different screens in the same orientation.

要努力使你的状态栏和其他功能栏的外观保持一致,如果你已经使用了半透明的导航栏,那么就不要和不透明的工具栏一起使用。此外,如果在设备放置方向不变的情况下,要避免在不同的页面中改变导航栏的颜色和透明度。

个人工具
名字空间
变换
动作
导航
工具箱