iOS 8人机交互指南(5)

2015.04.06 16:12* 字数 1716

前一篇:iOS 8人机交互指南(4)

5. 导航(Navigation)

People tend to be unaware of the navigation experience in an app unless it doesn’t meet their expectations. Your job is to implement navigation in a way that supports the structure and purpose of your app without calling attention to itself.

人们通常不会意识到 app 中导航的存在,除非导航没有满足他们的需求。导航的设计目标就是用一种用户注意不到的方式来支持 app 结构和功能的实现。

Broadly speaking, there are three main styles of navigation, each of which is well suited to a specific app structure:



(3)Content- or experience-driven

一般来讲,导航有三种主要样式,分别适用于三种特定的 app 结构:




In a hierarchical app, users navigate by making one choice per screen until they reach their destination. To navigate to another destination, users must retrace some of their steps—or start over from the beginning—and make different choices. Settings and Mail are good examples of apps that use a hierarchical structure.

在分层 app 中,用户在每个页面进行选择直到他们抵达目的地。为了导航至另一个目的地,用户必须折回某些步骤,或者从头开始,然后进行不同的选择。设置 app 和邮箱 app 是使用分层结构的好例子。


In an app with a flat information structure, users can navigate directly from one primary category to another because all primary categories are accessible from the main screen. Music and App Store are good examples of apps that use a flat structure.

在扁平信息结构的 app 中,用户直接由一个主要的分类导航至另一个,因为所有主要的分类都可以从主界面直接访问。音乐 app 和 App Store 是使用扁平结构的绝佳示例。


It’s no surprise that in an app that uses a content- or experience-driven information structure, navigation is also defined by the content or experience. For example, users navigate through a book by moving from one page to the next or by choosing a page in the table of contents; in a game, navigation is often an important part of the experience.

使用内容或经验驱动信息结构的 app ,它的导航往往也由内容或经验定义。例如,用户通过从一页翻到下一页或者在目录中选择一页来浏览图书,导航通常是经验的重要部分。


In some cases, it works well to combine more than one navigation style in an app. For example, the items in one category of a flat information structure might best be displayed in a hierarchy.

Users should always know where they are in your app and how to get to their next destination. Regardless of the navigation style that suits the structure of your app, the most important thing is that a user’s path through the content is logical, predictable, and easy to follow.

UIKit defines some standard UI elements that make it easy to implement hierarchical and flat navigation styles, in addition to some elements that help you enable content-centric navigation, such as in a book-style or media-viewing app. A game or other app that provides an experience-driven navigation style typically relies on custom elements and behaviors.

在有些情况下,一个 app 中整合不止一个导航会取得不错效果。例如,一个扁平信息结构中的一个分类的条目最好分层显示。

用户应该总是了解他们处于 app 中的什么位置,以及如何到达他们的目的地。不管导航样式是否符合 app 的结构,最重要的是用户的使用路径是有逻辑的、可预见的、易于遵循的。

UIKit 定义了一些标准 UI 元素,使得实现分层导航和扁平导航更加容易。除此之外还有一些元素可以辅助实现内容为中心的导航,例如图书样式或多媒体查看 app。游戏或其他提供经验驱动导航的 app 通常依赖于自定义元素和行为。

Use a navigation bar to give users an easy way to traverse a hierarchy of data. The navigation bar’s title can show users their current position in the hierarchy; the back button makes it easy to return to the previous level. To learn more, see Navigation Bar.

使用导航栏(navigation bar)可以让用户更容易地在分层数据中来回切换。导航栏的标题显示用户在分层结构中的当前位置;返回按钮可以快速返回上一层级。了解更多内容,参见 Navigation Bar

Use a tab bar to display several peer categories of content or functionality. A tab bar is a good way to support a flat information architecture and its persistence lets people switch between categories regardless of their current location. To learn more, see Tab Bar.

使用标签栏(tab bar)显示几个同级分类的内容或功能。标签栏很好地支持了扁平信息架构,它的一致性使得用户无论在什么位置都可以在分类间轻松切换。了解更多内容,参见 Tab Bar

Use a page control when each app screen represents an individual instance of the same type of item or page. A page control is good for showing users how many items or pages are available and which one is currently displayed. For example, Weather uses a page control to show how many location-specific weather pages the user has opened. To learn more about the page control, see Page Control.

当每个 app 界面代表相同类型条目或页面的一个独立示例时,使用分页符(page control)。分页符很好地向用户展示了共有多少条目或页面、以及当前显示的是哪一页面。例如,天气 app 使用分页符显示出用户已经打开多少指定地区的天气页面。了解更多内容,参见 Page Control

In general, it’s best to give users one path to each screen. If there’s one screen that users need to see in more than one context, consider using a temporary view, such as a modal view, action sheet, or alert. To learn more, see Modal ViewAction Sheet, and Alert.


UIKit also provides the following related controls:

Segmented Control. A segmented control can give users a way to see different categories or aspects of the content on the screen; it doesn’t enable navigation to a new screen.

Toolbar. Although a toolbar looks similar to a navigation bar or a tab bar, it doesn’t enable navigation. Instead, a toolbar gives users controls that act on the contents of the current screen.

UIKit 也提供了如下相关控件:

分段控件(segmented control):分段控件可以让用户在一个界面看到内容的不同分类或方面,无需导航至新界面。



后一篇:iOS 8人机交互指南(6)

Web note ad 1