轉(zhuǎn)載地址: http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761500.aspx

在本文中

• 分層系統(tǒng)
• 平面系統(tǒng)
• 導(dǎo)航剖析
• 通過輕掃邊緣進(jìn)行導(dǎo)航
• 使用標(biāo)題菜單和部分標(biāo)簽進(jìn)行導(dǎo)航
• 使用篩選、透視、排序和查看進(jìn)行導(dǎo)航

了解如何組織 Metro 風(fēng)格應(yīng)用中的內(nèi)容，以便用戶可以輕松而直觀地進(jìn)行導(dǎo)航。使用正確的導(dǎo)航模式可幫助你限制永久位于屏幕上的控件，如選項(xiàng)卡。這樣用戶就可以將精力集中在當(dāng)前內(nèi)容上。

?

分層系統(tǒng)

Windows?8 中的大多數(shù) Metro 風(fēng)格應(yīng)用都將使用導(dǎo)航的分層系統(tǒng)。此模式比較常見并且為人們所熟悉，但是使用 Metro 風(fēng)格中心導(dǎo)航模式效果會(huì)更好。這種模式使得 Metro 應(yīng)用更快速流暢，同時(shí)易于使用。 此模式最適合具有大量內(nèi)容或許多不同的內(nèi)容部分供用戶瀏覽的應(yīng)用。

?

層次結(jié)構(gòu)中的各層

中心設(shè)計(jì)的實(shí)質(zhì)是將內(nèi)容分為不同的部分和不同級(jí)別的詳細(xì)信息。

中心頁 中心頁是用戶到應(yīng)用的入口點(diǎn)。此處的內(nèi)容以水平方式顯示在一個(gè)豐富的平移視圖中，這樣用戶一眼就能看見新增內(nèi)容和可用功能。 中心由各個(gè)內(nèi)容類別組成，每個(gè)類別映射到應(yīng)用的部分頁中。每個(gè)部分都應(yīng)該顯示內(nèi)容或功能。中心應(yīng)該提供許多可以看到的變化，吸引用戶，并將他們吸引到應(yīng)用的各個(gè)部分。 ? 部分頁 部分頁是應(yīng)用的第二個(gè)層級(jí)。此處的內(nèi)容可以采用任何形式顯示，這些形式必須能夠最好地表示該方案及該部分所包含的內(nèi)容。 部分頁由各個(gè)項(xiàng)目組成，每個(gè)項(xiàng)目都有它自己的詳細(xì)信息頁。部分頁還可以利用分組和全景風(fēng)格布局。 ? 詳細(xì)信息頁 詳細(xì)信息頁是應(yīng)用的第三個(gè)層級(jí)。此處顯示了各個(gè)項(xiàng)目的詳細(xì)信息，各項(xiàng)目的格式可能會(huì)根據(jù)內(nèi)容的特殊類型不同而有很大的不同。 詳細(xì)信息頁由項(xiàng)目詳細(xì)信息或功能組成。詳細(xì)信息頁可能包含許多信息，也可能包含一個(gè)單一對(duì)象，例如圖片或視頻。

?

平面系統(tǒng)

Windows?8 中的許多 Metro 風(fēng)格應(yīng)用都使用平面導(dǎo)航系統(tǒng)。此模式在游戲、瀏覽器或文檔創(chuàng)建應(yīng)用中較為常見，用戶可以在所有駐留在同一分層級(jí)別的頁面、選項(xiàng)卡或模式之間移動(dòng)。 這種模式最適合核心方案涉及少量頁面或選項(xiàng)卡之間的快速切換時(shí)。

?

內(nèi)容頁

平面系統(tǒng)在本質(zhì)上會(huì)將內(nèi)容分解為不同的頁。

導(dǎo)航欄 導(dǎo)航欄非常適用于在多個(gè)上下文之間執(zhí)行切換操作。示例包括選項(xiàng)卡、文檔以及消息或游戲會(huì)話。 導(dǎo)航欄是一個(gè)暫時(shí)元素，駐留在屏幕的頂部，并且當(dāng)用戶從屏幕的上邊緣或下邊緣輕掃時(shí)，導(dǎo)航欄可見。雖然導(dǎo)航欄中各項(xiàng)目的格式可能會(huì)不同，但是一個(gè)典型的處理方法是使用一個(gè)簡單的縮略圖。 ? 切換 與分層系統(tǒng)不同，在平面系統(tǒng)中通常沒有永久性的后退按鈕或?qū)Ш蕉褩?#xff0c;因此在頁面之間進(jìn)行移動(dòng)通常通過內(nèi)容或?qū)Ш綑谥械闹苯渔溄觼硗瓿伞?/p> 你可以選擇在導(dǎo)航欄中包括其他功能，例如添加一個(gè)“+”按鈕以創(chuàng)建一個(gè)新的選項(xiàng)卡、頁面或會(huì)話。

