導(dǎo)航

2018-08-12 21:55 更新

導(dǎo)航

除非導(dǎo)航設(shè)計(jì)不合理,不然用戶應(yīng)該明顯察覺不到應(yīng)用中的導(dǎo)航體驗(yàn)。導(dǎo)航設(shè)計(jì)應(yīng)該能夠支撐你應(yīng)用結(jié)構(gòu)和目的卻又不分散用戶注意力。 廣義來說,導(dǎo)航主要有以下幾種類型,每個(gè)導(dǎo)航都有其適應(yīng)的應(yīng)用結(jié)構(gòu):

  • 分層
  • 扁平
  • 內(nèi)容或體驗(yàn)驅(qū)動(dòng) 在有層級(jí)結(jié)構(gòu)的應(yīng)用中,用戶在每個(gè)層級(jí)中都要選擇一項(xiàng),直到到達(dá)目的層級(jí)。如果要切換到另一個(gè)目的層級(jí),用戶必須回退一些層級(jí),或者直接回到初始層級(jí)再次選擇。系統(tǒng)設(shè)置和郵箱應(yīng)用在這方面是很好示范,可以參考他們。

譯者注:以上為視頻截圖,完整視頻可點(diǎn)擊觀看。

在扁平信息架構(gòu)的應(yīng)用中,用戶可以從首頁目錄直接切換到另一個(gè),因?yàn)樗械姆诸惗伎梢詮闹髌林苯釉L問。音樂和 App Store 是兩個(gè)使用扁平結(jié)構(gòu)的好例子。

譯者注:以上為視頻截圖,完整視頻可點(diǎn)擊觀看。

在內(nèi)容或體驗(yàn)驅(qū)動(dòng)的信息架構(gòu)應(yīng)用中,導(dǎo)航也會(huì)根據(jù)內(nèi)容或體驗(yàn)來設(shè)計(jì)。例如,在閱讀一本電子書時(shí),用戶會(huì)一頁接一頁的進(jìn)行閱讀,或者直接從目錄中選中某一個(gè)指定的頁碼;同樣,在游戲中導(dǎo)航也是體驗(yàn)的重要組成部分。

譯者注:以上為視頻截圖,完整視頻可點(diǎn)擊觀看。

在某些情況下,在一個(gè)應(yīng)用中結(jié)合多種導(dǎo)航類型會(huì)有很好的效果。例如,對(duì)于扁平信息結(jié)構(gòu)中某一分類下的內(nèi)容,用分層導(dǎo)航的方式來顯示可能會(huì)更好。

應(yīng)該讓用戶時(shí)刻清楚自己當(dāng)前在應(yīng)用中所處的位置,及如何前往目的頁面。無論使用哪種適合你的應(yīng)用結(jié)構(gòu)的導(dǎo)航,最重要的是用戶訪問內(nèi)容的路徑要有邏輯、可預(yù)期和易于追溯。

UIKit 定義了一些標(biāo)準(zhǔn)的 UI 元素,以方便地構(gòu)建分層或扁平導(dǎo)航,還有一些元素可以構(gòu)建以內(nèi)容為中心的導(dǎo)航,例如電子書或者媒體觀看類應(yīng)用。游戲或者其他體驗(yàn)驅(qū)動(dòng)的應(yīng)用通常需要一些自定義的元素和行為。

使用導(dǎo)航欄(Navigation Bar)幫助用戶輕松訪問分層內(nèi)容。導(dǎo)航欄的標(biāo)題可以顯示用戶當(dāng)前所處的層級(jí),而后退按鈕可以回到上一層級(jí)。想要了解更多內(nèi)容,請(qǐng)查看 Navigation Bar.

使用標(biāo)簽欄(Tab Bar)顯示同類型的內(nèi)容或功能。標(biāo)簽欄很適合于扁平信息結(jié)構(gòu),可以讓用戶在分類之間隨意切換,而不用在意當(dāng)前所處的位置。想要了解更多內(nèi)容,請(qǐng)查看 Tab Bar.

在應(yīng)用中,如果每屏顯示的都是同類項(xiàng)或同類頁,可以使用頁面控件(Page Control)。頁面控件的優(yōu)點(diǎn)是可以直觀地告訴用戶有多少個(gè)項(xiàng)目或頁面,以及當(dāng)前所處位置。想要了解更多內(nèi)容,請(qǐng)查看 Page Control。

一般來說,最好能給用戶提供到達(dá)每一屏的唯一路徑。如果某屏內(nèi)容用戶需要在不同場(chǎng)景下查看,可以考慮使用臨時(shí)視圖,例如模態(tài)視圖、動(dòng)作菜單或警告框。想要了解更多,請(qǐng)查看 Modal View、Action SheetAlert

UIKit 同時(shí)還提供了以下相關(guān)控件:

分段控件讓用戶在一屏內(nèi)就可以查到不同分類的內(nèi)容,而不需要切換到其他屏幕。

盡管工具欄和導(dǎo)航欄或標(biāo)簽欄相似,但是工具欄不具導(dǎo)航作用。相反,工具欄為用戶提供了可以控制當(dāng)前屏幕內(nèi)容的控件。

(譯者注:上文提到的 Navigation Bar, Tab Bar, Page Control, Modal View, Action Sheet, Alert, Segmented Control 和 Toolbar 均處在 iOS Human Interface Guidelines 的第4章 UI Elements 部分,翻譯將在后續(xù)更新中放出,煩請(qǐng)各位耐心等候。若有需要,亦可先參考先前已翻譯的 iOS7 UI Elements 章節(jié):上,下。)

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)