新型應用程式

Windows 市集應用程式中的瀏覽要點

Rachel Appel

確保使用者可以快速、 輕鬆地訪問他們的希望，當他們想要的內容是任何現代應用程式的重要組成部分。 這意味著要走留下來直到它想要和不到硬反向選擇強制使用者導航。 這是一種 UI 設計技術，稱為"上鍍鉻的內容"。強制此設計范式的最佳方法是烘烤的直接進入內容導航。 這是容易做到在 Windows 應用商店的應用程式，它們遵循這個導航的設計原則。

Windows 應用商店 App 導航概述

在 Windows 應用商店的應用程式，開發人員烘烤導航到內容，創建光滑、 流動的使用者體驗，雖然他們費力的內容，使用這些導航模式之一：

• 分層
• 平面
• 拆分單頁應用程式 (SPA)

Visual Studio2012年支援所有三個導航模式，通過一套基本的應用程式範本：網格、 拆分、 導航 （僅適用于 HTML）。在 HTML 的應用程式，每個範本包含 navigator.js 檔與執行之間的頁面，以及管理後退按鈕的代碼導航代碼。在 XAML 應用程式、 導航內置的事件模型。

分層導航模式

關係資料使得分層導航偉大的候選人。這是因為通常你必須遍歷關係內容按特定的順序 — — 例如，在母版/詳細方案 — — 或不合情理。不過，這並不總是如此，，就是平的導航哪裡來發揮 （更多關於這不久）。儘管相關的資料可以是幾個層次深，以上三個級別直接投入的導航系統使得它極為困難對使用者、 可用性研究表明。經過仔細研究導航可用性，這三個導航級別組成的分層導航系統創建 Windows 設計語言團隊：

• 樞紐：這是資料包含在前面和中心主資料的開放階段。這通常是主控專案清單，如音樂演出者。從這個清單中，使用者可以深入到每一位演出者的具體細節。發行時，Visual Studio2013年 (目前在預覽） 將推出新的集線器範本創建健壯的導航方案。
• 科：這是一個水準兩視圖，其中包含使用者從集線器頁面中選擇的特定組的所有成員。節導航的一個示例會將流覽特定演出者的所有的相冊。
• 詳細資訊：這包括一個特定專案的基本細節 — — 例如，一個特定歌曲專輯中的或個別照片集合中的資訊。

CNN 在應用程式的上下文中顯示這些三種樣式的示例數位 1， 2 和 3，分別。

圖 1 集線器導航級別

圖 2 節導航級別

圖 3 詳細資訊導航級別

如果你仍然相信你需要更多級別的導航，請考慮使用內容過濾和排序除了您定期航行航行的傭工，例如語義縮放或下拉式功能表中或其他 UI 元件。我會更密切地看這些在本文後面的航標。

Visual Studio網格範本具有分層導航內置權的所有三個級別中。你需要做的全部是檢索資料並將其插入該範本為它工作。資料可以很簡單，作為 WinJS.Binding.List 或平原舊 CLR 物件 (POCO) 在 C# 應用程式，作為Visual Studio中的網格、 拆分和導航應用程式範本中使用相同的結構。

注意使用分層模式的應用程式的所有部分都包含後面的按鈕，這是在 Windows 應用商店的應用程式以及 Web 應用程式中導航的一個關鍵區段。有辦法出來並撤銷以前的導航命令可增強並簡化了 UX.

平板導航模式

體育在螢幕的頂部巡覽列、 平面導航應用程式只是顯示幾個個人的選擇，你直接帶到一些可能會或可能不相關的內容。圖 4 闡釋了一個偉大的例子，在天氣應用程式，在螢幕的頂部的選項卡。當您點擊或按一下其中一個，你直接轉到相關的頁面。平板導航非常適合非關聯式的內容。例如，天氣應用程式中的選項卡您帶到您的選擇，而不應用任何正式的結構無關頁。

圖 4 平面導航太氣 app

如果您確定您需要的分層導航深水準，開始與平面導航系統可以説明。使用集線器頁面頂部巡覽列。當使用者進行選擇時，app 應該定位到請求的地方。使用這種方法添加的只是一個級別的導航，所以您可能想要將納入航行傭工，以及。

Visual Studio中的空白範本是最有利於平面導航，雖然你可以添加任何專案類型以研究所平板導航頂部的巡覽列。

平板導航納入您的應用程式是添加 Windows 庫 NavBar JavaScript （WinJS） 的控制，新的控制，從 Windows 8.1 一樣容易。圖 5 在 HTML 中顯示了一個示例。

圖 5 使用 WinJS NavBar 控制項

<div id="NavBar" data-win-control="WinJS.UI.NavBar">
  <div id="GlobalNav" 
    data-win-control="WinJS.UI.NavBarContainer">
    <div data-win-control="WinJS.UI.NavBarCommand" 
     data-win-options="{
      label: 'Home',
      icon: 'url(../images/homeIcon.png)',
      location: '/html/home.html',
      split: false
    }">
    </div>
    <div data-win-control="WinJS.UI.NavBarCommand" 
     data-win-options="{
      label: 'Your apps',
      icon: WinJS.UI.AppBarIcon.favorite,
      location: '/html/yourapps.html',
      split: false
    }">
    </div>
  </div>
