前一篇: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 View,?Action 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)