iOS 8人机交互指南(5)

前一篇: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:

(1)Hierarchical

(2)Flat

(3)Content- or experience-driven

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

(1)分层导航

(2)扁平导航

(3)内容或经验驱动导航

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):分段控件可以让用户在一个界面看到内容的不同分类或方面,无需导航至新界面。

工具栏(toolbar):虽然工具栏看上去很像导航栏或者标签栏,但它不能导航。它提供给用户在当前界面操作内容可使用的控件。

英文原文链接

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容