Windows 應用程式的導覽設計基本知識

如果您將應用程式想成一組頁面的集合，則導覽描述的是頁面之間和頁面內的移動動作。 這是使用者體驗的起點，也是使用者尋找感興趣的功能與內容的方式。 導覽非常重要，但想要做好並不容易。

您需要在眾多導覽方式中做出選擇。 例如，您可以：

要求使用者依序瀏覽一系列頁面。

提供可讓使用者直接跳到任何頁面的功能表。

將所有內容放在同一個頁面上，並提供查看內容的篩選機制。

雖然不存在適用於所有應用程式的單一導覽設計，但有一些原則和指導方針可幫助您決定適合您應用程式的設計。

良好導覽的原則

讓我們從良好導覽設計的基本原則開始談起：

• 一致性：符合使用者的期望。
• 簡潔：不做多餘的事。
• 明確：提供清楚的路徑和選項。

一致性

導覽方式應與使用者的期望一致。 選用使用者熟悉的標準控制項，並依循圖示、位置和樣式的標準慣例，將使導覽對使用者而言更容易預測且符合直覺。

使用者預期會在標準位置尋找特定 UI 元素。

簡潔

導覽項目越少，使用者就越容易做出決定。 為重要目標位置設定捷徑，並隱藏較不重要的項目，可幫助使用者更快抵達想要的位置。

在熟悉的導覽功能表中呈現導覽項目。

不要提供過多導覽選項，以免使用者不知所措。

明確

清楚的路徑可幫助使用者以合理的方式進行導覽。 提供一目了然的選項，並釐清頁面之間的關係，可防止使用者迷失方向。

清楚標示出目標位置，讓使用者知道自己身在何處。

一般建議

現在要來探討我們的設計原則 - 一致性、簡潔和明確 - 並根據它們提出一些一般性建議。

• 考量您的使用者。 找出使用者可能在您的應用程式中依循的一般途徑，並思考使用者來到每個頁面的原因，以及接著想前往哪裡。
• 避免深層的導覽階層。 導覽層級超過兩層時，請提供階層連結列，向使用者顯示他們所處的位置，並讓他們快速返回。否則，使用者就有可能陷入深層結構，難以自拔。
• 避免「來回跳動」。當存在相關內容，但導覽至該內容需要使用者先往上一層、再往下一層時，就會發生來回跳動狀況。

使用適當的結構

現在您已熟悉一般導覽原則，那麼接下來要如何建構您的應用程式？ 有兩種一般結構︰單層式和階層式。

單層式/側面

在單層式/側面結構中，頁面是並排存在。 您可以按任何順序，從一個頁面前往另一個頁面。

我們建議使用單層式結構的狀況是︰

• 頁面可按任何順序檢視。
• 頁面之間有明顯的區別，而且沒有明顯的父系/子系關係。
• 群組中的頁面數超過 8 個。
  (頁面數量較多時，使用者可能難以理解各頁面的獨特性，或理解它們目前在群組中的位置。如果您認為這對您的應用程式來說不構成問題，則可以讓這些頁面繼續維持對等。否則，請考慮使用階層式結構，將頁面分成兩組，或分成多個較小的群組。)

階層式

在階層式結構中，頁面是組織成類似樹狀的結構。 每個子頁面都有一個父頁面，但父頁面可以有一或多個子頁面。 要到達下層頁面，需要先經過上層頁面。

階層結構對於組織跨多個頁面的複雜內容來說很實用。 缺點是會有一些瀏覽負荷︰結構越深層，就需要多按幾下才能在頁面間瀏覽。

我們建議使用階層式結構的狀況是︰

• 頁面應以特定順序周遊。
• 頁面之間有清楚的父子關係。
• 群組中的頁面數超過 7 頁。

結合結構

您不必非得選擇一種結構；許多設計精良的應用程式皆同時使用兩者。 應用程式可在最上層頁面使用單層式結構，可以任何順序檢視頁面，而具有較複雜關係的頁面則採用階層式結構。

如果您的導覽結構有多個層級，建議對等導覽元素應只連接至目前樹狀子目錄中的對等項。 請思考相鄰的圖例，其中顯示具有兩個層級的瀏覽結構：

• 在層級 1，對等瀏覽元素應提供對頁面 A、B 和 C 的存取功能。
• 在層級 2，A2 頁面的對等瀏覽元素應只連結至其他 A2 頁面。 這些元素不應連結至 C 樹狀子目錄中的層級 2 頁面。

使用適當的控制項

一旦您決定頁面結構之後，您必須決定使用者瀏覽頁面的方式。 XAML 提供各種不同的瀏覽控制項，有助於確保您的應用程式提供一致、可靠的瀏覽體驗。

框架

有幾個例外，即任何有多個頁面的應用程式都會使用框架。 一般來說，應用程式會有主要頁面，包含框架和主要瀏覽元素，例如瀏覽檢視控制項。 當使用者選取頁面時，框架會載入並且顯示。

頂端瀏覽

顯示相同層級中水平的頁面連結清單。 NavigationView 控制項會實作頂端瀏覽模式。

在以下情況使用上方瀏覽：

• 您想要在螢幕上顯示所有的瀏覽選項。
• 您希望您的應用程式內容有更多空間。
• 圖示無法清楚地描述您的瀏覽類別。

索引標籤

顯示一組水平的索引標籤及其各自的內容。 TabView 控制項可用來既顯示數個頁面 (或文件)，同時又讓使用者能夠重新排列、開啟或關閉索引標籤。

在以下情況使用索引標籤：

• 您想要讓使用者能夠動態開啟、關閉或重新排列索引標籤。
• 您預期可能會有一次開啟大量索引標籤的情形。
• 您希望使用者能夠輕鬆地在使用索引標籤的應用程式中，於視窗之間移動索引標籤，情形類似 Microsoft Edge 等網頁瀏覽器。

軌跡

顯示一份水平清單，列出各個較高層級的頁面連結。 BreadcrumbBar 控制項會實作頂端導覽模式。

階層連結的使用時機如下：

• 您想要顯示目前位置的路徑
• 您有許多導覽層級
• 您希望使用者能夠返回先前的任一層級

左方瀏覽

顯示連結到最上層頁面的垂直清單。 的使用時機：

• 頁面位於最上層。
• 有許多瀏覽項目 (超過 5 個)
• 您預期使用者不會在頁面之間頻繁切換。

清單/詳細資料

顯示一份項目清單。 選取在詳細區段中顯示其相對應頁面的項目。 的使用時機：

• 您預期使用者會在子項目之間頻繁切換。
• 您想讓使用者能夠對單一項目或項目群組執行進階操作 (例如刪除或排序)，也想讓使用者查看或更新每個項目的詳細資料。

清單/詳細資料適合電子郵件收件匣、連絡人清單及資料項目。

超連結

內嵌瀏覽元素可顯示在頁面的內容中。 不同於其他瀏覽元素在頁面間皆須保持一致，內嵌於內容的瀏覽元素會隨頁面不同而改變。

後續：新增導覽程式碼到您的應用程式

下一篇文章「實作基本導覽」將會展示使用 Frame 控制項在應用程式中的兩個頁面之間啟用基本導覽所需的程式碼。