共用方式為


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

瀏覽基本知識標頭

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

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

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

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

瀏覽範例 3 將所有內容放在同一個頁面上,並提供查看內容的篩選機制。

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

良好導覽的原則

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

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

一致性

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

頁面元件影像

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

簡潔

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

綠色長條的第一個螢幕擷取畫面,內有綠色核取記號和 Do 一字。

良好的 navview

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

禁止事項範例

不良的 navview

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

明確

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

應用程式模擬的螢幕擷取畫面,其中顯示使用者的明確瀏覽路徑。

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

一般建議

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

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

使用適當的結構

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

單層式結構排列的頁面

單層式/側面

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

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

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

階層排列的頁面

階層式

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

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

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

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

具有混合式結構的應用程式

結合結構

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

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

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

使用適當的控制項

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

框架影像

框架

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

索引標籤和樞紐影像

頂端瀏覽

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

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

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

索引標籤和樞紐影像

索引標籤

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

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

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

索引標籤和樞紐影像

軌跡

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

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

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

navview 影像

左方瀏覽

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

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

列出詳細數據影像

清單/詳細資料

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

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

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

超連結和按鈕影像

超連結

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

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

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