?

導(dǎo)航剖析

下面顯示了一個(gè)應(yīng)用中的各部分之間、層次結(jié)構(gòu)中的不同層之間和一個(gè)應(yīng)用頁面內(nèi)的導(dǎo)航剖析。

頁眉和“后退”按鈕

頁眉可對(duì)當(dāng)前頁面進(jìn)行標(biāo)記，有助于查找頁面。使用“后退”按鈕可以快速返回你所在的位置。

中心頁

中心頁將應(yīng)用程序不同區(qū)域中的信息顯示在一個(gè)屏幕上。這樣用戶就可以鳥瞰該應(yīng)用中可用的所有內(nèi)容。

內(nèi)容部分，即類別

可以設(shè)置內(nèi)容部分的格式以便最佳地顯示其推銷的功能或項(xiàng)目。

語義縮放：在層次結(jié)構(gòu)中的各層之間導(dǎo)航

語義縮放可以快速順暢地掃描和四處移動(dòng)視圖，尤其是當(dāng)視圖為很長的平移列表時(shí)。

導(dǎo)航欄

使用導(dǎo)航欄可以暫時(shí)訪問導(dǎo)航控件或應(yīng)用的其他區(qū)域。

頁眉菜單

頁眉菜單可從應(yīng)用中的任意位置獲取，使用頁眉菜單用戶可以快速從應(yīng)用的一個(gè)部分跳轉(zhuǎn)到另一個(gè)部分

主頁鏈接

主頁鏈接位于頁眉菜單的底部，通過它可以快速返回應(yīng)用的根目錄。

應(yīng)用欄

使用應(yīng)用欄可以暫時(shí)訪問與特殊視圖相關(guān)的命令。

查看/排序/篩選

這些命令用于更改在特定視圖中內(nèi)容顯示的方式。駐留這些命令的最佳場所是應(yīng)用欄。

邊緣

從屏幕邊緣輕掃可顯示應(yīng)用欄、導(dǎo)航欄和超級(jí)按鈕。

通過輕掃邊緣進(jìn)行導(dǎo)航

用戶可通過從一邊輕掃一個(gè)手指或拇指，在應(yīng)用內(nèi)和系統(tǒng)中進(jìn)行導(dǎo)航。為了有效地使用 Metro 風(fēng)格應(yīng)用，用戶需要了解以下每個(gè)邊緣輕掃執(zhí)行什么操作。 從屏幕的下邊緣或上邊緣輕掃可顯示導(dǎo)航欄和命令欄。 從屏幕右邊緣輕掃可顯示包含系統(tǒng)命令的超級(jí)按鈕。 從左邊緣輕掃可循環(huán)切換當(dāng)前運(yùn)行的應(yīng)用。 從屏幕頂部邊緣向底部邊緣滑動(dòng)可關(guān)閉當(dāng)前應(yīng)用。 從頂部邊緣向下以及向左邊緣或向右邊緣滑動(dòng)會(huì)將當(dāng)前應(yīng)用貼靠到屏幕一側(cè)。

?

使用標(biāo)題菜單和部分標(biāo)簽進(jìn)行導(dǎo)航

我們將使用一個(gè)名為“Food with Friends”的示例應(yīng)用，演示使用后退按鈕、標(biāo)題菜單以及內(nèi)容部分導(dǎo)航 Metro 風(fēng)格應(yīng)用的模式。

? ? ? 標(biāo)題菜單包含一個(gè)指向每個(gè)部分頁面的鏈接（第 2 級(jí)）以及一個(gè)返回中心的鏈接（第 1 級(jí)），從而用戶能夠快速在應(yīng)用周圍移動(dòng)。該菜單顯示在每個(gè)級(jí)別以及應(yīng)用的每個(gè)頁面上，用戶可以使用該菜單可靠有效地去往所需的位置。

?

? ? ? 用戶可以點(diǎn)擊部分標(biāo)簽以進(jìn)入該部分的對(duì)應(yīng)頁面。提供視覺提示，如“查看全部(x)”，以指示用戶中心顯示了此部分中的更多項(xiàng)目。使用此模式不需要使用磁貼空間或在內(nèi)容中放置鏈接的位置。

?

使用此模式，這是 Food with Friends 示例的導(dǎo)航插圖的外觀。這個(gè)簡化的插圖僅顯示了導(dǎo)航元素的規(guī)范示例，用于表示交互的所有內(nèi)容。

