Language: HTML | XAML

階層式瀏覽,從開始到完成 (HTML)

Applies to Windows only

當 Windows 市集應用程式的內容可區分為不同但相關、且含各種層級之詳細資料的區段或類別時,請讓該應用程式使用階層式瀏覽模式。 這是一個可與關聯式資訊架構順暢搭配運作的常見且熟悉的模式,會以慣用的順序周遊。

您選擇的瀏覽模式會視應用程式支援的狀況而定。如果您的應用程式提供含組織和結構的多樣體驗與內容,階層式模式可能最為適合。不過,如果您的應用程式並沒有大量的資訊密度或組織階層,請參閱單層瀏覽,從開始到完成,這是用來讓使用者快速瀏覽一小組相關的頁面。

我們將在此處說明建立使用 JavaScript 的 Windows 市集應用程式從開始到結束的所有程序,該應用程式將使用階層式瀏覽模式,並符合所有基本的 Windows 市集認證需求。這包括:

  • 影像資源:將您的應用程式公開在整個作業系統中。
  • 應用程式列:支援瀏覽和下命令。
  • 資料漫遊:將您的應用程式跨工作階段和裝置進行同步。
  • 設定:提供隱私權、說明以及其他應用程式資訊。
  • 全球化:與世界各國各地的客戶接軌。
  • 協助工具:不受使用者體能狀況和所使用輸入裝置的限制,協助使用者完成工作。

這裡的指導方針、工作以及範例程式碼是專門針對使用 JavaScript 開發 Windows 市集應用程式。針對使用 C++、C# 或 Visual Basic 版本的 Windows 市集應用程式,請參閱階層式瀏覽,從開始到完成

以下是一個基本階層式結構,旁邊是一個 Windows 市集應用程式中階層式瀏覽模式的線框圖。

階層式瀏覽模式的基本實作

Windows 市集應用程式中的中樞、區段以及詳細資料頁面

 

適用於 JavaScript 的 Windows Library Hub 控制項是專為這類型的應用程式所設計。這個控制項使用中樞、區段以及項目/詳細資料頁面,以深入淺出的方式,協助您將各種資訊繫結到直覺式且一致的結構中。

頁面說明

中樞

中樞是您應用程式的進入頁面,也是您預覽應用程式完整領域的頁面。它陳列了一或多個區段的內容,每個內容都有一個與該區段關聯的小項目範例。您可以將各種類別 (視應用程式或使用者喜好設定而定) 套用至顯示區段和項目的控制項。一般而言,每個項目都會顯示其內容的預覽、摘要或抽象概念。

使用者可以從這個頁面瀏覽至某個區段或項目詳細資料頁面。

建議您以豐富的視覺效果設計中樞,以便吸引使用者注意力並將他們引導到應用程式的各個不同區域。

區段

區段頁面是應用程式的第二層,這個頁面會顯示與區段關聯之項目的預覽、摘要或抽象概念。這個頁面上的項目可以用最能呈現區段狀況和內容的任何形式來顯示。

一般而言,這個頁面上顯示的項目比中樞頁面上顯示的項目多。每個項目皆連結到一個詳細資料頁面。

項目/詳細資料

詳細資料頁面是應用程式的第三層,這個頁面會針對在中樞或區段頁面上選取的特定項目,顯示其全部或大部分的內容或功能。有些應用程式 (例如摘要讀取程式) 在內容太大而無法在應用程式內顯示時,可能會連結到來源文章和網站。

詳細資料頁面可以包含許多資訊、單一物件 (例如圖片或視訊) 或其他應用程式功能。

 

瀏覽列一般用於單層瀏覽應用程式中,但對於周遊階層式應用程式的內容也相當有用。這個列是可在使用者從上邊緣或下邊緣撥動 (按一下滑鼠右鍵、按鍵盤上的 Windows 標誌鍵+Z 或功能表鍵) 時,顯示在畫面頂端的暫時性元素。

