轉載地址: http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761500.aspx

在本文中

• 分層系統
• 平面系統
• 導航剖析
• 通過輕掃邊緣進行導航
• 使用標題菜單和部分標簽進行導航
• 使用篩選、透視、排序和查看進行導航

了解如何組織 Metro 風格應用中的內容，以便用戶可以輕松而直觀地進行導航。使用正確的導航模式可幫助你限制永久位于屏幕上的控件，如選項卡。這樣用戶就可以將精力集中在當前內容上。

?

分層系統

Windows?8 中的大多數 Metro 風格應用都將使用導航的分層系統。此模式比較常見并且為人們所熟悉，但是使用 Metro 風格中心導航模式效果會更好。這種模式使得 Metro 應用更快速流暢，同時易于使用。 此模式最適合具有大量內容或許多不同的內容部分供用戶瀏覽的應用。

?

層次結構中的各層

中心設計的實質是將內容分為不同的部分和不同級別的詳細信息。

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

?

平面系統

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

?

內容頁

平面系統在本質上會將內容分解為不同的頁。

導航欄 導航欄非常適用于在多個上下文之間執行切換操作。示例包括選項卡、文檔以及消息或游戲會話。 導航欄是一個暫時元素，駐留在屏幕的頂部，并且當用戶從屏幕的上邊緣或下邊緣輕掃時，導航欄可見。雖然導航欄中各項目的格式可能會不同，但是一個典型的處理方法是使用一個簡單的縮略圖。 ? 切換 與分層系統不同，在平面系統中通常沒有永久性的后退按鈕或導航堆棧，因此在頁面之間進行移動通常通過內容或導航欄中的直接鏈接來完成。 你可以選擇在導航欄中包括其他功能，例如添加一個“+”按鈕以創建一個新的選項卡、頁面或會話。

?

導航剖析

下面顯示了一個應用中的各部分之間、層次結構中的不同層之間和一個應用頁面內的導航剖析。

頁眉和“后退”按鈕

頁眉可對當前頁面進行標記，有助于查找頁面。使用“后退”按鈕可以快速返回你所在的位置。

中心頁

中心頁將應用程序不同區域中的信息顯示在一個屏幕上。這樣用戶就可以鳥瞰該應用中可用的所有內容。

內容部分，即類別

可以設置內容部分的格式以便最佳地顯示其推銷的功能或項目。

語義縮放：在層次結構中的各層之間導航

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

導航欄

使用導航欄可以暫時訪問導航控件或應用的其他區域。

頁眉菜單

頁眉菜單可從應用中的任意位置獲取，使用頁眉菜單用戶可以快速從應用的一個部分跳轉到另一個部分

主頁鏈接

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

應用欄

使用應用欄可以暫時訪問與特殊視圖相關的命令。

查看/排序/篩選

這些命令用于更改在特定視圖中內容顯示的方式。駐留這些命令的最佳場所是應用欄。

邊緣

從屏幕邊緣輕掃可顯示應用欄、導航欄和超級按鈕。

通過輕掃邊緣進行導航

用戶可通過從一邊輕掃一個手指或拇指，在應用內和系統中進行導航。為了有效地使用 Metro 風格應用，用戶需要了解以下每個邊緣輕掃執行什么操作。 從屏幕的下邊緣或上邊緣輕掃可顯示導航欄和命令欄。 從屏幕右邊緣輕掃可顯示包含系統命令的超級按鈕。 從左邊緣輕掃可循環切換當前運行的應用。 從屏幕頂部邊緣向底部邊緣滑動可關閉當前應用。 從頂部邊緣向下以及向左邊緣或向右邊緣滑動會將當前應用貼靠到屏幕一側。

?

使用標題菜單和部分標簽進行導航

我們將使用一個名為“Food with Friends”的示例應用，演示使用后退按鈕、標題菜單以及內容部分導航 Metro 風格應用的模式。

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

?

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

?

使用此模式，這是 Food with Friends 示例的導航插圖的外觀。這個簡化的插圖僅顯示了導航元素的規范示例，用于表示交互的所有內容。

使用篩選、透視、排序和查看進行導航

應用導航的另一個部分就是確定何時、何地以及如何讓用戶更多地控制他們體驗內容的方式。篩選、透視、排序和查看切換程序都是應用設計時需要考慮的內容。

術語定義示例

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

?

On-canvas

當查找項為主要任務（如在集合或搜索結果頁面中）時，使用 on-canvas 控件進行篩選、透視或排序。

如果應用的重點是瀏覽內容（如雜志或購物應用），則控件應該進入應用欄。

頁面篩選和排序

若要在集合視圖中篩選和排序內容，則可以將篩選和排序命令放置在標題和內容之間的行中。在以下示例中，篩選視圖以僅顯示 TV節目，可按系列進行排序和分組。

在這個商店應用的示例中，下拉選擇控件篩選當前視圖的內容。如菜單所示，當前活動的篩選器在下拉列表中顯示為已選擇。

?

導航欄

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

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

應用欄視圖切換

應用欄主要用作命令界面，但也可以用于改變查看內容的方式。切換視圖、透視、篩選以及排序全都可以使用應用欄完成。請勿使用應用欄從應用中的一個位置導航到另一個位置。所有應用欄項都應該對當前視圖中的內容進行操作。

在此日歷應用示例中，視圖默認值為月視圖，并針對該視圖對此應用進行了優化。選擇其他日歷視圖的命令位于應用欄中，可以通過從上邊緣或下邊緣輕掃來進行訪問。其他命令，如生成新約會，也可能會出現在此欄中。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。