使用篩選、透視、排序和查看進(jìn)行導(dǎo)航

應(yīng)用導(dǎo)航的另一個(gè)部分就是確定何時(shí)、何地以及如何讓用戶更多地控制他們體驗(yàn)內(nèi)容的方式。篩選、透視、排序和查看切換程序都是應(yīng)用設(shè)計(jì)時(shí)需要考慮的內(nèi)容。

術(shù)語定義示例

篩選	根據(jù)某些條件，刪除或隱藏?cái)?shù)據(jù)集中的內(nèi)容。	查找要播放的游戲時(shí)，可能選擇只查看類別為“冒險(xiǎn)”的那些游戲。
透視	根據(jù)某些條件，重新組織數(shù)據(jù)集中的內(nèi)容。	查看音樂集時(shí)，可能選擇按藝術(shù)家、唱片或流派對(duì)歌曲進(jìn)行組織。
排序	更改數(shù)據(jù)集中顯示內(nèi)容的順序。	在新聞應(yīng)用中瀏覽要閱讀的文檔時(shí)，可能選擇查看第一個(gè)列出的最新文檔。
查看	更改顯示內(nèi)容的風(fēng)格或方法。	在餐館查找應(yīng)用中瀏覽吃飯的地點(diǎn)時(shí)，可能選擇在地圖上查看餐館，而不是以列表方式查看。

?

On-canvas

當(dāng)查找項(xiàng)為主要任務(wù)（如在集合或搜索結(jié)果頁面中）時(shí)，使用 on-canvas 控件進(jìn)行篩選、透視或排序。

如果應(yīng)用的重點(diǎn)是瀏覽內(nèi)容（如雜志或購物應(yīng)用），則控件應(yīng)該進(jìn)入應(yīng)用欄。

頁面篩選和排序

若要在集合視圖中篩選和排序內(nèi)容，則可以將篩選和排序命令放置在標(biāo)題和內(nèi)容之間的行中。在以下示例中，篩選視圖以僅顯示 TV節(jié)目，可按系列進(jìn)行排序和分組。

在這個(gè)商店應(yīng)用的示例中，下拉選擇控件篩選當(dāng)前視圖的內(nèi)容。如菜單所示，當(dāng)前活動(dòng)的篩選器在下拉列表中顯示為已選擇。

?

導(dǎo)航欄

導(dǎo)航欄主要用于導(dǎo)航使用平面導(dǎo)航模式的應(yīng)用的部分或頁面。也可以與分層模式結(jié)合使用，代替標(biāo)題菜單，作為一種提供全局導(dǎo)航控件的方式。導(dǎo)航欄應(yīng)該顯示在應(yīng)用的每個(gè)頁面上以及所有級(jí)別上，目的是為用戶提供一種便利的確定性導(dǎo)航方法。

在此金融應(yīng)用示例中，應(yīng)用的中心 (L1) 促銷部分（標(biāo)題、關(guān)注列表）進(jìn)入中心，并且其中包含指向它們的部分標(biāo)題鏈接。在部分級(jí)別 (L2)，當(dāng)通過輕掃上邊緣或下邊緣來調(diào)用導(dǎo)航欄時(shí)，用戶可以訪問應(yīng)用的根部分以及所有其他部分。

應(yīng)用欄視圖切換

應(yīng)用欄主要用作命令界面，但也可以用于改變查看內(nèi)容的方式。切換視圖、透視、篩選以及排序全都可以使用應(yīng)用欄完成。請(qǐng)勿使用應(yīng)用欄從應(yīng)用中的一個(gè)位置導(dǎo)航到另一個(gè)位置。所有應(yīng)用欄項(xiàng)都應(yīng)該對(duì)當(dāng)前視圖中的內(nèi)容進(jìn)行操作。

在此日歷應(yīng)用示例中，視圖默認(rèn)值為月視圖，并針對(duì)該視圖對(duì)此應(yīng)用進(jìn)行了優(yōu)化。選擇其他日歷視圖的命令位于應(yīng)用欄中，可以通過從上邊緣或下邊緣輕掃來進(jìn)行訪問。其他命令，如生成新約會(huì)，也可能會(huì)出現(xiàn)在此欄中。

在 Food with Friends 示例的“所有餐館”頁面中，查看項(xiàng)的選項(xiàng)以列表或地圖的形式提供，并且根據(jù)某些條件（如花銷、位置和等級(jí)）對(duì)視圖進(jìn)行篩選和排序。此處，篩選選項(xiàng)顯示為菜單彈出窗口中的控件。

總結(jié)

以上是生活随笔為你收集整理的Metro 风格应用的导航设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。