請嘗試建置一個不需要瀏覽列的應用程式,讓內容結構本身以直覺的方式帶領使用者遍覽應用程式。若無法這樣做,請在中樞頁面上使用瀏覽列取代區段標頭,並提供全域瀏覽控制項。它應出現在應用程式的每個頁面和所有層級。

附註  請確保使用者可以用他們瀏覽至目前頁面的相反順序瀏覽。WinJS 針對此目的提供 BackButton 以及 PageControl

使用正確的瀏覽模式搭配適當的 UI 配置可以協助您排除因持續性控制項所造成的凌亂現象,並可讓使用者將焦點放在您應用程式中的重要內容上。

先決條件

如果您是使用 JavaScript 開發 Windows 市集應用程式的新手,請仔細閱讀這些主題以熟悉這裡討論的技術。

階層式瀏覽範例

除了我們在下方參考的主題中所含的範例和程式碼片段之外,我們還開發了階層式瀏覽範例。這個 Windows 市集應用程式範例示範了我們在這裡所討論的內容,也就是在符合所有基本 Windows 市集認證需求之應用程式中的原則、建議以及實作詳細資料。

看看我們如何將指導付諸實行。如此,您將可以節省一些時間,利用這個範例做為您靈感的基礎!

以下是範例的簡短描述。

在這個範例中,我們提供了一個符合 Windows 市集認證規範的殼層或範本,可讓您依需求進行自訂。這是一個實作您的內容和親身體驗的起點。

以下是來自範例應用程式的螢幕擷取畫面,當中顯示範例的基本功能。它包含了一個附帶各種區段的中樞頁面、一個資料導向的區段頁面 ([區段 3]),以及該區段的項目詳細資料頁面。請視需要以額外的頁面擴充應用程式。

顯示中樞頁面的範例應用程式

顯示區段頁面的範例應用程式

顯示項目頁面的範例應用程式

目前,這裡有一個概略的工作大綱,可協助您建置一個依循使用階層式瀏覽模型建立 Windows 市集應用程式之最佳做法的基本應用程式。我們涵蓋了瀏覽詳細資料,以及因應市集規範所需的最基本功能。每個工作皆連結到含有更多詳細資料的對應主題。此外,我們也在適當的地方指出隨附應用程式中相關的程式碼。

如果您是 Windows 市集應用程式開發的新手,或是不熟悉市集規範的各個方面,建議您檢閱每個步驟。您會發現,相關的詳細資料都已分組歸類。

Windows 市集規範

將 Windows 市集應用程式散佈給客戶,並將這些客戶盡可能連接到更多絕佳應用程式,透過 Windows 市集是主要的方法。Windows 市集有嚴密的管理系統,應用程式必須經過相容性和內容的認證。

隨附範例實作了這裡討論的功能,以及所有 Windows 市集應用程式通過認證所需的基本需求,包括:

  • 啟動顯示畫面和磚影像
  • 完全支援觸控、滑鼠以及鍵盤輸入
  • 支援各種視窗大小、裝置方向以及顯示大小
  • 漫遊和工作階段狀態
  • [描述] 頁面和 Windows 設定常用鍵中的隱私權聲明
  • 針對全球化、當地語系化以及協助工具進行最佳化

以下一般指標可協助指導您並將您的小應用程式 (或不是那麼小的應用程式) 發佈到市場上。

開始圖示

註冊

如果您還沒有 Microsoft 帳戶和 Windows 市集開發人員帳戶,請先申請帳戶。您必須要有這兩個帳戶,才能將您的應用程式發佈到 Windows 市集中。

開發應用程式時,請考量 Windows 8 應用程式認證需求,並嘗試避免常見的認證失敗

步驟圖示

建立您的應用程式

請依照這裡的步驟建立您自己的單層瀏覽應用程式。您可以從使用隨附的單層瀏覽模式範本開始,也可以在 Microsoft Visual Studio 中建立一個中樞應用程式 Windows 市集專案。

步驟圖示

在市場上發佈您的應用程式

設定好您的帳戶並建置應用程式之後,將應用程式發佈到 Windows 市集中。

送出應用程式之前,先正確設定應用程式的目標使用者。

開始發佈程序