</div>

NavBar 控制項有 WinJS 只，所以若要在 XAML 中創建頂部的巡覽列，您必須代碼的應用程式欄和它的樣式顯示在頁面的頂部如本示例所示：

<Page.TopAppBar>
  <AppBar x:Name="topAppBar">
    <Grid>
      <StackPanel Orientation="Horizontal" 
            HorizontalAlignment="Right">
        <Button Style="{StaticResource SaveAppBarButtonStyle}"
          Click="Button_Click"/>
        <Button Style="{StaticResource UploadAppBarButtonStyle}"
          Click="Button_Click"/>
      </StackPanel>
    </Grid>
  </AppBar>
</Page.TopAppBar>

你可以有一個頂部巡覽列和標準底部的應用程式欄，並可以添加功能表、 下拉式功能表、 和其他航行的傭工都。

拆分/水療導航模式

就像它聽起來，水療中心的應用程式包含一頁為整個應用程式。 從技術上講，spa 水療中心是不是真的只是一個巨大的頁面 ； 相反，他們包括一個主頁面在 app 章節的內容和命令在運行時，動態載入，驅動的使用者活動。 在 Windows 應用商店用 JavaScript 生成的應用程式，您可以通過管理應用程式元件調用頁面片段實現水療中心的應用程式。

Visual Studio2012年中的拆分導航模板揭示 SPA 範本類似于網格範本 ； 然而，拆分範本包含兩個 — — 而不是三個 — — 水準的導航。 這意味著而不是集線器/節/詳細資訊拆分範本啟動一級部分，顯示清單的專案，和在使用者選擇之一，其詳細資訊載入到其他專案旁邊的頁面。

SPA HTML 應用程式中的導航是通過首先創建 <div> 或到其他的頁面可以載入自己的容器元素。 你可以使用 WinJS PageControlNavigator 控制項 （在 navigator.js 中定義） 來創建此容器：

<div id="contenthost" 
  data-win-control="Application.PageControlNavigator"
  data-win-options="{home: '/pages/home/home.html'}"></div>

一旦 PageControlNavigator （預設的網格、 拆分、 導航模板中） 的地方，從 \js\navigator.js 的代碼沒有載入到 PageControlNavigator 不用你端上修改的頁的所有工作。

SPA 模式這裡討論工程偉大的 Web 網站和其他應用程式類型 — — 當然也包括 Windows 應用商店的應用程式，— — 和水療 app 正迅速成為現代應用程式開發人員，包括那些在其他平臺上的最愛。

導航與語義變焦

你用過的功能表或連結似乎不幫你到你需要的資料的資料密集型應用程式嗎？ 這是語義的縮放是玩到哪裡來的。 使用語義縮放允許您重新調整用途和不同和更加可通航的方式視覺化資料。 這可能是或者看著資料從 13,000 腳概述 （這是 Windows 啟動頁面本身的工作方式），或者它可以被顯示的資料中聚合分組以便使用者可以找到他們在找什麼快速。 Netflix，如所示圖 6，充分利用語義的縮放，以表明電影類別。 語義縮放是特別有用，當你有大量的資料。

圖 6 Netflix 使得大量使用語義變焦

WinJS 和 XAML 的應用程式中的控制項一樣，您可以在 Windows 應用商店的應用程式中實現語義的縮放。 在 HTML/JavaScript 中，這裡是一個示例：

<div data-win-control="WinJS.UI.SemanticZoom">  
  <!—Original view of the data, for example, the list of all movies -->
  <!-- The zoomed-out version of the data, as shown in Figure 1.
-->
</div>

這裡是一個示例在 XAML 中 / C#:

<SemanticZoom>
  <SemanticZoom.ZoomedInView>
    <!—Original view of the data, for example, the list of all movies -->
  </SemanticZoom.ZoomedInView>
  <SemanticZoom.ZoomedOutView>
    <!-- The zoomed-out version of the data, as shown in Figure 1.
