單層瀏覽，從開始到完成 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
如果您的 Windows 市集應用程式含有少量頁面且其資訊不是以階層方式組織時，請針對該應用程式使用單層瀏覽模式。 換句話說，就是當頁面、索引標籤及模式是邏輯上的對等項時。
您的應用程式應該讓使用者專注於應用程式內容的重要性，而不是在哪裡或者為什麼。如果應用程式的資訊密度不高、沒有太多頁面，或是沒有太多需要階層與結構的使用案例，那麼可以考慮使用單層結構，讓使用者能夠在頁面之間快速瀏覽。但是，如果應用程式提供各種不同的經驗，而且內容含有應該以慣用的序列或順序進行周遊的組織與結構，請參閱階層式瀏覽，從開始到完成。
我們將在此處說明建立使用 JavaScript 的 Windows 市集應用程式從開始到結束的所有程序，該應用程式將使用單層瀏覽模式，並符合所有基本的 Windows 市集認證需求。這包括：
- 影像資源，可在整個作業系統中公開您的應用程式
- 應用程式列，可支援瀏覽和下命令
- 設定，可提供隱私權、說明以及其他應用程式資訊
- 資料漫遊，可在工作階段與裝置同步處理您的應用程式
- 全球化：與世界各國、各地的客戶接軌
- 協助工具：不受使用者體能狀況和所使用輸入裝置的限制，協助使用者完成工作
以下是一個基本單層結構，旁邊是一個 Windows 市集應用程式中單層瀏覽模式的線框圖。
.png "單層瀏覽模式的基本實作") |
|
.png "範例應用程式的線框圖")
如同這些影像所示範，透過這個模式定義的單層內容結構需要能夠從每個其他頁面存取應用程式中的每一個頁面。使用者可以隨機向前和向後移動頁面，而沒有任何分支。
使用瀏覽應用程式列 (如上述線框圖中所示)，在單層瀏覽應用程式的頁面之間快速切換。這個列是可在使用者從上邊緣或下邊緣撥動 (按一下滑鼠右鍵、按鍵盤上的 Windows 標誌鍵+Z 或功能表鍵) 時，顯示在畫面頂端的暫時性元素。
以下為小算盤應用程式實作單層瀏覽模式的方式。請注意它使用的是持續性瀏覽列，而不是標準的暫時瀏覽列。這個範例示範 Windows 市集應用程式平台如何適應您應用程式獨有的特定案例。
.png "單層瀏覽範例：標準型計算機頁面") |
.png "單層瀏覽範例：工程型計算機頁面") |
.png "單層瀏覽範例：度量衡換算工具頁面") |
| 標準型計算機頁面 | 工程型計算機頁面 | 度量衡換算工具頁面 |
使用正確的瀏覽模式搭配適當的 UI 配置 (請參閱應用程式 UI，從開始到完成) 可以協助您排除因持續性控制項所造成的凌亂現象，並可讓使用者將焦點放在您應用程式中的重要內容上。
單層瀏覽範例
基本的單層瀏覽範例是您實作內容和親身體驗的起點。文中示範我們在這裡所討論的內容，也就是應用程式中符合所有基本 Windows 市集認證需求的原則、建議以及實作詳細資料。如您在下面所見，此範例包含兩個頁面：一個是介紹應用程式的首頁，另一個則是您可用來配置功能的頁面。 看看我們如何將指導付諸實行。如此，您將可以節省一些時間，利用這個範例做為您靈感的基礎！
.png "顯示第 1 頁的範例應用程式")
.png "顯示第 1 頁且含有瀏覽應用程式列的範例應用程式")
.png "顯示第 2 頁的範例應用程式")
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 "停止圖示") |
您已經完成開發工作，並準備好將應用程式送到市集！
|
想要更深入了解嗎？
深入了解您想要提供給使用者的體驗。
深入了解使用者在各方面的能力、障礙以及喜好。
深入了解如何處理不同的裝置、輸入法以及螢幕方向。
瀏覽完整的使用者經驗指導方針清單。