使用透過 Windows 市集提供的促銷工具來協助客戶發現您的應用程式

使用遙測資料來分析使用狀況資料和改善應用程式品質與效能

 

現在,我們將深入討論如何在 Windows 市集應用程式中,實作適用於階層式瀏覽模式的 UI 和功能。

隨附範例實作了下列所有項目,但為了繼續進行後續階段,我們將不會一一演練這裡的程式碼。每個步驟都有一個"在範例中尋找"的對外呼叫,可協助您快速尋找程式碼。

這些詳細資料當中有些可能並不適用於您的應用程式。請挑選您適用的詳細資料。

瀏覽概念

在掌握了將應用程式發佈到市場上的基本知識之後,現在可以檢閱 Windows 市集應用程式常用且以範本形式包含在 Microsoft Visual Studio 2013 中的各種瀏覽模式。這些分別是:

  • 單層瀏覽 (單層瀏覽模式中所討論)
  • 階層式瀏覽 (這裡所討論)
  • 分割瀏覽
步驟圖示

瀏覽模式

為您的應用程式及其內容選擇最佳的瀏覽模式。

我們使用階層式瀏覽模式隨附範例來示範這裡討論的概念,因此請下載該範例並進行試驗。

在您確認階層式瀏覽模式是最適合您應用程式的結構之後,請繼續依照這些步驟進行,或是直接進入主題並使用該範例做為設計和開發您自己應用程式時的範本。

步驟圖示

靈感

透過這些案例研究和概念書籍中的瀏覽範例獲得靈感啟發。

 

瀏覽實作

步驟圖示

這個主題隨附的範例衍生自 Visual Studio 中的中樞應用程式專案範本,因此檢閱這些主題也很有助益。

步驟圖示

使用單頁瀏覽

深入說明 PageControl 物件如何支援單頁瀏覽。新增頁面控制項說明實作這類控制項的各種方法。

在範例中尋找:PageControl 定義於檔案 \js\navigator.js 中,並用於 \pages\home\home.js 和 \pages\page2\page2.js 中。

 

影像資源

在應用程式資訊清單的 [應用程式 UI] 索引標籤上,為您的應用程式指定影像資源 (像是啟動顯示畫面和磚影像之類的視覺資產)。若要這麼做,請從 [方案總管] 開啟 package.appxmanifest。 請參閱使用資訊清單設計工具

附註  隨附應用程式包含符合 Windows 市集需求的預留位置影像。基於示範目的,範本隨附了額外的影像,這些影像支援含有各種對比設定和法文 (fr-FR) 當地語系化的協助工具。大多數影像都提供多種解析度。

步驟圖示

針對不同的螢幕解析度進行影像最佳化

為您的應用程式建立影像資源、將這些影像資源新增到您的專案中,然後在應用程式資訊清單中識別它們。

步驟圖示

選擇應用程式影像

指定可能提供最佳體驗的影像。納入適用於不同螢幕解析度的縮放版本。

應用程式必須要有一組基本的影像,才能通過市集認證。

  • 市集標誌

    與您的應用程式清單一起顯示在搜尋結果中,以及與應用程式的描述一起顯示在清單頁面中。

  • 標誌

    顯示在 [開始] 畫面上應用程式的正方形磚中。請參閱建立磚與徽章應用程式磚與徽章範例

  • 小標誌

    小標誌會與您應用程式的顯示名稱一起顯示在 [開始] 畫面上傳回的搜尋結果中。它也會顯示在可搜尋之應用程式的清單中,以及在拉遠 [開始] 頁面時顯示。

  • 啟動顯示畫面

    在應用程式啟動時顯示,並在應用程式一準備好進行互動時便關閉。 啟動顯示畫面是由影像和背景色彩所構成,兩者皆可供自訂。 請參閱新增啟動顯示畫面啟動顯示畫面範例

步驟圖示

快速入門:使用檔案或影像資源

請依照這些指示來命名和組織資料夾中的檔案資源。

 

應用程式列

隨附應用程式在標準應用程式列中實作了一個單一命令。