-->       
  </SemanticZoom.ZoomedOutView>
</SemanticZoom>

使用者可以通過使用 pinch 手勢，用兩個手指在觸控式螢幕設備上或用滑鼠來調用語義縮放 + 滾輪。 更多關於 SemanticZoom 控制項和其他 Windows 應用商店 app 控制項，在看到我的專欄，"掌握控制項和設置在 Windows 存儲應用程式建立與 JavaScript，" msdn.microsoft.com/magazine/dn296546。

通過排序、 篩選和搜索導航

當然，你可能會說篩選並不是真正的導航，但能夠對資料進行排序最無疑將説明使用者限制他們的選擇，找到所需的資料，用較少的麻煩了，是的導航點快速。 在非常小、 排序和篩選可以提供急需的標準應用程式導航增強功能。 在 Windows 應用商店的應用程式，篩選是一種手段以提高應用程式的主要導航計畫。 微調通過小的 UI 控制項的視覺化真的使 UX 精確和令人愉快的使用者。

在 Windows 應用商店用 JavaScript 生成的應用程式，您可以實現下拉清單進行排序和篩選通過使用標準的 HTML <select> 元素，像這樣：

<select>
  <option>Appels</option>
  <option>Bananas</option>
  <option>Grapes</option>
  <option>Oranges</option>
  <option>Pears</option>
</select>

XAML 應用程式在您調用相同的控制群組合框，並且它看起來類似于此代碼：

<ComboBox x:Name="Fruits" 
    SelectionChanged="Fruits_SelectionChanged" >
  <x:String>Appels</x:String>
  <x:String>Bananas</x:String>
  <x:String>Oranges</x:String>
  <x:String>Grapes</x:String>
  <x:String>Pears</x:String>
</ComboBox>

Windows 應用商店 app 本身使偉大的下拉清單來篩選出的應用程式使用。 導航到任何類別，你會發現篩檢程式的價格和相關性所示圖 7。 在存儲中搜索，甚至更多篩選器出現了。

圖 7 Windows 應用程式商店篩檢程式

最後，別忘了如何搜索是航海的一個重要部分。 每個人都使用搜索 — — 而不僅僅是通過流行的 Web 搜尋引擎。 人人都愛越來越具體內容直接發送到他們的指尖，因此請確保您的應用程式提供使用者此門到門服務。 搜索，設置的魅力，像是作業系統的一部分，因為在 Windows 應用商店的應用程式可以實現搜索通過一個合同。

其他導航傭工

水準滾動可能似乎不像是可以導航，但是它的一部分。 在 Windows 應用商店的應用程式，全景意味著您可以添加的資料完全獨立節所有入一，有組織、 單一的視圖。 這允許使用者滾動到不同的部分沒有實際導航本身，並常常是主食的新聞應用程式，其中的一些內容是文本和另一種是視頻。 結合全景與語義變焦，使用者可以直接跳到他們需要的資料的部分。 考慮如 CNN 和 ABC 新聞軟體，Bing 財務、 Netflix 和其他廣泛長水準滾動的應用程式。

除了這些導航傭工，使用 Windows 8 的內置功能進行一些活動將降低所需數量的應用程式中的導航元素。 例如，而不是構建到應用程式有關，設置或其他資訊的頁面 （傳統上位於 Windows 説明功能表，在以前版本的 Windows 中的程式），您可以設置魅力來顯示説明和 app 資訊的利用。 這意味著你不用供應尚未有一致的主題，各地所有 Windows 應用商店應用程式去設置和類似的另一個導航功能表和選項，以及使用者受益。

沒有更多的失落和困惑的使用者

堅如磐石的航行計畫是現代應用程式的一個重要方面 — — 和特別是 Windows 應用商店 app — — 發展。 無導航很容易使用，使用者將成為失去和混淆。 幸運的是，Windows 應用商店中 HTML 和 XAML 的應用程式的內置範本，説明您創建便於使用應用程式的使用者。

Rachel Appel 是具有超過 20 年的 IT 行業經驗的顧問、 作者、 導師和前微軟員工。她如Visual Studio活頂尖行業會議講話!，DevConnections，混合和更多。她的專長在於內開發解決方案，協調業務和技術側重于 Microsoft dev 堆疊和打開網頁。Appel 有關詳細資訊，請訪問她的網站 rachelappel.com。

感謝以下技術專家在微軟為本文的審閱：梅茨，RossHeise， 瑪麗亞康 和 Eric Schmidt