瀏覽模式 (Windows 市集應用程式)

組織 Windows 市集應用程式的內容,讓使用者可用直觀的方式輕鬆地瀏覽。使用這種適當的瀏覽模式,螢幕上就不需要那麼多固定不動的控制功能。這樣能讓使用者聚焦在目前的內容。

Windows 市集應用程式中的瀏覽採用兩種模式:階層式和單層。應用程式可以單使用一種或結合這兩種模式。

階層式模式

這種模式讓 Windows 市集應用程式更快速且流暢。它最適合具有大型內容集合或許多相異內容區段的應用程式,讓使用者進行瀏覽。 大部分的 Windows 市集應用程式會使用階層式瀏覽系統。

應用程式功能,從開始到完成系列深入探索此功能。: 階層式瀏覽,從開始到完成 (HTMLXAML)

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

中樞頁面是使用者進入應用程式的入口。在這裡會以豐富的水平移動瀏覽檢視顯示內容,使用者可以藉此立即了解新的功能和可使用的功能。

中樞由不同內容類別組成,每個類別均對應至應用程式的區段頁面。

 

區段頁面是應用程式的第二層。在這裡可使用任何形式顯示內容,只要能夠呈現出最佳的狀況和區段所包含的內容。

區段頁面由個別項目所組成,而每個項目均有自己的詳細資料頁面。 區段頁面也可以使用群組功能和全景樣式配置。

 

詳細資料頁面是應用程式的第三層。這裡會顯示個別項目的詳細資料,而使用的格式會依特定的內容類型而有極大的差異。

詳細資料頁面由項目詳細資料或功能所組成。 詳細資料頁面可以包含許多資訊,也可以包含單一物件 (例如圖片或視訊)。

 

單層模式

許多 Windows 市集應用程式會使用單層瀏覽模式。像是遊戲、瀏覽器或文件建立應用程式等應用程式會使用這個模式,讓使用者可以在同一個階層的頁面、索引標籤或模式間移動。與階層式模式不同,這個模式通常沒有持續出現的上一頁按鈕或瀏覽堆疊,因此若要在頁面之間移動,通常需要透過內容中的直接連結 (如下面的第一個範例) 或透過瀏覽列 (如下面的第二個範例) 才能完成。

應用程式功能,從開始到完成系列深入探索此功能。: 單層瀏覽,從開始到完成 (HTMLXAML)

單層瀏覽範例

 

這個模式最適合需要在少數頁面或索引標籤之間快速切換的核心案例,例如,在像是 Internet Explorer 之類的網頁瀏覽器應用程式、電子書和遊戲中。

畫布上瀏覽

 

標題、上一頁按鈕、區段標題和磚屬於瀏覽元素

 

  1. 標題和上一頁按鈕

    標題會出現目前頁面的標籤,這在尋找路徑時非常有用。 [上一頁] 按鈕可讓您快速回到原先的位置。

  2. 區段或類別標籤

    這些標籤可以將使用者移到不同的內容區段或類別。

  3. 其他目標

    您可以使用磚、箭號、按鈕、搜尋結果或其他自訂目標做為瀏覽元素。在某些遊戲中,您可以找到具備有趣形狀的瀏覽元素範例。

 

Bing 新聞應用程式會顯示標頭、區段標籤,以及連到更多詳細資料的連結

 

頂端應用程式列

使用者從螢幕的頂端或底部邊緣撥動即可顯示應用程式列。頂端應用程式列也稱為瀏覽列。您可以將瀏覽元素放置在頂端應用程式列,這樣您的應用程式可以使用更多的螢幕區域,讓內容成為目光的焦點。或者,如果使用者在您的應用程式經常使用瀏覽元素,您可以將它們放置在畫布上,前提是放在畫布上不會對應用程式使用體驗產生負面影響。您決定要將瀏覽元素放在頂端列中或畫布上。

 

存取瀏覽列

 

區段或類別標籤通常位於瀏覽列上,如 Hulu Plus。

 

Hulu Plus 應用程式瀏覽列

 

許多應用程式會使用頂端應用程式列來提供捷徑。例如,在 ESPN 應用程式中,使用者按一下頂端應用程式列上區段標籤上方的計分板,就可以瀏覽到 GameCast 頁面。

 

ESPN 應用程式瀏覽列

 

頂端應用程式列也可讓使用者預覽目標頁面上的內容。在下列購物應用程式範例中,您可以先在應用程式列中預覽產品影像,然後進一步查看產品詳細資料頁面。

 

Vevo 應用程式瀏覽列

 

我們建議您以具有創意的方式使用應用程式列,進一步提升設計的功用。在 Fresh Paint 中,頂端應用程式列遠遠超越做為畫圖工具箱的專用瀏覽功能兩倍之多。

 

Fresh Paint 瀏覽列

 

語意式縮放

語意式縮放可讓您快速並順暢地在檢視中查看內容和移動,尤其是當檢視是很長的移動瀏覽清單時。

 

放大檢視,然後縮小檢視的範例應用程式

 

例如,在 Great British Chefs 中,中樞頁面含有一個焦點區段,後面緊接著五個具備豐富視覺效果且可平行移動瀏覽的區段。此應用程式會使用語意式縮放,更輕鬆地跳至這五個區段中的每一個區段。

 

Great British Chefs 中的語意式縮放

如需詳細資訊,請參閱語意式縮放的指導方針

適用於設計者

命令模式

配置

返回按鈕

Windows 市集應用程式 Hub 控制項的指導方針

Windows Phone 市集應用程式 Hub 控制項的指導方針

應用程式列的指導方針

設計無障礙應用程式列

適用於開發人員 (HTML)

WinJS.UI.Hub object

WinJS.UI.AppBar object

WinJS.UI.NavBar object

WinJS.UI.BackButton object

HTML Hub 控制項範例

HTML AppBar 控制項範例

HTML NavBar 控制項範例

瀏覽和瀏覽歷程記錄範例

您的第一個應用程式 - 第三部分:PageControl 物件與瀏覽

新增應用程式列

新增瀏覽列

在頁面之間瀏覽 (HTML)

適用於開發人員 (XAML)

Windows.UI.Xaml.Controls Hub class

Windows.UI.Xaml.Controls AppBar class

Windows.UI.Xaml.Controls CommandBar class

XAML Hub 控制項範例

XAML AppBar 控制項範例

XAML 瀏覽範例

您的第一個應用程式 - 第三部分:瀏覽、配置與檢視

您的第一個應用程式 - 在 C++ Windows 市集應用程式新增瀏覽和檢視 (教學課程四之三)

新增應用程式列 (XAML)

在頁面之間瀏覽 (XAML)

適用於開發人員 (使用 DirectX 搭配 C++ 的 Windows 執行階段應用程式)

建立應用程式列或設定