請記住::  請嘗試建置一個不需要瀏覽列的應用程式,讓內容結構本身以直覺的方式帶領使用者遍覽應用程式。若無法這樣做,請在中樞頁面上使用瀏覽列取代區段標頭,並提供全域瀏覽控制項。它應出現在應用程式的每個頁面和所有層級。

步驟圖示

新增應用程式列

視需要為使用者提供瀏覽、命令及工具。應用程式列會顯示與使用者內容 (通常是目前的頁面或目前的選取範圍) 相關的命令。請視需要自訂。請參閱 HTML AppBar 控制項範例

 

應用程式資料漫遊

步驟圖示

存取應用程式資料

管理應用程式資料,包括執行階段狀態、使用者喜好設定以及其他設定。在應用程式執行時,會建立、讀取、更新以及刪除這項資料。

步驟圖示

快速入門:應用程式資料漫遊

讓您應用程式的資料和狀態在多個裝置之間保持同步,並可減少使用者在他們其他裝置上的設定工作和重複工作。Windows 會在資料更新時將資料複寫到雲端,然後將資料同步到安裝應用程式的其他裝置上。

 

設定

視您應用程式資訊清單中的功能和宣告而定,可能會要求您的應用程式透過設定常用鍵提供隱私權聲明。

隨附應用程式中設定了私人網路 (用戶端和伺服器) 功能,這會要求提供隱私權聲明。請參閱認證需求 4.1

隨附應用程式同時包含了可從設定常用鍵存取的隱私權聲明和說明內容。您應用程式的描述頁面上也必須顯示隱私權聲明。

步驟圖示

新增應用程式設定

提供對使用者目前內容之所有相關設定的存取途徑。請視需要自訂。請參閱應用程式設定範例

步驟圖示

您的應用程式描述

應用程式的描述越詳細越好,這樣才能清楚表達您應用程式的功能。

 

全球化

請與全球化保持一致,並確定螢幕擷取畫面提供的是您已將應用程式當地語系化的示範。請記住,語言不一定與市場相應。請參閱全球化應用程式以取得更多協助。

步驟圖示

應用程式資源與當地語系化

設計 Windows 市集應用程式,讓應用程式資源能夠獨立維護和當地語系化,並且還能夠針對不同的縮放係數、協助工具選項及其他使用者和電腦內容來加以自訂。請參閱應用程式資源和當地語系化範例

步驟圖示

將套件資訊清單當地語系化

將應用程式資料清單中所述的應用程式顯示名稱、描述以及其他識別功能當地語系化。

步驟圖示

全球化應用程式

讓您的軟體因應其他語言、市場、文化特性以及區域的需求。

 

協助工具

除非您已經特別針對協助工具案例設計並測試您的應用程式,否則請勿將該應用程式宣告為無障礙應用程式。

步驟圖示

測試應用程式協助工具

探索 Windows 8 適用之 Windows 軟體開發套件 (SDK) 隨附的協助工具測試工具,這些工具可協助您檢查應用程式的協助工具。

步驟圖示

在 Windows 市集中將您的應用程式宣告為無障礙應用程式

如果您的應用程式已通過協助工具測試,請在 [銷售詳細資料] 頁面上選取 [協助工具] 核取方塊來做為表示。

 

總結

市集需求圖示

使用 Windows 應用程式認證套件認證您的應用程式

執行 Windows 應用程式認證套件來協助確保應用程式符合 Windows 市集需求。請在每次為應用程式新增主要功能之後執行這個動作。

停止圖示

大功告成! 您的應用程式應該相當簡潔、井然有序又容易瀏覽。

請坐下休息並享受您的成果。

 

想要更深入了解嗎?

規劃 Windows 市集應用程式

深入了解您想要提供給使用者的體驗。

協助工具設計

深入了解使用者在各方面的能力、障礙以及喜好。

不同尺寸規格的設計

深入了解如何處理不同的裝置、輸入法以及螢幕方向。

UX 指導方針的索引

瀏覽完整的使用者經驗指導方針清單。

範例

 

 

顯示:
© 2014 Microsoft