People tend to be unaware of an app’s navigation until it doesn’t meet their expectations. Your job is to implement實(shí)現(xiàn) navigation in a way that supports the structure and purpose of your app without calling attention to itself. Navigation should feel natural and familiar, and shouldn’t dominate支配 the interface or draw focus away from content. In iOS, there are three main styles of navigation.
人們?cè)跊]有達(dá)到他們的預(yù)期前不會(huì)意識(shí)到app導(dǎo)航的存在。你的工作就是以支持應(yīng)用結(jié)構(gòu)而不引起用戶的注意的方式實(shí)現(xiàn)導(dǎo)航。導(dǎo)航需要感到自然、常見萄窜,而不是支配界面或者把注意力從正文中拉走酿秸。在iOS中联逻,導(dǎo)航有三種主要的樣式盖喷。
Hierarchical分層的 Navigation
分級(jí)導(dǎo)航
Make one choice per screen until you reach a destination. To go to another destination, you must retrace折回 your steps or start over from the beginning and make different choices. Settings and Mail use this navigation style.
每屏只做一個(gè)選擇桩撮,直到你到達(dá)目的地炮沐。要想去其它地方争群,你必須返回從你進(jìn)入的地方從新開始,然后再進(jìn)行選擇央拖。設(shè)置和郵件使用這種導(dǎo)航方式祭阀。
Flat Navigation
平面式導(dǎo)航
Switch between multiple content categories. Music and App Store use this navigation style.
在多個(gè)內(nèi)容類別之間切換。音樂和應(yīng)用市場(chǎng)使用這種導(dǎo)航方式鲜戒。
Content-Driven or Experience-Driven Navigation
內(nèi)容或者體驗(yàn)驅(qū)動(dòng)的導(dǎo)航
Move freely through content, or the content itself defines the navigation. Games, books, and other immersive apps generally use this navigation style.
內(nèi)容之間的能自由的穿梭或者內(nèi)容本身來定義導(dǎo)航专控。游戲、讀書和其它沉浸式的app通常使用這種導(dǎo)航方式遏餐。
Some apps combine multiple navigation styles. For example, an app that uses flat navigation may implement hierarchical navigation within each category.
有些app交叉使用多種導(dǎo)航方式伦腐。例如,一個(gè)app在使用平面式導(dǎo)航時(shí)可能在每個(gè)類別中使用分級(jí)導(dǎo)航失都。
Always provide a clear path.?People should always know where they are in your app and how to get to their next destination. Regardless of navigation style, it’s essential that the path through content is logical條理分明的, predictable可預(yù)言的, and easy to follow. In general, give people one path to each screen. If they need to see a screen in multiple contexts, consider using an action sheet, alert, popover, or modal view.?
始終提供一個(gè)清晰的路徑柏蘑。人們應(yīng)該一直能夠知道他們?cè)谀鉧pp中的位置以及怎么到達(dá)他們的下一個(gè)目的地。不要管導(dǎo)航樣式粹庞,讓穿越內(nèi)容的路徑是條理分明咳焚、可預(yù)期、并且容易理解更加重要庞溜。一般來說革半,給用戶一個(gè)能到達(dá)所有屏幕的路徑。如果他們需要查看包含一個(gè)多任務(wù)的屏幕,考慮使用動(dòng)作列表又官、警告延刘、彈窗或者情態(tài)視圖。
Design an information structure that makes it fast and easy to get to content.Organize your information structure in a way that requires a minimum number of taps, swipes, and screens.
設(shè)計(jì)一個(gè)能夠更快更容易得到內(nèi)容的信息結(jié)構(gòu)六敬。以一種需要盡量少使用點(diǎn)擊碘赖、滑動(dòng)、篩查的方式來組織你的信息結(jié)構(gòu)外构。
Use touch gestures to create fluidity.?Make it easy to move through your interface with minimum friction. For example, you could let people swipe from the side of the screen to return to the previous screen.
使用觸摸手勢(shì)來轉(zhuǎn)換頁面普泡。讓切換屏幕變得非常容易。例如你可以讓用戶從屏幕的邊緣滑動(dòng)來返回上一屏审编。
Use standard navigation components.?Whenever possible, use standard navigation controls such as page controls, tab bars, segmented controls, table views, collection views, and split views. Users are already familiar with these controls, and will intuitively直觀的 know how to get around your app.
使用標(biāo)準(zhǔn)的導(dǎo)航組件劫哼。盡可能的使用標(biāo)準(zhǔn)的導(dǎo)航控制,比如頁面控制割笙、標(biāo)簽欄、分段控件眯亦、表格視圖伤溉、收集視圖、拆分視圖妻率。用戶已經(jīng)熟悉了這些控件乱顾,會(huì)很直觀的在你的app中走動(dòng)。
Use a navigation bar to traverse穿過 a hierarchy層級(jí) of data.?The navigation bar’s title can show the current position in the hierarchy, and the back button makes it easy to return to the previous location.?
用導(dǎo)航條來穿過信息層級(jí)宫静。導(dǎo)航條的標(biāo)題可以展示當(dāng)前層級(jí)的位置走净,返回按鈕能夠非常輕松的回到上一個(gè)視圖。
Use a tab bar to present peer categories類別 of content or functionality功能.?A tab bar lets people quickly and easily switch between categories, regardless of the current location.?
用選項(xiàng)卡來表示同一類別的內(nèi)容或功能孤里。不管當(dāng)前位置在哪里伏伯,選項(xiàng)卡能夠讓用戶快速、輕松的在分類中切換捌袜。
Use a page control when you have multiple pages of the same type of content.?A page control clearly communicates the number of pages available and which one is currently active. The Weather app uses a page control to show location-specific weather pages.?
當(dāng)同種類型的內(nèi)容有很多頁時(shí)说搅,使用頁面控件。一個(gè)頁面控件清晰的傳達(dá)出可用頁面的數(shù)量虏等、當(dāng)前頁面是哪個(gè)弄唧。天氣app使用頁面控件來展示具體地點(diǎn)的天氣頁面。
TIP?Segmented分段 controls and toolbars don’t enable navigation. Use a segmented control to organize information into different categories. Use a toolbar to provide controls for interacting with the current context.?
提示:分段控件和工具條不提供導(dǎo)航霍衫。用分段控件組織不同類別的信息候引。用工具條提供當(dāng)前內(nèi)容的交互控制。