階層式瀏覽，從開始到完成 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
當 Windows 市集應用程式的內容可區分為不同但相關、且含各種層級之詳細資料的區段或類別時，請讓該應用程式使用階層式瀏覽模式。 這是一個可與關聯式資訊架構順暢搭配運作的常見且熟悉的模式，會以慣用的順序周遊。
您選擇的瀏覽模式會視應用程式支援的狀況而定。如果您的應用程式提供含組織和結構的多樣體驗與內容，階層式模式可能最為適合。不過，如果您的應用程式並沒有大量的資訊密度或組織階層，請參閱單層瀏覽，從開始到完成，這是用來讓使用者快速瀏覽一小組相關的頁面。
我們將在此處說明建立使用 JavaScript 的 Windows 市集應用程式從開始到結束的所有程序，該應用程式將使用階層式瀏覽模式，並符合所有基本的 Windows 市集認證需求。這包括：
- 影像資源：將您的應用程式公開在整個作業系統中。
- 應用程式列：支援瀏覽和下命令。
- 設定：提供隱私權、說明以及其他應用程式資訊。
- 資料漫遊：可跨工作階段與裝置同步處理您的應用程式。
- 全球化：與世界各國、各地的客戶接軌。
- 協助工具：不受使用者體能狀況和所使用輸入裝置的限制，協助使用者完成工作。
以下是一個基本階層式結構，旁邊是一個 Windows 市集應用程式中階層式瀏覽模式的線框圖。
.png "階層式瀏覽模式的基本實作") |
|
.png "Windows 市集應用程式中的中樞、區段以及詳細資料頁面")
適用於 JavaScript 的 Windows Library Hub 控制項是專為這類型的應用程式所設計。這個控制項使用中樞、區段以及項目/詳細資料頁面，以深入淺出的方式，協助您將各種資訊繫結到直覺式且一致的結構中。
| 頁面 | 說明 |
|---|---|
中樞 |
中樞是您應用程式的進入頁面，也是您預覽應用程式完整領域的頁面。它陳列了一或多個區段的內容，每個內容都有一個與該區段關聯的小項目範例。您可以將各種類別 (視應用程式或使用者喜好設定而定) 套用至顯示區段和項目的控制項。一般而言，每個項目都會顯示其內容的預覽、摘要或抽象概念。 使用者可以從這個頁面瀏覽至某個區段或項目詳細資料頁面。 建議您以豐富的視覺效果設計中樞，以便吸引使用者注意力並將他們引導到應用程式的各個不同區域。 |
區段 |
區段頁面是應用程式的第二層，這個頁面會顯示與區段關聯之項目的預覽、摘要或抽象概念。這個頁面上的項目可以用最能呈現區段狀況和內容的任何形式來顯示。 一般而言，這個頁面上顯示的項目比中樞頁面上顯示的項目多。每個項目皆連結到一個詳細資料頁面。 |
項目/詳細資料 |
詳細資料頁面是應用程式的第三層，這個頁面會針對在中樞或區段頁面上選取的特定項目，顯示其全部或大部分的內容或功能。有些應用程式 (例如摘要讀取程式) 在內容太大而無法在應用程式內顯示時，可能會連結到來源文章和網站。 詳細資料頁面可以包含許多資訊、單一物件 (例如圖片或視訊) 或其他應用程式功能。 |
瀏覽列一般用於單層瀏覽應用程式中，但對於周遊階層式應用程式的內容也相當有用。這個列是可在使用者從上邊緣或下邊緣撥動 (按一下滑鼠右鍵、按鍵盤上的 Windows 標誌鍵+Z 或功能表鍵) 時，顯示在畫面頂端的暫時性元素。
請嘗試建置一個不需要瀏覽列的應用程式，讓內容結構本身以直覺的方式帶領使用者遍覽應用程式。若無法這樣做，請在中樞頁面上使用瀏覽列取代區段標頭，並提供全域瀏覽控制項。它應出現在應用程式的每個頁面和所有層級。
注意 請確保使用者可以用他們瀏覽至目前頁面的相反順序瀏覽。WinJS 針對此目的提供 BackButton 以及 PageControl。
使用正確的瀏覽模式搭配適當的 UI 配置可以協助您排除因持續性控制項所造成的凌亂現象，並可讓使用者將焦點放在您應用程式中的重要內容上。
階層式瀏覽範例
基本的階層式瀏覽範例是您實作內容和親身體驗的起點。文中示範我們在這裡所討論的內容，也就是應用程式中符合所有基本 Windows 市集認證需求的原則、建議以及實作詳細資料。如您所見，下面的範例包含一個附帶各種區段的中樞頁面、一個資料導向的區段頁面 ([區段 3])，以及該區段的項目詳細資料頁面。請視需要以額外的頁面擴充應用程式。 看看我們如何將指導付諸實行。如此，您將可以節省一些時間，利用這個範例做為您靈感的基礎！
.png "顯示中樞頁面的範例應用程式")
.png "顯示區段頁面的範例應用程式")
.png "顯示項目頁面的範例應用程式")
Windows 市集規範
將 Windows 市集應用程式散佈給客戶，並將這些客戶盡可能連接到更多絕佳應用程式，透過 Windows 市集是主要的方法。市集中的應用程式必須遵守 Windows 與 Windows Phone 市集原則。
隨附範例實作了這裡討論的功能，以及所有 Windows 市集應用程式通過認證所需的基本需求，包括：
- 啟動顯示畫面和磚影像
- 完全支援觸控、滑鼠以及鍵盤輸入
- 支援各種視窗大小、裝置方向以及顯示大小
- 漫遊和工作階段狀態
- 針對全球化、當地語系化以及協助工具進行最佳化
開發您的應用程式時，請考量 Windows 與 Windows Phone 市集原則，並嘗試避免常見的認證失敗。
實作瀏覽
.jpg "步驟圖示") |
在 Visual Studio 中，開啟階層式瀏覽範例或開始使用 [中樞應用程式] 專案範本。如有需要，您可以檢閱以下範本概觀：
|
.jpg "步驟圖示") |
深入說明 PageControl 物件如何支援單頁瀏覽。新增頁面控制項說明實作這類控制項的各種方法。 在範例中尋找：PageControl 定義於檔案 \js\navigator.js 中，並用於 \pages\home\home.js 和 \pages\page2\page2.js 中。 |
新增 UI 與影像
在應用程式資訊清單的 [應用程式 UI] 索引標籤上，為您的應用程式指定影像資源 (像是啟動顯示畫面與磚影像之類的視覺資產)。若要這麼做，請從 [方案總管]**** 開啟 package.appxmanifest。 請參閱使用資訊清單設計工具。
注意 隨附應用程式包含符合 Windows 市集需求的預留位置影像。基於示範目的，範本隨附了額外的影像，這些影像支援含有各種對比設定和法文 (fr-FR) 當地語系化的協助工具。大多數影像都提供多種解析度。
.jpg "步驟圖示") |
指定能提供最佳體驗的影像。納入適用於不同螢幕解析度的縮放版本。 應用程式必須要有一組基本的影像，才能通過市集認證。
|
|
請依照這些指示來命名和組織資料夾中的檔案資源。 |
|
為您的應用程式建立影像資源，將這些影像資源新增到您的專案中，然後在應用程式資訊清單中識別它們。 |
|
依需求向使用者呈現瀏覽、命令以及工具。應用程式列會顯示與使用者內容 (通常是目前的頁面或目前的選取範圍) 相關的命令。請視需要自訂。如需更詳細的範例，請參閱 HTML AppBar 控制項範例。 |
|
提供途徑存取與使用者的目前內容相關的所有設定。請視需要自訂。請參閱應用程式設定範例。隨附應用程式同時包含可從 [設定] 常用鍵存取的隱私權原則和說明內容。 |
漫遊應用程式資料
|
管理應用程式資料，包括執行階段狀態、使用者喜好設定以及其他設定。在應用程式執行時，會建立、讀取、更新以及刪除這項資料。 |
|
讓您應用程式的資料與狀態在多個裝置之間保持同步，並可減少使用者在其他裝置上進行的安裝工作和重複的工作。Windows 會在資料更新時將資料複寫到雲端，然後將資料同步到安裝應用程式的其他裝置上。 |
全球化
與全球化保持一致，並確定螢幕擷取畫面展現的是您已當地語系化的應用程式。請記住，語言不一定與市場相應。
|
設計 Windows 市集應用程式，讓應用程式資源能夠獨立維護和當地語系化，還能夠自訂不同的縮放係數、協助工具選項及其他使用者與電腦內容。請參閱應用程式資源和當地語系化範例。 |
|
將應用程式資料清單中所述的應用程式顯示名稱、描述以及其他識別功能當地語系化。 |
|
因應其他語言、市場、文化特性以及區域的需求調整您的軟體。 |
支援協助工具
除非您已經特別針對協助工具案例設計並測試您的應用程式，否則請勿將該應用程式宣告為無障礙應用程式。
|
探索適用於 Windows 8 的 Windows 軟體開發套件 (SDK) 隨附的協助工具測試工具，這些工具可協助您檢查應用程式的協助工具。 |
|
在 Windows 市集中將您的應用程式宣告為無障礙應用程式 如果您的應用程式已通過協助工具測試，請在 [銷售詳細資料] 頁面上選取 [協助工具] 核取方塊來指明此點。 |
總結
.jpg "市集需求圖示") |
執行 Windows 應用程式認證套件來協助確保應用程式符合 Windows 市集需求。請在每次為應用程式新增主要功能之後執行這個動作。 |
.jpg "停止圖示") |
您已經完成開發工作，並準備好將應用程式送到市集！
|
想要更深入了解嗎？
深入了解您想要提供給使用者的體驗。
深入了解使用者在各方面的能力、障礙以及喜好。
深入了解如何處理不同的裝置、輸入法以及螢幕方向。
瀏覽完整的使用者經驗指導方針清單。